From 0629789a22767bac6a5962d9ad84f0ff645d643d Mon Sep 17 00:00:00 2001
From: Neeraj Gupta <254676+ua741@users.noreply.github.com>
Date: Fri, 7 Apr 2023 15:11:37 +0530
Subject: [PATCH] [design] Update components

---
 lib/theme/colors.dart                 | 26 +++++++++-
 lib/ui/components/divider_widget.dart | 69 +++++++++++++++++++++++++++
 2 files changed, 94 insertions(+), 1 deletion(-)
 create mode 100644 lib/ui/components/divider_widget.dart

diff --git a/lib/theme/colors.dart b/lib/theme/colors.dart
index 0d24de2b7..ea5d061e0 100644
--- a/lib/theme/colors.dart
+++ b/lib/theme/colors.dart
@@ -27,6 +27,10 @@ class EnteColorScheme {
   final Color strokeBase;
   final Color strokeMuted;
   final Color strokeFaint;
+  final Color strokeFainter;
+  final Color blurStrokeBase;
+  final Color blurStrokeFaint;
+  final Color blurStrokePressed;
 
   // Fixed Colors
   final Color primaryGreen;
@@ -55,7 +59,11 @@ class EnteColorScheme {
     this.fillFaintPressed,
     this.strokeBase,
     this.strokeMuted,
-    this.strokeFaint, {
+    this.strokeFaint,
+    this.strokeFainter,
+    this.blurStrokeBase,
+    this.blurStrokeFaint,
+    this.blurStrokePressed, {
     this.primaryGreen = _primaryGreen,
     this.primary700 = _primary700,
     this.primary500 = _primary500,
@@ -84,6 +92,10 @@ const EnteColorScheme lightScheme = EnteColorScheme(
   strokeBaseLight,
   strokeMutedLight,
   strokeFaintLight,
+  strokeFainterLight,
+  blurStrokeBaseLight,
+  blurStrokeFaintLight,
+  blurStrokePressedLight,
 );
 
 const EnteColorScheme darkScheme = EnteColorScheme(
@@ -102,6 +114,10 @@ const EnteColorScheme darkScheme = EnteColorScheme(
   strokeBaseDark,
   strokeMutedDark,
   strokeFaintDark,
+  strokeFainterDark,
+  blurStrokeBaseDark,
+  blurStrokeFaintDark,
+  blurStrokePressedDark,
 );
 
 // Background Colors
@@ -144,10 +160,18 @@ const Color fillFaintPressedDark = Color.fromRGBO(255, 255, 255, 0.06);
 const Color strokeBaseLight = Color.fromRGBO(0, 0, 0, 1);
 const Color strokeMutedLight = Color.fromRGBO(0, 0, 0, 0.24);
 const Color strokeFaintLight = Color.fromRGBO(0, 0, 0, 0.04);
+const Color strokeFainterLight = Color.fromRGBO(0, 0, 0, 0.06);
+const Color blurStrokeBaseLight = Color.fromRGBO(0, 0, 0, 0.65);
+const Color blurStrokeFaintLight = Color.fromRGBO(0, 0, 0, 0.08);
+const Color blurStrokePressedLight = Color.fromRGBO(0, 0, 0, 0.50);
 
 const Color strokeBaseDark = Color.fromRGBO(255, 255, 255, 1);
 const Color strokeMutedDark = Color.fromRGBO(255, 255, 255, 0.24);
 const Color strokeFaintDark = Color.fromRGBO(255, 255, 255, 0.16);
+const Color strokeFainterDark = Color.fromRGBO(255, 255, 255, 0.08);
+const Color blurStrokeBaseDark = Color.fromRGBO(255, 255, 255, 0.90);
+const Color blurStrokeFaintDark = Color.fromRGBO(255, 255, 255, 0.06);
+const Color blurStrokePressedDark = Color.fromRGBO(255, 255, 255, 0.50);
 
 // Fixed Colors
 
diff --git a/lib/ui/components/divider_widget.dart b/lib/ui/components/divider_widget.dart
new file mode 100644
index 000000000..489d59145
--- /dev/null
+++ b/lib/ui/components/divider_widget.dart
@@ -0,0 +1,69 @@
+import 'package:ente_auth/theme/ente_theme.dart';
+import 'package:flutter/material.dart';
+
+enum DividerType {
+  solid,
+  menu,
+  menuNoIcon,
+  bottomBar,
+}
+
+class DividerWidget extends StatelessWidget {
+  final DividerType dividerType;
+  final Color bgColor;
+  final bool divColorHasBlur;
+  final EdgeInsets? padding;
+  const DividerWidget({
+    Key? key,
+    required this.dividerType,
+    this.bgColor = Colors.transparent,
+    this.divColorHasBlur = true,
+    this.padding,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final dividerColor = divColorHasBlur
+        ? getEnteColorScheme(context).blurStrokeFaint
+        : getEnteColorScheme(context).strokeFaint;
+
+    if (dividerType == DividerType.solid) {
+      return Container(
+        color: getEnteColorScheme(context).strokeFaint,
+        width: double.infinity,
+        height: 1,
+      );
+    }
+    if (dividerType == DividerType.bottomBar) {
+      return Container(
+        color: dividerColor,
+        width: double.infinity,
+        height: 1,
+      );
+    }
+
+    return Container(
+      color: bgColor,
+      padding: padding ?? EdgeInsets.zero,
+      child: Row(
+        children: [
+          SizedBox(
+            width: dividerType == DividerType.menu
+                ? 48
+                : dividerType == DividerType.menuNoIcon
+                    ? 16
+                    : 0,
+            height: 1,
+          ),
+          Expanded(
+            child: Container(
+              color: dividerColor,
+              height: 1,
+              width: double.infinity,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}