Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update to new theme #33

Merged
merged 4 commits into from
Nov 21, 2024
Merged

Update to new theme #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0e4dcd6
first pass
shannonwells Nov 19, 2024
eb18225
resizing, padding/margins, mobile-first
shannonwells Nov 21, 2024
e56d89e
Had to use old Card, also some tweaks to font sizes
shannonwells Nov 21, 2024
fb03d0e
touching up, fixing dependency collisions
shannonwells Nov 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -34,5 +35,8 @@
"typescript": "^5.1.3",
"vite": "5.4.6"
},
"type": "module"
"type": "module",
"dependencies": {
"@frequency-chain/style-guide": "^0.1.22"
}
}
162 changes: 60 additions & 102 deletions client/src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
31 changes: 10 additions & 21 deletions client/src/lib/components/Card.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,17 @@
import { testnet } from "$lib/utils/stores";
</script>

<div class="card md:w-2/4 w-5/6 min-w-full shadow-xl faucet-card">
<div class="card-body items-center text-center">
<h1>{$testnet.networkName} Faucet</h1>
<h3>
<div class="bg-navy rounded-3xl text-white w-full md:w-2/3 lg:w-1/2 md:max-w-[700px] px-f12 py-f24 md:px-f56 md:py-f64 lg:px-f64 lg:py-f96 shadow-xl">
<div class="items-center text-center px-f16">
<h3 class="title-h3">{$testnet.networkName} Faucet</h3>
<p class="text-normal">
Get {$testnet.currency} tokens for {$testnet.networkName} testnet.
</h3>
<div class="mt-2 md:mt-8 w-full">
<slot />
</div>
</p>
<div class="items-center text-center px-f16">
<div class="mt-2 md:mt-8 w-full">
<slot />
</div>
</div>
</div>
</div>

Expand All @@ -24,16 +26,3 @@
</div>
</div>
{/if}

<style lang="postcss">
h1 {
@apply text-black text-4xl;
font-weight: 700;
}

h3 {
@apply text-black opacity-70;
font-weight: 400;
font-size: 16px;
}
</style>
42 changes: 14 additions & 28 deletions client/src/lib/components/Faucet.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,38 +23,24 @@
testnet.set(network);
});
</script>

<main>
<main class="mt-9 px-9 md:px-f64 lg:px-0">
<SocialTags />
<MarkUp {faq} />
<div class="flex items-center justify-center mt-16 mb-4 md:my-16">
<div class="flex items-center justify-center mt-16 mb-f48 md:my-16">
<!-- @ts-ignore svelte-ignore -->
<Card>
{#if !$operation}
<Form />
{:else}
<div in:fly={{ y: 30, duration: 500 }}>
{#if $operation.success}
<Success hash={$operation.hash} />
{:else}
<Error error={$operation.error} />
{/if}
</div>
{/if}
{#if !$operation}
<Form />
{:else}
<div in:fly={{ y: 30, duration: 500 }}>
{#if $operation.success}
<Success hash={$operation.hash} />
{:else}
<Error error={$operation.error} />
{/if}
</div>
{/if}
</Card>
</div>
<FrequentlyAskedQuestions {faq} />
</main>

<style lang="postcss">
main {
@apply mx-auto my-0 md:p-8;
max-width: 720px;
text-align: center;
}

@media (min-width: 768px) {
main {
min-height: 90vh;
}
}
</style>
56 changes: 44 additions & 12 deletions client/src/lib/components/Footer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,47 @@
<script lang="ts">
import { PUBLIC_FORUM } from "$env/static/public";
import { IconButton, } from "@frequency-chain/style-guide";
import XLogo from "$lib/components/icons/XLogo.svelte";
import DiscordLogo from "$lib/components/icons/DiscordLogo.svelte"
import FrequencyLogo from "$lib/components/icons/FrequencyLogo.svelte"

export let privacyHref: string = 'https://www.frequency.xyz/privacy';
export let type: 'light' | 'dark' = 'light';

let fgColorText = {
dark: 'text-white',
light: 'text-black',
}[type];
let fgColorBg = {
dark: 'bg-white',
light: 'bg-black',
}[type];
</script>

<footer class="footer items-center p-4 text-black px-1 md:px-6">
<div class="items-center grid-flow-col">
<p>2024 Frequency Network Foundation</p>
</div>
<div class="grid-flow-col gap-4 md:place-self-center md:justify-self-end">
<b class="font-bold">Questions?</b>
<a class="text-black text-opacity-80 cursor-pointer" href={PUBLIC_FORUM} target="_blank">
Discord Channel
</a>
</div>
</footer>
<div class="px-[10px] sm:px-[30px] md:px-[40px] lg:px-[80px] ">
<footer
class="sm md:md mx-auto my-0 flex max-w-screen-xl flex-col items-center gap-f16 border-t-[2px] border-current py-f48 md:gap-f48 {fgColorText}"
>
<div class="px-f24">
<FrequencyLogo fill="#000000"/>
</div>
<aside class="flex flex-col items-center space-y-4 text-center leading-none md:flex-row md:space-x-4 md:space-y-0">
<div>
© {new Date().getFullYear()} Frequency Network Foundation <span class="md:hidden">All Rights Reserved</span>
</div>
<div class="hidden w-[2px] self-stretch md:block {fgColorBg}"></div>
<div class="hidden md:block">All Rights Reserved</div>
<div class="hidden w-[2px] self-stretch md:block {fgColorBg}"></div>
<div>
<a href={privacyHref} class="underline transition duration-[0.3s] hover:text-teal">Privacy Policy</a>
</div>
</aside>
<div class="flex gap-f16" aria-label="Social Links">
<IconButton {type} label="X/Twitter" href={'https://twitter.com/one_frequency'}>
<XLogo />
</IconButton>
<IconButton {type} label="Discord" href="https://discord.com/invite/JchmHX5afV">
<DiscordLogo />
</IconButton>
</div>
</footer>
</div>
8 changes: 4 additions & 4 deletions client/src/lib/components/Form.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -71,11 +71,11 @@
<div class="grid place-items-center">
<CaptchaV2 on:token={onToken} />
</div>
<button class="submit-btn" type="submit" data-testid="submit-button" disabled={!formValid}>
<button class="freq-btn btn-primary mt-6" type="submit" data-testid="submit-button" disabled={!formValid}>
Get some {$testnet.currency}s
</button>
{:else}
<button class="btn submit-btn" disabled><div class="loading" /></button>
<button class="freq-btn btn-disabled mt-6" disabled><div class="loading" /></button>
{/if}
</form>

Expand All @@ -89,7 +89,7 @@
}

.form-label {
@apply label-text text-black;
@apply label-text text-white;
font-weight: 500;
font-size: 16px;
}
Expand Down
Loading