Fix UI colors and such :)

Co-authored-by: Inex Code <inex.code@selfprivacy.org>

lib/config/text_themes.dart

@@ -67,8 +67,6 @@ final mediumStyle = defaultTextStyle.copyWith(fontSize: 13, height: 1.53);
 
 final smallStyle = defaultTextStyle.copyWith(fontSize: 11, height: 1.45);
 
-final linkStyle = defaultTextStyle.copyWith(color: BrandColors.blue);
-
 const progressTextStyleLight = TextStyle(
   fontSize: 11,
   color: BrandColors.textColor1,

lib/ui/components/brand_cards/brand_cards.dart

@@ -46,9 +46,7 @@ class _BrandCard extends StatelessWidget {
   Widget build(BuildContext context) {
     return Container(
       decoration: BoxDecoration(
-        color: Theme.of(context).brightness == Brightness.dark
+        color: Theme.of(context).colorScheme.surface,
-            ? BrandColors.black
-            : BrandColors.white,
         borderRadius: borderRadius,
         boxShadow: shadow,
       ),

lib/ui/components/brand_switch/brand_switch.dart

@@ -1,7 +1,5 @@
 import 'package:flutter/material.dart';
 
-import 'package:selfprivacy/config/brand_colors.dart';
-
 class BrandSwitch extends StatelessWidget {
   const BrandSwitch({
     Key? key,
@@ -15,8 +13,7 @@ class BrandSwitch extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Switch(
-      activeColor: BrandColors.green1,
+      activeColor: Theme.of(context).colorScheme.primary,
-      activeTrackColor: BrandColors.green2,
       value: value,
       onChanged: onChanged,
     );

lib/ui/components/icon_status_mask/icon_status_mask.dart

@@ -20,7 +20,10 @@ class IconStatusMask extends StatelessWidget {
         colors = BrandColors.uninitializedGradientColors;
         break;
       case StateType.stable:
-        colors = BrandColors.stableGradientColors;
+        colors = [
+          Theme.of(context).colorScheme.primary,
+          Theme.of(context).colorScheme.tertiary,
+        ];
         break;
       case StateType.warning:
         colors = BrandColors.warningGradientColors;

lib/ui/pages/recovery_key/recovery_key.dart

@@ -81,27 +81,16 @@ class _RecoveryKeyContentState extends State<RecoveryKeyContent> {
   Widget build(BuildContext context) {
     final keyStatus = context.watch<RecoveryKeyCubit>().state;
 
-    List<Widget> widgets = [];
+    return Column(
-
+      children: [
-    if (keyStatus.exists) {
+        if (keyStatus.exists) RecoveryKeyStatusCard(isValid: keyStatus.isValid),
-      widgets = [
-        RecoveryKeyStatusCard(isValid: keyStatus.isValid),
-        RecoveryKeyInformation(state: keyStatus),
-        ...widgets,
-      ];
-
-      if (_isConfigurationVisible) {
-        widgets = [
-          ...widgets,
-          const RecoveryKeyConfiguration(),
-        ];
-      }
-
-      if (!_isConfigurationVisible) {
-        if (keyStatus.isValid) {
-          widgets = [
-            ...widgets,
         const SizedBox(height: 16),
+        if (keyStatus.exists && !_isConfigurationVisible)
+          RecoveryKeyInformation(state: keyStatus),
+        if (_isConfigurationVisible || !keyStatus.exists)
+          RecoveryKeyConfiguration(),
+        const SizedBox(height: 16),
+        if (!_isConfigurationVisible && keyStatus.isValid)
           BrandButton.text(
             title: 'recovery_key.key_replace_button'.tr(),
             onPressed: () {
@@ -110,11 +99,7 @@ class _RecoveryKeyContentState extends State<RecoveryKeyContent> {
               });
             },
           ),
-          ];
+        if (!_isConfigurationVisible && !keyStatus.isValid)
-        } else {
-          widgets = [
-            ...widgets,
-            const SizedBox(height: 16),
           FilledButton(
             title: 'recovery_key.key_replace_button'.tr(),
             onPressed: () {
@@ -123,19 +108,8 @@ class _RecoveryKeyContentState extends State<RecoveryKeyContent> {
               });
             },
           ),
-          ];
+      ],
-        }
+    );
-      }
-    }
-
-    if (!keyStatus.exists) {
-      widgets = [
-        ...widgets,
-        const RecoveryKeyConfiguration(),
-      ];
-    }
-
-    return Column(children: widgets);
   }
 }
 
@@ -235,45 +209,85 @@ class _RecoveryKeyConfigurationState extends State<RecoveryKeyConfiguration> {
   bool _isAmountToggled = false;
   bool _isExpirationToggled = false;
 
-  bool _isAmountError = false;
-  bool _isExpirationError = false;
-
   final TextEditingController _amountController = TextEditingController();
   final TextEditingController _expirationController = TextEditingController();
 
+  bool _isAmountError = false;
+  bool _isExpirationError = false;
+
   DateTime _selectedDate = DateTime.now();
   bool _isDateSelected = false;
 
+  void _updateErrorStatuses() {
+    final amount = _amountController.text;
+    final expiration = _expirationController.text;
+
+    print('amount: $amount');
+    print('_isAmountToggled: $_isAmountToggled');
+    print('_isExpirationToggled: $_isExpirationToggled');
+
+    setState(() {
+      if (!_isAmountToggled) {
+        _isAmountError = false;
+      } else if (amount.isEmpty) {
+        _isAmountError = true;
+      } else {
+        final amountInt = int.tryParse(amount);
+        _isAmountError = amountInt == null || amountInt <= 0;
+      }
+
+      if (!_isExpirationToggled) {
+        _isExpirationError = false;
+      } else if (expiration.isEmpty) {
+        _isExpirationError = true;
+      } else {
+        _isExpirationError =
+            _selectedDate == null || _selectedDate.isBefore(DateTime.now());
+      }
+    });
+
+    print('_isAmountError: $_isAmountError');
+    print('_isExpirationError: $_isExpirationError');
+  }
+
   @override
   Widget build(BuildContext context) {
     if (_isDateSelected) {
-      _expirationController.text = _selectedDate.toIso8601String();
+      _expirationController.text = DateFormat.yMMMMd().format(_selectedDate);
     }
 
+    _amountController.addListener(_updateErrorStatuses);
+
+    _expirationController.addListener(_updateErrorStatuses);
+
     return Column(
       children: [
-        const SizedBox(height: 16),
+        SwitchListTile(
-        Row(
-          children: [
-            Text('recovery_key.key_amount_toggle'.tr()),
-            Switch(
           value: _isAmountToggled,
+          title: Text('recovery_key.key_amount_toggle'.tr()),
+          activeColor: Theme.of(context).colorScheme.primary,
           onChanged: (bool toogled) {
             setState(
               () {
                 _isAmountToggled = toogled;
-                    _isExpirationToggled = _isExpirationToggled;
               },
             );
+            _updateErrorStatuses();
           },
         ),
-          ],
+        AnimatedCrossFade(
-        ),
+          duration: const Duration(milliseconds: 200),
-        const SizedBox(height: 16),
+          crossFadeState: _isAmountToggled
+              ? CrossFadeState.showFirst
+              : CrossFadeState.showSecond,
+          firstChild: Column(
+            children: [
+              const SizedBox(height: 8),
               TextField(
                 enabled: _isAmountToggled,
                 controller: _amountController,
                 decoration: InputDecoration(
+                    border: OutlineInputBorder(),
                     errorText: _isAmountError ? ' ' : null,
                     labelText: 'recovery_key.key_amount_field_title'.tr()),
                 keyboardType: TextInputType.number,
@@ -281,31 +295,41 @@ class _RecoveryKeyConfigurationState extends State<RecoveryKeyConfiguration> {
                   FilteringTextInputFormatter.digitsOnly,
                 ], // Only numbers can be entered
               ),
-        const SizedBox(height: 16),
+              const SizedBox(height: 8),
-        Row(
+            ],
-          children: [
+          ),
-            Text('recovery_key.key_duedate_toggle'.tr()),
+          secondChild: Container(),
-            Switch(
+        ),
+        SwitchListTile(
           value: _isExpirationToggled,
+          title: Text('recovery_key.key_duedate_toggle'.tr()),
+          activeColor: Theme.of(context).colorScheme.primary,
           onChanged: (bool toogled) {
             setState(
               () {
-                    _isAmountToggled = _isAmountToggled;
                 _isExpirationToggled = toogled;
               },
             );
+            _updateErrorStatuses();
           },
         ),
-          ],
+        AnimatedCrossFade(
-        ),
+          duration: const Duration(milliseconds: 200),
-        const SizedBox(height: 16),
+          crossFadeState: _isExpirationToggled
+              ? CrossFadeState.showFirst
+              : CrossFadeState.showSecond,
+          firstChild: Column(
+            children: [
+              const SizedBox(height: 8),
               TextField(
                 enabled: _isExpirationToggled,
                 controller: _expirationController,
                 onTap: () {
                   _selectDate(context);
                 },
+                readOnly: true,
                 decoration: InputDecoration(
+                    border: OutlineInputBorder(),
                     errorText: _isExpirationError ? ' ' : null,
                     labelText: 'recovery_key.key_duedate_field_title'.tr()),
                 keyboardType: TextInputType.number,
@@ -313,41 +337,23 @@ class _RecoveryKeyConfigurationState extends State<RecoveryKeyConfiguration> {
                   FilteringTextInputFormatter.digitsOnly,
                 ], // Only numbers can be entered
               ),
+            ],
+          ),
+          secondChild: Container(),
+        ),
         const SizedBox(height: 16),
         FilledButton(
           title: 'recovery_key.key_receive_button'.tr(),
-          onPressed: () {
+          disabled: _isAmountError || _isExpirationError,
-            if (_isExpirationToggled && _expirationController.text.isEmpty) {
+          onPressed: !_isAmountError && !_isExpirationError
-              setState(() {
+              ? () {
-                _isExpirationError = true;
-                _isAmountError = false;
-                _isAmountToggled = _isAmountToggled;
-                _isExpirationToggled = _isExpirationToggled;
-              });
-              return;
-            } else if (_isAmountToggled && _amountController.text.isEmpty) {
-              setState(() {
-                _isAmountError = true;
-                _isExpirationError = false;
-                _isAmountToggled = _isAmountToggled;
-                _isExpirationToggled = _isExpirationToggled;
-              });
-              return;
-            } else {
-              setState(() {
-                _isAmountError = false;
-                _isExpirationError = false;
-                _isAmountToggled = _isAmountToggled;
-                _isExpirationToggled = _isExpirationToggled;
-              });
-
                   Navigator.of(context).push(
                     materialRoute(
                       const RecoveryKeyReceiving(recoveryKey: ''), // TO DO
                     ),
                   );
                 }
-          },
+              : null,
         ),
       ],
     );

lib/ui/pages/services/services.dart

@@ -189,7 +189,11 @@ class _Card extends StatelessWidget {
                                   'https://${serviceType.subdomain}.$domainName'),
                               child: Text(
                                 '${serviceType.subdomain}.$domainName',
-                                style: linkStyle,
+                                style: TextStyle(
+                                  color:
+                                      Theme.of(context).colorScheme.secondary,
+                                  decoration: TextDecoration.underline,
+                                ),
                               ),
                             ),
                             const SizedBox(height: 10),
@@ -199,7 +203,10 @@ class _Card extends StatelessWidget {
                         Column(children: [
                           Text(
                             domainName,
-                            style: linkStyle,
+                            style: TextStyle(
+                              color: Theme.of(context).colorScheme.primary,
+                              decoration: TextDecoration.underline,
+                            ),
                           ),
                           const SizedBox(height: 10),
                         ]),

lib/ui/pages/users/new_user.dart

@@ -67,9 +67,9 @@ class NewUser extends StatelessWidget {
                           suffixIcon: Padding(
                             padding: const EdgeInsets.only(right: 8),
                             child: IconButton(
-                              icon: const Icon(
+                              icon: Icon(
                                 BrandIcons.refresh,
-                                color: BrandColors.blue,
+                                color: Theme.of(context).colorScheme.secondary,
                               ),
                               onPressed:
                                   context.read<UserFormCubit>().genNewPassword,