Merge pull request #107 from 7w1/reset-timezone-fixes

fixes #103 adds a reset and relabels system button

Author: 7w1

src/app/features/settings/account/TimezoneEditor.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useState, useEffect, ChangeEvent } from 'react';
-import { Box, IconButton, Icon, Icons, Input } from 'folds';
+import { Box, IconButton, Button, Icon, Icons, Input, Text } from 'folds';
 import { SettingTile } from '$components/setting-tile';
 
 interface IntlWithSupportedValues {
@@ -26,6 +26,11 @@ export function TimezoneEditor({ current, onSave }: TimezoneEditorProps) {
     onSave(systemTz);
   };
 
+  const handleReset = () => {
+    setVal('');
+    onSave('');
+  };
+
   const handleManualSave = () => {
     const trimmed = val.trim().slice(0, 64);
     const matchedZone = zones.find((z) => z.toLowerCase() === trimmed.toLowerCase());
@@ -64,14 +69,25 @@ export function TimezoneEditor({ current, onSave }: TimezoneEditorProps) {
               </option>
             ))}
           </datalist>
-          <IconButton
-            size="300"
+          <Button
             variant="Secondary"
+            fill="Soft"
+            size="300"
+            radii="300"
+            outlined
             onClick={handleSync}
+          >
+            <Text size="B300">System</Text>
+          </Button>
+          <IconButton
+            size="300"
+            variant="Critical"
+            fill="None"
+            onClick={handleReset}
             radii="300"
-            title="Sync with system"
+            title="Reset"
           >
-            <Icon src={Icons.Reload} size="100" />
+            <Icon src={Icons.Cross} size="100" />
           </IconButton>
         </Box>
       }