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,61 +81,35 @@ 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 = [
+        const SizedBox(height: 16),
-        RecoveryKeyStatusCard(isValid: keyStatus.isValid),
+        if (keyStatus.exists && !_isConfigurationVisible)
-        RecoveryKeyInformation(state: keyStatus),
+          RecoveryKeyInformation(state: keyStatus),
-        ...widgets,
+        if (_isConfigurationVisible || !keyStatus.exists)
-      ];
+          RecoveryKeyConfiguration(),
-
+        const SizedBox(height: 16),
-      if (_isConfigurationVisible) {
+        if (!_isConfigurationVisible && keyStatus.isValid)
-        widgets = [
+          BrandButton.text(
-          ...widgets,
+            title: 'recovery_key.key_replace_button'.tr(),
-          const RecoveryKeyConfiguration(),
+            onPressed: () {
-        ];
+              setState(() {
-      }
+                _isConfigurationVisible = true;
-
+              });
-      if (!_isConfigurationVisible) {
+            },
-        if (keyStatus.isValid) {
+          ),
-          widgets = [
+        if (!_isConfigurationVisible && !keyStatus.isValid)
-            ...widgets,
+          FilledButton(
-            const SizedBox(height: 16),
+            title: 'recovery_key.key_replace_button'.tr(),
-            BrandButton.text(
+            onPressed: () {
-              title: 'recovery_key.key_replace_button'.tr(),
+              setState(() {
-              onPressed: () {
+                _isConfigurationVisible = true;
-                setState(() {
+              });
-                  _isConfigurationVisible = true;
+            },
-                });
+          ),
-              },
+      ],
-            ),
+    );
-          ];
-        } else {
-          widgets = [
-            ...widgets,
-            const SizedBox(height: 16),
-            FilledButton(
-              title: 'recovery_key.key_replace_button'.tr(),
-              onPressed: () {
-                setState(() {
-                  _isConfigurationVisible = true;
-                });
-              },
-            ),
-          ];
-        }
-      }
-    }
-
-    if (!keyStatus.exists) {
-      widgets = [
-        ...widgets,
-        const RecoveryKeyConfiguration(),
-      ];
-    }
-
-    return Column(children: widgets);
   }
 }
 
@@ -235,119 +209,151 @@ 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(
+          value: _isAmountToggled,
-          children: [
+          title: Text('recovery_key.key_amount_toggle'.tr()),
-            Text('recovery_key.key_amount_toggle'.tr()),
+          activeColor: Theme.of(context).colorScheme.primary,
-            Switch(
+          onChanged: (bool toogled) {
-              value: _isAmountToggled,
+            setState(
-              onChanged: (bool toogled) {
+              () {
-                setState(
+                _isAmountToggled = toogled;
-                  () {
-                    _isAmountToggled = toogled;
-                    _isExpirationToggled = _isExpirationToggled;
-                  },
-                );
               },
-            ),
+            );
-          ],
+            _updateErrorStatuses();
-        ),
-        const SizedBox(height: 16),
-        TextField(
-          enabled: _isAmountToggled,
-          controller: _amountController,
-          decoration: InputDecoration(
-              errorText: _isAmountError ? ' ' : null,
-              labelText: 'recovery_key.key_amount_field_title'.tr()),
-          keyboardType: TextInputType.number,
-          inputFormatters: <TextInputFormatter>[
-            FilteringTextInputFormatter.digitsOnly,
-          ], // Only numbers can be entered
-        ),
-        const SizedBox(height: 16),
-        Row(
-          children: [
-            Text('recovery_key.key_duedate_toggle'.tr()),
-            Switch(
-              value: _isExpirationToggled,
-              onChanged: (bool toogled) {
-                setState(
-                  () {
-                    _isAmountToggled = _isAmountToggled;
-                    _isExpirationToggled = toogled;
-                  },
-                );
-              },
-            ),
-          ],
-        ),
-        const SizedBox(height: 16),
-        TextField(
-          enabled: _isExpirationToggled,
-          controller: _expirationController,
-          onTap: () {
-            _selectDate(context);
           },
-          decoration: InputDecoration(
+        ),
-              errorText: _isExpirationError ? ' ' : null,
+        AnimatedCrossFade(
-              labelText: 'recovery_key.key_duedate_field_title'.tr()),
+          duration: const Duration(milliseconds: 200),
-          keyboardType: TextInputType.number,
+          crossFadeState: _isAmountToggled
-          inputFormatters: <TextInputFormatter>[
+              ? CrossFadeState.showFirst
-            FilteringTextInputFormatter.digitsOnly,
+              : CrossFadeState.showSecond,
-          ], // Only numbers can be entered
+          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,
+                inputFormatters: <TextInputFormatter>[
+                  FilteringTextInputFormatter.digitsOnly,
+                ], // Only numbers can be entered
+              ),
+              const SizedBox(height: 8),
+            ],
+          ),
+          secondChild: Container(),
+        ),
+        SwitchListTile(
+          value: _isExpirationToggled,
+          title: Text('recovery_key.key_duedate_toggle'.tr()),
+          activeColor: Theme.of(context).colorScheme.primary,
+          onChanged: (bool toogled) {
+            setState(
+              () {
+                _isExpirationToggled = toogled;
+              },
+            );
+            _updateErrorStatuses();
+          },
+        ),
+        AnimatedCrossFade(
+          duration: const Duration(milliseconds: 200),
+          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,
+                inputFormatters: <TextInputFormatter>[
+                  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;
+                  Navigator.of(context).push(
-                _isAmountError = false;
+                    materialRoute(
-                _isAmountToggled = _isAmountToggled;
+                      const RecoveryKeyReceiving(recoveryKey: ''), // TO DO
-                _isExpirationToggled = _isExpirationToggled;
+                    ),
-              });
+                  );
-              return;
+                }
-            } else if (_isAmountToggled && _amountController.text.isEmpty) {
+              : null,
-              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
-                ),
-              );
-            }
-          },
         ),
       ],
     );

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,