ui: UI changes including fonts

zkemail · Oct 3, 2024 · f7c4a39 · f7c4a39
1 parent 090176f
commit f7c4a39
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 40 deletions.
diff --git a/index.html b/index.html
@@ -2,8 +2,16 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link href="./src/assets/ZKEmailLogoLight.svg" rel="icon" media="(prefers-color-scheme: light)">
-    <link href="./src/assets/ZKEmailLogoDark.svg" rel="icon" media="(prefers-color-scheme: dark)">
+    <link
+      href="./src/assets/ZKEmailLogoLight.svg"
+      rel="icon"
+      media="(prefers-color-scheme: light)"
+    />
+    <link
+      href="./src/assets/ZKEmailLogoDark.svg"
+      rel="icon"
+      media="(prefers-color-scheme: dark)"
+    />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Safe Email Recovery Demo</title>
@@ -13,10 +21,12 @@
       href="https://fonts.googleapis.com/css2?family=Space+Grotesk:[email protected]&display=swap"
       rel="stylesheet"
     />
-
-    <style>
-      @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:[email protected]&display=swap");
-    </style>
+    <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=Fustat:[email protected]&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/components/FlowsInfoCard.tsx b/src/components/FlowsInfoCard.tsx
@@ -82,6 +82,7 @@ const FlowInfoCard = ({
               <Button
                 onClick={handleButtonClick}
                 disabled={isButtonDisabled ?? false}
+                style={{padding: '0.5rem 2rem'}}
               >
                 {buttonText}
               </Button>

diff --git a/src/components/Toggle.tsx b/src/components/Toggle.tsx
@@ -55,14 +55,14 @@ export default function CustomizedToggleButton({ onFlowChange }) {
       <ToggleButton
         value="setup"
         aria-label="set up"
-        sx={{ textTransform: "none", paddingY: "3px", paddingX: "30px" }}
+        sx={{ textTransform: "none", paddingY: "3px", paddingX: "36.5px" }}
       >
         Set Up
       </ToggleButton>
       <ToggleButton
         value="recover"
         aria-label="recover"
-        sx={{ textTransform: "none", paddingY: "3px", paddingX: "30px" }}
+        sx={{ textTransform: "none", paddingY: "3px", paddingX: "36.5px" }}
       >
         Recover
       </ToggleButton>

diff --git a/src/index.css b/src/index.css
@@ -3,36 +3,28 @@
 @tailwind utilities;
 
 :root {
-  font-family: "Space Grotesk", sans-serif;
+  font-family: "Fustat", sans-serif;
   line-height: 1.5;
   font-weight: 400;
   /* color-scheme: light dark; */
   color: rgba(255, 255, 255, 0.87);
   background-color: #ffbfbf;
-  background: radial-gradient(
-      70.71% 70.71% at 50% 50%,
+  background: radial-gradient(70.71% 70.71% at 50% 50%,
       #fff 19%,
-      rgba(255, 255, 255, 0) 61%
-    ),
-    linear-gradient(
-      38deg,
+      rgba(255, 255, 255, 0) 61%),
+    linear-gradient(38deg,
       rgba(255, 255, 255, 0) 60%,
-      rgba(255, 255, 255, 0.69) 100%
-    ),
+      rgba(255, 255, 255, 0.69) 100%),
     linear-gradient(45deg, #fff 10%, rgba(255, 255, 255, 0) 23.5%),
     linear-gradient(36deg, #fff 12.52%, rgba(255, 255, 255, 0) 76.72%),
-    linear-gradient(
-      214deg,
+    linear-gradient(214deg,
       rgba(255, 255, 255, 0) 0%,
       rgba(255, 220, 234, 0.4) 37.53%,
-      rgba(255, 255, 255, 0) 71%
-    ),
-    linear-gradient(
-      212deg,
+      rgba(255, 255, 255, 0) 71%),
+    linear-gradient(212deg,
       rgba(255, 255, 255, 0) 15%,
       #e4f1fe 72.5%,
-      rgba(255, 255, 255, 0) 91.5%
-    );
+      rgba(255, 255, 255, 0) 91.5%);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -45,14 +37,15 @@ a {
   color: #3c3c3c;
   text-decoration: inherit;
 }
+
 a:hover {
   color: #434343;
 }
 
 body {
   margin: 0;
   height: 100vh;
-  font-family: "Space Grotesk", sans-serif;
+  font-family: "Fustat", sans-serif;
 }
 
 h1 {
@@ -66,7 +59,7 @@ button {
   padding: 0.6em 1.2em;
   font-size: 1em;
   font-weight: 500;
-  font-family: "Space Grotesk", sans-serif;
+  font-family: "Fustat", sans-serif;
   background-color: rgba(0, 255, 255, 0);
   cursor: pointer;
   transition: border-color 0.25s;
@@ -75,7 +68,8 @@ button {
 .tooltip {
   position: relative;
   display: inline-block;
-  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
+  border-bottom: 1px dotted black;
+  /* If you want dots under the hoverable text */
 }
 
 /* Tooltip text */
@@ -101,7 +95,8 @@ button {
 .tooltip .tooltiptext::after {
   content: " ";
   position: absolute;
-  top: 100%; /* At the bottom of the tooltip */
+  top: 100%;
+  /* At the bottom of the tooltip */
   left: 50%;
   margin-left: -5px;
   border-width: 5px;
@@ -119,9 +114,11 @@ button:focus-visible {
     color: #213547;
     background-color: #ffffff;
   }
+
   a:hover {
     color: #343434;
   }
+
   button {
     background-color: #f9f9f9;
   }
@@ -144,4 +141,4 @@ button:focus-visible {
   100% {
     transform: rotate(360deg);
   }
-}
+}
diff --git a/src/pages/landingPage.tsx b/src/pages/landingPage.tsx
@@ -48,7 +48,7 @@ const LandingPage = () => {
   return (
     <div className="bg-white">
       <Grid sx={{ paddingTop: { xs: "5rem", md: "7.5rem" } }}>
-        <Link to="https://prove.email/" target="_blank">
+        {/* <Link to="https://prove.email/" target="_blank">
           <Box
             display="flex"
             alignItems="center"
@@ -76,7 +76,7 @@ const LandingPage = () => {
               ZKEmail Tech
             </Typography>
           </Box>
-        </Link>
+        </Link> */}
         <Typography variant="h1" sx={{ color: theme.palette.primary.main }}>
           Email Recovery Demo
         </Typography>

diff --git a/src/theme.tsx b/src/theme.tsx
@@ -14,24 +14,23 @@ const theme = createTheme({
       main: "#FF4081", // Choose your accent color here
     },
   },
-
   typography: {
-    fontFamily: "Space Grotesk",
+    fontFamily: "Fustat",
     h1: {
+      fontFamily: "Newsreader",
       fontSize: "3rem",
-      letterSpacing: -3,
-      fontWeight: "500",
+      fontWeight: "300",
     },
     h2: {
-      fontWeight: "700",
+      fontFamily: "Newsreader",
+      fontWeight: "300",
       color: "#333741",
       letterSpacing: -1,
     },
 
     h4: {
       color: "#333741",
     },
-
     h5: {
       color: "#333741",
     },
@@ -56,8 +55,15 @@ const theme = createTheme({
       color: "#333741",
     },
   },
-
-  components: {},
+  components: {
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          backgroundColor: "black",
+        },
+      },
+    },
+  },
 });
 
 export default theme;