mobile: fix sort sheet ui

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"
                     }}

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"];
-};
+};