From 34a5f067817a85c43902ed408436f6670e827403 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Tue, 19 Sep 2023 22:07:14 +0100
Subject: [PATCH] make feed button white

---
 apps/expo/scripts/pre-install.sh          |  2 +-
 apps/expo/src/app/(tabs)/_layout.tsx      | 12 ++-----
 apps/expo/src/components/feeds-button.tsx | 41 +++++++++++++++++++----
 package.json                              |  2 +-
 4 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/apps/expo/scripts/pre-install.sh b/apps/expo/scripts/pre-install.sh
index 4bf155e2d..a8c5b2e84 100755
--- a/apps/expo/scripts/pre-install.sh
+++ b/apps/expo/scripts/pre-install.sh
@@ -1,5 +1,5 @@
 #!/bin/bash
 
 if [[ "$EAS_BUILD_RUNNER" == "eas-build" ]]; then
-    npm install -g pnpm@8.7.5
+    npm install -g pnpm@8.7.6
 fi
\ No newline at end of file
diff --git a/apps/expo/src/app/(tabs)/_layout.tsx b/apps/expo/src/app/(tabs)/_layout.tsx
index a3daed8f7..dabb3aadb 100644
--- a/apps/expo/src/app/(tabs)/_layout.tsx
+++ b/apps/expo/src/app/(tabs)/_layout.tsx
@@ -11,7 +11,6 @@ import {
   PenBox,
   SearchIcon,
   UserIcon,
-  View,
 } from "lucide-react-native";
 
 import { DrawerContent, DrawerProvider } from "~/components/drawer-content";
@@ -116,15 +115,8 @@ export default function AppLayout() {
             name="null"
             options={{
               title: "Post",
-              tabBarIcon() {
-                return (
-                  <View
-                    className="h-8 w-10 flex-1 items-center justify-center rounded-lg"
-                    style={{ backgroundColor: theme.colors.primary }}
-                  >
-                    <PenBox className="text-white" size={16} />
-                  </View>
-                );
+              tabBarIcon({ color }) {
+                return <PenBox color={color} />;
               },
             }}
           />
diff --git a/apps/expo/src/components/feeds-button.tsx b/apps/expo/src/components/feeds-button.tsx
index a20b22b90..d65f72e2c 100644
--- a/apps/expo/src/components/feeds-button.tsx
+++ b/apps/expo/src/components/feeds-button.tsx
@@ -2,14 +2,19 @@ import { useCallback, useRef } from "react";
 import { Dimensions, TouchableHighlight, View } from "react-native";
 import Animated, { FadeInDown } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { usePathname } from "expo-router";
+import { Link, usePathname } from "expo-router";
 import {
   BottomSheetBackdrop,
   BottomSheetModal,
   BottomSheetSectionList,
 } from "@gorhom/bottom-sheet";
 import { useTheme } from "@react-navigation/native";
-import { CircleDotIcon, CloudIcon, CloudyIcon } from "lucide-react-native";
+import {
+  ChevronRightIcon,
+  CircleDotIcon,
+  CloudIcon,
+  CloudyIcon,
+} from "lucide-react-native";
 
 import {
   LargeRow,
@@ -24,6 +29,7 @@ import { BackButtonOverride } from "./back-button-override";
 import { FeedRow } from "./feed-row";
 import { ItemSeparator } from "./item-separator";
 import { QueryWithoutData } from "./query-without-data";
+import { Text } from "./text";
 
 export const FeedsButton = () => {
   const theme = useTheme();
@@ -48,11 +54,15 @@ export const FeedsButton = () => {
         }}
       >
         <Animated.View
-          className="absolute bottom-6 right-6 w-max max-w-max flex-1 flex-row items-center rounded-full p-4"
-          style={{ backgroundColor: theme.colors.primary }}
+          className="absolute bottom-6 right-6 flex-1 flex-row items-center rounded-full border p-4"
+          style={{
+            backgroundColor: theme.colors.card,
+            borderColor: theme.colors.border,
+          }}
           entering={FadeInDown}
         >
-          <CloudyIcon size={24} color="white" />
+          <CloudyIcon size={24} color={theme.colors.text} />
+          <Text className="ml-4 text-base">My Feeds</Text>
         </Animated.View>
       </TouchableHighlight>
       <BottomSheetModal
@@ -165,7 +175,26 @@ const SheetContent = ({ dismiss }: { dismiss: () => void }) => {
         ItemSeparatorComponent={() => (
           <ItemSeparator iconWidth="w-6" containerClassName="pr-4" />
         )}
-        ListFooterComponent={<View className="h-20" />}
+        ListFooterComponent={
+          <View className="p-6 pb-12">
+            <Link href="/feeds" asChild onPress={dismiss}>
+              <TouchableHighlight className="overflow-hidden rounded-lg">
+                <View
+                  className="flex-row items-center justify-between p-4"
+                  style={{ backgroundColor: theme.colors.primary }}
+                >
+                  <View className="flex-row items-center">
+                    <CloudyIcon size={24} className="text-white" />
+                    <Text className="ml-4 text-base text-white">
+                      Manage my feeds
+                    </Text>
+                  </View>
+                  <ChevronRightIcon size={20} className="text-neutral-50" />
+                </View>
+              </TouchableHighlight>
+            </Link>
+          </View>
+        }
       />
     );
   }
diff --git a/package.json b/package.json
index 009507e3c..5e1ec953b 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
   "overrides": {
     "@tanstack/react-query": "^4.35.3"
   },
-  "packageManager": "pnpm@8.7.5",
+  "packageManager": "pnpm@8.7.6",
   "pnpm": {
     "patchedDependencies": {
       "react-native-svg@13.9.0": "patches/react-native-svg@13.9.0.patch",