From 5aa6681ce67718e2f57b44b4d158d92b374af7b8 Mon Sep 17 00:00:00 2001 From: Shannon Wells Date: Thu, 21 Nov 2024 14:37:58 -0800 Subject: [PATCH] Update to new theme (#33) ## Goal The goal of this PR is to make the site look like the rest of the Developer Portal. To do this, the Style Guide was added so that the custom Tailwind styles and some of the Style Guide components can be used. I used the Figma docs as a guide for whitespace, font sizes, and media break changes. I tried to make it work at even very small widths, <400px. Closes #32 --- client/package.json | 6 +- client/src/app.css | 162 +- client/src/lib/components/Card.svelte | 31 +- client/src/lib/components/Faucet.svelte | 42 +- client/src/lib/components/Footer.svelte | 56 +- client/src/lib/components/Form.svelte | 8 +- client/src/lib/components/NavBar.svelte | 24 +- .../lib/components/icons/CheckCircle.svelte | 2 +- .../lib/components/icons/DiscordLogo.svelte | 17 + .../lib/components/icons/ErrorCircle.svelte | 2 +- .../icons/FrequencyLogo.svelte} | 11 +- client/src/lib/components/icons/XLogo.svelte | 6 + .../src/lib/components/screens/Error.svelte | 9 +- .../screens/FrequentlyAskedQuestions.svelte | 42 +- .../src/lib/components/screens/Success.svelte | 7 +- .../Newake-Font-Regular.eot | Bin 0 -> 98446 bytes .../Newake-Font-Regular.otf | Bin 0 -> 302156 bytes .../Newake-Font-Regular.svg | 5973 +++++++++++++++++ .../Newake-Font-Regular.ttf | Bin 0 -> 98240 bytes .../Newake-Font-Regular.woff | Bin 0 -> 34640 bytes .../Newake-Font-Regular.woff2 | Bin 0 -> 25064 bytes .../NewakeFont-Regular-License-Readme.txt | 20 + client/tailwind.config.cjs | 14 +- client/yarn.lock | 1919 +++--- 24 files changed, 7364 insertions(+), 987 deletions(-) create mode 100644 client/src/lib/components/icons/DiscordLogo.svelte rename client/src/lib/{assets/logo.svg => components/icons/FrequencyLogo.svelte} (92%) create mode 100644 client/src/lib/components/icons/XLogo.svelte create mode 100644 client/src/style/indieground-newakefont-web/Newake-Font-Regular.eot create mode 100644 client/src/style/indieground-newakefont-web/Newake-Font-Regular.otf create mode 100644 client/src/style/indieground-newakefont-web/Newake-Font-Regular.svg create mode 100644 client/src/style/indieground-newakefont-web/Newake-Font-Regular.ttf create mode 100644 client/src/style/indieground-newakefont-web/Newake-Font-Regular.woff create mode 100644 client/src/style/indieground-newakefont-web/Newake-Font-Regular.woff2 create mode 100644 client/src/style/indieground-newakefont-web/NewakeFont-Regular-License-Readme.txt diff --git a/client/package.json b/client/package.json index 91ae0edf..5f3cb2f0 100644 --- a/client/package.json +++ b/client/package.json @@ -21,6 +21,7 @@ "@tailwindcss/typography": "^0.5.10", "autoprefixer": "^10.4.16", "daisyui": "^4.4.4", + "picomatch": "^4.0.2", "postcss": "^8.4.47", "postcss-load-config": "^6.0.1", "svelte": "^4.2.19", @@ -34,5 +35,8 @@ "typescript": "^5.1.3", "vite": "5.4.6" }, - "type": "module" + "type": "module", + "dependencies": { + "@frequency-chain/style-guide": "^0.1.22" + } } diff --git a/client/src/app.css b/client/src/app.css index c17abdea..a1a8eb0b 100644 --- a/client/src/app.css +++ b/client/src/app.css @@ -1,131 +1,89 @@ -@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Unbounded:wght@700;800&display=swap"); -@tailwind base; -@tailwind components; - -:root { - font-family: Poppins, Helvetica, Arial, sans-serif; - font-size: 16px; - line-height: 24px; - font-weight: 400; - - color-scheme: light dark; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; - scroll-behavior: smooth; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} - -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; - background-color: #fefaf3; +@font-face { + font-family: "Newake"; + src: url("./style/indieground-newakefont-web/Newake-Font-Regular.eot"); + src: + url("./style/indieground-newakefont-web/Newake-Font-Regular.woff") format("woff"), + url("./style/indieground-newakefont-web/Newake-Font-Regular.otf") format("opentype"), + url("./style/indieground-newakefont-web/Newake-Font-Regular.svg#filename") format("svg"); } -@media (min-width: 768px) { - .background { - /* background-image: url("$lib/assets/circle.svg"), url("$lib/assets/circle.svg"), url("$lib/assets/circle.svg"); */ - background-repeat: no-repeat; - position: absolute; - background-position-y: 10%, 73%, 50%; - background-position-x: - 25%, - -13%, - 115%; - background-size: 20%, 20%, 30%; - bottom: 0px; - right: 0px; - width: 100%; - height: 100%; - pointer-events: none; - } -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -.card { - padding: 2em; -} +@tailwind base; +@tailwind components; +@tailwind utilities; button { - border-radius: 50%; + @apply bg-teal text-black font-bold cursor-pointer; border: 1px solid transparent !important; padding: 0.6em 1.2em; - font-size: 1em; - font-weight: bold; - font-family: inherit; - background-color: #55b1ab; - cursor: pointer; transition: border-color 0.25s; - color: #fff; } button:disabled { - background-color: #c8cdd0; - color: #fff !important; + @apply bg-gray3 text-white !important; } button:hover { - background-color: #55b1ab !important; - opacity: 80% !important; + @apply opacity-75 !important; } @media (prefers-color-scheme: light) { :root { - color: #213547; - background-color: #ffffff; + @apply text-black bg-white; } +} +.freq-btn { + @apply w-full rounded-3xl font-bold border-0 text-normal md:text-md; +} + +.btn-primary { + @apply text-black bg-teal; +} + +.btn-disabled { + @apply text-white bg-gray3; +} - a:hover { - color: #747bff; +@layer components { + /* Typeography */ + .title-h2 { + @apply font-title text-[50px] leading-[1] tracking-wider md:text-[60px] lg:text-[64px]; } - button { - background-color: #f9f9f9; + .title-h3 { + @apply font-title text-[40px] leading-[1] tracking-wider md:text-[40px] lg:text-[44px]; } -} -.submit-btn { - @apply btn w-full mt-6 rounded-3xl text-white; - background-color: #55b1ab; - text-transform: none; + .title-h5 { + @apply font-title text-[18px] leading-[1] tracking-wider sm:text-[20px] md:text-[22px] lg:text-[26px]; + } + .body { + @apply text-normal md:text-md; + } } -.faucet-card { - background-color: #fff; -} +@layer base { + .toast { + @apply max-w-full text-wrap opacity-60 !important; + } + html { + color-scheme: light dark; + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; + scroll-behavior: smooth; + } -.card-title { - @apply text-black text-4xl; - font-weight: 700; -} + body { + @apply m-0 min-w-f320 min-h-[100vh] flex items-center bg-white text-normal; + } -.card-subtitle { - @apply text-black opacity-70; - font-weight: 400; - font-size: 16px; -} + button { + @apply select-none; + } -.dropdown a { - color: black; + ::placeholder { + @apply text-gray2 !important; + } } - -@tailwind utilities; diff --git a/client/src/lib/components/Card.svelte b/client/src/lib/components/Card.svelte index 06dab4fa..710e4f40 100644 --- a/client/src/lib/components/Card.svelte +++ b/client/src/lib/components/Card.svelte @@ -3,15 +3,17 @@ import { testnet } from "$lib/utils/stores"; -
-
-

{$testnet.networkName} Faucet

-

+
+
+

{$testnet.networkName} Faucet

+

Get {$testnet.currency} tokens for {$testnet.networkName} testnet. -

-
- -
+

+
+
+ +
+
@@ -24,16 +26,3 @@ {/if} - - diff --git a/client/src/lib/components/Faucet.svelte b/client/src/lib/components/Faucet.svelte index 8e3e3f8c..0193fa88 100644 --- a/client/src/lib/components/Faucet.svelte +++ b/client/src/lib/components/Faucet.svelte @@ -23,38 +23,24 @@ testnet.set(network); }); - -
+
-
+
+ - {#if !$operation} -
- {:else} -
- {#if $operation.success} - - {:else} - - {/if} -
- {/if} + {#if !$operation} + + {:else} +
+ {#if $operation.success} + + {:else} + + {/if} +
+ {/if}
- - diff --git a/client/src/lib/components/Footer.svelte b/client/src/lib/components/Footer.svelte index b55b3824..df59c640 100644 --- a/client/src/lib/components/Footer.svelte +++ b/client/src/lib/components/Footer.svelte @@ -1,15 +1,47 @@ - +
+
+
+ +
+ +
+ + + + + + +
+
+
diff --git a/client/src/lib/components/Form.svelte b/client/src/lib/components/Form.svelte index ad9ebcd8..34ec5ef0 100644 --- a/client/src/lib/components/Form.svelte +++ b/client/src/lib/components/Form.svelte @@ -59,7 +59,7 @@ type="text" bind:value={address} placeholder="5rt6..." - class="input w-full text-sm form-background text-black" + class="input w-full text-normal lg:text-md p-f4 md:p-f12 form-background text-black" id="address" disabled={!!webRequest} data-testid="address" @@ -71,11 +71,11 @@
- {:else} - + {/if} @@ -89,7 +89,7 @@ } .form-label { - @apply label-text text-black; + @apply label-text text-white; font-weight: 500; font-size: 16px; } diff --git a/client/src/lib/components/NavBar.svelte b/client/src/lib/components/NavBar.svelte index 3a694b1e..6211fc0e 100644 --- a/client/src/lib/components/NavBar.svelte +++ b/client/src/lib/components/NavBar.svelte @@ -1,25 +1,17 @@ -