[Glitch] Change to single opt-in during profile setup in onboarding in web UI

Port 0e9801443f to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/onboarding/profile.jsx

@@ -5,8 +5,8 @@ import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
 
-import { useDispatch } from 'react-redux';
 
+import { useDispatch } from 'react-redux';
 
 import { ReactComponent as AddPhotoAlternateIcon } from '@material-symbols/svg-600/outlined/add_photo_alternate.svg';
 import { ReactComponent as EditIcon } from '@material-symbols/svg-600/outlined/edit.svg';
@@ -33,7 +33,6 @@ export const Profile = () => {
   const [avatar, setAvatar] = useState(null);
   const [header, setHeader] = useState(null);
   const [discoverable, setDiscoverable] = useState(account.get('discoverable'));
-  const [indexable, setIndexable] = useState(account.get('indexable'));
   const [isSaving, setIsSaving] = useState(false);
   const [errors, setErrors] = useState();
   const avatarFileRef = createRef();
@@ -54,10 +53,6 @@ export const Profile = () => {
     setDiscoverable(e.target.checked);
   }, [setDiscoverable]);
 
-  const handleIndexableChange = useCallback(e => {
-    setIndexable(e.target.checked);
-  }, [setIndexable]);
-
   const handleAvatarChange = useCallback(e => {
     setAvatar(e.target?.files?.[0]);
   }, [setAvatar]);
@@ -78,12 +73,12 @@ export const Profile = () => {
       avatar,
       header,
       discoverable,
-      indexable,
+      indexable: discoverable,
     })).then(() => history.push('/start/follows')).catch(err => {
       setIsSaving(false);
       setErrors(err.response.data.details);
     });
-  }, [dispatch, displayName, note, avatar, header, discoverable, indexable, history]);
+  }, [dispatch, displayName, note, avatar, header, discoverable, history]);
 
   return (
     <>
@@ -141,17 +136,20 @@ export const Profile = () => {
               <textarea id='note' value={note} onChange={handleNoteChange} maxLength={500} />
             </div>
           </div>
+
+          <label className='app-form__toggle'>
+            <div className='app-form__toggle__label'>
+              <strong><FormattedMessage id='onboarding.profile.discoverable' defaultMessage='Make my profile discoverable' /></strong> <span className='recommended'><FormattedMessage id='recommended' defaultMessage='Recommended' /></span>
+              <span className='hint'><FormattedMessage id='onboarding.profile.discoverable_hint' defaultMessage='When you opt in to discoverability on Mastodon, your posts may appear in search results and trending, and your profile may be suggested to people with similar interests to you.' /></span>
             </div>
 
-        <label className='report-dialog-modal__toggle'>
+            <div className='app-form__toggle__toggle'>
+              <div>
                 <Toggle checked={discoverable} onChange={handleDiscoverableChange} />
-          <FormattedMessage id='onboarding.profile.discoverable' defaultMessage='Feature profile and posts in discovery algorithms' />
+              </div>
-        </label>
+            </div>
-
-        <label className='report-dialog-modal__toggle'>
-          <Toggle checked={indexable} onChange={handleIndexableChange} />
-          <FormattedMessage id='onboarding.profile.indexable' defaultMessage='Include public posts in search results' />
           </label>
+        </div>
 
         <div className='onboarding__footer'>
           <Button block onClick={handleSubmit} disabled={isSaving}>{isSaving ? <LoadingIndicator /> : <FormattedMessage id='onboarding.profile.save_and_continue' defaultMessage='Save and continue' />}</Button>

app/javascript/flavours/glitch/styles/forms.scss

@@ -1224,10 +1224,6 @@ code {
 }
 
 .app-form {
-  & > * {
-    margin-bottom: 16px;
-  }
-
   &__avatar-input,
   &__header-input {
     display: block;
@@ -1292,4 +1288,49 @@ code {
   &__header-input {
     aspect-ratio: 580/193;
   }
+
+  &__toggle {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    color: $darker-text-color;
+    font-size: 14px;
+    line-height: 20px;
+
+    .icon {
+      flex: 0 0 auto;
+    }
+
+    .icon {
+      width: 24px;
+      height: 24px;
+    }
+
+    &__label {
+      flex: 1 1 auto;
+
+      strong {
+        color: $primary-text-color;
+        font-weight: 600;
+      }
+
+      .recommended {
+        position: absolute;
+        margin: 0 4px;
+        margin-top: -2px;
+      }
+    }
+
+    &__toggle {
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+    }
+
+    &__toggle > div {
+      display: flex;
+      border-inline-start: 1px solid lighten($ui-base-color, 8%);
+      padding-inline-start: 16px;
+    }
+  }
 }