mobile: minor fixes in settings screen

2026-09-02 04:01:43 +02:00 · 2026-07-09 13:42:03 +05:00
parent 2599acc1bf
commit bbffbcb62b
39 changed files with 187 additions and 129 deletions
--- a/apps/mobile/app/components/announcements/announcement.tsx
+++ b/apps/mobile/app/components/announcements/announcement.tsx
@@ -71,7 +71,7 @@ export const Announcement = () => {
              alignItems: "center",
              paddingHorizontal: DefaultAppStyles.GAP,
              borderBottomWidth: 1,
-              borderBottomColor: colors.primary.border,
+              borderBottomColor: colors.primary.separator,
              paddingBottom: DefaultAppStyles.GAP_VERTICAL_SMALL
            }}
          >
--- a/apps/mobile/app/components/auth/change-password.tsx
+++ b/apps/mobile/app/components/auth/change-password.tsx
@@ -110,7 +110,7 @@ export const ChangePassword = () => {
    <View
      style={{
        width: "100%",
-        paddingTop: Spacing.LEVEL_0,
+        paddingTop: Spacing.LEVEL_4,
        paddingHorizontal: Spacing.LEVEL_3,
        gap: Spacing.LEVEL_2
      }}
@@ -202,7 +202,8 @@ export const ChangePassword = () => {

      <Button
        style={{
-          width: "100%"
+          width: "100%",
+          marginTop: Spacing.LEVEL_1
        }}
        loading={loading}
        onPress={changePassword}
--- a/apps/mobile/app/components/list-items/note/index.tsx
+++ b/apps/mobile/app/components/list-items/note/index.tsx
@@ -488,7 +488,7 @@ const NoteItem = ({
                style={{
                  marginTop: 1
                }}
-                name="trash-alt"
+                name={isTrash ? "trash-alt" : "calendar"}
                iconFamily="notesnook"
              />
              <Paragraph
--- a/apps/mobile/app/components/sheets/buy-plan/index.tsx
+++ b/apps/mobile/app/components/sheets/buy-plan/index.tsx
@@ -211,7 +211,7 @@ export const BuyPlan = (props: {
                  style={{
                    width: "100%",
                    height: 1,
-                    backgroundColor: colors.primary.border,
+                    backgroundColor: colors.primary.separator,
                    marginVertical: Spacing.LEVEL_2
                  }}
                />
--- a/apps/mobile/app/components/sheets/date-format/index.tsx
+++ b/apps/mobile/app/components/sheets/date-format/index.tsx
@@ -111,7 +111,7 @@ function DateFormat({ close }: DateFormatProps) {
        <View
          style={{
            height: 1,
-            backgroundColor: colors.primary.border
+            backgroundColor: colors.primary.separator
          }}
        />

--- a/apps/mobile/app/components/sheets/export-notes/index.tsx
+++ b/apps/mobile/app/components/sheets/export-notes/index.tsx
@@ -205,7 +205,7 @@ const ExportNotesSheet = ({
      <View
        style={{
          height: 1,
-          backgroundColor: colors.primary.border
+          backgroundColor: colors.primary.separator
        }}
      />

--- a/apps/mobile/app/components/sheets/force-sync/index.tsx
+++ b/apps/mobile/app/components/sheets/force-sync/index.tsx
@@ -118,7 +118,7 @@ function ForceSync({ mode, close }: ForceSyncProps) {
      <View
        style={{
          height: 1,
-          backgroundColor: colors.primary.border
+          backgroundColor: colors.primary.separator
        }}
      />

--- a/apps/mobile/app/components/sheets/github/issue.tsx
+++ b/apps/mobile/app/components/sheets/github/issue.tsx
@@ -238,7 +238,7 @@ Github Release: ${Config.GITHUB_RELEASE === "true" ? "Yes" : "No"}`,
          <View
            style={{
              height: 1,
-              backgroundColor: colors.primary.border
+              backgroundColor: colors.primary.separator
            }}
          />

--- a/apps/mobile/app/components/sheets/paywall/index.tsx
+++ b/apps/mobile/app/components/sheets/paywall/index.tsx
@@ -197,7 +197,9 @@ export default function PaywallSheet<Tid extends FeatureId>(props: {
          </View>
        </View>

-        <View style={{ height: 1, backgroundColor: colors.primary.border }} />
+        <View
+          style={{ height: 1, backgroundColor: colors.primary.separator }}
+        />

        <View style={{ gap: Spacing.LEVEL_2, width: "100%" }}>
          {features.map((feature) => (
--- a/apps/mobile/app/components/sheets/plan-limits/index.tsx
+++ b/apps/mobile/app/components/sheets/plan-limits/index.tsx
@@ -117,7 +117,9 @@ export function PlanLimits() {
          </View>
        </View>

-        <View style={{ height: 1, backgroundColor: colors.primary.border }} />
+        <View
+          style={{ height: 1, backgroundColor: colors.primary.separator }}
+        />

        <View style={{ gap: Spacing.LEVEL_2, width: "100%" }}>
          {featureUsage?.map((item) => (
--- a/apps/mobile/app/components/sheets/recovery-key/index.tsx
+++ b/apps/mobile/app/components/sheets/recovery-key/index.tsx
@@ -278,7 +278,7 @@ function RecoveryKeySheet({ close }: RecoveryKeySheetProps) {
          <View
            style={{
              height: 1,
-              backgroundColor: colors.primary.border,
+              backgroundColor: colors.primary.separator,
              width: "100%",
              marginVertical: Spacing.LEVEL_2
            }}
--- a/apps/mobile/app/components/sheets/update/index.tsx
+++ b/apps/mobile/app/components/sheets/update/index.tsx
@@ -211,7 +211,7 @@ export const Update = ({ version: appVersion }: UpdateProps) => {
          <View
            style={{
              height: 1,
-              backgroundColor: colors.primary.border
+              backgroundColor: colors.primary.separator
            }}
          />

--- a/apps/mobile/app/components/sheets/user/index.tsx
+++ b/apps/mobile/app/components/sheets/user/index.tsx
@@ -257,7 +257,7 @@ export const UserSheet = () => {
            borderBottomWidth: 1,
            height: 1,
            width: "100%",
-            borderColor: colors.primary.border,
+            borderColor: colors.primary.separator,
            marginVertical: 0
          }}
        />
--- a/apps/mobile/app/screens/attachments/index.tsx
+++ b/apps/mobile/app/screens/attachments/index.tsx
@@ -359,12 +359,7 @@ const Attachments = (props: NavigationProps<"Attachments">) => {
          }}
        />

-        <LineSeparator
-          paddingHorizontal={Spacing.LEVEL_3}
-          style={{
-            marginBottom: -Spacing.LEVEL_1
-          }}
-        />
+        <LineSeparator />

        <View>
          <ScrollView
--- a/apps/mobile/app/screens/link-notebooks/index.tsx
+++ b/apps/mobile/app/screens/link-notebooks/index.tsx
@@ -285,7 +285,7 @@ const LinkNotebooks = (props: NavigationProps<"LinkNotebooks">) => {
            <View
              style={{
                height: 1,
-                backgroundColor: colors.primary.border
+                backgroundColor: colors.primary.separator
              }}
            />

--- a/apps/mobile/app/screens/manage-tags/index.tsx
+++ b/apps/mobile/app/screens/manage-tags/index.tsx
@@ -346,7 +346,7 @@ const ManageTags = (props: NavigationProps<"ManageTags">) => {
        <View
          style={{
            height: 1,
-            backgroundColor: colors.primary.border
+            backgroundColor: colors.primary.separator
          }}
        />

--- a/apps/mobile/app/screens/settings/components/2fa.tsx
+++ b/apps/mobile/app/screens/settings/components/2fa.tsx
@@ -498,7 +498,7 @@ export const MFASetup = ({
              style={{
                height: 1,
                marginVertical: Spacing.LEVEL_3,
-                backgroundColor: colors.primary.border
+                backgroundColor: colors.primary.separator
              }}
            />

@@ -768,7 +768,7 @@ export const MFARecoveryCodes = ({
                style={{
                  height: 1,
                  marginTop: Spacing.LEVEL_1,
-                  backgroundColor: colors.primary.border
+                  backgroundColor: colors.primary.separator
                }}
              />

--- a/apps/mobile/app/screens/settings/components/change-email.tsx
+++ b/apps/mobile/app/screens/settings/components/change-email.tsx
@@ -30,6 +30,8 @@ import { eSendEvent, ToastManager } from "../../../services/event-manager";
 import Navigation from "../../../services/navigation";
 import { eUserLoggedIn } from "../../../utils/events";
 import { DefaultAppStyles } from "../../../utils/styles";
+import { Spacing } from "../../../common/design/spacing";
+import { PASSWORD_PLACEHOLDER } from "../../../utils/constants";

 enum EmailChangeSteps {
  verify,
@@ -104,10 +106,16 @@ export const ChangeEmail = () => {
  };

  return (
-    <View style={{ paddingHorizontal: DefaultAppStyles.GAP }}>
+    <View
+      style={{
+        paddingHorizontal: Spacing.LEVEL_3,
+        paddingTop: Spacing.LEVEL_4,
+        gap: Spacing.LEVEL_4
+      }}
+    >
      <View
        style={{
-          marginTop: DefaultAppStyles.GAP_VERTICAL
+          gap: Spacing.LEVEL_2
        }}
      >
        {step === EmailChangeSteps.verify ? (
@@ -115,8 +123,9 @@ export const ChangeEmail = () => {
            <FormInput
              name="email"
              formRef={formRef}
+              label={strings.enterNewEmail()}
              fwdRef={emailInputRef}
-              placeholder={strings.enterNewEmail()}
+              placeholder={"you@example.com"}
              keyboardType="email-address"
              autoCapitalize="none"
              autoCorrect={false}
@@ -130,9 +139,10 @@ export const ChangeEmail = () => {
            />
            <FormInput
              name="password"
+              label={strings.password()}
              formRef={formRef}
              fwdRef={passInputRef}
-              placeholder={strings.enterAccountPassword()}
+              placeholder={PASSWORD_PLACEHOLDER}
              secureTextEntry
              autoCapitalize="none"
              autoCorrect={false}
@@ -170,7 +180,7 @@ export const ChangeEmail = () => {
          loading
            ? undefined
            : step === EmailChangeSteps.verify
-              ? strings.verify()
+              ? strings.continue()
              : strings.changeEmail()
        }
        type="accent"
--- a/apps/mobile/app/screens/settings/components/licenses.tsx
+++ b/apps/mobile/app/screens/settings/components/licenses.tsx
@@ -51,7 +51,7 @@ export const Licenses = () => {
          alignSelf: "flex-start",
          padding: DefaultAppStyles.GAP,
          borderBottomWidth: 1,
-          borderBottomColor: colors.primary.border,
+          borderBottomColor: colors.primary.separator,
          borderRadius: 0
        }}
        onPress={() => {
--- a/apps/mobile/app/screens/settings/components/notesnook-circle.tsx
+++ b/apps/mobile/app/screens/settings/components/notesnook-circle.tsx
@@ -38,6 +38,7 @@ import { eCloseSimpleDialog } from "../../../utils/events";
 import { openLinkInBrowser } from "../../../utils/functions";
 import { AppFontSize } from "../../../utils/size";
 import { sleep } from "../../../utils/time";
+import LineSeparator from "../../../components/ui/seperator/line-separator";
 let p: any;
 export const NotesnookCircle = () => {
  const user = useUserStore((state) => state.user);
@@ -82,63 +83,71 @@ export const NotesnookCircle = () => {
  }, []);

  return (
-    <ScrollView
-      contentContainerStyle={{
-        gap: Spacing.LEVEL_3,
-        paddingHorizontal: Spacing.LEVEL_3,
-        paddingTop: Spacing.LEVEL_0
-      }}
-    >
-      <View
-        style={{
-          gap: Spacing.LEVEL_0
+    <View>
+      <LineSeparator paddingHorizontal={Spacing.LEVEL_3} />
+
+      <ScrollView
+        contentContainerStyle={{
+          gap: Spacing.LEVEL_3,
+          paddingHorizontal: Spacing.LEVEL_3,
+          paddingTop: Spacing.LEVEL_4
        }}
      >
-        <Heading fontSize="XL">Partner offers</Heading>
-        <Paragraph>
-          Get exclusive discounts from our trusted partners who share our
-          commitment to privacy and user freedom.
-        </Paragraph>
-      </View>
-
-      {!isFree && !isOnTrial ? null : (
-        <View>
+        <View
+          style={{
+            gap: Spacing.LEVEL_0
+          }}
+        >
+          <Heading fontSize="XL">Partner offers</Heading>
          <Paragraph>
-            {isFree
-              ? strings.freeUserCircleNotice()
-              : strings.trialUserCircleNotice()}
+            Get exclusive discounts from our trusted partners who share our
+            commitment to privacy and user freedom.
          </Paragraph>
-
-          {isOnTrial ? null : (
-            <Button
-              title={strings.upgradePlan()}
-              onPress={() => {
-                Navigation.navigate("PayWall", {
-                  canGoBack: true,
-                  context: useUserStore.getState().user
-                    ? "logged-in"
-                    : "logged-out"
-                });
-              }}
-              style={{
-                alignSelf: "flex-start",
-                paddingHorizontal: 0
-              }}
-            />
-          )}
        </View>
-      )}

-      {partners.loading ? <ActivityIndicator /> : null}
+        {!isFree && !isOnTrial ? null : (
+          <View>
+            <Paragraph>
+              {isFree
+                ? strings.freeUserCircleNotice()
+                : strings.trialUserCircleNotice()}
+            </Paragraph>

-      {partners.error ? (
-        <Notice type="alert" text={partners.error.message} />
-      ) : null}
+            {isOnTrial ? null : (
+              <Button
+                title={strings.upgradePlan()}
+                onPress={() => {
+                  Navigation.navigate("PayWall", {
+                    canGoBack: true,
+                    context: useUserStore.getState().user
+                      ? "logged-in"
+                      : "logged-out"
+                  });
+                }}
+                style={{
+                  alignSelf: "flex-start",
+                  paddingHorizontal: 0
+                }}
+              />
+            )}
+          </View>
+        )}

-      {partners.result?.map((item) => (
-        <Partner key={item.id} item={item} available={!isFree && !isOnTrial} />
-      ))}
-    </ScrollView>
+        {partners.loading ? <ActivityIndicator /> : null}
+
+        {partners.error ? (
+          <Notice type="alert" text={partners.error.message} />
+        ) : null}
+
+        {partners.result?.map((item) => (
+          <Partner
+            key={item.id}
+            item={item}
+            available={!isFree && !isOnTrial}
+          />
+        ))}
+      </ScrollView>
+    </View>
  );
 };

@@ -187,7 +196,8 @@ const Partner = ({
          borderRadius: Radius.XS,
          backgroundColor: colors.primary.shade,
          paddingVertical: 4,
-          paddingHorizontal: 8
+          paddingHorizontal: 8,
+          marginBottom: Spacing.LEVEL_1
        }}
      >
        <Paragraph fontSize="XS" color={colors.primary.accent}>
--- a/apps/mobile/app/screens/settings/components/server-config.tsx
+++ b/apps/mobile/app/screens/settings/components/server-config.tsx
@@ -101,7 +101,8 @@ export function ServersConfiguration() {
    <View
      style={{
        paddingHorizontal: DefaultAppStyles.GAP,
-        gap: Spacing.LEVEL_2
+        gap: Spacing.LEVEL_2,
+        paddingTop: Spacing.LEVEL_4
      }}
    >
      {isLoggedIn ? (
--- a/apps/mobile/app/screens/settings/components/user-section.jsx
+++ b/apps/mobile/app/screens/settings/components/user-section.jsx
@@ -282,7 +282,7 @@ const SettingsUserSection = ({ item }) => {
              paddingHorizontal: Spacing.LEVEL_3,
              marginBottom: Spacing.LEVEL_2
            }}
-            color={colors.secondary.paragraph}
+            color={colors.primary.accent}
            size={AppFontSize.sm}
            fontFamily="MEDIUM"
          >
--- a/apps/mobile/app/screens/settings/failed-inbox-items.tsx
+++ b/apps/mobile/app/screens/settings/failed-inbox-items.tsx
@@ -34,6 +34,7 @@ import { Pressable } from "../../components/ui/pressable";
 import Heading from "../../components/ui/typography/heading";
 import Paragraph from "../../components/ui/typography/paragraph";
 import { ToastManager } from "../../services/event-manager";
+import LineSeparator from "../../components/ui/seperator/line-separator";

 type FailedInboxItem = {
  id: string;
@@ -129,7 +130,7 @@ function PayloadDataBlock({ value }: { value: string }) {
        </Pressable>
      </View>

-      <View style={{ height: 1, backgroundColor: colors.primary.border }} />
+      <View style={{ height: 1, backgroundColor: colors.primary.separator }} />

      <View
        style={{
@@ -187,6 +188,9 @@ export const FailedInboxItems = () => {
        title={strings.failedInboxItems()}
        canGoBack={true}
        id="Settings"
+        style={{
+          backgroundColor: "transparent"
+        }}
        rightButton={
          items?.length > 0
            ? {
@@ -215,6 +219,8 @@ export const FailedInboxItems = () => {
        }
      />

+      <LineSeparator paddingHorizontal={Spacing.LEVEL_3} />
+
      {result.status === "pending" ? (
        <View
          style={{
@@ -274,7 +280,8 @@ export const FailedInboxItems = () => {
            gap: Spacing.LEVEL_4,
            paddingHorizontal: Spacing.LEVEL_3,
            paddingVertical: Spacing.LEVEL_4,
-            paddingBottom: 50
+            paddingBottom: 50,
+            paddingTop: Spacing.LEVEL_3
          }}
        >
          {items.map((item) => {
--- a/apps/mobile/app/screens/settings/group.tsx
+++ b/apps/mobile/app/screens/settings/group.tsx
@@ -32,6 +32,7 @@ import { RouteParams, SettingSection } from "./types";
 import { useThemeColors } from "@notesnook/theme";
 import { SectionGroup } from "./section-group";
 import { Spacing } from "../../common/design/spacing";
+import LineSeparator from "../../components/ui/seperator/line-separator";
 const keyExtractor = (item: SettingSection) => item.id;
 const AnimatedKeyboardAvoidingFlatList = Animated.createAnimatedComponent(
  KeyboardAwareFlatList
@@ -69,14 +70,16 @@ const Group = ({
          title={route.params.name as string}
          canGoBack={true}
          style={{
-            backgroundColor: "transparent",
-            borderRadius: 0,
-            borderBottomWidth: 1,
-            borderBottomColor: colors.primary.border
+            backgroundColor: "transparent"
          }}
          id="Settings"
        />
      )}
+
+      {route.params?.component && !route.params.headerBottomBorder ? null : (
+        <LineSeparator paddingHorizontal={Spacing.LEVEL_3} />
+      )}
+
      <DelayLayout type="settings">
        <View
          style={{
@@ -96,7 +99,8 @@ const Group = ({
                  : null
              }
              contentContainerStyle={{
-                gap: Spacing.LEVEL_2
+                gap: Spacing.LEVEL_2,
+                marginTop: Spacing.LEVEL_4
              }}
              keyExtractor={keyExtractor}
              renderItem={renderItem}
--- a/apps/mobile/app/screens/settings/groups/account.ts
+++ b/apps/mobile/app/screens/settings/groups/account.ts
@@ -224,6 +224,8 @@ export const accountGroup: SettingSection = {
              sections: [
                {
                  id: "remove-profile-picture",
+                  icon: "trash",
+                  iconFamily: "notesnook",
                  name: strings.removeProfilePicture(),
                  description: strings.removeProfilePictureDesc(),
                  useHook: () =>
@@ -251,6 +253,8 @@ export const accountGroup: SettingSection = {
                },
                {
                  id: "remove-name",
+                  icon: "trash",
+                  iconFamily: "notesnook",
                  name: strings.removeFullName(),
                  description: strings.removeFullNameDesc(),
                  useHook: () =>
@@ -281,7 +285,8 @@ export const accountGroup: SettingSection = {
                  type: "screen",
                  component: "change-email",
                  description: strings.changeEmailDesc(),
-                  icon: "at"
+                  icon: "at",
+                  headerBottomBorder: true
                }
              ]
            },
@@ -340,7 +345,8 @@ export const accountGroup: SettingSection = {
              description: strings.changePasswordDesc(),
              component: "change-password",
              icon: "pencil-simple-line",
-              iconFamily: "notesnook"
+              iconFamily: "notesnook",
+              headerBottomBorder: true
            },
            {
              id: "2fa-settings",
@@ -781,6 +787,7 @@ export const accountGroup: SettingSection = {
                    id: "setup-inbox-keys",
                    name: strings.setupInboxKeys(),
                    type: "screen",
+                    headerBottomBorder: true,
                    component: "setup-inbox-keys"
                  } as any);
                } catch (e) {
@@ -809,6 +816,7 @@ export const accountGroup: SettingSection = {
                });
              },
              type: "screen",
+              headerBottomBorder: true,
              component: "manage-inbox-keys"
            },
            {
@@ -819,6 +827,7 @@ export const accountGroup: SettingSection = {
              hidden: (current) => !current,
              type: "screen",
              component: "inbox-keys",
+              headerBottomBorder: true,
              icon: "key",
              iconFamily: "notesnook"
            },
--- a/apps/mobile/app/screens/settings/groups/customize.ts
+++ b/apps/mobile/app/screens/settings/groups/customize.ts
@@ -233,11 +233,16 @@ export const customizeGroup: SettingSection = {
              type: "screen",
              name: strings.customizeToolbar(),
              description: strings.customizeToolbarDesc(),
-              component: "configuretoolbar"
+              icon: "wrench",
+              iconFamily: "notesnook",
+              component: "configuretoolbar",
+              headerBottomBorder: true
            },
            {
              id: "reset-toolbar",
              name: strings.resetToolbar(),
+              icon: "arrow-counter-clockwise",
+              iconFamily: "notesnook",
              description: strings.resetToolbarDesc(),
              modifer: () => {
                useDragState.getState().setPreset("default");
@@ -339,7 +344,8 @@ export const customizeGroup: SettingSection = {
      description: strings.serversConfigurationDesc(),
      icon: "hard-drives",
      iconFamily: "notesnook",
-      component: "server-config"
+      component: "server-config",
+      headerBottomBorder: true
    }
  ]
 };
--- a/apps/mobile/app/screens/settings/groups/legal.ts
+++ b/apps/mobile/app/screens/settings/groups/legal.ts
@@ -60,7 +60,8 @@ export const legalGroup: SettingSection = {
      component: "licenses",
      description: strings.ossLibs(),
      icon: "file-dashed",
-      iconFamily: "notesnook"
+      iconFamily: "notesnook",
+      headerBottomBorder: true
    }
  ]
 };
--- a/apps/mobile/app/screens/settings/home.tsx
+++ b/apps/mobile/app/screens/settings/home.tsx
@@ -32,6 +32,7 @@ import { LegendList } from "@legendapp/list";
 import { useThemeColors } from "@notesnook/theme";
 import { Spacing } from "../../common/design/spacing";
 import { View } from "react-native";
+import LineSeparator from "../../components/ui/seperator/line-separator";

 const keyExtractor = (item: SettingSection) => item.id;

@@ -69,13 +70,13 @@ const Home = ({
        canGoBack={true}
        hasSearch={false}
        style={{
-          backgroundColor: "transparent",
-          borderRadius: 0,
-          borderBottomWidth: 1,
-          borderBottomColor: colors.primary.border
+          backgroundColor: "transparent"
        }}
        id="Settings"
      />
+
+      <LineSeparator paddingHorizontal={Spacing.LEVEL_3} />
+
      <DelayLayout type="settings">
        <LegendList
          testID="settings-list"
@@ -83,7 +84,8 @@ const Home = ({
          keyExtractor={keyExtractor}
          renderItem={renderItem}
          contentContainerStyle={{
-            gap: Spacing.LEVEL_2
+            gap: Spacing.LEVEL_2,
+            marginTop: Spacing.LEVEL_4
          }}
        />
      </DelayLayout>
--- a/apps/mobile/app/screens/settings/manage-inbox-keys.tsx
+++ b/apps/mobile/app/screens/settings/manage-inbox-keys.tsx
@@ -194,7 +194,8 @@ export const SetupInboxKeys = () => {
        <View
          style={{
            paddingHorizontal: Spacing.LEVEL_3,
-            alignItems: "center"
+            alignItems: "center",
+            paddingTop: Spacing.LEVEL_4
          }}
        >
          <CirclesBackground
@@ -259,7 +260,8 @@ export const SetupInboxKeys = () => {
        <ScrollView
          contentContainerStyle={{
            paddingHorizontal: Spacing.LEVEL_3,
-            gap: Spacing.LEVEL_4
+            gap: Spacing.LEVEL_4,
+            paddingTop: Spacing.LEVEL_4
          }}
        >
          <View style={{ gap: Spacing.LEVEL_1 }}>
@@ -367,7 +369,8 @@ export const SetupInboxKeys = () => {
        <ScrollView
          contentContainerStyle={{
            paddingHorizontal: Spacing.LEVEL_3,
-            gap: Spacing.LEVEL_4
+            gap: Spacing.LEVEL_4,
+            paddingTop: Spacing.LEVEL_4
          }}
        >
          <View style={{ gap: Spacing.LEVEL_1 }}>
@@ -456,7 +459,8 @@ export const SetupInboxKeys = () => {
        <View
          style={{
            paddingHorizontal: Spacing.LEVEL_3,
-            alignItems: "center"
+            alignItems: "center",
+            paddingTop: Spacing.LEVEL_4
          }}
        >
          <CirclesBackground
@@ -622,10 +626,11 @@ const ManageInboxKeys = () => {
    <ScrollView
      contentContainerStyle={{
        paddingHorizontal: Spacing.LEVEL_3,
-        gap: Spacing.LEVEL_4
+        gap: Spacing.LEVEL_4,
+        paddingTop: Spacing.LEVEL_4
      }}
    >
-      <Notice type="alert" text={strings.changingInboxPgpKeysNotice()} />
+      {/* <Notice type="information" text={strings.changingInboxPgpKeysNotice()} /> */}

      <View style={{ gap: Spacing.LEVEL_1 }}>
        <View
@@ -831,7 +836,8 @@ const InboxKeysList = () => {
      contentContainerStyle={{
        width: "100%",
        paddingHorizontal: Spacing.LEVEL_3,
-        minHeight: "100%"
+        minHeight: "100%",
+        paddingTop: Spacing.LEVEL_4
      }}
    >
      {apiKeys.length === 0 ? (
--- a/apps/mobile/app/screens/settings/section-group.tsx
+++ b/apps/mobile/app/screens/settings/section-group.tsx
@@ -43,7 +43,7 @@ export const SectionGroup = ({
            paddingHorizontal: Spacing.LEVEL_3,
            marginBottom: Spacing.LEVEL_2
          }}
-          color={colors.secondary.paragraph}
+          color={colors.primary.accent}
          size={AppFontSize.sm}
          fontFamily="MEDIUM"
        >
@@ -74,7 +74,7 @@ export const SectionGroup = ({
            style={{
              height: 1,
              width: "100%",
-              backgroundColor: colors.primary.border
+              backgroundColor: colors.primary.separator
            }}
          />
        </View>
--- a/apps/mobile/app/screens/settings/types.ts
+++ b/apps/mobile/app/screens/settings/types.ts
@@ -33,6 +33,7 @@ export type SettingSection = {
    | "input-selector"
    | "dropdown-selector"
    | "group";
+  headerBottomBorder?: boolean;
  name?: string | ((current?: unknown) => string);
  description?: string | ((current: unknown) => string);
  icon?: string;
--- a/apps/mobile/fonts/notesnook-icons.glyphmap.json
+++ b/apps/mobile/fonts/notesnook-icons.glyphmap.json
--- a/apps/mobile/fonts/notesnook-icons.ttf
+++ b/apps/mobile/fonts/notesnook-icons.ttf
--- a/apps/mobile/ios/nanoicons-fonts/notesnook-icons.ttf
+++ b/apps/mobile/ios/nanoicons-fonts/notesnook-icons.ttf
--- a/packages/editor-mobile/src/theme-factory/index.tsx
+++ b/packages/editor-mobile/src/theme-factory/index.tsx
@@ -21,7 +21,6 @@ import { Theme, ThemeFactory, useThemeColors } from "@notesnook/theme";
 import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";

 const modifyToolbarTheme = (toolbarTheme: Theme) => {
-  toolbarTheme.space = [0, 10, 12, 18];
  toolbarTheme.space.small = "10px";

  toolbarTheme.buttons.menuitem = {
@@ -82,7 +81,6 @@ export const EmotionEditorTheme = (props: PropsWithChildren<any>) => {
      }),
    [colors, isDark]
  );
-  theme.space = [0, 10, 12, 20];
  return (
    <EmotionThemeProvider theme={theme}>{props.children}</EmotionThemeProvider>
  );
--- a/packages/icons/svgs/wrench.svg
+++ b/packages/icons/svgs/wrench.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.1724 4.31241C14.142 4.23745 14.094 4.17096 14.0323 4.11865C13.9707 4.06634 13.8972 4.02976 13.8183 4.01207C13.7394 3.99437 13.6574 3.99607 13.5793 4.01703C13.5012 4.03799 13.4293 4.07759 13.3699 4.13241L10.8511 6.45679L9.77425 6.22554L9.543 5.14866L11.8674 2.62991C11.9222 2.57047 11.9618 2.49862 11.9828 2.42051C12.0037 2.34241 12.0054 2.26039 11.9877 2.18148C11.97 2.10258 11.9335 2.02914 11.8811 1.96747C11.8288 1.9058 11.7623 1.85774 11.6874 1.82741C11.0042 1.55106 10.2636 1.44672 9.5307 1.52355C8.79777 1.60038 8.09493 1.85605 7.48393 2.26807C6.87293 2.68009 6.37247 3.23587 6.02652 3.88657C5.68058 4.53727 5.49973 5.26297 5.49988 5.99991C5.49907 6.62221 5.62673 7.23798 5.87488 7.80866L2.11175 11.0624C2.10238 11.0699 2.09363 11.0787 2.08488 11.0868C1.70976 11.4619 1.49902 11.9707 1.49902 12.5012C1.49902 12.7638 1.55076 13.0239 1.65128 13.2666C1.7518 13.5093 1.89914 13.7298 2.08488 13.9155C2.27062 14.1013 2.49112 14.2486 2.7338 14.3491C2.97648 14.4497 3.23658 14.5014 3.49925 14.5014C4.02975 14.5014 4.53851 14.2907 4.91363 13.9155C4.92175 13.9074 4.9305 13.898 4.938 13.8893L8.19113 10.1249C8.8764 10.4257 9.62587 10.5509 10.3717 10.489C11.1175 10.4272 11.8361 10.1803 12.4625 9.77077C13.0889 9.36122 13.6032 8.80191 13.959 8.14348C14.3147 7.48505 14.5006 6.7483 14.4999 5.99991C14.5009 5.42153 14.3896 4.84844 14.1724 4.31241ZM9.99988 9.49991C9.40805 9.4991 8.82604 9.3486 8.308 9.06241C8.20764 9.00697 8.09127 8.9877 7.9784 9.00784C7.86552 9.02798 7.763 9.08631 7.688 9.17304L4.19425 13.2193C4.00519 13.3989 3.75344 13.4976 3.49268 13.4942C3.23192 13.4909 2.98277 13.3858 2.79837 13.2014C2.61397 13.017 2.5089 12.7679 2.50556 12.5071C2.50222 12.2463 2.60088 11.9946 2.7805 11.8055L6.82363 8.31241C6.91051 8.23738 6.96893 8.13474 6.98907 8.02173C7.00922 7.90872 6.98986 7.79221 6.93425 7.69179C6.61552 7.11531 6.46594 6.46059 6.50271 5.8029C6.53948 5.14521 6.7611 4.51124 7.1421 3.97388C7.5231 3.43653 8.04801 3.0176 8.65648 2.76526C9.26495 2.51291 9.93228 2.43741 10.5818 2.54741L8.63175 4.66054C8.5775 4.7194 8.53816 4.79042 8.51706 4.86764C8.49596 4.94486 8.49371 5.02602 8.5105 5.10429L8.86425 6.74991C8.88448 6.84403 8.93146 6.93031 8.99953 6.99838C9.06761 7.06646 9.15388 7.11343 9.248 7.13366L10.8949 7.48741C10.9731 7.5042 11.0543 7.50195 11.1315 7.48085C11.2087 7.45975 11.2798 7.42042 11.3386 7.36616L13.4518 5.41616C13.536 5.91804 13.5099 6.43225 13.3753 6.92302C13.2407 7.41379 13.0007 7.86935 12.6722 8.25801C12.3437 8.64666 11.9345 8.95909 11.473 9.17356C11.0115 9.38803 10.5088 9.4994 9.99988 9.49991Z" fill="#181818"/>
+</svg>
--- a/packages/intl/locale/en.po
+++ b/packages/intl/locale/en.po
@@ -5630,6 +5630,10 @@ msgstr "Privacy Policy. "
 msgid "private analytics and bug reports."
 msgstr "private analytics and bug reports."

+#: src/strings.ts:2778
+msgid "Private key"
+msgstr "Private key"
+
 #: src/strings.ts:2792
 msgid "Private key is passphrase-protected. Please provide the decrypted key or a key without a passphrase."
 msgstr "Private key is passphrase-protected. Please provide the decrypted key or a key without a passphrase."
@@ -5638,10 +5642,6 @@ msgstr "Private key is passphrase-protected. Please provide the decrypted key or
 msgid "Private key required"
 msgstr "Private key required"

-#: src/strings.ts:2778
-msgid "Private key:"
-msgstr "Private key:"
-
 #: src/strings.ts:853
 msgid "Private."
 msgstr "Private."
@@ -5698,14 +5698,14 @@ msgstr "Provide your own keys"
 msgid "Proxy"
 msgstr "Proxy"

+#: src/strings.ts:2777
+msgid "Public key"
+msgstr "Public key"
+
 #: src/strings.ts:2811
 msgid "Public key required"
 msgstr "Public key required"

-#: src/strings.ts:2777
-msgid "Public key:"
-msgstr "Public key:"
-
 #: src/strings.ts:510
 msgid "Publish"
 msgstr "Publish"
--- a/packages/intl/locale/pseudo-LOCALE.po
+++ b/packages/intl/locale/pseudo-LOCALE.po
@@ -5604,6 +5604,10 @@ msgstr ""
 msgid "private analytics and bug reports."
 msgstr ""

+#: src/strings.ts:2778
+msgid "Private key"
+msgstr ""
+
 #: src/strings.ts:2792
 msgid "Private key is passphrase-protected. Please provide the decrypted key or a key without a passphrase."
 msgstr ""
@@ -5612,10 +5616,6 @@ msgstr ""
 msgid "Private key required"
 msgstr ""

-#: src/strings.ts:2778
-msgid "Private key:"
-msgstr ""
-
 #: src/strings.ts:853
 msgid "Private."
 msgstr ""
@@ -5672,12 +5672,12 @@ msgstr ""
 msgid "Proxy"
 msgstr ""

-#: src/strings.ts:2811
-msgid "Public key required"
+#: src/strings.ts:2777
+msgid "Public key"
 msgstr ""

-#: src/strings.ts:2777
-msgid "Public key:"
+#: src/strings.ts:2811
+msgid "Public key required"
 msgstr ""

 #: src/strings.ts:510
--- a/packages/intl/src/strings.ts
+++ b/packages/intl/src/strings.ts
@@ -2774,8 +2774,8 @@ Use this if changes from other devices are not appearing on this device. This wi
  expiresOn: () => t`Expires on`,
  changingInboxPgpKeysNotice: () =>
    t`Changing Inbox PGP keys will delete all your unsynced inbox items.`,
-  publicKey: () => t`Public key:`,
-  privateKey: () => t`Private key:`,
+  publicKey: () => t`Public key`,
+  privateKey: () => t`Private key`,
  invalidPgpKeyPair: () =>
    t`Invalid PGP key pair. Please check your keys and try again.`,
  inboxKeysSaved: () => t`Inbox keys saved`,