diff --git a/refilc/assets/images/plus_tier_cap.png b/refilc/assets/images/plus_tier_cap.png index ad117d3..c476908 100644 Binary files a/refilc/assets/images/plus_tier_cap.png and b/refilc/assets/images/plus_tier_cap.png differ diff --git a/refilc/assets/images/plus_tier_ink.png b/refilc/assets/images/plus_tier_ink.png index 4afa961..5d47d07 100644 Binary files a/refilc/assets/images/plus_tier_ink.png and b/refilc/assets/images/plus_tier_ink.png differ 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