feat(settings-screen): redesign

hoangvu12 · Feb 14, 2024 · a3a3da8 · a3a3da8
1 parent d9e0744
commit a3a3da8
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 15 deletions.
diff --git a/src/screens/settings/components/player-settings.tsx b/src/screens/settings/components/player-settings.tsx
@@ -30,24 +30,41 @@ const PlayerSettings = () => {
         Player
       </Text>
 
-      <View className="space-y-1">
-        <View className="flex flex-row items-center justify-between">
-          <Text weight="normal">Should ask for syncing</Text>
-
-          <Switch
-            value={shouldAskForSyncing}
-            onValueChange={setShouldAskForSyncing}
-          />
+      <View className="w-full space-y-4">
+        <View className="flex w-full flex-row items-center justify-between">
+          <View className="w-5/6">
+            <Text weight="normal">Should ask for syncing</Text>
+            <Text weight="light" className="text-gray-200">
+              Ask for syncing before playing any media
+            </Text>
+          </View>
+
+          <View>
+            <Switch
+              value={shouldAskForSyncing}
+              onValueChange={setShouldAskForSyncing}
+            />
+          </View>
         </View>
         <View className="flex flex-row items-center justify-between">
-          <Text weight="normal">Should sync adult</Text>
+          <View className="w-5/6">
+            <Text weight="normal">Should sync adult</Text>
+            <Text weight="light" className="text-gray-200">
+              Allow syncing adult content
+            </Text>
+          </View>
 
           <Switch value={shouldSyncAdult} onValueChange={setShouldSyncAdult} />
         </View>
         <View>
-          <Text weight="normal" className="mb-1">
-            Sync percentage ({Math.floor(syncPercentage * 100)}%)
-          </Text>
+          <View className="mb-2 w-full">
+            <Text weight="normal">
+              Sync percentage ({Math.floor(syncPercentage * 100)}%)
+            </Text>
+            <Text weight="light" className="text-gray-300">
+              Sync once the player progress reaches this percentage
+            </Text>
+          </View>
 
           <SyncPercentageSlider />
         </View>

diff --git a/src/screens/settings/screen.tsx b/src/screens/settings/screen.tsx
@@ -8,12 +8,12 @@ import PlayerSettings from './components/player-settings';
 
 const SettingsScreen = () => {
   return (
-    <View className="p-8">
-      <Text weight="semibold" className="mt-8 text-3xl">
+    <View className="p-4">
+      <Text weight="semibold" className="mt-4 text-3xl">
         Settings
       </Text>
 
-      <View className="mt-4 space-y-8">
+      <View className="mt-8 space-y-8">
         <View>
           <AppSettings />
         </View>