Add icons to dropdown options in Settings - 2.22 🚀

I didn't like the look of slate blue on a light theme
so i replaced it with this dark magenta instead.

Select.tsx

@@ -7,6 +7,7 @@ export interface Item {
   value: string;
   label: string;
   color?: string;
+  icon?: string;
 }
 
 function Select({
@@ -64,6 +65,7 @@ function Select({
           key={item.value}
           onPress={() => press(item.value)}
           titleStyle={{ color: item.color || colors.onSurface }}
+          leadingIcon={item.icon}
         />
       ))}
     </Menu>

SettingsPage.tsx

@@ -135,14 +135,14 @@ export default function SettingsPage() {
         <Select
           label={name}
           items={[
-            { label: "History", value: "History" },
-            { label: "Exercises", value: "Exercises" },
-            { label: "Plans", value: "Plans" },
-            { label: "Graphs", value: "Graphs" },
-            { label: "Timer", value: "Timer" },
-            { label: "Weight", value: "Weight" },
-            { label: "Insights", value: "Insights" },
-            { label: "Settings", value: "Settings" },
+            { label: "History", value: "History", icon: 'history' },
+            { label: "Exercises", value: "Exercises", icon: 'dumbbell' },
+            { label: "Plans", value: "Plans", icon: 'calendar-outline' },
+            { label: "Graphs", value: "Graphs", icon: 'chart-bell-curve-cumulative' },
+            { label: "Timer", value: "Timer", icon: 'timer-outline' },
+            { label: "Weight", value: "Weight", icon: 'scale-bathroom' },
+            { label: "Insights", value: "Insights", icon: 'lightbulb-on-outline' },
+            { label: "Settings", value: "Settings", icon: 'cog-outline' },
           ]}
           value={settings.startup}
           onChange={async (value) => {
@@ -195,10 +195,10 @@ export default function SettingsPage() {
         <Select
           label={name}
           items={[
-            { label: "Off", value: "" },
-            { label: "Kilograms", value: "kg" },
-            { label: "Pounds", value: "lb" },
-            { label: "Stone", value: "stone" },
+            { label: "Off", value: "", icon: 'scale-off' },
+            { label: "Kilograms", value: "kg", icon: 'weight-kilogram' },
+            { label: "Pounds", value: "lb", icon: 'weight-pound' },
+            { label: "Stone", value: "stone", icon: 'weight' },
           ]}
           value={settings.autoConvert}
           onChange={async (value) => {

android/app/build.gradle

@@ -85,8 +85,8 @@ android {
         applicationId "com.massive"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 36236
-        versionName "2.21"
+        versionCode 36237
+        versionName "2.22"
     }
     signingConfigs {
         release {

colors.ts

@@ -17,9 +17,8 @@ export const DARK_COLORS = [
   { hex: "#000000", name: "Black" },
   { hex: "#863c3c", name: "Brandy" },
   { hex: "#1c6000", name: "Kermit" },
-  { hex: "#8A2BE2", name: "Violet" },
-  { hex: "#6A5ACD", name: "Slate Blue" },
-  { hex: "#CC3700", name: "Dark Orange" },
+  { hex: "#990000", name: "Red" },
+  { hex: "#660066", name: "Magenta" },
 ];
 
 export function darkenRgba(rgba: string, amount: number) {

options.ts

@@ -1,9 +1,9 @@
 import { DARK_COLORS, LIGHT_COLORS } from "./colors";
 
 export const themeOptions = [
-  { label: "System", value: "system" },
-  { label: "Dark", value: "dark" },
-  { label: "Light", value: "light" },
+  { label: "System", value: "system", icon: 'cellphone' },
+  { label: "Dark", value: "dark", icon: 'lightbulb-off-outline' },
+  { label: "Light", value: "light", icon: 'lightbulb-outline' },
 ];
 
 export const lightOptions = LIGHT_COLORS.map((color) => ({

package.json

@@ -1,6 +1,6 @@
 {
   "name": "massive",
-  "version": "2.21",
+  "version": "2.22",
   "private": true,
   "license": "GPL-3.0-only",
   "scripts": {