mobile: fix sidemenu colors

apps/mobile/app/components/side-menu/index.tsx

@@ -237,7 +237,7 @@ const TabBar = (
                     size={AppFontSize.lg}
                   />
                   <Paragraph
-                    color={colors.secondary.paragraph}
+                    color={colors.primary.paragraph}
                     size={AppFontSize.xxxs - 1}
                   >
                     {item.title}
@@ -283,7 +283,6 @@ const TabBar = (
                   }}
                   style={{
                     borderRadius: 10,
-                    opacity: isFocused ? 1 : 0.6,
                     paddingVertical: 2,
                     width: 40,
                     height: 40
@@ -293,7 +292,7 @@ const TabBar = (
                   <Icon
                     name={getIcon(route.key)}
                     color={
-                      isFocused ? colors.primary.accent : colors.primary.icon
+                      isFocused ? colors.selected.icon : colors.primary.icon
                     }
                     size={AppFontSize.lg}
                   />
@@ -315,6 +314,7 @@ const TabBar = (
                   name="plus"
                   testID="sidebar-add-button"
                   size={AppFontSize.lg - 2}
+                  color={colors.primary.icon}
                   onPress={() => {
                     if (props.navigationState.index === 1) {
                       AddNotebookSheet.present();
@@ -355,7 +355,7 @@ const TabBar = (
                       : "sort-descending"
                   }
                   testID="sidebar-sort-button"
-                  color={colors.secondary.icon}
+                  color={colors.primary.icon}
                   onPress={() => {
                     presentSheet({
                       component: (

apps/mobile/app/components/side-menu/menu-item.tsx

@@ -170,7 +170,7 @@ function _MenuItem({
               item.icon === "crown"
                 ? colors.static.yellow
                 : isFocused
-                ? colors.selected.paragraph
+                ? colors.selected.icon
                 : colors.secondary.icon
             }
             size={AppFontSize.md}
@@ -179,7 +179,7 @@ function _MenuItem({
 
         <Paragraph
           color={
-            isFocused ? colors.primary.paragraph : colors.secondary.paragraph
+            isFocused ? colors.selected.paragraph : colors.primary.paragraph
           }
           size={AppFontSize.sm}
         >

apps/mobile/app/components/side-menu/notebook-item.tsx

@@ -70,7 +70,7 @@ export const NotebookItem = ({
   const { totalNotes, getTotalNotes } = useTotalNotes("notebook");
   const getTotalNotesRef = React.useRef(getTotalNotes);
   getTotalNotesRef.current = getTotalNotes;
-  const { colors } = useThemeColors("sheet");
+  const { colors } = useThemeColors();
 
   useEffect(() => {
     getTotalNotesRef.current([item.notebook.id]);
@@ -157,7 +157,9 @@ export const NotebookItem = ({
         >
           <IconButton
             size={AppFontSize.md}
-            color={selected ? colors.selected.icon : colors.primary.icon}
+            color={
+              selected || isFocused ? colors.selected.icon : colors.primary.icon
+            }
             testID={item.hasChildren ? `expand-notebook-${index}` : ""}
             onPress={() => {
               if (item.hasChildren) {
@@ -186,7 +188,7 @@ export const NotebookItem = ({
 
           <Paragraph
             color={
-              isFocused ? colors.selected.paragraph : colors.secondary.paragraph
+              isFocused ? colors.selected.paragraph : colors.primary.paragraph
             }
             size={AppFontSize.sm}
           >

apps/mobile/app/components/side-menu/side-menu-tags.tsx

@@ -120,16 +120,14 @@ const TagItem = (props: {
             >
               <AppIcon
                 size={AppFontSize.md}
-                color={isFocused ? colors.selected.icon : colors.secondary.icon}
+                color={isFocused ? colors.selected.icon : colors.primary.icon}
                 name="pound"
               />
             </View>
 
             <Paragraph
               color={
-                isFocused
-                  ? colors.selected.paragraph
-                  : colors.secondary.paragraph
+                isFocused ? colors.selected.paragraph : colors.primary.paragraph
               }
               size={AppFontSize.sm}
             >