From 20be007d0cecc0ce5a98eb79b805afa711b386f5 Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Sat, 5 Apr 2025 21:32:35 +0800
Subject: [PATCH] fix(mobile): update icon background colors in settings
 screens

- Changed icon background colors for various settings navigation links to enhance visual consistency.
- Updated background color for Actions and Invitations screens to match new design specifications.

Signed-off-by: Innei <tukon479@gmail.com>
---
 .../src/modules/settings/SettingsList.tsx     | 24 +++++++++----------
 .../src/modules/settings/routes/Actions.tsx   |  2 +-
 .../modules/settings/routes/Invitations.tsx   | 10 +++++---
 .../src/modules/settings/routes/Lists.tsx     |  2 +-
 pnpm-lock.yaml                                |  3 ---
 5 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/apps/mobile/src/modules/settings/SettingsList.tsx b/apps/mobile/src/modules/settings/SettingsList.tsx
index 31dd16ea1..c713ca842 100644
--- a/apps/mobile/src/modules/settings/SettingsList.tsx
+++ b/apps/mobile/src/modules/settings/SettingsList.tsx
@@ -29,7 +29,6 @@ import { useNavigation } from "@/src/lib/navigation/hooks"
 import type { Navigation } from "@/src/lib/navigation/Navigation"
 import { InvitationScreen } from "@/src/screens/(modal)/invitation"
 import { useRole, useWhoami } from "@/src/store/user/hooks"
-import { accentColor } from "@/src/theme/colors"
 
 import { AboutScreen } from "./routes/About"
 import { AccountScreen } from "./routes/Account"
@@ -60,7 +59,7 @@ const SettingGroupNavigationLinks: GroupNavigationLink[] = [
     onPress: ({ navigation }) => {
       navigation.pushControllerView(GeneralScreen)
     },
-    iconBackgroundColor: "#F59E0B",
+    iconBackgroundColor: "#FDA4AF",
   },
   {
     label: "titles.notifications",
@@ -68,7 +67,7 @@ const SettingGroupNavigationLinks: GroupNavigationLink[] = [
     onPress: ({ navigation }) => {
       navigation.pushControllerView(NotificationsScreen)
     },
-    iconBackgroundColor: "#FBBF24",
+    iconBackgroundColor: "#FCA5A5",
     todo: true,
     anonymous: false,
   },
@@ -78,7 +77,7 @@ const SettingGroupNavigationLinks: GroupNavigationLink[] = [
     onPress: ({ navigation }) => {
       navigation.pushControllerView(AppearanceScreen)
     },
-    iconBackgroundColor: "#FCD34D",
+    iconBackgroundColor: "#C4B5FD",
   },
   {
     label: "titles.data_control",
@@ -86,7 +85,7 @@ const SettingGroupNavigationLinks: GroupNavigationLink[] = [
     onPress: ({ navigation }) => {
       navigation.pushControllerView(DataScreen)
     },
-    iconBackgroundColor: "#CBAD6D",
+    iconBackgroundColor: "#93C5FD",
     anonymous: false,
   },
   {
@@ -95,7 +94,7 @@ const SettingGroupNavigationLinks: GroupNavigationLink[] = [
     onPress: ({ navigation }) => {
       navigation.pushControllerView(AccountScreen)
     },
-    iconBackgroundColor: "#d08700",
+    iconBackgroundColor: "#FDBA74",
     anonymous: false,
   },
 ]
@@ -108,7 +107,7 @@ const BetaGroupNavigationLinks: GroupNavigationLink[] = [
       navigation.pushControllerView(InvitationsScreen)
     },
 
-    iconBackgroundColor: accentColor,
+    iconBackgroundColor: "#F9A8D4",
     anonymous: false,
   },
 ]
@@ -120,7 +119,7 @@ const DataGroupNavigationLinks: GroupNavigationLink[] = [
     onPress: ({ navigation }) => {
       navigation.pushControllerView(ActionsScreen)
     },
-    iconBackgroundColor: "#059669",
+    iconBackgroundColor: "#D8B4FE",
     anonymous: false,
     trialNotAllowed: true,
   },
