use same visuals for notification sounds setting as the allow messages from (#4141)

1 files changed, 41 insertions, 15 deletions

diff --git a/src/screens/Messages/Settings.tsx b/src/screens/Messages/Settings.tsx
index a9df2456d..a27c961f8 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>