[mob][photos] Update colors and text style

mobile/lib/theme/colors.dart

@@ -26,6 +26,7 @@ class EnteColorScheme {
   final Color fillMuted;
   final Color fillFaint;
   final Color fillFaintPressed;
+  final Color fillBaseGrey;
 
   // Stroke Colors
   final Color strokeBase;
@@ -76,6 +77,7 @@ class EnteColorScheme {
     this.fillMuted,
     this.fillFaint,
     this.fillFaintPressed,
+    this.fillBaseGrey,
     this.strokeBase,
     this.strokeMuted,
     this.strokeFaint,
@@ -118,6 +120,7 @@ const EnteColorScheme lightScheme = EnteColorScheme(
   fillMutedLight,
   fillFaintLight,
   fillFaintPressedLight,
+  fillBaseGreyLight,
   strokeBaseLight,
   strokeMutedLight,
   strokeFaintLight,
@@ -148,6 +151,7 @@ const EnteColorScheme darkScheme = EnteColorScheme(
   fillMutedDark,
   fillFaintDark,
   fillFaintPressedDark,
+  fillBaseGreyDark,
   strokeBaseDark,
   strokeMutedDark,
   strokeFaintDark,
@@ -197,6 +201,7 @@ const Color fillStrongLight = Color.fromRGBO(0, 0, 0, 0.24);
 const Color fillMutedLight = Color.fromRGBO(0, 0, 0, 0.12);
 const Color fillFaintLight = Color.fromRGBO(0, 0, 0, 0.04);
 const Color fillFaintPressedLight = Color.fromRGBO(0, 0, 0, 0.08);
+const Color fillBaseGreyLight = Color.fromRGBO(242, 242, 242, 1);
 
 const Color fillBaseDark = Color.fromRGBO(255, 255, 255, 1);
 const Color fillBasePressedDark = Color.fromRGBO(255, 255, 255, 0.9);
@@ -204,6 +209,7 @@ const Color fillStrongDark = Color.fromRGBO(255, 255, 255, 0.32);
 const Color fillMutedDark = Color.fromRGBO(255, 255, 255, 0.16);
 const Color fillFaintDark = Color.fromRGBO(255, 255, 255, 0.12);
 const Color fillFaintPressedDark = Color.fromRGBO(255, 255, 255, 0.06);
+const Color fillBaseGreyDark = Color.fromRGBO(66, 66, 66, 1);
 
 // Stroke Colors
 const Color strokeBaseLight = Color.fromRGBO(0, 0, 0, 1);

mobile/lib/ui/payment/stripe_subscription_page.dart

@@ -583,7 +583,7 @@ class SubscriptionToggle extends StatefulWidget {
 }
 
 class _SubscriptionToggleState extends State<SubscriptionToggle> {
-  bool _isYearly = false;
+  bool _isYearly = true;
   @override
   Widget build(BuildContext context) {
     const borderPadding = 2.5;
@@ -599,7 +599,7 @@ class _SubscriptionToggleState extends State<SubscriptionToggle> {
               2;
           return Container(
             decoration: BoxDecoration(
-              color: const Color.fromRGBO(242, 242, 242, 1),
+              color: getEnteColorScheme(context).fillBaseGrey,
               borderRadius: BorderRadius.circular(50),
             ),
             padding: const EdgeInsets.symmetric(
@@ -658,7 +658,7 @@ class _SubscriptionToggleState extends State<SubscriptionToggle> {
                     width: widthOfButton,
                     height: 40,
                     decoration: BoxDecoration(
-                      color: const Color.fromRGBO(255, 255, 255, 1),
+                      color: getEnteColorScheme(context).backgroundBase,
                       borderRadius: BorderRadius.circular(50),
                     ),
                     child: AnimatedSwitcher(

mobile/lib/ui/payment/subscription_plan_widget.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import "package:photos/generated/l10n.dart";
 import "package:photos/theme/ente_theme.dart";
 import 'package:photos/utils/data_util.dart';
 
@@ -77,8 +76,12 @@ class _Price extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final colorScheme = getEnteColorScheme(context);
+    final textTheme = getEnteTextTheme(context);
     if (price.isEmpty) {
-      return Text(S.of(context).freeTrial);
+      return Text(
+        "Free",
+        style: textTheme.largeBold,
+      );
     }
     if (period == "month") {
       return RichText(
@@ -86,20 +89,9 @@ class _Price extends StatelessWidget {
           children: <TextSpan>[
             TextSpan(
               text: price,
-              style: TextStyle(
-                fontSize: 20,
-                color: colorScheme.textBase,
-                fontWeight: FontWeight.w600,
-              ),
-            ),
-            TextSpan(
-              text: ' / ' 'month',
-              style: TextStyle(
-                fontSize: 16,
-                color: colorScheme.textBase,
-                fontWeight: FontWeight.w600,
-              ),
+              style: textTheme.largeBold,
             ),
+            TextSpan(text: ' / ' 'month', style: textTheme.largeBold),
           ],
         ),
       );
@@ -117,30 +109,18 @@ class _Price extends StatelessWidget {
               children: <TextSpan>[
                 TextSpan(
                   text: currencySymbol + pricePerMonthString,
-                  style: TextStyle(
-                    fontSize: 20,
-                    color: colorScheme.textBase,
-                    fontWeight: FontWeight.w600,
-                  ),
+                  style: textTheme.largeBold,
                 ),
                 TextSpan(
                   text: ' / ' 'month',
-                  style: TextStyle(
-                    fontSize: 16,
-                    color: colorScheme.textBase,
-                    fontWeight: FontWeight.w600,
-                  ),
+                  style: textTheme.largeBold,
                 ),
               ],
             ),
           ),
           Text(
-            price + " / " + "year",
-            style: TextStyle(
-              fontSize: 12,
-              color: colorScheme.textFaint,
-              fontWeight: FontWeight.w600,
-            ),
+            price + " / " + "yr",
+            style: textTheme.bodyFaint,
           ),
         ],
       );