Updates stories toggle in settings

_locales/en/messages.json

@@ -5183,6 +5183,22 @@
     "message": "Devices",
     "description": "Label for Device list in call settings pane"
   },
+  "Preferences__turn-stories-on": {
+    "message": "Turn on stories",
+    "description": "Label to enable stories"
+  },
+  "Preferences__turn-stories-off": {
+    "message": "Turn off stories",
+    "description": "Label to disable stories"
+  },
+  "Preferences__turn-stories-off--action": {
+    "message": "Turn off",
+    "description": "Label in confirmation modal to disable stories"
+  },
+  "Preferences__turn-stories-off--body": {
+    "message": "You will no longer be able to share or view stories.",
+    "description": "Confirmation modal body for disabling stories"
+  },
   "DialogUpdate--version-available": {
     "message": "Update to version $version$ available",
     "description": "Tooltip for new update available"

stylesheets/components/Preferences.scss

@@ -251,4 +251,8 @@
       );
     }
   }
+
+  &__stories-off {
+    min-width: 140px;
+  }
 }

ts/components/Preferences.tsx

@@ -290,6 +290,7 @@ export const Preferences = ({
   const zoomSelectId = useUniqueId();
 
   const [confirmDelete, setConfirmDelete] = useState(false);
+  const [confirmStoriesOff, setConfirmStoriesOff] = useState(false);
   const [page, setPage] = useState<Page>(Page.General);
   const [showSyncFailed, setShowSyncFailed] = useState(false);
   const [nowSyncing, setNowSyncing] = useState(false);
@@ -976,23 +977,22 @@ export const Preferences = ({
                 </label>
               }
               right={
-                <Select
-                  id={storiesId}
-                  onChange={value => {
-                    onHasStoriesEnabledChanged(value === 'true');
-                  }}
-                  options={[
-                    {
-                      text: i18n('on'),
-                      value: 'true',
-                    },
-                    {
-                      text: i18n('off'),
-                      value: 'false',
-                    },
-                  ]}
-                  value={String(hasStoriesEnabled)}
-                />
+                hasStoriesEnabled ? (
+                  <Button
+                    className="Preferences__stories-off"
+                    onClick={() => setConfirmStoriesOff(true)}
+                    variant={ButtonVariant.SecondaryDestructive}
+                  >
+                    {i18n('Preferences__turn-stories-off')}
+                  </Button>
+                ) : (
+                  <Button
+                    onClick={() => onHasStoriesEnabledChanged(true)}
+                    variant={ButtonVariant.Secondary}
+                  >
+                    {i18n('Preferences__turn-stories-on')}
+                  </Button>
+                )
               }
             />
           </SettingsRow>
@@ -1038,6 +1038,24 @@ export const Preferences = ({
             {i18n('deleteAllDataBody')}
           </ConfirmationDialog>
         ) : null}
+        {confirmStoriesOff ? (
+          <ConfirmationDialog
+            dialogName="Preference.turnStoriesOff"
+            actions={[
+              {
+                action: () => onHasStoriesEnabledChanged(false),
+                style: 'negative',
+                text: i18n('Preferences__turn-stories-off--action'),
+              },
+            ]}
+            i18n={i18n}
+            onClose={() => {
+              setConfirmStoriesOff(false);
+            }}
+          >
+            {i18n('Preferences__turn-stories-off--body')}
+          </ConfirmationDialog>
+        ) : null}
       </>
     );
   } else if (page === Page.ChatColor) {