optimizing header and stuff

HolodexNet · Nov 9, 2024 · 0886c01 · 0886c01
1 parent a8a794f
commit 0886c01
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 21 deletions.
diff --git a/packages/react/index.html b/packages/react/index.html
@@ -2,16 +2,52 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" href="public/favicon.ico" />
+    <link
+      rel="apple-touch-icon"
+      href="/img/icons/apple-touch-icon-152x152.png"
+    />
+    <meta
+      name="msapplication-TileImage"
+      content="/img/icons/mstile-150x150.png"
+    />
+    <meta
+      name="theme-color"
+      media="(prefers-color-scheme: light)"
+      content="#e3e3e3"
+    />
+    <meta
+      name="theme-color"
+      media="(prefers-color-scheme: dark)"
+      content="#151515"
+    />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
+      content="viewport-fit=cover,initial-scale=1.0,width=device-width,user-scalable=no,maximum-scale=1.0"
+    />
+    <link
+      rel="preload"
+      href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap"
+      as="style"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap"
     />
     <title>Holodex</title>
+    <script>
+      let dark = window.localStorage.getItem("theme-dark");
+      if (
+        dark === "true" ||
+        (dark === null &&
+          window.matchMedia("(prefers-color-scheme: dark)").matches)
+      )
+        document.documentElement.style.backgroundColor = "#131313";
+      else document.documentElement.style.backgroundColor = "#e3e3e3";
+    </script>
   </head>
-
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="src/main.tsx"></script>
   </body>
 </html>
diff --git a/packages/react/public/favicon.ico b/packages/react/public/favicon.ico
diff --git a/packages/react/src/assets/react.svg b/packages/react/src/assets/react.svg
diff --git a/packages/react/src/components/video/MainVideoListing.tsx b/packages/react/src/components/video/MainVideoListing.tsx
@@ -33,8 +33,8 @@ export function MainVideoListing({
         {
           "grid-cols-1 gap-1": size === "list",
           "grid-cols-[repeat(auto-fill,minmax(340px,1fr))]": size === "lg",
-          "grid-cols-[repeat(auto-fill,minmax(220px,1fr))]": size === "md",
-          "grid-cols-[repeat(auto-fill,minmax(180px,1fr))]": size === "sm",
+          "grid-cols-[repeat(auto-fill,minmax(250px,1fr))]": size === "md",
+          "grid-cols-[repeat(auto-fill,minmax(190px,1fr))]": size === "sm",
           "grid-cols-[repeat(auto-fill,minmax(160px,1fr))]": size === "xs",
         },
         className,
@@ -79,14 +79,6 @@ export function MainVideoListing({
       </div>
     );
   }
-  // const Footer = () =>
-  //   (isLoading || isFetchingNextPage) && (
-  //     <div className={listClassName}>
-  //       {Array.from({ length: 8 }).map((_, index) => (
-  //         <SkeletonVideoCard key={`placeholder-${index}`} />
-  //       ))}
-  //     </div>
-  //   );
 
   return (
     <VirtuosoGrid

diff --git a/packages/react/src/index.css b/packages/react/src/index.css
@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap");
+/* @import url("https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap"); */
 @import-glob "../node_modules/@radix-ui/colors/*.css";
 
 @tailwind base;

diff --git a/packages/react/src/shadcn/ui/badge.tsx b/packages/react/src/shadcn/ui/badge.tsx
@@ -5,17 +5,17 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+  "inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
   {
     variants: {
       variant: {
         default:
-          "border-transparent bg-primary-6 text-primary-12 shadow hover:bg-primaryA-4 focus:ring-primary-8",
+          "bg-primary-6 text-primary-12 shadow hover:bg-primaryA-4 focus:ring-primary-8",
         primary:
-          "border-transparent bg-primary-6 text-primary-12 shadow hover:bg-primaryA-4 focus:ring-primary-8",
+          "bg-primary-6 text-primary-12 shadow hover:bg-primaryA-4 focus:ring-primary-8",
         secondary:
-          "border-transparent bg-secondary-6 text-secondary-12 hover:bg-secondaryA-4 focus:ring-secondary-8",
-        outline: "text-base-12 focus:ring-base-8", // Assuming the foreground is a high-contrast text of base color
+          "bg-secondary-6 text-secondary-12 hover:bg-secondaryA-4 focus:ring-secondary-8",
+        outline: "border text-base-12 focus:ring-base-8", // Assuming the foreground is a high-contrast text of base color
       },
       size: {
         default: "px-2.5 py-0.5 text-xs",