mobile: ui fixes side menu items and notebook items

Signed-off-by: kashaf-ansari-dev <kashafansari3108@gmail.com>

apps/mobile/app/common/design/theme.ts

@@ -97,7 +97,7 @@ export const THEME_LIGHT: any = {
       selected: {
         accent: "#008836",
         accentForeground: "#ffffff",
-        paragraph: "#212121",
+        paragraph: "#181818",
         background: "#00883610",
         border: "#008836",
         heading: "#212121",

apps/mobile/app/components/side-menu/color-section.tsx

@@ -31,6 +31,7 @@ import { Properties } from "../properties";
 import { useSideBarDraggingStore } from "./dragging-store";
 import { MenuItem } from "./menu-item";
 import { Default_Drag_Action } from "../../hooks/use-actions";
+import { Spacing } from "../../common/design/spacing";
 
 export const ColorSection = React.memo(
   function ColorSection() {
@@ -75,8 +76,8 @@ export const ColorSection = React.memo(
         >
           <View
             style={{
-              width: size - 5,
-              height: size - 5,
+              width: 10,
+              height: 10,
               backgroundColor: (item.data as Color).colorCode,
               borderRadius: 100
             }}

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

@@ -181,9 +181,9 @@ export const SideMenu = React.memo(
         style={{
           flex: 1,
           backgroundColor: colors.primary.background,
-          paddingTop: insets.top,
-          paddingBottom: insets.bottom,
-          paddingLeft: insets.left
+          paddingTop: Math.max(insets.top, Spacing.LEVEL_4),
+          paddingBottom: Math.max(insets.bottom, Spacing.LEVEL_4) + Spacing.LEVEL_1,
+          paddingLeft: insets.left,
         }}
       >
         <SimpleTabView
@@ -239,7 +239,7 @@ const TabBar = (props: SimpleTabBarProps) => {
           justifyContent: "space-between",
           backgroundColor: colors.primary.background,
           borderTopWidth: 1,
-          borderTopColor: colors.primary.border,
+          borderTopColor: colors.primary.separator,
           paddingTop: Spacing.LEVEL_2
         }}
       >

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

@@ -172,8 +172,6 @@ export const NotebookItem = ({
           paddingHorizontal: Spacing.LEVEL_1,
           marginBottom:
             expanded && item.hasChildren ? Spacing.LEVEL_0 : undefined
-          // borderLeftWidth: item.depth > 0 ? 1 : undefined,
-          // borderLeftColor: colors.primary.border
         }}
       >
         <View
@@ -202,7 +200,7 @@ export const NotebookItem = ({
 
           <Paragraph
             color={
-              isFocused ? colors.selected.paragraph : colors.primary.paragraph
+              isFocused ? colors.selected.paragraph : colors.secondary.heading
             }
             size={AppFontSize.sm}
           >

apps/mobile/app/components/side-menu/pinned-section.tsx

@@ -86,18 +86,14 @@ export const PinnedSection = React.memo(
     return (
       <View
         style={{
-          flexGrow: 1,
-          borderTopWidth: 1,
-          borderTopColor: colors.primary.separator,
-          marginTop: DefaultAppStyles.GAP_SMALL,
-          paddingTop: DefaultAppStyles.GAP_SMALL
+          flexGrow: 1
         }}
       >
         <ReorderableList
           onListOrderChanged={(data) => {
             db.settings.setSideBarOrder("shortcuts", data);
           }}
-          onHiddenItemsChanged={() => {}}
+          onHiddenItemsChanged={() => { }}
           canHideItems={false}
           itemOrder={order}
           hiddenItems={[]}

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

@@ -44,8 +44,10 @@ const SettingsIcon = () => {
       }}
       testID="sidemenu-settings-icon"
       style={{
-        width: 40,
-        height: 40
+        width: 32,
+        height: 32,
+        borderRadius: 100,
+        overflow: "hidden"
       }}
     >
       {userProfile?.profilePicture ? (
@@ -54,16 +56,15 @@ const SettingsIcon = () => {
             uri: userProfile?.profilePicture
           }}
           style={{
-            width: 25,
-            height: 25,
-            borderRadius: 100
+            width: "100%",
+            height: "100%"
           }}
         />
       ) : (
         <AppIcon
           name="cog-outline"
           color={colors.primary.icon}
-          size={AppFontSize.lg}
+          size={AppFontSize.xl}
         />
       )}
     </Pressable>
@@ -78,7 +79,7 @@ export const SideMenuHeader = (props: { rightButtons?: IconButtonProps[] }) => {
         flexDirection: "row",
         justifyContent: "space-between",
         alignItems: "center",
-        paddingHorizontal: DefaultAppStyles.GAP
+        paddingHorizontal: Spacing.LEVEL_3,
       }}
     >
       <View
@@ -90,10 +91,8 @@ export const SideMenuHeader = (props: { rightButtons?: IconButtonProps[] }) => {
       >
         <View
           style={{
-            backgroundColor: "black",
             width: 26,
             height: 26,
-            borderRadius: Radius.XS,
             overflow: "hidden"
           }}
         >

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

@@ -65,6 +65,9 @@ export function SideMenuHome() {
     (state) => state.user?.subscription?.plan
   );
   const user = useUserStore.getState().user;
+  const colorNotes = useMenuStore((state) => state.colorNotes);
+  const menuPins = useMenuStore((state) => state.menuPins);
+
 
   return (
     <View
@@ -100,7 +103,7 @@ export function SideMenuHome() {
                   alwaysBounceVertical={false}
                   data={MenuItemsList}
                   style={{
-                    width: "100%"
+                    width: "100%",
                   }}
                   disableDefaultDrag
                   showsVerticalScrollIndicator={false}
@@ -124,13 +127,29 @@ export function SideMenuHome() {
                     );
                   }}
                 />
+                {colorNotes.length > 0 && (
+                  <View style={{
+                    marginTop: Spacing.LEVEL_2,
+                    borderTopWidth: 1,
+                    borderTopColor: colors.primary.separator,
+                    marginBottom: Spacing.LEVEL_2
+                  }} />
+                )}
                 <ColorSection />
-                <PinnedSection />
+                {menuPins.length > 0 && (
+                  <View style={{
+                    marginTop: Spacing.LEVEL_2,
+                    borderTopWidth: 1,
+                    borderTopColor: colors.primary.separator,
+                    marginBottom: Spacing.LEVEL_2
+                  }} />
+                )}
+                {menuPins.length > 0 && <PinnedSection />}
               </>
             )}
             style={{
-              paddingHorizontal: DefaultAppStyles.GAP,
-              marginTop: Spacing.LEVEL_3
+              paddingHorizontal: Spacing.LEVEL_3,
+              marginTop: Spacing.LEVEL_4
             }}
             nestedScrollEnabled={false}
           />
@@ -139,8 +158,8 @@ export function SideMenuHome() {
 
       <View
         style={{
-          paddingHorizontal: DefaultAppStyles.GAP,
-          paddingVertical: DefaultAppStyles.GAP_VERTICAL
+          paddingHorizontal: Spacing.LEVEL_3,
+          paddingVertical: Spacing.LEVEL_4
         }}
       >
         {dayjs().month() !== 11 ? (
@@ -148,7 +167,7 @@ export function SideMenuHome() {
             {(subscriptionType === SubscriptionPlan.FREE ||
               !subscriptionType ||
               !user) &&
-            !SettingsService.getProperty("serverUrls") ? (
+              !SettingsService.getProperty("serverUrls") ? (
               <Button
                 title={pro.title}
                 style={{

apps/mobile/app/components/side-menu/side-menu-list-empty.tsx

@@ -108,8 +108,8 @@ export const SideMenuListEmpty = (props: SideMenuListEmptyProps) => {
               fontSize={AppFontSize.sm}
               style={{
                 marginTop: Spacing.LEVEL_2,
-                paddingVertical: Spacing.LEVEL_2,
-                paddingHorizontal: Spacing.LEVEL_2
+                paddingVertical: Spacing.LEVEL_3,
+                paddingHorizontal: Spacing.LEVEL_3
               }}
               type="accent"
             />

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

@@ -102,7 +102,7 @@ export const SideMenuNotebooks = () => {
         const allSelected = allNotebooks.every((notebook) => {
           return (
             useSideMenuNotebookSelectionStore.getState().selection[
-              notebook.id
+            notebook.id
             ] === "selected"
           );
         });

apps/mobile/app/components/side-menu/tab-bar-button.tsx

@@ -74,8 +74,7 @@ export const TabBarButton = ({
       testID={testID}
       onPress={handlePress}
       style={{
-        borderRadius: 10,
-        paddingVertical: 2,
+        borderRadius: 0,
         width: undefined,
         gap: label ? Spacing.LEVEL_1 : 0,
         backgroundColor: "transparent",
@@ -87,7 +86,7 @@ export const TabBarButton = ({
         style={[
           {
             backgroundColor: isActive ? colors.primary.shade : undefined,
-            borderRadius: Radius.XS,
+            borderRadius: Radius.XXS,
             padding: Spacing.LEVEL_1
           },
           animatedIconStyle

apps/mobile/app/components/ui/input/form-input.tsx

@@ -30,11 +30,11 @@ import {
 } from "react-native";
 import isEmail from "validator/lib/isEmail";
 import isURL from "validator/lib/isURL";
-import { Spacing } from "../../../common/design/spacing";
-import { AppFontSize, defaultBorderRadius } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import AppIcon from "../AppIcon";
 import { IconButton } from "../icon-button";
 import Paragraph from "../typography/paragraph";
+import { Radius, Spacing } from "../../../common/design/spacing";
 
 export type FormValues = Record<string, string>;
 export type FormErrors = Partial<Record<string, string>>;
@@ -185,13 +185,13 @@ export function hasFormErrors(errors: FormErrors) {
 export const validators = {
   required:
     (message = "This field is required") =>
-    (value: string) =>
-      value?.trim() ? undefined : message,
+      (value: string) =>
+        value?.trim() ? undefined : message,
 
   email:
     (message = "Please enter a valid email") =>
-    (value: string) =>
-      !value?.trim() || isEmail(value.trim()) ? undefined : message,
+      (value: string) =>
+        !value?.trim() || isEmail(value.trim()) ? undefined : message,
 
   minLength: (length: number, message?: string) => (value: string) =>
     !value || value.length >= length
@@ -200,15 +200,15 @@ export const validators = {
 
   url:
     (message = "Please enter a valid URL") =>
-    (value: string) =>
-      !value?.trim() || isURL(value.trim(), { allow_underscores: true })
-        ? undefined
-        : message,
+      (value: string) =>
+        !value?.trim() || isURL(value.trim(), { allow_underscores: true })
+          ? undefined
+          : message,
 
   matchField:
     (fieldName: string, message = "Values do not match") =>
-    (value: string, values: FormValues) =>
-      value === values[fieldName] ? undefined : message
+      (value: string, values: FormValues) =>
+        value === values[fieldName] ? undefined : message
 };
 
 interface FormInputProps extends TextInputProps {
@@ -253,7 +253,7 @@ export function FormInput({
   button,
   buttonLeft,
   buttons,
-  height = 45,
+  height,
   fontSize = AppFontSize.sm,
   inputStyle = {},
   containerStyle = {},
@@ -296,7 +296,7 @@ export function FormInput({
 
   const style: ViewStyle = {
     borderWidth: 1,
-    borderRadius: defaultBorderRadius,
+    borderRadius: Radius.XS,
     backgroundColor: colors.secondary.background,
     borderColor: borderColor,
     flexDirection: "row",
@@ -380,7 +380,7 @@ export function FormInput({
           style={{
             flexDirection: "row",
             justifyContent: "center",
-            height: 35 > height ? height : 35,
+            height: height ? (35 > height ? height : 35) : undefined,
             alignItems: "center"
           }}
         >