mobile: small ui fixes

apps/mobile/app/components/list-items/headers/section-header.tsx

@@ -25,7 +25,7 @@ import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enab
 import { presentSheet } from "../../../services/event-manager";
 import SettingsService from "../../../services/settings";
 import { RouteName } from "../../../stores/use-navigation-store";
-import { ColorValues } from "../../../utils/colors";
+import { ColorValues, getContainerBorder } from "../../../utils/colors";
 import { GROUP } from "../../../utils/constants";
 import { SIZE } from "../../../utils/size";
 import Sort from "../../sheets/sort";
@@ -80,7 +80,8 @@ export const SectionHeader = React.memo<
           backgroundColor: colors.secondary.background,
           alignSelf: "center",
           borderRadius: 5,
-          marginVertical: 5
+          marginVertical: 5,
+          ...getContainerBorder(colors.secondary.background, 0.8)
         }}
       >
         <TouchableOpacity

apps/mobile/app/components/list-items/note/index.tsx

@@ -117,7 +117,7 @@ const NoteItem = ({
                   tooltipText={item.title}
                   key={item.id}
                   height={25}
-                  icon={item.type === "notebook" ? "bookmark" : "book-outline"}
+                  icon="book-outline"
                   type="secondary"
                   fontSize={SIZE.xs}
                   iconSize={SIZE.sm}
@@ -127,8 +127,6 @@ const NoteItem = ({
                   style={{
                     borderRadius: 5,
                     marginRight: 5,
-                    borderWidth: 0.5,
-                    borderColor: primaryColors.border,
                     paddingHorizontal: 6,
                     marginBottom: 5
                   }}

apps/mobile/app/components/list/card.tsx

@@ -22,7 +22,7 @@ import { Dimensions, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useMessageStore } from "../../stores/use-message-store";
 import { useThemeColors } from "@notesnook/theme";
-import { hexToRGBA } from "../../utils/colors";
+import { getContainerBorder, hexToRGBA } from "../../utils/colors";
 import { SIZE } from "../../utils/size";
 import { Pressable } from "../ui/pressable";
 import Paragraph from "../ui/typography/paragraph";
@@ -64,12 +64,18 @@ export const Card = ({ color }: { color?: string }) => {
               width: 40 * fontScale,
               backgroundColor:
                 messageBoardState.type === "error"
-                  ? hexToRGBA(colors.static.red, 0.15)
+                  ? hexToRGBA(colors.error.accent, 0.15)
                   : hexToRGBA(color, 0.15),
               height: 40 * fontScale,
               borderRadius: 100,
               alignItems: "center",
-              justifyContent: "center"
+              justifyContent: "center",
+              ...getContainerBorder(
+                messageBoardState.type === "error"
+                  ? colors.error.accent
+                  : color || colors.primary.accent,
+                0.4
+              )
             }}
           >
             <Icon

apps/mobile/app/components/ui/AppIcon/index.tsx

@@ -0,0 +1,53 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import { useThemeColors } from "@notesnook/theme";
+import React from "react";
+import { ColorValue, TextProps } from "react-native";
+import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import { SIZE } from "../../../utils/size";
+
+export interface IconProps extends TextProps {
+  /**
+   * Size of the icon, can also be passed as fontSize in the style object.
+   *
+   * @default 12
+   */
+  size?: number | undefined;
+
+  /**
+   * Name of the icon to show
+   *
+   * See Icon Explorer app
+   * {@link https://github.com/oblador/react-native-vector-icons/tree/master/Examples/IconExplorer}
+   */
+  name: string;
+
+  /**
+   * Color of the icon
+   *
+   */
+  color?: ColorValue | number | undefined;
+}
+
+export default function AppIcon(props: IconProps) {
+  const { colors } = useThemeColors();
+  return (
+    <Icon size={SIZE.md} color={colors.primary.icon} {...(props as any)} />
+  );
+}

apps/mobile/app/components/ui/pressable/index.tsx

@@ -142,8 +142,16 @@ const buttonTypes = (
     text: text || colors.primary.accentForeground,
     selected: accent || colors.primary.accent,
     borderWidth: 0.8,
-    borderColor: getColorLinearShade(colors.primary.accent, 0.3, false),
-    borderSelectedColor: getColorLinearShade(colors.primary.accent, 0.3, false)
+    borderColor: getColorLinearShade(
+      accent || colors.primary.accent,
+      0.3,
+      false
+    ),
+    borderSelectedColor: getColorLinearShade(
+      accent || colors.primary.accent,
+      0.3,
+      false
+    )
   },
   inverted: {
     primary: colors.primary.background,