Match figma design

keypom · Aug 16, 2024 · 0e8c361 · 0e8c361
1 parent 60434eb
commit 0e8c361
Show file tree

Hide file tree

Showing 15 changed files with 1,247 additions and 22 deletions.
diff --git a/background.webp b/background.webp
diff --git a/index.html b/index.html
@@ -5,6 +5,11 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Keypom [Redacted] Event App</title>
+
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Martian+Mono:wght@100..800&display=swap" rel="stylesheet">
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/background.webp b/public/background.webp
diff --git a/src/components/icons/account.tsx b/src/components/icons/account.tsx
@@ -0,0 +1,16 @@
+export function Account() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+    >
+      <path
+        d="M14.4142 10.2857H17.8428V0H7.55709V10.2857H14.4142ZM10.9857 3.42857H14.4142V6.85714H10.9857V3.42857ZM21.2714 13.7143H0.699951V24H4.12852V17.1429H21.2714V24H24.7V13.7143H21.2714Z"
+        fill="black"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/agenda.tsx b/src/components/icons/agenda.tsx
@@ -0,0 +1,16 @@
+export function Agenda() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+    >
+      <path
+        d="M0.899994 17.1429H4.32857V13.7143H0.899994V17.1429ZM7.75714 17.1429H24.9V13.7143H7.75714V17.1429ZM7.75714 24H24.9V20.5714H7.75714V24ZM0.899994 24H4.32857V20.5714H0.899994V24ZM0.899994 10.2857H4.32857V6.85714H0.899994V10.2857ZM7.75714 10.2857H24.9V6.85714H7.75714V10.2857ZM7.75714 0V3.42857H24.9V0H7.75714ZM0.899994 3.42857H4.32857V0H0.899994V3.42857Z"
+        fill="black"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/help.tsx b/src/components/icons/help.tsx
@@ -0,0 +1,16 @@
+export function Help() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+    >
+      <path
+        d="M6.72856 0V3.42857H17.0143V0H6.72856ZM3.29999 6.85714H6.72856V3.42857H3.29999V6.85714ZM17.0143 3.42857V10.2857H20.4428V3.42857H17.0143ZM10.1571 24H13.5857V20.5714H10.1571V24ZM10.1571 10.2857V17.1429H13.5857V13.7143H17.0143V10.2857H10.1571Z"
+        fill="black"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
@@ -0,0 +1,6 @@
+export * from "./account";
+export * from "./agenda";
+export * from "./help";
+export * from "./scan";
+export * from "./wallet";
+export * from "./redacted";
diff --git a/src/components/icons/redacted.tsx b/src/components/icons/redacted.tsx
diff --git a/src/components/icons/scan.tsx b/src/components/icons/scan.tsx
@@ -0,0 +1,16 @@
+export function Scan() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+    >
+      <path
+        d="M21.0714 3.42857H17.6429V6.85714H21.0714V17.1429H17.6429V20.5714H24.5V3.42857H21.0714ZM17.6429 0H7.35714V3.42857H17.6429V0ZM7.35714 24H17.6429V20.5714H7.35714V24ZM3.92857 17.1429V6.85714H7.35714V3.42857H0.5V20.5714H7.35714V17.1429H3.92857ZM10.7857 6.85714H7.35714V17.1429H17.6429V6.85714H10.7857ZM14.2143 13.7143H10.7857V10.2857H14.2143V13.7143Z"
+        fill="black"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/wallet.tsx b/src/components/icons/wallet.tsx
@@ -0,0 +1,28 @@
+export function Wallet() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+    >
+      <g clipPath="url(#clip0_105_870)">
+        <path
+          d="M20.6714 0H0.0999908V24H24.1V0H20.6714ZM20.6714 6.85714H13.8143V10.2857H20.6714V13.7143H13.8143V17.1429H20.6714V20.5714H3.52856V3.42857H20.6714V6.85714ZM10.3857 13.7143H13.8143V10.2857H10.3857V13.7143Z"
+          fill="black"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_105_870">
+          <rect
+            width="24"
+            height="24"
+            fill="white"
+            transform="translate(0.0999908)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/src/components/ui/footer.tsx b/src/components/ui/footer.tsx
@@ -1,16 +1,18 @@
 import { Flex, Button, Container } from "@chakra-ui/react";
