From 9d2bd1b37a5308564322c0125b3a52939cd226b1 Mon Sep 17 00:00:00 2001 From: Kima Date: Wed, 13 Mar 2024 22:59:26 +0100 Subject: [PATCH] new refilcplus page tier cards --- refilc/assets/images/plus_tier_cap.png | Bin 1141 -> 1710 bytes refilc/assets/images/plus_tier_ink.png | Bin 1305 -> 1546 bytes .../lib/premium/components/plan_card.dart | 354 +++++++++--------- refilc_mobile_ui/lib/premium/plus_screen.dart | 43 ++- refilc_plus | 2 +- 5 files changed, 222 insertions(+), 177 deletions(-) diff --git a/refilc/assets/images/plus_tier_cap.png b/refilc/assets/images/plus_tier_cap.png index ad117d367eb2e4931faf0ef11ee941d3627957cd..c476908fddda05f674946663557cf3ce156552cf 100644 GIT binary patch delta 1679 zcmV;A25|ZH2(AqwiBL{Q4GJ0x0000DNk~Le0000j0000j2nGNE06H4tnvo$ie+ENI zL_t(|0kv68P9sMYepNQvBvBkG`l?lyRygs{8o=c}*YzZI=ej$5W4Mf5r%YLTLvA{r}0 zBdzJ8H&kO(5pET63k_=`aM0E6+tznZ>=Dy)Cdw2nt3`~50_FRjxsw%P}xZEa{5bhbzUKD$+W za{Mf!8+>etjmP-wDouaDNGG%^&<8Ek(h>atFb!OH9YAaNU-ON{^AXtHfAGBv0k=R* zB0hwo345Ce2RR$6AuR(s-o((AWHKbo@H<8O{RNEino~n>0IE$T1mgy8EB-Z=Z*lnA zznEDn0tyi=H9y z>rLEH3yiYr)$q9!Yfsog(m1m0QPPBl=e0e{#M|+%x3do7de5 z!1dUWv8i;AI6#Bd@8?akOD_-y^ij6Umc=)IQA8aE|yK(C3A zTgL6#!Ymu%huM(vuOo7i%;3Bt$(mJMGG*@Js0T+tT0#t>r+CzXpWTPcy1*?ut`UdW z4z44}`gN!rG8ckge^#Uoa7fNRpTqcIU}Nj`QiRyz>a=iqk$T}FtZQb~!6D|~mC2{B z^LHYxJ^kKP>8hp`>d8f?0nj0qrx7{NIcq~Tvmw1fyhf@* z3*2lM8Df?afTScrcLtmGqeY*-GlNR5z$YJJnye1jC_O zh4|oHJEjqJF8@`DOF&mo^#cDXg}u#lSmr_l9_3OdR1A=d3VW;(UWN;Ws!oc^xugN1 zRQV*0CaB9P%c(kCQNF;P%rx!&HdNPg58$gCch9lLf8Yl(DBhTsl>(LzTV~s*4w*;s z0giD9^#k({ak+&6@Mza(Sx@4ZJN3IgfsIz>JxwwPhNCO=H+v!*G&gM4BI=OeJM=lB z@~y`%5I~L{6-sN;B)H&e#A0=*%;2zTu58w;p@b^HGCyBS)FI~`uyNZ5nD@iJH!_OG z1XL27fAhjNc3lx&%0-xUsL)Op5Ds6N8+JX;n1~v>N>7qy|M_S%4Map%A*^-jX$bKl zJK4?8!}!Ti4frZ$<1p?l0ZbN+__S%VGh!zBKqr5y2kuFi0L+#BRv?5opubl+z^Mzg zRaN;G=Y|UWw{tzr_*+a4`Ea-~HkdB?#bL?=f4J_sCHB!=MC9gpyQWZu!FvF-S(izR z6cfnWcn!&vlw7iw&N&Or3ATFUD-;F_>4e5}!%&Inm8!$WqCAFk4-9njw`Hkqvh2 zo5yjYOz}|)G|SPZVZYs>PbaxPbVy2rWo9V_99N8p$z>7;hZ;A{W!TS82`5fISqd}@ zM@yXqnTE9~XNCMz+=b6Te}utRlR4W;BvhPDF7xxpvp{FUeTZ+~(^vm|Mo-I>XV0By Z%SR1#c*PBsMjHSC002ovPDHLkV1hKzB3%Fg delta 1106 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 QNdN!<07*qoM6N<$f~pkPOaK4? delta 1271 zcmVbeqBfFC!I|2GLe zBH%HQTy;Sf13+;MfL;GhOcsWaf9<_?eghAUqcM{^4U@A$WU;dg`R??71s)3QRv|JX z*Ms#j14JTvaLpH+C#lE*Sq@?d6L9ce=#$keb)o%oD$h&u}B_}1%K?xuUnFnLX<<=^f-8rCU@qLbM_j)e8|9hsB!3&b0;uelBvsPrK{M%d* z(_hPOuXI=tB8RGTwp>BNfBPvJyEPXv-i(-QvLqkk(0>DkhbUje|Idd|OR&5$D-=#4 zJJ{N6#YsQ)NpePpgcz7N5!kulN-`%$aa_KnTp7B_NFJhw<6&xd@*&ZsF+>(%k$i#L z&M}|wpQt+__#&#olBx*Gx4!nN5gL*85u`ZI_tLvdKS?`2FxqMqfB4?LI9~rCcUHp& zcXRW>Mc{mS(Jw(#iFNP(S~m{uz$H;hRnRmBz z`~}$JE+#~tMuzJ1-Q2Q1Nnc4qB&|9~A^CXf$VW($(lLKf4E3*^Te-X-X}WGAZ8|1J zIk4PJ?kwlllIO~O#(M&iq^z|H^d63TA>Sw!;SWnMUqUTOf7MP|^NA`+^Om3E59NvV zTudSzyW3T5n%$UQm@Be@){ZRsBQ}@FYIe-!du*YJd0*6bcGK}@CKb&n^e@$8Y_06X zD&$nd;gFxi-sA?U=kLJSS9jmYd1%B%@2>zklaARYH< z{-rM!J#e&-*P{yvLCxJuqK*|mU(=J~jd?9>cdJc(e-(tRrv|Lp{goUBOQVMQ0m0d) z88k_@Cd)(BI8<$V~bNCVU z40h)wS^c zg1nWPO=n3h&w?64jilIo(&Q4Fxrbek^w$S&_sS$Z+NwlJd;}SfLz1D7Vq*HKuVbAn h7I*Me>$Cc!!k-c@0xEh>8e0GW002ovPDHLkV1k4XU5Wqz diff --git a/refilc_mobile_ui/lib/premium/components/plan_card.dart b/refilc_mobile_ui/lib/premium/components/plan_card.dart index 80b5c8d..fa1452f 100644 --- a/refilc_mobile_ui/lib/premium/components/plan_card.dart +++ b/refilc_mobile_ui/lib/premium/components/plan_card.dart @@ -12,6 +12,7 @@ class PlusPlanCard extends StatelessWidget { required this.title, required this.description, required this.color, + required this.gradient, this.price = 0, required this.id, this.active = false, @@ -23,6 +24,7 @@ class PlusPlanCard extends StatelessWidget { final String title; final String description; final Color color; + final LinearGradient gradient; final double price; final String id; final bool active; @@ -49,190 +51,200 @@ class PlusPlanCard extends StatelessWidget { return PremiumActivationView(product: id); })); }, - child: Card( - margin: EdgeInsets.zero, - shape: RoundedRectangleBorder( - borderRadius: borderRadius!, + child: Container( + decoration: BoxDecoration( + gradient: gradient, + borderRadius: borderRadius!.add(BorderRadius.circular(1.5)), ), - shadowColor: Colors.transparent, - surfaceTintColor: Colors.white, - color: Colors.white, - child: Padding( - padding: const EdgeInsets.only( - top: 18.0, bottom: 16.0, left: 22.0, right: 18.0), - child: Column( - children: [ - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Row( - children: [ - Image.asset( - iconPath, - width: 25.0, - height: 25.0, - ), - const SizedBox( - width: 16.0, - ), - Text( - title, - style: TextStyle( - fontSize: 22.0, - color: color, - fontWeight: FontWeight.w600, - height: 1.2, + padding: const EdgeInsets.all(1.5), + child: Card( + margin: EdgeInsets.zero, + shape: RoundedRectangleBorder( + borderRadius: borderRadius!, + ), + shadowColor: Colors.transparent, + surfaceTintColor: Colors.white, + color: Colors.white.withOpacity(0.9), + child: Padding( + padding: const EdgeInsets.only( + top: 18.0, bottom: 16.0, left: 22.0, right: 18.0), + child: Column( + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Row( + children: [ + Image.asset( + iconPath, + width: iconPath.endsWith('ink.png') ? 29.0 : 25.0, + height: 25.0, ), - ), - ], - ), - Container( - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(20.0), - gradient: active - ? const LinearGradient( - begin: Alignment.topLeft, - end: Alignment.bottomRight, - colors: [ - Color.fromARGB(255, 196, 213, 253), - Color.fromARGB(255, 227, 235, 250), - Color.fromARGB(255, 214, 226, 250), - ], - ) - : const LinearGradient( - colors: [ - Color(0xFFEFF4FE), - Color(0xFFEFF4FE), - ], - ), + const SizedBox( + width: 12.0, + ), + Text( + title, + style: const TextStyle( + fontSize: 22.0, + color: Color(0xFF0B0B0B), + fontWeight: FontWeight.w600, + height: 1.2, + ), + ), + ], ), - padding: const EdgeInsets.all(4.0), - child: Container( + Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(20.0), - color: const Color(0xFFEFF4FE), + gradient: active + ? const LinearGradient( + begin: Alignment.topLeft, + end: Alignment.bottomRight, + colors: [ + Color.fromARGB(255, 196, 213, 253), + Color.fromARGB(255, 227, 235, 250), + Color.fromARGB(255, 214, 226, 250), + ], + ) + : const LinearGradient( + colors: [ + Color(0xFFEFF4FE), + Color(0xFFEFF4FE), + ], + ), ), - padding: const EdgeInsets.symmetric( - horizontal: 8.0, vertical: 0.0), - child: Text( - active - ? 'active'.i18n - : '${price.toStringAsFixed(2).replaceAll('.', ',')} €', - style: const TextStyle( - fontSize: 16.6, - color: Color(0xFF243F76), - fontWeight: FontWeight.w600, + padding: const EdgeInsets.all(2.0), + child: Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(20.0), + color: const Color(0xFFEFF4FE), + ), + padding: const EdgeInsets.symmetric( + horizontal: 10.0, vertical: 2.0), + child: Text( + active + ? 'active'.i18n + : '${price.toStringAsFixed(2).replaceAll('.', ',')} €', + style: const TextStyle( + fontSize: 16.6, + color: Color(0xFF243F76), + fontWeight: FontWeight.w600, + ), ), ), ), - ), - ], - ), - const SizedBox( - height: 12.0, - ), - Text( - description, - style: TextStyle( - color: const Color(0xFF011234).withOpacity(0.6), - fontSize: 13.69, - fontWeight: FontWeight.w500, + ], ), - ), - const SizedBox( - height: 14.20, - ), - Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: features - .map((e) => Column( - children: [ - const SizedBox( - height: 10.0, - ), - Row( - children: [ - SizedBox( - width: 22.22, - child: Text( - e[0], - style: const TextStyle(fontSize: 18.0), + const SizedBox( + height: 12.0, + ), + Text( + description, + style: TextStyle( + color: const Color(0xFF011234).withOpacity(0.6), + fontSize: 13.69, + fontWeight: FontWeight.w500, + ), + ), + const SizedBox( + height: 14.20, + ), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: features + .map((e) => Column( + children: [ + const SizedBox( + height: 10.0, + ), + Row( + children: [ + SizedBox( + width: 22.22, + child: Text( + e[0], + style: const TextStyle(fontSize: 18.0), + ), ), - ), - const SizedBox( - width: 14.0, - ), - Expanded( - child: e[1].endsWith('tier_benefits') - ? Text.rich( - style: const TextStyle( - height: 1.2, - fontWeight: FontWeight.w500, - color: Color(0xFF011234), - fontSize: 13.69, - ), - TextSpan( - children: [ - TextSpan( - text: 'every'.i18n, - ), - e[1].startsWith('cap') - ? const TextSpan( - text: 'reFilc+', - style: TextStyle( - color: - Color(0xFF47BB00), - fontWeight: - FontWeight.w600, + const SizedBox( + width: 14.0, + ), + Expanded( + child: e[1].endsWith('tier_benefits') + ? Text.rich( + style: const TextStyle( + height: 1.2, + fontWeight: FontWeight.w500, + color: Color(0xFF011234), + fontSize: 13.69, + ), + TextSpan( + children: [ + TextSpan( + text: 'every'.i18n, + ), + e[1].startsWith('cap') + ? const TextSpan( + text: 'reFilc+', + style: TextStyle( + color: + Color(0xFF7C3EFF), + fontWeight: + FontWeight.w600, + ), + ) + : TextSpan( + children: [ + const TextSpan( + text: 'reFilc+', + style: TextStyle( + color: Color( + 0xFF7C3EFF), + fontWeight: + FontWeight + .w600, + ), + ), + TextSpan( + text: 'and'.i18n, + ), + const TextSpan( + text: + 'reFilc+ Gold', + style: TextStyle( + color: Color( + 0xFF0061BB), + fontWeight: + FontWeight + .w600, + ), + ), + ], ), - ) - : TextSpan( - children: [ - const TextSpan( - text: 'reFilc+', - style: TextStyle( - color: Color( - 0xFF47BB00), - fontWeight: - FontWeight.w600, - ), - ), - TextSpan( - text: 'and'.i18n, - ), - const TextSpan( - text: 'reFilc+ Gold', - style: TextStyle( - color: Color( - 0xFF0061BB), - fontWeight: - FontWeight.w600, - ), - ), - ], - ), - TextSpan(text: 'benefit'.i18n), - ], + TextSpan(text: 'benefit'.i18n), + ], + ), + ) + : Text( + e[1], + maxLines: 2, + style: const TextStyle( + height: 1.2, + color: Color(0xFF011234), + fontWeight: FontWeight.w500, + fontSize: 13.69, + ), ), - ) - : Text( - e[1], - maxLines: 2, - style: const TextStyle( - height: 1.2, - color: Color(0xFF011234), - fontWeight: FontWeight.w500, - fontSize: 13.69, - ), - ), - ), - ], - ), - ], - )) - .toList(), - ), - ], + ), + ], + ), + ], + )) + .toList(), + ), + ], + ), ), ), ), diff --git a/refilc_mobile_ui/lib/premium/plus_screen.dart b/refilc_mobile_ui/lib/premium/plus_screen.dart index 95e2b6b..2151833 100644 --- a/refilc_mobile_ui/lib/premium/plus_screen.dart +++ b/refilc_mobile_ui/lib/premium/plus_screen.dart @@ -19,6 +19,37 @@ class PlusScreen extends StatelessWidget { @override Widget build(BuildContext context) { + LinearGradient plusGradient = const LinearGradient( + colors: [ + Color(0xFF7087FF), + Color(0xFF9069FF), + Color(0xFFE4D7FF), + Color(0xFFDBC5FF), + Color(0xFFE57DFF), + Color(0xFFDBB7FF), + Color(0xFF6850FF), + Color(0xFF2144FF), + ], + stops: [0.0, 0.16, 0.32, 0.49, 0.69, 0.8, 0.92, 1.0], + begin: Alignment.topLeft, + end: Alignment.bottomRight, + ); + LinearGradient goldGradient = const LinearGradient( + colors: [ + Color(0xFFFFBD70), + Color(0xFFFFDE69), + Color(0xFFFFECD7), + Color(0xFFFFE4C5), + Color(0xFFFFDB7D), + Color(0xFFFFDEB7), + Color(0xFFFFAE50), + Color(0xFFFF9921), + ], + stops: [0.0, 0.16, 0.32, 0.49, 0.69, 0.8, 0.92, 1.0], + begin: Alignment.topLeft, + end: Alignment.bottomRight, + ); + return Scaffold( backgroundColor: const Color(0xffF4F9FF), body: Container( @@ -168,12 +199,13 @@ class PlusScreen extends StatelessWidget { iconPath: 'assets/images/plus_tier_cap.png', title: 'reFilc+', description: 'tier_rfp'.i18n, - color: const Color.fromARGB(255, 97, 0, 187), + color: const Color(0xFF7C3EFF), + gradient: plusGradient, id: 'refilcplus', price: 0.99, borderRadius: const BorderRadius.vertical( top: Radius.circular(16.0), - bottom: Radius.circular(8.0)), + bottom: Radius.circular(16.0)), features: [ ['✨', 'rfp_1'.i18n], ['1️⃣', 'rfp_5'.i18n], @@ -184,7 +216,7 @@ class PlusScreen extends StatelessWidget { ], ), const SizedBox( - height: 8.0, + height: 12.0, ), PlusPlanCard( active: ActiveSponsorCard.estimateLevel( @@ -193,11 +225,12 @@ class PlusScreen extends StatelessWidget { iconPath: 'assets/images/plus_tier_ink.png', title: 'reFilc+ Gold', description: 'tier_rfpgold'.i18n, - color: const Color.fromARGB(255, 187, 137, 0), + color: const Color(0xFFFFBD3E), + gradient: goldGradient, id: 'refilcplusgold', price: 2.99, borderRadius: const BorderRadius.vertical( - top: Radius.circular(8.0), + top: Radius.circular(16.0), bottom: Radius.circular(16.0)), features: [ ['🕑', 'rfp_7'.i18n], diff --git a/refilc_plus b/refilc_plus index a4d569d..a1e434f 160000 --- a/refilc_plus +++ b/refilc_plus @@ -1 +1 @@ -Subproject commit a4d569db8d8cffa5342fabacd7d1f3ee4fe43061 +Subproject commit a1e434f0204d7131bee009b786dadb2184f4822c