[mob][photos] Make borders, bg color, stroke color and padding same as design on SubscriptionPlanWidget

This commit is contained in:
ashilkn 2024-07-26 12:49:07 +05:30
parent 3edc323272
commit af42c42141
2 changed files with 55 additions and 28 deletions

View File

@ -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

View File

@ -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),
],
),
),
);
}
}