@@ -131,7 +130,7 @@ const DataGroupNavigationLinks: GroupNavigationLink[] = [
     onPress: ({ navigation }) => {
       navigation.pushControllerView(FeedsScreen)
     },
-    iconBackgroundColor: "#10B981",
+    iconBackgroundColor: "#FDE68A",
     todo: true,
     anonymous: false,
     trialNotAllowed: true,
@@ -142,8 +141,7 @@ const DataGroupNavigationLinks: GroupNavigationLink[] = [
     onPress: ({ navigation }) => {
       navigation.pushControllerView(ListsScreen)
     },
-    iconBackgroundColor: "#34D399",
-    // todo: true,
+    iconBackgroundColor: "#7DD3FC",
     anonymous: false,
     trialNotAllowed: true,
   },
@@ -156,7 +154,7 @@ const PrivacyGroupNavigationLinks: GroupNavigationLink[] = [
     onPress: ({ navigation }) => {
       navigation.pushControllerView(PrivacyScreen)
     },
-    iconBackgroundColor: "#EF4444",
+    iconBackgroundColor: "#A5B4FC",
   },
   {
     label: "titles.about",
@@ -164,7 +162,7 @@ const PrivacyGroupNavigationLinks: GroupNavigationLink[] = [
     onPress: ({ navigation }) => {
       navigation.pushControllerView(AboutScreen)
     },
-    iconBackgroundColor: "#F87181",
+    iconBackgroundColor: "#FCD34D",
   },
 ]
 
diff --git a/apps/mobile/src/modules/settings/routes/Actions.tsx b/apps/mobile/src/modules/settings/routes/Actions.tsx
index 2c13dc5c3..c3e563de8 100644
--- a/apps/mobile/src/modules/settings/routes/Actions.tsx
+++ b/apps/mobile/src/modules/settings/routes/Actions.tsx
@@ -57,7 +57,7 @@ export const ActionsScreen = () => {
             title={t("titles.actions")}
             description={t("actions.info")}
             icon={<Magic2CuteFiIcon height={40} width={40} color="#fff" />}
-            iconBackgroundColor="#059669"
+            iconBackgroundColor="#D8B4FE"
           />
         </GroupedInsetListCard>
       </View>
diff --git a/apps/mobile/src/modules/settings/routes/Invitations.tsx b/apps/mobile/src/modules/settings/routes/Invitations.tsx
index fefe2240e..9152300fe 100644
--- a/apps/mobile/src/modules/settings/routes/Invitations.tsx
+++ b/apps/mobile/src/modules/settings/routes/Invitations.tsx
@@ -71,13 +71,15 @@ export const InvitationsScreen: NavigationControllerView = () => {
           <GroupedInformationCell
             title={t("titles.invitations")}
             icon={<LoveCuteFiIcon height={40} width={40} color="#fff" />}
-            iconBackgroundColor={accentColor}
+            iconBackgroundColor={"#F9A8D4"}
           >
             <Trans
               ns="settings"
               i18nKey="invitation.earlyAccess"
               parent={({ children }: { children: React.ReactNode }) => (
-                <Text className="text-label mt-3 text-base leading-tight">{children}</Text>
+                <Text className="text-label mt-3 text-left text-base leading-tight">
+                  {children}
+                </Text>
               )}
               components={{ strong: <Text className="font-bold" /> }}
             />
@@ -85,7 +87,9 @@ export const InvitationsScreen: NavigationControllerView = () => {
               ns="settings"
               i18nKey="invitation.generateCost"
               parent={({ children }: { children: React.ReactNode }) => (
-                <Text className="text-label mt-3 text-base leading-tight">{children}</Text>
+                <Text className="text-label mt-3 text-left text-base leading-tight">
+                  {children}
+                </Text>
               )}
               values={{
                 INVITATION_PRICE: serverConfigs?.INVITATION_PRICE,
diff --git a/apps/mobile/src/modules/settings/routes/Lists.tsx b/apps/mobile/src/modules/settings/routes/Lists.tsx
index d2f4f07c1..f6a017acf 100644
--- a/apps/mobile/src/modules/settings/routes/Lists.tsx
+++ b/apps/mobile/src/modules/settings/routes/Lists.tsx
@@ -58,7 +58,7 @@ export const ListsScreen = () => {
             title={t("titles.lists")}
             description={t("lists.info")}
             icon={<RadaCuteFiIcon height={40} width={40} color="#fff" />}
-            iconBackgroundColor="#34D399"
+            iconBackgroundColor="#7DD3FC"
           />
         </GroupedInsetListCard>
       </View>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dcc5ef883..1198f1ba3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -763,9 +763,6 @@ importers:
       '@expo/react-native-action-sheet':
         specifier: 4.1.1
         version: 4.1.1(react@18.3.1)
-      '@expo/vector-icons':
-        specifier: 14.0.4
-        version: 14.0.4
       '@follow/components':
         specifier: workspace:*
         version: link:../../packages/components