Add icons to dropdown options in Settings - 2.22 🚀

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 {

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": {