From 6d5af2e6a582287ac6d332e2aeaf88a04a6d71bb Mon Sep 17 00:00:00 2001 From: ashilkn Date: Fri, 26 Jul 2024 19:43:25 +0530 Subject: [PATCH] [mob][photos] Update colors and text style --- mobile/lib/theme/colors.dart | 6 +++ .../ui/payment/stripe_subscription_page.dart | 6 +-- .../ui/payment/subscription_plan_widget.dart | 42 +++++-------------- 3 files changed, 20 insertions(+), 34 deletions(-) diff --git a/mobile/lib/theme/colors.dart b/mobile/lib/theme/colors.dart index 6159d1f141..27d868c1c3 100644 --- a/mobile/lib/theme/colors.dart +++ b/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); diff --git a/mobile/lib/ui/payment/stripe_subscription_page.dart b/mobile/lib/ui/payment/stripe_subscription_page.dart index 18d24729e1..97530a04b6 100644 --- a/mobile/lib/ui/payment/stripe_subscription_page.dart +++ b/mobile/lib/ui/payment/stripe_subscription_page.dart @@ -583,7 +583,7 @@ class SubscriptionToggle extends StatefulWidget { } class _SubscriptionToggleState extends State { - bool _isYearly = false; + bool _isYearly = true; @override Widget build(BuildContext context) { const borderPadding = 2.5; @@ -599,7 +599,7 @@ class _SubscriptionToggleState extends State { 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 { width: widthOfButton, height: 40, decoration: BoxDecoration( - color: const Color.fromRGBO(255, 255, 255, 1), + color: getEnteColorScheme(context).backgroundBase, borderRadius: BorderRadius.circular(50), ), child: AnimatedSwitcher( diff --git a/mobile/lib/ui/payment/subscription_plan_widget.dart b/mobile/lib/ui/payment/subscription_plan_widget.dart index 119de4d3b5..75860347cf 100644 --- a/mobile/lib/ui/payment/subscription_plan_widget.dart +++ b/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( 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( 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, ), ], );