From 2fdb220659cec470f85dd6cb5a63c71523692abe Mon Sep 17 00:00:00 2001
From: Brandon Presley <brandon@presley.nz>
Date: Thu, 9 Nov 2023 13:14:11 +1300
Subject: [PATCH] Change style of Settings page

1. Move selects above switches
    Selects are larger now so it looks nicer to flow from large
    down to small.
2. Remove label from alarm sound button
    Because the other buttons don't have labels this makes the
    alarm sound stand out and seemed inconsistent.
---
 SettingButton.tsx | 33 ---------------------------------
 SettingsPage.tsx  | 28 ++++++++++++++++------------
 2 files changed, 16 insertions(+), 45 deletions(-)
 delete mode 100644 SettingButton.tsx

diff --git a/SettingButton.tsx b/SettingButton.tsx
deleted file mode 100644
index 87d6578..0000000
--- a/SettingButton.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { View } from "react-native";
-import { Button, Subheading } from "react-native-paper";
-import { ITEM_PADDING } from "./constants";
-
-export default function SettingButton({
-  name: text,
-  label,
-  onPress,
-}: {
-  name: string;
-  label?: string;
-  onPress: () => void;
-}) {
-  if (label) {
-    return (
-      <View
-        style={{
-          flexDirection: "row",
-          alignItems: "center",
-          paddingLeft: ITEM_PADDING,
-        }}
-      >
-        <Subheading style={{ width: 100 }}>{label}</Subheading>
-        <Button onPress={onPress}>{text}</Button>
-      </View>
-    );
-  }
-  return (
-    <Button style={{ alignSelf: "flex-start" }} onPress={onPress}>
-      {text}
-    </Button>
-  );
-}
diff --git a/SettingsPage.tsx b/SettingsPage.tsx
index 56865de..aeee2cb 100644
--- a/SettingsPage.tsx
+++ b/SettingsPage.tsx
@@ -5,19 +5,19 @@ import { useForm } from "react-hook-form";
 import { NativeModules, ScrollView, View } from "react-native";
 import DocumentPicker from "react-native-document-picker";
 import { Dirs, FileSystem } from "react-native-file-access";
+import { Button } from "react-native-paper";
 import ConfirmDialog from "./ConfirmDialog";
+import DrawerHeader from "./DrawerHeader";
+import Page from "./Page";
+import Select from "./Select";
+import Switch from "./Switch";
 import { MARGIN } from "./constants";
 import { AppDataSource } from "./data-source";
 import { setRepo, settingsRepo } from "./db";
 import { DrawerParams } from "./drawer-param-list";
-import DrawerHeader from "./DrawerHeader";
 import Input from "./input";
 import { darkOptions, lightOptions, themeOptions } from "./options";
-import Page from "./Page";
-import Select from "./Select";
-import SettingButton from "./SettingButton";
 import Settings, { settingsUpdated } from "./settings";
-import Switch from "./Switch";
 import { toast } from "./toast";
 import { useTheme } from "./use-theme";
 
@@ -298,9 +298,8 @@ export default function SettingsPage() {
   const buttons = useMemo(
     () => [
       {
-        name: soundString || "Default",
+        name: `Alarm sound: ${soundString || "Default"}`,
         onPress: changeSound,
-        label: "Alarm sound",
       },
       { name: "Export database", onPress: exportDatabase },
       { name: "Import database", onPress: () => setImporting(true) },
@@ -311,9 +310,15 @@ export default function SettingsPage() {
 
   const buttonsMarkup = useMemo(
     () =>
-      buttons
-        .filter(filter)
-        .map((button) => <SettingButton {...button} key={button.name} />),
+      buttons.filter(filter).map((button) => (
+        <Button
+          key={button.name}
+          style={{ alignSelf: "flex-start" }}
+          onPress={button.onPress}
+        >
+          {button.name}
+        </Button>
+      )),
     [buttons, filter]
   );
 
@@ -323,9 +328,8 @@ export default function SettingsPage() {
 
       <Page term={term} search={setTerm} style={{ flexGrow: 1 }}>
         <ScrollView style={{ marginTop: MARGIN, flex: 1 }}>
-          {switchesMarkup}
-          <View style={{ marginBottom: MARGIN }} />
           {selectsMarkup}
+          {switchesMarkup}
           {buttonsMarkup}
         </ScrollView>
       </Page>