From f7c4a39fc9ca9df54f1c22b5be5e333c38fffab4 Mon Sep 17 00:00:00 2001 From: Shubham Gupta Date: Thu, 3 Oct 2024 13:58:37 +0530 Subject: [PATCH] ui: UI changes including fonts --- index.html | 22 ++++++++++++----- src/components/FlowsInfoCard.tsx | 1 + src/components/Toggle.tsx | 4 ++-- src/index.css | 41 +++++++++++++++----------------- src/pages/landingPage.tsx | 4 ++-- src/theme.tsx | 22 ++++++++++------- 6 files changed, 54 insertions(+), 40 deletions(-) diff --git a/index.html b/index.html index a387f26..2f2b4c8 100644 --- a/index.html +++ b/index.html @@ -2,8 +2,16 @@ - - + + Safe Email Recovery Demo @@ -13,10 +21,12 @@ href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap" rel="stylesheet" /> - - + + +
diff --git a/src/components/FlowsInfoCard.tsx b/src/components/FlowsInfoCard.tsx index bb36f9d..a71fe78 100644 --- a/src/components/FlowsInfoCard.tsx +++ b/src/components/FlowsInfoCard.tsx @@ -82,6 +82,7 @@ const FlowInfoCard = ({ diff --git a/src/components/Toggle.tsx b/src/components/Toggle.tsx index 3f62d52..750a6f3 100644 --- a/src/components/Toggle.tsx +++ b/src/components/Toggle.tsx @@ -55,14 +55,14 @@ export default function CustomizedToggleButton({ onFlowChange }) { Set Up Recover diff --git a/src/index.css b/src/index.css index b98ef36..641a84e 100644 --- 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,6 +37,7 @@ a { color: #3c3c3c; text-decoration: inherit; } + a:hover { color: #434343; } @@ -52,7 +45,7 @@ a:hover { 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); } -} +} \ No newline at end of file diff --git a/src/pages/landingPage.tsx b/src/pages/landingPage.tsx index 3ca8157..627a72f 100644 --- a/src/pages/landingPage.tsx +++ b/src/pages/landingPage.tsx @@ -48,7 +48,7 @@ const LandingPage = () => { return (
- + {/* { ZKEmail Tech - + */} Email Recovery Demo diff --git a/src/theme.tsx b/src/theme.tsx index 276c79d..6563e86 100644 --- a/src/theme.tsx +++ b/src/theme.tsx @@ -14,16 +14,16 @@ 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, }, @@ -31,7 +31,6 @@ const theme = createTheme({ 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;