Settings

lib/constants.dart

@@ -236,6 +236,7 @@ const String kExpenseStatusInvoiced = '3';
 
 const String kDefaultCurrencyId = '1';
 const String kDefaultDateFormat = '5';
+const String kDefaultAccentColor = '#FF40C4FF';
 
 const String kActivityEmailInvoice = '6';
 

lib/main.dart

@@ -65,7 +65,7 @@ void main({bool isTesting = false}) async {
 
   final prefs = await SharedPreferences.getInstance();
   final enableDarkMode = prefs.getBool(kSharedPrefEnableDarkMode) ?? true;
-  final accentColor = prefs.getString(kSharedPrefAccentColor) ?? '#FF0000';
+  final accentColor = prefs.getString(kSharedPrefAccentColor) ?? kDefaultAccentColor;
 
   final longPressSelectionIsDefault =
       prefs.getBool(kSharedPrefLongPressSelectionIsDefault) ?? false;
@@ -267,13 +267,11 @@ class InvoiceNinjaAppState extends State<InvoiceNinjaApp> {
               ? ThemeData(
                   brightness: Brightness.dark,
                   accentColor:
-                      convertHexStringToColor(state.uiState.accentColor) ??
+                      convertHexStringToColor(state.uiState.accentColor),
-                          Colors.lightBlueAccent,
                 )
               : ThemeData().copyWith(
-                  accentColor: state.uiState.accentColor == null
+                  accentColor:
-                      ? null
+                      convertHexStringToColor(state.uiState.accentColor),
-                      : convertHexStringToColor(state.uiState.accentColor),
                   primaryColor: const Color(0xFF117cc1),
                   primaryColorLight: const Color(0xFF5dabf4),
                   primaryColorDark: const Color(0xFF0D5D91),

lib/redux/app/app_state.dart

@@ -349,7 +349,7 @@ abstract class AppState implements Built<AppState, AppStateBuilder> {
   @override
   String toString() {
     //return 'Custom fields [UI]: ${uiState.settingsUIState.userCompany.company.customFields}, [DB] ${selectedCompany.customFields}';
-    return 'custom fields: ${uiState.settingsUIState.userCompany.company.customFields}';
+    return 'color: ${uiState.accentColor}';
     //return 'defaultInvoiceDesignId: ${selectedCompany.settings.defaultInvoiceDesignId}';
     //return 'Routes: Current: ${uiState.currentRoute} Prev: ${uiState.previousRoute}';
     //return 'Route: ${uiState.currentRoute}, Setting Type: ${uiState.settingsUIState.entityType}, Name: ${uiState.settingsUIState.settings.name}, Updated: ${uiState.settingsUIState.updatedAt}';

lib/ui/app/forms/color_picker.dart

@@ -4,11 +4,17 @@ import 'package:invoiceninja_flutter/utils/colors.dart';
 import 'package:invoiceninja_flutter/utils/localization.dart';
 
 class FormColorPicker extends StatefulWidget {
-  const FormColorPicker({this.labelText, this.initialValue, this.onSelected});
+  const FormColorPicker({
+    this.labelText,
+    this.initialValue,
+    this.onSelected,
+    this.showClear = true,
+  });
 
   final String labelText;
   final String initialValue;
   final Function(String) onSelected;
+  final bool showClear;
 
   @override
   _FormColorPickerState createState() => _FormColorPickerState();
@@ -27,7 +33,7 @@ class _FormColorPickerState extends State<FormColorPicker> {
 
   @override
   void didChangeDependencies() {
-    _textController.text = widget.initialValue;
+    _selectedColor = _textController.text = widget.initialValue;
     super.didChangeDependencies();
   }
 
@@ -56,8 +62,7 @@ class _FormColorPickerState extends State<FormColorPicker> {
             child: BlockPicker(
               pickerColor: color,
               onColorChanged: (color) {
-                final hex = color.value.toRadixString(16);
+                _pendingColor = convertColorToHexString(color);
-                _pendingColor = '#' + hex.substring(2, hex.length);
               },
             ),
           ),
@@ -98,18 +103,23 @@ class _FormColorPickerState extends State<FormColorPicker> {
         Row(
           mainAxisAlignment: MainAxisAlignment.end,
           children: <Widget>[
-            Container(
+            GestureDetector(
-              color: convertHexStringToColor(widget.initialValue),
+              onTap: _showPicker,
-              width: 100,
+              child: Container(
-              height: 20,
+                decoration: BoxDecoration(
+                  color: widget.initialValue == null
+                      ? Colors.grey
+                      : convertHexStringToColor(widget.initialValue),
+                  border: Border.all(
+                    color: Colors.black38,
+                  ),
+                ),
+                width: 100,
+                height: 25,
+              ),
             ),
-            SizedBox(width: 20),
+            SizedBox(width: 10),
-            if (_selectedColor == null)
+            if (widget.showClear && _selectedColor != null)
-              IconButton(
-                icon: Icon(Icons.color_lens),
-                onPressed: _showPicker,
-              )
-            else
               IconButton(
                 icon: Icon(Icons.clear),
                 onPressed: () {
@@ -119,7 +129,12 @@ class _FormColorPickerState extends State<FormColorPicker> {
                   });
                   widget.onSelected(null);
                 },
-              ),
+              )
+            else
+              IconButton(
+                icon: Icon(Icons.color_lens),
+                onPressed: _showPicker,
+              )
           ],
         ),
       ],

lib/ui/settings/device_settings_list.dart

@@ -49,6 +49,7 @@ class _DeviceSettingsState extends State<DeviceSettings> {
                   FormColorPicker(
                     labelText: localization.accentColor,
                     initialValue: uiState.accentColor,
+                    showClear: false,
                     onSelected: (value) =>
                         viewModel.onAccentColorChanged(context, value),
                   ),

lib/ui/settings/device_settings_list_vm.dart

@@ -97,6 +97,7 @@ class DeviceSettingsVM {
         AppBuilder.of(context).rebuild();
       },
       onAccentColorChanged: (BuildContext context, String value) async {
+        value ??= kDefaultAccentColor;
         final SharedPreferences prefs = await SharedPreferences.getInstance();
         prefs.setString(kSharedPrefAccentColor, value);
         store.dispatch(UserSettingsChanged(accentColor: value));

lib/utils/colors.dart

@@ -1,8 +1,14 @@
 import 'package:flutter/material.dart';
 
 Color convertHexStringToColor(String value) {
-  if (value == null)
+  if (value == null) {
     return null;
+  }
   value = value.replaceAll('#', '');
   return Color(int.parse(value, radix: 16) + 0xFF000000);
 }
+
+String convertColorToHexString(Color color) {
+  final hex = color.value.toRadixString(16);
+  return '#' + hex.substring(2, hex.length);
+}