From b9666fb4202c871fc7790d387f45e1ead8c661d0 Mon Sep 17 00:00:00 2001
From: Ammar Ahmed <ammarahmed6506@gmail.com>
Date: Wed, 1 Jul 2026 11:11:56 +0500
Subject: [PATCH] mobile: fix sort sheet ui

---
 .../app/components/sheets/sort/index.tsx      | 22 ++++++++++++-------
 .../app/components/ui/pressable/use-button.ts | 11 ++++------
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/apps/mobile/app/components/sheets/sort/index.tsx b/apps/mobile/app/components/sheets/sort/index.tsx
index 5e68e059a..b7408b977 100644
--- a/apps/mobile/app/components/sheets/sort/index.tsx
+++ b/apps/mobile/app/components/sheets/sort/index.tsx
@@ -265,7 +265,9 @@ const Sort = ({
             >
               <Pressable
                 type={
-                  groupOptions?.sortBy === item ? "selected" : "plain-outline"
+                  groupOptions?.sortBy === item
+                    ? "selected"
+                    : "secondary-outline"
                 }
                 style={{
                   width: "100%",
@@ -389,7 +391,7 @@ const Sort = ({
                 type={
                   groupOptions?.groupBy === GROUP[item as keyof typeof GROUP]
                     ? "selected"
-                    : "plain-outline"
+                    : "secondary-outline"
                 }
                 style={{
                   flexDirection: "row",
@@ -409,12 +411,12 @@ const Sort = ({
                 <Paragraph
                   fontFamily={
                     groupOptions?.groupBy === GROUP[item as keyof typeof GROUP]
-                      ? "SEMI_BOLD"
+                      ? "MEDIUM"
                       : "REGULAR"
                   }
                   color={
                     groupOptions?.groupBy === GROUP[item as keyof typeof GROUP]
-                      ? colors.primary.paragraph
+                      ? colors.primary.heading
                       : colors.secondary.paragraph
                   }
                 >
@@ -455,7 +457,9 @@ const Sort = ({
                 <Pressable
                   key={item.group.id}
                   onPress={() => onPress(item)}
-                  type={currentIndex === index ? "selected" : "plain-outline"}
+                  type={
+                    currentIndex === index ? "selected" : "secondary-outline"
+                  }
                   style={{
                     minWidth: "20%",
                     width: null,
@@ -466,10 +470,12 @@ const Sort = ({
                 >
                   <Paragraph
                     size={AppFontSize.sm}
-                    fontFamily={
-                      currentIndex === index ? "SEMI_BOLD" : "REGULAR"
+                    fontFamily={currentIndex === index ? "MEDIUM" : "REGULAR"}
+                    color={
+                      currentIndex === index
+                        ? colors.primary.heading
+                        : colors.secondary.paragraph
                     }
-                    color={colors.primary.paragraph}
                     style={{
                       textAlign: "center"
                     }}
diff --git a/apps/mobile/app/components/ui/pressable/use-button.ts b/apps/mobile/app/components/ui/pressable/use-button.ts
index a02b65dc1..91b38ecad 100644
--- a/apps/mobile/app/components/ui/pressable/use-button.ts
+++ b/apps/mobile/app/components/ui/pressable/use-button.ts
@@ -17,10 +17,7 @@ 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 { VariantsWithStaticColors, useThemeColors } from "@notesnook/theme";
-import {
-    getColorLinearShade
-} from "../../../utils/colors";
-
+import { getColorLinearShade } from "../../../utils/colors";
 
 export type ButtonTypes =
   | "plain"
@@ -86,8 +83,8 @@ const buttonTypes = (
     text: colors.secondary.paragraph,
     selected: colors.primary.hover,
     borderWidth: 1,
-    borderColor: colors.primary.border,
-    borderSelectedColor: colors.primary.border
+    borderColor: colors.secondary.border,
+    borderSelectedColor: colors.secondary.border
   },
   transparent: {
     primary: "transparent",
@@ -266,4 +263,4 @@ export const useButton = ({
   const { colors, isDark } = useThemeColors();
   const types = buttonTypes(colors, accent, text, isDark);
   return types[type] || types["plain"];
-};
\ No newline at end of file
+};