From 5bbb5f580676c86dabcd8bd2e56d0f99ecb86a7b Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Mon, 20 May 2024 20:08:29 -0700
Subject: [PATCH] use same visuals for notification sounds setting as the allow
 messages from (#4141)

---
 src/screens/Messages/Settings.tsx | 56 ++++++++++++++++++++++---------
 1 file changed, 41 insertions(+), 15 deletions(-)

diff --git a/src/screens/Messages/Settings.tsx b/src/screens/Messages/Settings.tsx
index a9df2456..a27c961f 100644
--- a/src/screens/Messages/Settings.tsx
+++ b/src/screens/Messages/Settings.tsx
@@ -35,7 +35,7 @@ export function MessagesSettingsScreen({}: Props) {
     },
   })
 
-  const onSelectItem = useCallback(
+  const onSelectMessagesFrom = useCallback(
     (keys: string[]) => {
       const key = keys[0]
       if (!key) return
@@ -44,6 +44,15 @@ export function MessagesSettingsScreen({}: Props) {
     [updateDeclaration],
   )
 
+  const onSelectSoundSetting = useCallback(
+    (keys: string[]) => {
+      const key = keys[0]
+      if (!key) return
+      setPref('playSoundChat', key === 'enabled')
+    },
+    [setPref],
+  )
+
   return (
     <CenteredView sideBorders style={a.h_full_vh}>
       <ViewHeader title={_(msg`Settings`)} showOnDesktop showBorder />
@@ -58,7 +67,7 @@ export function MessagesSettingsScreen({}: Props) {
             (profile?.associated?.chat?.allowIncoming as AllowIncoming) ??
               'following',
           ]}
-          onChange={onSelectItem}>
+          onChange={onSelectMessagesFrom}>
           <View>
             <Toggle.Item
               name="all"
@@ -91,19 +100,36 @@ export function MessagesSettingsScreen({}: Props) {
         </Toggle.Group>
         {isNative && (
           <>
-            <Divider style={[a.my_lg]} />
-            <Toggle.Item
-              name="playSoundChat"
-              label={_(msg`Play notification sounds`)}
-              value={preferences.playSoundChat}
-              onChange={() => {
-                setPref('playSoundChat', !preferences.playSoundChat)
-              }}>
-              <Toggle.Checkbox />
-              <Toggle.LabelText>
-                <Trans>Play notification sounds</Trans>
-              </Toggle.LabelText>
-            </Toggle.Item>
+            <Divider />
+            <Text style={[a.text_lg, a.font_bold]}>
+              <Trans>Notification Sounds</Trans>
+            </Text>
+            <Toggle.Group
+              label={_(msg`Notification sounds`)}
+              type="radio"
+              values={[preferences.playSoundChat ? 'enabled' : 'disabled']}
+              onChange={onSelectSoundSetting}>
+              <View>
+                <Toggle.Item
+                  name="enabled"
+                  label={_(msg`Enabled`)}
+                  style={[a.justify_between, a.py_sm]}>
+                  <Toggle.LabelText>
+                    <Trans>Enabled</Trans>
+                  </Toggle.LabelText>
+                  <Toggle.Radio />
+                </Toggle.Item>
+                <Toggle.Item
+                  name="disabled"
+                  label={_(msg`Disabled`)}
+                  style={[a.justify_between, a.py_sm]}>
+                  <Toggle.LabelText>
+                    <Trans>Disabled</Trans>
+                  </Toggle.LabelText>
+                  <Toggle.Radio />
+                </Toggle.Item>
+              </View>
+            </Toggle.Group>
           </>
         )}
       </View>