From af42c421419e76b9b1912d76f26fe1b18ea1dfe0 Mon Sep 17 00:00:00 2001
From: ashilkn <ashilkn99@gmail.com>
Date: Fri, 26 Jul 2024 12:49:07 +0530
Subject: [PATCH] [mob][photos] Make borders, bg color, stroke color and
 padding same as design on SubscriptionPlanWidget

---
 mobile/lib/theme/colors.dart                  | 16 ++++-
 .../ui/payment/subscription_plan_widget.dart  | 67 ++++++++++++-------
 2 files changed, 55 insertions(+), 28 deletions(-)

diff --git a/mobile/lib/theme/colors.dart b/mobile/lib/theme/colors.dart
index 694106e398..6159d1f141 100644
--- a/mobile/lib/theme/colors.dart
+++ b/mobile/lib/theme/colors.dart
@@ -35,6 +35,7 @@ class EnteColorScheme {
   final Color blurStrokeBase;
   final Color blurStrokeFaint;
   final Color blurStrokePressed;
+  final Color subscriptionPlanWidgetStoke;
 
   // Fixed Colors
   final Color primary700;
@@ -56,6 +57,7 @@ class EnteColorScheme {
   //other colors
   final Color tabIcon;
   final List<Color> avatarColors;
+  final Color subscriptionPlanWidgetColor;
 
   const EnteColorScheme(
     this.backgroundBase,
@@ -81,8 +83,10 @@ class EnteColorScheme {
     this.blurStrokeBase,
     this.blurStrokeFaint,
     this.blurStrokePressed,
+    this.subscriptionPlanWidgetStoke,
     this.tabIcon,
-    this.avatarColors, {
+    this.avatarColors,
+    this.subscriptionPlanWidgetColor, {
     this.primary700 = _primary700,
     this.primary500 = _primary500,
     this.primary400 = _primary400,
@@ -121,8 +125,10 @@ const EnteColorScheme lightScheme = EnteColorScheme(
   blurStrokeBaseLight,
   blurStrokeFaintLight,
   blurStrokePressedLight,
+  subscriptionPlanWidgetStokeLight,
   tabIconLight,
   avatarLight,
+  subscriptionPlanWidgetLight,
 );
 
 const EnteColorScheme darkScheme = EnteColorScheme(
@@ -149,8 +155,10 @@ const EnteColorScheme darkScheme = EnteColorScheme(
   blurStrokeBaseDark,
   blurStrokeFaintDark,
   blurStrokePressedDark,
+  subscriptionPlanWidgetDark,
   tabIconDark,
   avatarDark,
+  subscriptionPlanWidgetDark,
 );
 
 // Background Colors
@@ -214,10 +222,14 @@ 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);
 
+const Color subscriptionPlanWidgetStokeLight = Color.fromRGBO(229, 229, 229, 1);
+const Color subscriptionPlanWidgetStokeDark = Color.fromRGBO(44, 44, 44, 1);
+
 // Other colors
 const Color tabIconLight = Color.fromRGBO(0, 0, 0, 0.85);
-
 const Color tabIconDark = Color.fromRGBO(255, 255, 255, 0.80);
+const Color subscriptionPlanWidgetDark = Color.fromRGBO(255, 255, 255, 0.04);
+const Color subscriptionPlanWidgetLight = Color.fromRGBO(251, 251, 251, 1);
 
 // Fixed Colors
 
diff --git a/mobile/lib/ui/payment/subscription_plan_widget.dart b/mobile/lib/ui/payment/subscription_plan_widget.dart
index a4e870d710..119de4d3b5 100644
--- a/mobile/lib/ui/payment/subscription_plan_widget.dart
+++ b/mobile/lib/ui/payment/subscription_plan_widget.dart
@@ -22,34 +22,49 @@ class SubscriptionPlanWidget extends StatelessWidget {
     final numAndUnit = convertBytesToNumberAndUnit(storage);
     final String storageValue = numAndUnit.$1.toString();
     final String storageUnit = numAndUnit.$2;
-    return Row(
-      mainAxisAlignment: MainAxisAlignment.spaceBetween,
-      children: [
-        RichText(
-          text: TextSpan(
-            children: [
-              TextSpan(
-                text: storageValue,
-                style: TextStyle(
-                  fontSize: 40,
-                  fontWeight: FontWeight.w600,
-                  color: getEnteColorScheme(context).textBase,
-                ),
-              ),
-              WidgetSpan(
-                child: Transform.translate(
-                  offset: const Offset(2, -16),
-                  child: Text(
-                    storageUnit,
-                    style: getEnteTextTheme(context).h3Muted,
-                  ),
-                ),
-              ),
-            ],
+    final colorScheme = getEnteColorScheme(context);
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
+      child: Container(
+        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+        decoration: BoxDecoration(
+          color: colorScheme.subscriptionPlanWidgetColor,
+          borderRadius: BorderRadius.circular(8),
+          border: Border.all(
+            color: colorScheme.subscriptionPlanWidgetStoke,
+            width: 1,
           ),
         ),
-        _Price(price: price, period: period),
-      ],
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            RichText(
+              text: TextSpan(
+                children: [
+                  TextSpan(
+                    text: storageValue,
+                    style: TextStyle(
+                      fontSize: 40,
+                      fontWeight: FontWeight.w600,
+                      color: getEnteColorScheme(context).textBase,
+                    ),
+                  ),
+                  WidgetSpan(
+                    child: Transform.translate(
+                      offset: const Offset(2, -16),
+                      child: Text(
+                        storageUnit,
+                        style: getEnteTextTheme(context).h3Muted,
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+            _Price(price: price, period: period),
+          ],
+        ),
+      ),
     );
   }
 }