From 8e31dc21862cacc0b7b99968e8d2514afdef746f Mon Sep 17 00:00:00 2001
From: Brandon Presley <brandon@presley.nz>
Date: Wed, 30 Nov 2022 14:32:42 +1300
Subject: [PATCH] Add labels to colors

---
 MassiveFab.tsx   | 12 ++++++++----
 SettingsPage.tsx | 36 ++++++++++++++++++------------------
 colors.ts        | 20 ++++++++++----------
 3 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/MassiveFab.tsx b/MassiveFab.tsx
index 586fb12..a72263a 100644
--- a/MassiveFab.tsx
+++ b/MassiveFab.tsx
@@ -1,4 +1,4 @@
-import {ComponentProps} from 'react'
+import {ComponentProps, useMemo} from 'react'
 import {FAB, useTheme} from 'react-native-paper'
 import {CombinedDarkTheme, CombinedDefaultTheme} from './App'
 import {lightColors} from './colors'
@@ -6,9 +6,13 @@ import {lightColors} from './colors'
 export default function MassiveFab(props: Partial<ComponentProps<typeof FAB>>) {
   const {colors} = useTheme()
 
-  const fabColor = lightColors.includes(colors.primary)
-    ? CombinedDarkTheme.colors.background
-    : CombinedDefaultTheme.colors.background
+  const fabColor = useMemo(
+    () =>
+      lightColors.map(color => color.hex).includes(colors.primary)
+        ? CombinedDarkTheme.colors.background
+        : CombinedDefaultTheme.colors.background,
+    [colors.primary],
+  )
 
   return (
     <FAB
diff --git a/SettingsPage.tsx b/SettingsPage.tsx
index bdeae46..0978e35 100644
--- a/SettingsPage.tsx
+++ b/SettingsPage.tsx
@@ -241,24 +241,14 @@ export default function SettingsPage() {
             ]}
           />
         )}
-        {'date format'.includes(term.toLowerCase()) && (
-          <Select
-            value={date}
-            onChange={changeDate}
-            items={formatOptions.map(option => ({
-              label: `Date format: ${format(today, option)}`,
-              value: option,
-            }))}
-          />
-        )}
         {'color'.includes(term.toLowerCase()) && (
           <Select
             value={darkColor}
             onChange={changeDarkColor}
-            items={lightColors.map(colorOption => ({
-              label: 'Dark color',
-              value: colorOption,
-              color: colorOption,
+            items={lightColors.map(color => ({
+              label: `Dark color: ${color.name}`,
+              value: color.hex,
+              color: color.hex,
             }))}
           />
         )}
@@ -266,10 +256,20 @@ export default function SettingsPage() {
           <Select
             value={lightColor}
             onChange={changeLightColor}
-            items={darkColors.map(colorOption => ({
-              label: 'Light color',
-              value: colorOption,
-              color: colorOption,
+            items={darkColors.map(color => ({
+              label: `Light color: ${color.name}`,
+              value: color.hex,
+              color: color.hex,
+            }))}
+          />
+        )}
+        {'date format'.includes(term.toLowerCase()) && (
+          <Select
+            value={date}
+            onChange={changeDate}
+            items={formatOptions.map(option => ({
+              label: `Date format: ${format(today, option)}`,
+              value: option,
             }))}
           />
         )}
diff --git a/colors.ts b/colors.ts
index c9591e2..2329898 100644
--- a/colors.ts
+++ b/colors.ts
@@ -1,19 +1,19 @@
 import {DarkTheme, DefaultTheme} from 'react-native-paper'
 
 export const lightColors = [
-  DarkTheme.colors.primary,
-  '#B3E5FC',
-  '#FA8072',
-  '#FFC0CB',
-  '#E9DCC9',
-  '#BBA1CE',
+  {hex: DarkTheme.colors.primary, name: 'Purple'},
+  {hex: '#B3E5FC', name: 'Blue'},
+  {hex: '#FA8072', name: 'Salmon'},
+  {hex: '#FFC0CB', name: 'Pink'},
+  {hex: '#E9DCC9', name: 'Linen'},
+  {hex: '#BBA1CE', name: 'Light purple'},
 ]
 
 export const darkColors = [
-  DefaultTheme.colors.primary,
-  '#007AFF',
-  '#000000',
-  '#CD5C5C',
+  {hex: DefaultTheme.colors.primary, name: 'Purple'},
+  {hex: '#007AFF', name: 'Blue'},
+  {hex: '#000000', name: 'Black'},
+  {hex: '#CD5C5C', name: 'Red'},
 ]
 
 export const colorShade = (color: any, amount: number) => {