Feat/replace font remove dropdown (#30)

Replace all fonts with Poppins (a Google font) Remove dropdowns for choosing the network and chain since we have only one faucet. Closes #20 Closes #21
frequency-chain · Oct 8, 2024 · 2229797 · 2229797
1 parent 46028e8
commit 2229797
Show file tree

Hide file tree

Showing 11 changed files with 11 additions and 45 deletions.
diff --git a/client/src/app.css b/client/src/app.css
@@ -3,7 +3,7 @@
 @tailwind components;
 
 :root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-family: Poppins, Helvetica, Arial, sans-serif;
   font-size: 16px;
   line-height: 24px;
   font-weight: 400;
@@ -105,7 +105,6 @@ button:focus-visible {
 .submit-btn {
   @apply btn w-full mt-6 rounded-3xl text-white;
   background-color: #282837;
-  font-family: "Inter", sans-serif;
   font-weight: 500;
   text-transform: none;
 }
@@ -119,7 +118,6 @@ button:focus-visible {
 }
 
 .card-title {
-  font-family: "Unbounded", sans-serif;
   @apply text-white text-4xl;
   font-weight: 700;
 }

diff --git a/client/src/app.html b/client/src/app.html
@@ -3,7 +3,10 @@
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" type="image/x-icon" href="%sveltekit.assets%/favicon-192.png" />
-		<meta name="viewport" content="width=device-width" />
+    <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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+    <meta name="viewport" content="width=device-width" />
 		%sveltekit.head%
 	</head>
 

diff --git a/client/src/lib/components/Card.svelte b/client/src/lib/components/Card.svelte
@@ -31,7 +31,6 @@
 	}
 
 	h1 {
-		font-family: "Unbounded", sans-serif;
 		@apply text-white text-4xl;
 		font-weight: 700;
 	}

diff --git a/client/src/lib/components/ChainDropdown.svelte b/client/src/lib/components/ChainDropdown.svelte
@@ -78,10 +78,6 @@
     margin-bottom: 1.5rem;
   }
 
-  .inter {
-    font-family: "Inter", sans-serif;
-  }
-
   .form-background {
     background-color: #191924;
     border: 1px solid rgba(255, 255, 255, 0.3);
@@ -100,14 +96,13 @@
   .custom-chain-switch {
     @apply text-left hover:underline hover:cursor-pointer;
     color: #c4affa;
-    font-family: "Inter", sans-serif;
     font-weight: 400;
     font-size: 14px;
     margin-top: 8px;
   }
 
   .chain-dropdown {
-    @apply input w-full text-sm form-background text-white inter flex flex-col justify-center items-center cursor-pointer;
+    @apply input w-full text-sm form-background text-white flex flex-col justify-center items-center cursor-pointer;
   }
 
   /* Chrome, Safari, Edge, Opera */

diff --git a/client/src/lib/components/Faucet.svelte b/client/src/lib/components/Faucet.svelte
@@ -30,7 +30,7 @@
   <div class="flex items-center justify-center mt-16 mb-4 md:my-16">
     <Card>
       {#if !$operation}
-        <Form network={parachain ?? -1} networkData={network} />
+        <Form />
       {:else}
         <div in:fly={{ y: 30, duration: 500 }}>
           {#if $operation.success}

diff --git a/client/src/lib/components/Footer.svelte b/client/src/lib/components/Footer.svelte
@@ -15,11 +15,7 @@
 </footer>
 
 <style lang="postcss">
-	footer {
-		font-family: "Inter", sans-serif;
-	}
-
-	.questions {
+  .questions {
 		font-weight: 700;
 		@apply font-bold;
 	}

diff --git a/client/src/lib/components/Form.svelte b/client/src/lib/components/Form.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { NetworkData } from "$lib/utils/networkData";
+  import { Frequency } from "$lib/utils/networkData"
   import { operation, testnet } from "$lib/utils/stores";
   import { request as faucetRequest } from "../utils";
   import CaptchaV2 from "./CaptchaV2.svelte";
@@ -8,8 +9,8 @@
   import {validateAddress} from "@polkadot/util-crypto";
 
   let address: string = "";
-  export let network: number = -1;
-  export let networkData: NetworkData;
+  let network: number = -1;
+  let networkData: NetworkData = Frequency;
   let token: string = "";
   let formValid: boolean;
   $: formValid = !!address && !!token && !!network;
@@ -50,11 +51,6 @@
 </script>
 
 <form on:submit|preventDefault={onSubmit} class="w-full">
-  <div class="grid md:grid-cols-2 md:gap-x-4">
-    <NetworkDropdown currentNetwork={networkData} />
-    <NetworkInput bind:network />
-  </div>
-
   <div class="inputs-container">
     <label class="label" for="address">
       <span class="form-label">{$testnet.networkName} Address</span>
@@ -88,10 +84,6 @@
     margin-bottom: 1.5rem;
   }
 
-  form {
-    font-family: "Inter", sans-serif;
-  }
-
   .form-background {
     background-color: #191924;
     border: 1px solid rgba(255, 255, 255, 0.3);

diff --git a/client/src/lib/components/screens/Error.svelte b/client/src/lib/components/screens/Error.svelte
@@ -19,7 +19,6 @@
 <style lang="postcss">
   .message {
     @apply text-lg mb-4;
-    font-family: "Inter", sans-serif;
     font-weight: 400;
     font-size: 16px;
     color: rgba(255, 255, 255, 0.7);

diff --git a/client/src/lib/components/screens/FrequentlyAskedQuestions.svelte b/client/src/lib/components/screens/FrequentlyAskedQuestions.svelte
@@ -23,14 +23,12 @@
   }
 
   h1 {
-    font-family: "Unbounded", sans-serif;
     @apply text-white text-4xl;
     font-weight: 700;
   }
 
   .content {
     @apply mt-2 md:mt-8 w-full text-left;
-    font-family: "Inter", sans-serif;
     font-size: 16px;
     font-weight: 400;
 

diff --git a/client/src/lib/components/screens/Success.svelte b/client/src/lib/components/screens/Success.svelte
@@ -21,7 +21,6 @@
 <style lang="postcss">
   .message {
     @apply text-lg mb-4;
-    font-family: "Inter", sans-serif;
     font-weight: 400;
     font-size: 16px;
     color: rgba(255, 255, 255, 0.7);

diff --git a/client/tests/faucet.ts b/client/tests/faucet.ts
@@ -91,19 +91,6 @@ export class FaucetTests {
 					await expect(captcha).toBeVisible();
 				});
 
-				test("page loads with default value in parachain field", async ({ page }) => {
-					await page.goto(this.url);
-					const { network } = await getFormElements(page);
-					await expect(network).toHaveValue("-1");
-				});
-
-				test("page with get parameter loads with value in parachain field", async ({ page }) => {
-					const parachainId = "1234";
-					await page.goto(`${this.url}?parachain=${parachainId}`);
-					const { network } = await getFormElements(page);
-					await expect(network).toHaveValue(parachainId);
-				});
-
 				test("page has captcha", async ({ page }) => {
 					await page.goto(this.url);
 					const { captcha } = await getFormElements(page, true);
-Original file line number
+Diff line change
@@ Expand Up / @@ -31,7 +31,6 @@ @@
     	}
     	h1 {
-    		font-family: "Unbounded", sans-serif;
     		@apply text-white text-4xl;
     		font-weight: 700;
     	}
@@ Expand Down @@