feat: collection panel styles

RSSNext · Jan 21, 2025 · 9b5f4c2 · 9b5f4c2
1 parent 7c1fa69
commit 9b5f4c2
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 24 deletions.
diff --git a/apps/mobile/src/modules/feed-drawer/collection-panel.tsx b/apps/mobile/src/modules/feed-drawer/collection-panel.tsx
@@ -1,15 +1,9 @@
 import { cn } from "@follow/utils"
-import {
-  Image,
-  ScrollView,
-  StyleSheet,
-  TouchableOpacity,
-  useWindowDimensions,
-  View,
-} from "react-native"
+import { Image, ScrollView, StyleSheet, TouchableOpacity, View } from "react-native"
 import { useSafeAreaInsets } from "react-native-safe-area-context"
 
 import { FallbackIcon } from "@/src/components/ui/icon/fallback-icon"
+import { Logo } from "@/src/components/ui/logo"
 import type { ViewDefinition } from "@/src/constants/views"
 import { views } from "@/src/constants/views"
 import { useList } from "@/src/store/list/hooks"
@@ -18,23 +12,26 @@ import { useAllListSubscription } from "@/src/store/subscription/hooks"
 import { selectCollection, useSelectedCollection } from "./atoms"
 
 export const CollectionPanel = () => {
-  const winDim = useWindowDimensions()
   const lists = useAllListSubscription()
 
   const insets = useSafeAreaInsets()
   return (
     <View
       className="bg-quaternary-system-fill dark:bg-tertiary-system-background"
-      style={{ width: Math.max(50, winDim.width * 0.15) }}
+      style={{ width: 65 }}
     >
       <ScrollView
-        contentContainerClassName="flex py-3 gap-3"
-        contentContainerStyle={{ paddingTop: insets.top, paddingBottom: insets.bottom }}
+        contentContainerClassName="flex gap-4 px-3.5"
+        contentContainerStyle={{ paddingTop: insets.top + 10, paddingBottom: insets.bottom }}
       >
+        <View className="flex-1 items-center">
+          <Logo width={37} height={37} color="#222" />
+        </View>
+        <View style={styles.hairline} className="bg-opaque-separator mx-1" />
         {views.map((viewDef) => (
           <ViewButton key={viewDef.name} viewDef={viewDef} />
         ))}
-        <View style={styles.hairline} className="bg-opaque-separator mx-4" />
+        <View style={styles.hairline} className="bg-opaque-separator mx-1" />
         {lists.map((listId) => (
           <ListButton key={listId} listId={listId} />
         ))}
@@ -56,7 +53,7 @@ const ViewButton = ({ viewDef }: { viewDef: ViewDefinition }) => {
   return (
     <TouchableOpacity
       className={cn(
-        "mx-3 flex aspect-square items-center justify-center rounded-lg p-3",
+        "flex aspect-square items-center justify-center rounded-full p-3",
         isActive ? "bg-secondary-system-fill" : "bg-system-background",
       )}
       onPress={() =>
@@ -65,8 +62,9 @@ const ViewButton = ({ viewDef }: { viewDef: ViewDefinition }) => {
           viewId: viewDef.view,
         })
       }
+      style={{ backgroundColor: viewDef.activeColor }}
     >
-      <viewDef.icon key={viewDef.name} color={viewDef.activeColor} />
+      <viewDef.icon key={viewDef.name} color={"#fff"} />
     </TouchableOpacity>
   )
 }
@@ -80,7 +78,7 @@ const ListButton = ({ listId }: { listId: string }) => {
   return (
     <TouchableOpacity
       className={cn(
-        "mx-3 flex aspect-square items-center justify-center rounded-lg p-3",
+        "flex aspect-square items-center justify-center overflow-hidden rounded-full p-3",
         isActive ? "bg-system-fill" : "bg-system-background",
       )}
       onPress={() =>
@@ -90,13 +88,11 @@ const ListButton = ({ listId }: { listId: string }) => {
         })
       }
     >
-      <View className="overflow-hidden rounded">
-        {list.image ? (
-          <Image source={{ uri: list.image, width: 24, height: 24 }} resizeMode="cover" />
-        ) : (
-          <FallbackIcon title={list.title} size={24} />
-        )}
-      </View>
+      {list.image ? (
+        <Image source={{ uri: list.image, width: 41, height: 41 }} resizeMode="cover" />
+      ) : (
+        <FallbackIcon title={list.title} size={41} />
+      )}
     </TouchableOpacity>
   )
 }
diff --git a/apps/mobile/src/modules/feed-drawer/drawer.tsx b/apps/mobile/src/modules/feed-drawer/drawer.tsx
@@ -46,7 +46,7 @@ export const FeedDrawer = ({ children }: PropsWithChildren) => {
   return (
     <Drawer
       open={isDrawerOpen}
-      drawerStyle={{ width: Math.min(400, winDim.width * 0.85) }}
+      drawerStyle={{ width: winDim.width }}
       onOpen={openDrawer}
       onClose={closeDrawer}
       renderDrawerContent={renderDrawerContent}