Styling enhancement for name chips, and overall paddings

ephemeraHQ · Jan 29, 2025 · 416ad8d · 416ad8d
1 parent 5645649
commit 416ad8d
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 46 deletions.
diff --git a/features/profiles/components/social-names.tsx b/features/profiles/components/social-names.tsx
@@ -44,7 +44,6 @@ export function SocialNames({ socials }: ISocialNamesProps) {
   ) => {
     return items?.map((item) => (
       <Chip
-        isSelected
         key={getValue(item)}
         name={getValue(item)}
         onPress={() => handleNamePress(getValue(item))}
@@ -53,7 +52,7 @@ export function SocialNames({ socials }: ISocialNamesProps) {
   };
 
   return (
-    <>
+    <VStack style={{ paddingVertical: theme.spacing.sm }}>
       <Text>{translate("profile.names")}</Text>
       <HStack style={themed($chipContainer)}>
         {renderSocialChips(socials.userNames ?? [], (item) => item.name)}
@@ -65,18 +64,12 @@ export function SocialNames({ socials }: ISocialNamesProps) {
           (item) => item.domain!
         )}
       </HStack>
-    </>
+    </VStack>
   );
 }
 
 const $chipContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
   flexWrap: "wrap",
   gap: spacing.xs,
-  paddingVertical: spacing.sm,
-});
-
-const $chip: ThemedStyle<ViewStyle> = ({ colors, borderRadius }) => ({
-  backgroundColor: colors.background.surface,
-  borderColor: colors.border.subtle,
-  borderRadius: borderRadius.xs,
+  paddingTop: spacing.sm,
 });
diff --git a/features/profiles/profile.screen.tsx b/features/profiles/profile.screen.tsx
@@ -260,42 +260,38 @@ export function ProfileScreen() {
         </VStack>
 
         {isMyProfile && (
-          <View>
-            <VStack style={[themed($section), themed($borderTop)]}>
-              <SettingsList
-                editMode={editMode}
-                rows={[
-                  ...(notificationsPermissionStatus !== "granted"
-                    ? [
-                        {
-                          label: translate("turn_on_notifications"),
-                          onPress: requestPermission,
-                        },
-                      ]
-                    : []),
-                  {
-                    label: translate("profile.settings.archive"),
-                    onPress: () => {
-                      router.navigate("Blocked");
-                    },
+          <VStack style={[themed($section), themed($borderTop)]}>
+            <SettingsList
+              editMode={editMode}
+              rows={[
+                ...(notificationsPermissionStatus !== "granted"
+                  ? [
+                      {
+                        label: translate("turn_on_notifications"),
+                        onPress: requestPermission,
+                      },
+                    ]
+                  : []),
+                {
+                  label: translate("profile.settings.archive"),
+                  onPress: () => {
+                    router.navigate("Blocked");
                   },
-                  /*{
-                    label: translate("profile.settings.keep_messages"),
-                    value: "Forever",
-                    onValueChange: () => {},
-                  },*/
-                  {
-                    label: translate("log_out"),
-                    isWarning: true,
-                    onPress: () =>
-                      showDisconnectActionSheet(
-                        theme.isDark ? "dark" : "light"
-                      ),
-                  },
-                ]}
-              />
-            </VStack>
-          </View>
+                },
+                /*{
+                  label: translate("profile.settings.keep_messages"),
+                  value: "Forever",
+                  onValueChange: () => {},
+                },*/
+                {
+                  label: translate("log_out"),
+                  isWarning: true,
+                  onPress: () =>
+                    showDisconnectActionSheet(theme.isDark ? "dark" : "light"),
+                },
+              ]}
+            />
+          </VStack>
         )}
       </VStack>
     </Screen>
@@ -315,7 +311,6 @@ const $section: ThemedStyle<ViewStyle> = ({ spacing, colors }) => ({
 const $borderTop: ThemedStyle<ViewStyle> = ({ spacing, colors }) => ({
   borderTopWidth: spacing.xxs,
   borderTopColor: colors.background.sunken,
-  paddingVertical: spacing.lg,
 });
 
 const $headerRight: ThemedStyle<ViewStyle> = ({ spacing }) => ({