From c7a3ed35d3756ee33d516c189a192068114a3ccd Mon Sep 17 00:00:00 2001
From: Adrian Castro <22133246+castdrian@users.noreply.github.com>
Date: Tue, 26 Mar 2024 00:41:03 +0100
Subject: [PATCH] feat: prettier update button

---
 apps/expo/package.json                |  2 +-
 apps/expo/src/app/(tabs)/settings.tsx | 37 +++++++++++++++++++--------
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/apps/expo/package.json b/apps/expo/package.json
index c4c83bf..290d396 100644
--- a/apps/expo/package.json
+++ b/apps/expo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@movie-web/mobile",
-  "version": "0.0.9",
+  "version": "0.0.1",
   "private": true,
   "main": "index.js",
   "scripts": {
diff --git a/apps/expo/src/app/(tabs)/settings.tsx b/apps/expo/src/app/(tabs)/settings.tsx
index 56ead52..c76c6fc 100644
--- a/apps/expo/src/app/(tabs)/settings.tsx
+++ b/apps/expo/src/app/(tabs)/settings.tsx
@@ -1,10 +1,14 @@
 import type { SelectProps } from "tamagui";
 import React from "react";
-import { TouchableOpacity } from "react-native-gesture-handler";
+import { Platform } from "react-native";
 import * as Application from "expo-application";
 import * as Brightness from "expo-brightness";
 import * as Linking from "expo-linking";
-import { FontAwesome, MaterialIcons } from "@expo/vector-icons";
+import {
+  FontAwesome,
+  MaterialCommunityIcons,
+  MaterialIcons,
+} from "@expo/vector-icons";
 import { useToastController } from "@tamagui/toast";
 import {
   Adapt,
@@ -12,7 +16,6 @@ import {
   Select,
   Separator,
   Sheet,
-  Text,
   useTheme,
   View,
   XStack,
@@ -21,6 +24,7 @@ import {
 
 import type { ThemeStoreOption } from "~/stores/theme";
 import ScreenLayout from "~/components/layout/ScreenLayout";
+import { MWButton } from "~/components/ui/Button";
 import { MWSelect } from "~/components/ui/Select";
 import { MWSwitch } from "~/components/ui/Switch";
 import { checkForUpdate } from "~/lib/update";
@@ -36,6 +40,7 @@ const themeOptions: ThemeStoreOption[] = [
 ];
 
 export default function SettingsScreen() {
+  const theme = useTheme();
   const { gestureControls, setGestureControls, autoPlay, setAutoPlay } =
     usePlayerSettingsStore();
   const toastController = useToastController();
@@ -93,15 +98,27 @@ export default function SettingsScreen() {
               <MWSwitch.Thumb animation="quicker" />
             </MWSwitch>
           </XStack>
+          <XStack width={200} alignItems="center" gap="$4">
+            <Label minWidth={110}>
+              v{Application.nativeApplicationVersion}
+            </Label>
+            <Separator minHeight={20} vertical />
+            <MWButton
+              type="secondary"
+              icon={
+                <MaterialCommunityIcons
+                  name={Platform.select({ ios: "apple", android: "android" })}
+                  size={24}
+                  color={theme.buttonSecondaryText.val}
+                />
+              }
+              onPress={handleVersionPress}
+            >
+              Update
+            </MWButton>
+          </XStack>
         </YStack>
       </View>
-      <View justifyContent="center" alignItems="center">
-        <TouchableOpacity onPress={handleVersionPress}>
-          <Text fontSize={14} color="white">
-            v{Application.nativeApplicationVersion}
-          </Text>
-        </TouchableOpacity>
-      </View>
     </ScreenLayout>
   );
 }