Some links and UI improvement (#848)

* Update indexer endpoint * Scale products on PC * Fix footer testnet and mainnet link * Remove home header logo transition * Close icon * Refactor helix not-found page * Refactor helix error page * Refactor app not-found page
helix-bridge · Nov 1, 2024 · 42a7108 · 42a7108
1 parent fede85f
commit 42a7108
Show file tree

Hide file tree

Showing 10 changed files with 29 additions and 47 deletions.
diff --git a/apps/helix/src/routes/error.tsx b/apps/helix/src/routes/error.tsx
@@ -5,7 +5,7 @@ export default function Error() {
   // console.error(error);
 
   return (
-    <main className="app-main flex flex-col items-center justify-center  gap-5">
+    <main className="flex h-screen flex-col items-center justify-center gap-5">
       <h1 className="font-bold">Oops!</h1>
       <p>Sorry, an unexpected error has occurred.</p>
       <p>

diff --git a/apps/helix/src/routes/not-found.tsx b/apps/helix/src/routes/not-found.tsx
@@ -1,17 +1,5 @@
-import { Link } from "react-router-dom";
+import { Navigate } from "react-router-dom";
 
 export default function NotFound() {
-  return (
-    <>
-      <main className="app-main flex items-center justify-center">
-        <div className="gap-medium flex w-fit flex-col items-start">
-          <h2 className="text-base font-medium text-white">Not Found !</h2>
-          <p className="text-sm font-normal text-white">Could not find requested resource</p>
-          <Link to="/" className="text-primary text-sm font-normal hover:underline">
-            Return Home
-          </Link>
-        </div>
-      </main>
-    </>
-  );
+  return <Navigate to="/" replace />;
 }
diff --git a/apps/helixbox-app/.env.mainnet b/apps/helixbox-app/.env.mainnet
@@ -1,2 +1,2 @@
-VITE_GRAPHQL_ENDPOINT=https://apollo.helixbridge.app/graphql
+VITE_GRAPHQL_ENDPOINT=https://apollo.helix.box/graphql
 VITE_NETWORK_TYPE=mainnet
diff --git a/apps/helixbox-app/.env.testnet b/apps/helixbox-app/.env.testnet
@@ -1,2 +1,2 @@
-VITE_GRAPHQL_ENDPOINT=https://apollo-test.helixbridge.app/graphql
+VITE_GRAPHQL_ENDPOINT=https://apollo-test.helix.box/graphql
 VITE_NETWORK_TYPE=testnet
diff --git a/apps/helixbox-app/src/components/footer.tsx b/apps/helixbox-app/src/components/footer.tsx
@@ -33,17 +33,17 @@ function Links() {
 
   useEffect(() => {
     if (window.location.hostname === "app.helix.box") {
-      setNetwork((prev) => ({ ...prev, label: "Testnet", path: "https://testnet.app.helix.box" }));
-    } else if (window.location.hostname === "testnet.app.helix.box") {
+      setNetwork((prev) => ({ ...prev, label: "Testnet", path: "https://testnet-app.helix.box" }));
+    } else if (window.location.hostname === "testnet-app.helix.box") {
       setNetwork((prev) => ({ ...prev, label: "Mainnet", path: "https://app.helix.box" }));
-    } else if (window.location.hostname === "helix-stg-mainnet.vercel.app") {
-      setNetwork((prev) => ({ ...prev, label: "Testnet", path: "https://helix-stg-testnet.vercel.app" }));
-    } else if (window.location.hostname === "helix-stg-testnet.vercel.app") {
-      setNetwork((prev) => ({ ...prev, label: "Mainnet", path: "https://helix-stg-mainnet.vercel.app" }));
-    } else if (window.location.hostname === "helix-dev-mainnet.vercel.app") {
-      setNetwork((prev) => ({ ...prev, label: "Testnet", path: "https://helix-dev-testnet.vercel.app" }));
-    } else if (window.location.hostname === "helix-dev-testnet.vercel.app") {
-      setNetwork((prev) => ({ ...prev, label: "Mainnet", path: "https://helix-dev-mainnet.vercel.app" }));
+    } else if (window.location.hostname === "helixbox-stg-mainnet.vercel.app") {
+      setNetwork((prev) => ({ ...prev, label: "Testnet", path: "https://helixbox-stg-testnet.vercel.app" }));
+    } else if (window.location.hostname === "helixbox-stg-testnet.vercel.app") {
+      setNetwork((prev) => ({ ...prev, label: "Mainnet", path: "https://helixbox-stg-mainnet.vercel.app" }));
+    } else if (window.location.hostname === "helixbox-dev-mainnet.vercel.app") {
+      setNetwork((prev) => ({ ...prev, label: "Testnet", path: "https://helixbox-dev-testnet.vercel.app" }));
+    } else if (window.location.hostname === "helixbox-dev-testnet.vercel.app") {
+      setNetwork((prev) => ({ ...prev, label: "Mainnet", path: "https://helixbox-dev-mainnet.vercel.app" }));
     } else {
       setNetwork((prev) => ({ ...prev, label: "", path: "" }));
     }

diff --git a/apps/helixbox-app/src/routes/not-found.tsx b/apps/helixbox-app/src/routes/not-found.tsx
@@ -1,17 +1,5 @@
-import { Link } from "react-router-dom";
+import { Navigate } from "react-router-dom";
 
 export default function NotFound() {
-  return (
-    <>
-      <main className="app-main flex items-center justify-center">
-        <div className="gap-medium flex w-fit flex-col items-start">
-          <h2 className="text-base font-medium text-white">Not Found !</h2>
-          <p className="text-sm font-normal text-white">Could not find requested resource</p>
-          <Link to="/" className="text-primary text-sm font-normal hover:underline">
-            Return Home
-          </Link>
-        </div>
-      </main>
-    </>
-  );
+  return <Navigate to="/" replace />;
 }
diff --git a/apps/helixbox-home/public/images/close.svg b/apps/helixbox-home/public/images/close.svg
diff --git a/apps/helixbox-home/src/components/homepage-header.tsx b/apps/helixbox-home/src/components/homepage-header.tsx
@@ -21,7 +21,7 @@ const navigations: (
 export default function HomepageHeader() {
   return (
     <div className="fixed left-0 top-0 z-40 flex h-[50px] w-full items-center justify-between px-[20px] backdrop-blur-lg lg:h-[64px] lg:px-[60px]">
-      <Link to="/" className="transition-transform hover:scale-105">
+      <Link to="/">
         <img alt="Helixbox logo" src="images/logo.svg" className="h-[20px] w-[106.64px] lg:h-[26px] lg:w-[138.84px]" />
       </Link>
 

diff --git a/apps/helixbox-home/src/components/homepage-products/index.tsx b/apps/helixbox-home/src/components/homepage-products/index.tsx
@@ -16,7 +16,7 @@ export default function HomepageProducts() {
           <Mobile key={product.title} {...product} />
         ))}
       </div>
-      <div className="relative hidden items-center justify-center lg:flex">
+      <div className="relative hidden scale-90 items-center justify-center lg:flex 2xl:scale-100">
         <AnimatedVideo video={video} />
 
         <div className="absolute -top-[94px] left-[50%] -translate-x-[50%]">

diff --git a/apps/helixbox-home/tailwind.config.js b/apps/helixbox-home/tailwind.config.js
@@ -22,10 +22,10 @@ export default {
       maxWidth: {
         "8xl": "90rem",
       },
-      screens: {
-        xl: "1200px",
-        "2xl": "1200px",
-      },
+      // screens: {
+      //   xl: "1200px",
+      //   "2xl": "1200px",
+      // },
       keyframes: {
         "scroll-to-bottom": {
           "0%": { top: "1lh" },