+import { Account, Wallet, Help, Agenda, Scan } from "../icons";
 
 type Route = {
   name: string;
   href: string;
+  icon: React.FC;
 };
 
 const routes: Route[] = [
-  { name: "Help", href: "/help" },
-  { name: "Agenda", href: "/agenda" },
-  { name: "Scan", href: "/scan" },
-  { name: "Wallet", href: "/wallet" },
-  { name: "Me", href: "/me" },
+  { name: "Help", href: "/help", icon: Help },
+  { name: "Agenda", href: "/agenda", icon: Agenda },
+  { name: "Scan", href: "/scan", icon: Scan },
+  { name: "Wallet", href: "/wallet", icon: Wallet },
+  { name: "Me", href: "/me", icon: Account },
 ];
 
 export function Footer() {
@@ -20,7 +22,8 @@ export function Footer() {
         <Flex justifyContent="space-between" alignItems="center" as="nav">
           {routes.map((route, index) => (
             <Button as="a" key={index} href={route.href} variant="navigation">
-              {route.name}
+              <route.icon />
+              <span>{route.name}</span>
             </Button>
           ))}
         </Flex>

diff --git a/src/components/ui/header.tsx b/src/components/ui/header.tsx
@@ -1,22 +1,67 @@
 import { Box, Container, Flex, Text } from "@chakra-ui/react";
+import { Redacted } from "../icons";
 
 export function Header() {
   return (
-    <Container maxW={"container.sm"} p={0}>
-      <header>
-        <Box as="nav" m={4}>
+    <Container
+      maxW={"container.sm"}
+      p={0}
+      height="60px"
+      background="black"
+      display={"flex"}
+      alignItems={"center"}
+      justifyContent={"center"}
+    >
+      <header
+        style={{
+          width: "100%",
+          height: 60,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <Box
+          as="nav"
+          display="flex"
+          alignItems={"center"}
+          justifyContent={"center"}
+        >
           <Flex
             as="a"
             href="/"
             textAlign="center"
             justifyContent="center"
             alignItems="center"
-            textTransform="uppercase"
+            width="100%"
             gap={4}
+            textTransform="uppercase"
           >
-            <Text fontSize="sm">Bangkok</Text>
-            <Text fontSize="2xl">(Redacted)</Text>
-            <Text fontSize="sm">Nov9-11</Text>
+            <Text
+              fontFamily={"'Martin Mono', monospace"}
+              textAlign="center"
+              fontSize={["xs", "sm"]}
+              fontWeight="bold"
+              lineHeight="1rem"
+              letterSpacing="2.4px"
+              color="brand.800"
+              flexShrink={0}
+            >
+              Bangkok
+            </Text>
+            <Redacted />
+            <Text
+              fontFamily={"'Martin Mono', monospace"}
+              textAlign="center"
+              fontSize={["xs", "sm"]}
+              fontWeight="bold"
+              lineHeight="1rem"
+              letterSpacing="2.4px"
+              color="brand.800"
+              flexShrink={0}
+            >
+              Nov9-11
+            </Text>
           </Flex>
         </Box>
       </header>

diff --git a/src/routes/layouts/root.tsx b/src/routes/layouts/root.tsx
@@ -6,7 +6,16 @@ import { Footer } from "../../components/ui/footer";
 
 export function Root() {
   return (
-    <Flex minHeight={"100vh"} direction={"column"}>
+    <Flex
+      minHeight={"100vh"}
+      direction={"column"}
+      backgroundImage="url(/background.webp)"
+      backgroundSize="cover"
+      backgroundPosition="top center"
+      backgroundRepeat="no-repeat"
+      maxW={"container.sm"}
+      marginX="auto"
+    >
       <Header />
       <Box role="main" flexGrow={1}>
         <Container maxW={"container.sm"}>

diff --git a/src/theme/colors.ts b/src/theme/colors.ts
@@ -1,7 +1,6 @@
 export const colors = {
   brand: {
-    300: "#10ff9c",
-    400: "#11ff8d",
-    500: "#0dcc70",
+    400: "#00EC97",
+    800: "#096D50",
   },
 };
diff --git a/src/theme/components/button.ts b/src/theme/components/button.ts
@@ -5,11 +5,22 @@ export const ButtonStyle = defineStyleConfig({
     navigation: {
       bg: "brand.400",
       color: "black",
-      flex: 1,
-      padding: "1rem",
-      _hover: {
-        bg: "brand.500",
-      },
+      display: "flex",
+      flexDirection: "column",
+      height: "100%",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: "1rem 1.5rem",
+      gap: 2,
+      flex: "1 0 0",
+      borderRadius: "md",
+      fontFamily: "'Martian Mono', monospace",
+      textAlign: "center",
+      textTransform: "uppercase",
+      fontSize: "xs",
+      fontWeight: "bold",
+      lineHeight: "1rem",
+      fontStretch: "condensed",
     },
   },
 });