circle goes in square hole 🗣️ (APPEARANCE SETTINGS 🤯)

src/screens/Settings/AppearanceSettings.tsx

···
   type NativeStackScreenProps,
 } from '#/lib/routes/types'
 import {isNative} from '#/platform/detection'
+import {
+  useEnableSquareAvatars,
+  useSetEnableSquareAvatars,
+} from '#/state/preferences/enable-square-avatars'
+import {
+  useEnableSquareButtons,
+  useSetEnableSquareButtons,
+} from '#/state/preferences/enable-square-buttons'
 import {useKawaiiMode, useSetKawaiiMode} from '#/state/preferences/kawaii'
 import {useSetThemePrefs, useThemePrefs} from '#/state/shell'
 import {SettingsListItem as AppIconSettingsListItem} from '#/screens/Settings/AppIconSettings/SettingsListItem'
···
 import * as SegmentedControl from '#/components/forms/SegmentedControl'
 import {Slider} from '#/components/forms/Slider'
 import * as Toggle from '#/components/forms/Toggle'
+import {Circle_And_Square_Stroke1_Corner0_Rounded_Filled as SquareIcon} from '#/components/icons/CircleAndSquare'
 import {type Props as SVGIconProps} from '#/components/icons/common'
 import {Moon_Stroke2_Corner0_Rounded as MoonIcon} from '#/components/icons/Moon'
 import {Phone_Stroke2_Corner0_Rounded as PhoneIcon} from '#/components/icons/Phone'
···
 
   const kawaiiMode = useKawaiiMode()
   const setKawaiiMode = useSetKawaiiMode()
+
+  const enableSquareAvatars = useEnableSquareAvatars()
+  const setEnableSquareAvatars = useSetEnableSquareAvatars()
+
+  const enableSquareButtons = useEnableSquareButtons()
+  const setEnableSquareButtons = useSetEnableSquareButtons()
 
   const onChangeAppearance = useCallback(
     (value: 'light' | 'system' | 'dark') => {
···
                   style={[a.w_full]}>
                   <Toggle.LabelText style={[a.flex_1]}>
                     <Trans>Enable kawaii logo</Trans>
+                  </Toggle.LabelText>
+                  <Toggle.Platform />
+                </Toggle.Item>
+              </SettingsList.Group>
+
+              <SettingsList.Divider />
+
+              <SettingsList.Group contentContainerStyle={[a.gap_sm]}>
+                <SettingsList.ItemIcon icon={SquareIcon} />
+                <SettingsList.ItemText>
+                  <Trans>Shapes</Trans>
+                </SettingsList.ItemText>
+                <Toggle.Item
+                  name="enable_square_avatars"
+                  label={_(msg`Enable square avatars`)}
+                  value={enableSquareAvatars}
+                  onChange={value => setEnableSquareAvatars(value)}
+                  style={[a.w_full]}>
+                  <Toggle.LabelText style={[a.flex_1]}>
+                    <Trans>Enable square avatars</Trans>
+                  </Toggle.LabelText>
+                  <Toggle.Platform />
+                </Toggle.Item>
+
+                <Toggle.Item
+                  name="enable_square_buttons"
+                  label={_(msg`Enable square buttons`)}
+                  value={enableSquareButtons}
+                  onChange={value => setEnableSquareButtons(value)}
+                  style={[a.w_full]}>
+                  <Toggle.LabelText style={[a.flex_1]}>
+                    <Trans>Enable square buttons</Trans>
                   </Toggle.LabelText>
                   <Toggle.Platform />
                 </Toggle.Item>

src/screens/Settings/DeerSettings.tsx

···
 } from '#/state/preferences/direct-fetch-records'
 import {
   useDisableFollowedByMetrics,
-  useSetDisableFollowedByMetrics
+  useSetDisableFollowedByMetrics,
 } from '#/state/preferences/disable-followed-by-metrics'
 import {
   useDisableFollowersMetrics,
-  useSetDisableFollowersMetrics
+  useSetDisableFollowersMetrics,
 } from '#/state/preferences/disable-followers-metrics'
 import {
   useDisableFollowingMetrics,
-  useSetDisableFollowingMetrics
+  useSetDisableFollowingMetrics,
 } from '#/state/preferences/disable-following-metrics'
 import {
   useDisableLikesMetrics,
···
   useSetDisableViaRepostNotification,
 } from '#/state/preferences/disable-via-repost-notification'
 import {
-  useEnableSquareAvatars,
-  useSetEnableSquareAvatars,
-} from '#/state/preferences/enable-square-avatars'
-import {
-  useEnableSquareButtons,
-  useSetEnableSquareButtons,
-} from '#/state/preferences/enable-square-buttons'
-import {
   useSetShowExternalShareButtons,
   useShowExternalShareButtons,
 } from '#/state/preferences/external-share-buttons'
···
 
   const hideSimilarAccountsRecomm = useHideSimilarAccountsRecomm()
   const setHideSimilarAccountsRecomm = useSetHideSimilarAccountsRecomm()
-
-  const enableSquareAvatars = useEnableSquareAvatars()
-  const setEnableSquareAvatars = useSetEnableSquareAvatars()
-
-  const enableSquareButtons = useEnableSquareButtons()
-  const setEnableSquareButtons = useSetEnableSquareButtons()
 
   const disableVerifyEmailReminder = useDisableVerifyEmailReminder()
   const setDisableVerifyEmailReminder = useSetDisableVerifyEmailReminder()
···
             </Toggle.Item>
 
             <Toggle.Item
-              name="enable_square_avatars"
-              label={_(msg`Enable square avatars`)}
-              value={enableSquareAvatars}
-              onChange={value => setEnableSquareAvatars(value)}
-              style={[a.w_full]}>
-              <Toggle.LabelText style={[a.flex_1]}>
-                <Trans>Enable square avatars</Trans>
-              </Toggle.LabelText>
-              <Toggle.Platform />
-            </Toggle.Item>
-
-            <Toggle.Item
-              name="enable_square_buttons"
-              label={_(msg`Enable square buttons`)}
-              value={enableSquareButtons}
-              onChange={value => setEnableSquareButtons(value)}
-              style={[a.w_full]}>
-              <Toggle.LabelText style={[a.flex_1]}>
-                <Trans>Enable square buttons</Trans>
-              </Toggle.LabelText>
-              <Toggle.Platform />
-            </Toggle.Item>
-
-            <Toggle.Item
               name="disable_verify_email_reminder"
               label={_(msg`Disable verify email reminder`)}
               value={disableVerifyEmailReminder}
···
             </Toggle.Item>
             <Admonition type="warning" style={[a.flex_1]}>
               <Trans>
-                This only gets rid of the reminder on app launch,
-                useful if your PDS does not have email verification setup.\nThis
-                does NOT give access to features locked behind email verification.
+                This only gets rid of the reminder on app launch, useful if your
+                PDS does not have email verification setup.\nThis does NOT give
+                access to features locked behind email verification.
               </Trans>
             </Admonition>
           </SettingsList.Group>