Nicer app icon screen (#6972)

* wip exploration

* list format instead of grid

* fix normalising default name

* adjust margins

* Rework the app icon link

* Decrease app icon size

* Adjust some spacing

* Move some things around to fix web errors

* Fix pathname

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>
Co-authored-by: Eric Bailey <git@esb.lol>

1 files changed, 29 insertions, 0 deletions

diff --git a/src/screens/Settings/AppIconSettings/SettingsListItem.tsx b/src/screens/Settings/AppIconSettings/SettingsListItem.tsx
new file mode 100644
index 000000000..add87b1d7
--- /dev/null
+++ b/src/screens/Settings/AppIconSettings/SettingsListItem.tsx
@@ -0,0 +1,29 @@
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {AppIconImage} from '#/screens/Settings/AppIconSettings/AppIconImage'
+import {useCurrentAppIcon} from '#/screens/Settings/AppIconSettings/useCurrentAppIcon'
+import * as SettingsList from '#/screens/Settings/components/SettingsList'
+import {atoms as a} from '#/alf'
+import {Shapes_Stroke2_Corner0_Rounded as Shapes} from '#/components/icons/Shapes'
+
+export function SettingsListItem() {
+  const {_} = useLingui()
+  const icon = useCurrentAppIcon()
+
+  return (
+    <SettingsList.LinkItem
+      to="/settings/app-icon"
+      label={_(msg`App Icon`)}
+      contentContainerStyle={[a.align_start]}>
+      <SettingsList.ItemIcon icon={Shapes} />
+      <View style={[a.flex_1]}>
+        <SettingsList.ItemText style={[a.pt_xs, a.pb_md]}>
+          <Trans>App Icon</Trans>
+        </SettingsList.ItemText>
+        <AppIconImage icon={icon} size={60} />
+      </View>
+    </SettingsList.LinkItem>
+  )
+}