remove ofetch, replace with fetch

apps/expo/src/app/sync/trust/[url].tsx

@@ -2,29 +2,18 @@ import { Stack, useLocalSearchParams } from "expo-router";
 import { useQuery } from "@tanstack/react-query";
 import { H4, Paragraph, Text, View } from "tamagui";
 
+import { getBackendMeta } from "@movie-web/api";
+
 import ScreenLayout from "~/components/layout/ScreenLayout";
 import { MWButton } from "~/components/ui/Button";
 import { MWCard } from "~/components/ui/Card";
 
-// TODO: extract to function with cleanup and types
-const getBackendMeta = (
-  url: string,
-): Promise<{
-  description: string;
-  hasCaptcha: boolean;
-  name: string;
-  url: string;
-}> => {
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-  return fetch(`${url}/meta`).then((res) => res.json());
-};
-
 export default function Page() {
-  const { url } = useLocalSearchParams();
+  const { url } = useLocalSearchParams<{ url: string }>();
 
   const meta = useQuery({
     queryKey: ["backendMeta", url],
-    queryFn: () => getBackendMeta(url as string),
+    queryFn: () => getBackendMeta(url),
   });
 
   return (
@@ -102,7 +91,7 @@ export default function Page() {
           gap="$4"
         >
           <MWButton type="purple">I trust this server</MWButton>
-          <MWButton type="secondary">Go back</MWButton>
+          <MWButton type="cancel">Go back</MWButton>
 
           <Paragraph color="$ash50" textAlign="center" fontWeight="$semibold">
             Already have an account?{" "}

apps/expo/src/components/ui/Button.tsx

@@ -4,35 +4,35 @@ export const MWButton = styled(Button, {
   variants: {
     type: {
       primary: {
-        backgroundColor: "$buttonPrimaryBackground",
-        color: "$buttonPrimaryText",
+        backgroundColor: "white",
+        color: "black",
         fontWeight: "bold",
         pressStyle: {
-          backgroundColor: "$buttonPrimaryBackgroundHover",
+          backgroundColor: "$silver100",
         },
       },
       secondary: {
-        backgroundColor: "$buttonSecondaryBackground",
-        color: "$buttonSecondaryText",
+        backgroundColor: "$ash700",
+        color: "$silver300",
         fontWeight: "bold",
         pressStyle: {
-          backgroundColor: "$buttonSecondaryBackgroundHover",
+          backgroundColor: "$ash500",
         },
       },
       purple: {
-        backgroundColor: "$buttonPurpleBackground",
+        backgroundColor: "$purple500",
         color: "white",
         fontWeight: "bold",
         pressStyle: {
-          backgroundColor: "$buttonPurpleBackgroundHover",
+          backgroundColor: "$purple400",
         },
       },
       cancel: {
-        backgroundColor: "$buttonCancelBackground",
+        backgroundColor: "$ash500",
         color: "white",
         fontWeight: "bold",
         pressStyle: {
-          backgroundColor: "$buttonCancelBackgroundHover",
+          backgroundColor: "$ash300",
         },
       },
     },