From eb1822556a61aa156a3f7c7f401490d5a8158bbe Mon Sep 17 00:00:00 2001
From: shannonwells <shannonwells@users.noreply.github.com>
Date: Wed, 20 Nov 2024 16:16:16 -0800
Subject: [PATCH] resizing, padding/margins, mobile-first

---
 client/src/app.css                            | 35 +++++---------
 client/src/lib/components/Card.svelte         | 10 ++--
 client/src/lib/components/Faucet.svelte       | 46 +++++++++----------
 client/src/lib/components/Footer.svelte       |  4 +-
 client/src/lib/components/Form.svelte         |  6 +--
 client/src/lib/components/NavBar.svelte       | 22 +++------
 .../lib/components/icons/CheckCircle.svelte   |  2 +-
 .../lib/components/icons/ErrorCircle.svelte   |  2 +-
 .../lib/components/icons/FrequencyLogo.svelte |  2 +-
 .../src/lib/components/screens/Error.svelte   |  9 ++--
 .../screens/FrequentlyAskedQuestions.svelte   |  6 +--
 .../src/lib/components/screens/Success.svelte |  7 ++-
 12 files changed, 63 insertions(+), 88 deletions(-)

diff --git a/client/src/app.css b/client/src/app.css
index 2b51c054..f83599b8 100644
--- a/client/src/app.css
+++ b/client/src/app.css
@@ -11,20 +11,6 @@
 @tailwind components;
 @tailwind utilities;
 
-a {
-	font-weight: 500;
-	color: #646cff;
-	text-decoration: inherit;
-}
-
-a:hover {
-	color: #535bf2;
-}
-
-.card {
-  @apply p-[2em] bg-cream;
-}
-
 button {
   @apply bg-teal text-black font-bold cursor-pointer;
 	border: 1px solid transparent !important;
@@ -47,19 +33,17 @@ button:hover {
 	:root {
     @apply text-black bg-white;
 	}
+}
+.btn {
+  @apply w-full rounded-3xl font-bold border-0 text-normal md:text-md;
+}
 
-	a:hover {
-		color: #747bff;
-	}
-
-	button {
-		background-color: #f9f9f9;
-	}
+.btn-primary {
+	@apply text-black bg-teal;
 }
 
-.submit-btn {
-	@apply btn w-full mt-6 rounded-3xl text-black font-bold bg-teal;
-	/*text-transform: none;*/
+.btn-disabled {
+  @apply text-white bg-gray3;
 }
 
 @layer components {
@@ -81,6 +65,9 @@ button:hover {
 }
 
 @layer base {
+  .toast {
+    @apply max-w-full text-wrap opacity-60 !important;
+  }
   html {
     color-scheme: light dark;
     font-synthesis: none;
diff --git a/client/src/lib/components/Card.svelte b/client/src/lib/components/Card.svelte
index 5671f1a4..5375978e 100644
--- a/client/src/lib/components/Card.svelte
+++ b/client/src/lib/components/Card.svelte
@@ -3,12 +3,12 @@
 	import { testnet } from "$lib/utils/stores";
 </script>
 
-<div class="card md:w-2/4 w-5/6 min-w-full shadow-xl">
-	<div class="card-body items-center text-center">
-		<h1 class="title-h3 text-navy">{$testnet.networkName} Faucet</h1>
-		<h3>
+<div class="bg-cream w-full md:w-2/3 lg:w-[600px] px-f12 py-f24 md:py-f64 md:px-f56 lg:px-f64 lg:py-f96 shadow-xl">
+	<div class="items-center text-center">
+		<h3 class="title-h3 text-navy">{$testnet.networkName} Faucet</h3>
+		<p>
 			Get {$testnet.currency} tokens for {$testnet.networkName} testnet.
-		</h3>
+		</p>
 		<div class="mt-2 md:mt-8 w-full">
 			<slot />
 		</div>
diff --git a/client/src/lib/components/Faucet.svelte b/client/src/lib/components/Faucet.svelte
index 8e3e3f8c..e3d88e3b 100644
--- a/client/src/lib/components/Faucet.svelte
+++ b/client/src/lib/components/Faucet.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Card from "$lib/components/Card.svelte";
+  import { Card } from "@frequency-chain/style-guide"
   import Form from "$lib/components/Form.svelte";
   import SocialTags from "$lib/components/SocialTags.svelte";
   import Error from "$lib/components/screens/Error.svelte";
@@ -24,37 +24,33 @@
   });
 </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">
-    <Card>
-      {#if !$operation}
-        <Form />
-      {:else}
-        <div in:fly={{ y: 30, duration: 500 }}>
-          {#if $operation.success}
-            <Success hash={$operation.hash} />
+    <Card title="" icon="" bgColor="cream"
+      class="w-full md:w-2/3 lg:w-1/2 px-f12 py-f24 md:px-f56 md:py-f64 lg:px-f64 lg:py-f96 shadow-xl"
+      >
+      <div slot="content" class="items-center text-center px-f16">
+        <h3 class="title-h3 text-navy">{$testnet.networkName} Faucet</h3>
+        <p class="text-normal">
+          Get {$testnet.currency} tokens for {$testnet.networkName} testnet.
+        </p>
+        <div class="mt-2 md:mt-8 w-full">
+          {#if !$operation}
+            <Form />
           {:else}
-            <Error error={$operation.error} />
+            <div in:fly={{ y: 30, duration: 500 }}>
+              {#if $operation.success}
+                <Success hash={$operation.hash} />
+              {:else}
+                <Error error={$operation.error} />
+              {/if}
+            </div>
           {/if}
         </div>
-      {/if}
+      </div>
     </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>
diff --git a/client/src/lib/components/Footer.svelte b/client/src/lib/components/Footer.svelte
index 37e597f3..e67dd6d4 100644
--- a/client/src/lib/components/Footer.svelte
+++ b/client/src/lib/components/Footer.svelte
@@ -20,7 +20,9 @@
 <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}"
 >
-  <FrequencyLogo fill="#000000"/>
+  <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>
diff --git a/client/src/lib/components/Form.svelte b/client/src/lib/components/Form.svelte
index ad9ebcd8..0ec1e3f0 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-sm lg:text-md p-f4 leading-tight form-background text-black"
 			id="address"
 			disabled={!!webRequest}
 			data-testid="address"
@@ -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="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="btn btn-disabled mt-6" disabled><div class="loading" /></button>
 	{/if}
 </form>
 
diff --git a/client/src/lib/components/NavBar.svelte b/client/src/lib/components/NavBar.svelte
index da5dc0da..da1b47de 100644
--- a/client/src/lib/components/NavBar.svelte
+++ b/client/src/lib/components/NavBar.svelte
@@ -3,23 +3,15 @@
   import FrequencyLogo  from "$lib/components/icons/FrequencyLogo.svelte"
 </script>
 
-<div class="navigation-bar">
-	<div class="flex-1">
-		<div class="w-36 rounded-full">
-			<a href={`${base}/`} class="text-black"><FrequencyLogo width="144"/></a>
-		</div>
+<div class="flex mt-f12 px-f16 md:px-f32 lg:px-f120 justify-between">
+	<div class="w-f160 md:w-[200px]">
+    <a href={`${base}/`}>
+      <FrequencyLogo width="100%"/>
+    </a>
 	</div>
-	<div class="flex-none">
+	<div class="my-auto min-w-f120 md:w-f192">
 		<a href="#faq">
-			<button class="submit-btn"> &#8594; Questions? </button>
+			<button class="btn btn-primary p-f8 font-sans md:p-inherit"> &#8594; Questions? </button>
 		</a>
 	</div>
 </div>
-
-<style lang="postcss">
-	.navigation-bar {
-		@apply navbar px-1 md:px-6;
-		position: absolute;
-		top: 0;
-	}
-</style>
diff --git a/client/src/lib/components/icons/CheckCircle.svelte b/client/src/lib/components/icons/CheckCircle.svelte
index ca260e16..7095bcd3 100644
--- a/client/src/lib/components/icons/CheckCircle.svelte
+++ b/client/src/lib/components/icons/CheckCircle.svelte
@@ -4,7 +4,7 @@
   viewBox="0 0 24 24"
   stroke-width="1.5"
   stroke="currentColor"
-  class="w-64 h-64"
+  class="w-64 h-64 {$$restProps.class}"
 >
   <path
     stroke-linecap="round"
diff --git a/client/src/lib/components/icons/ErrorCircle.svelte b/client/src/lib/components/icons/ErrorCircle.svelte
index 7432da67..1597db79 100644
--- a/client/src/lib/components/icons/ErrorCircle.svelte
+++ b/client/src/lib/components/icons/ErrorCircle.svelte
@@ -4,7 +4,7 @@
   viewBox="0 0 24 24"
   stroke-width="1.5"
   stroke="currentColor"
-  class="w-64 h-64"
+  class="w-64 h-64 {$$restProps.class}"
 >
   <path
     stroke-linecap="round"
diff --git a/client/src/lib/components/icons/FrequencyLogo.svelte b/client/src/lib/components/icons/FrequencyLogo.svelte
index db2c0d61..0f23d5f4 100644
--- a/client/src/lib/components/icons/FrequencyLogo.svelte
+++ b/client/src/lib/components/icons/FrequencyLogo.svelte
@@ -1,6 +1,6 @@
 <script type="ts">
   export let fill='#55B1AB';
-  export let width='461'
+  export let width='100%'
 </script>
 
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" {width} height="68.256" viewBox="0 0 461.117 68.256">
diff --git a/client/src/lib/components/screens/Error.svelte b/client/src/lib/components/screens/Error.svelte
index fa595dcf..6cfa52e8 100644
--- a/client/src/lib/components/screens/Error.svelte
+++ b/client/src/lib/components/screens/Error.svelte
@@ -8,13 +8,13 @@
 	}
 </script>
 
-<div class="icon">
-	<ErrorCircle />
+<div class="icon max-w-full">
+	<ErrorCircle class="max-w-full"/>
 </div>
 <div class="message" data-testid="error">
 	{error ?? "There was an error during the transaction."}
 </div>
-<button class="submit-btn" data-testid="reload" on:click={onGoBack}> Go back </button>
+<button class="btn btn-primary" data-testid="reload" on:click={onGoBack}> Go back </button>
 
 <style lang="postcss">
 	.message {
@@ -24,7 +24,6 @@
 	}
 
 	.icon {
-		@apply w-full grid place-items-center;
-		color: #eb5757;
+		@apply w-full grid place-items-center text-error;
 	}
 </style>
diff --git a/client/src/lib/components/screens/FrequentlyAskedQuestions.svelte b/client/src/lib/components/screens/FrequentlyAskedQuestions.svelte
index 06cfa2de..2ab66cc1 100644
--- a/client/src/lib/components/screens/FrequentlyAskedQuestions.svelte
+++ b/client/src/lib/components/screens/FrequentlyAskedQuestions.svelte
@@ -5,11 +5,11 @@
 </script>
 
 <div class="flex items-center justify-center my-2 md:my-16">
-	<div class="md:w-2/4 w-5/6 min-w-full mt-2 md:mt-20">
+	<div class="md:w-2/3 w-5/6 mt-2 md:mt-20">
 		<div class=" items-center text-center">
-			<h1 id="faq" class="title-h3 text-navy">Frequently Asked Questions</h1>
+			<h3 id="faq" class="title-h3 text-navy">Frequently Asked Questions</h3>
 			<div
-				class="mt-2 md:mt-8 w-full text-left prose lg:prose-xl prose-headings:text-xl prose-headings:text-black prose-headings:font-bold prose-p:text-opacity-90"
+				class="mt-2 md:mt-8 w-full text-left prose lg:prose-xl prose-headings:text-xl prose-headings:text-navy prose-headings:font-bold prose-p:text-opacity-90"
 			>
 				<SvelteMarkdown source={faq} />
 			</div>
diff --git a/client/src/lib/components/screens/Success.svelte b/client/src/lib/components/screens/Success.svelte
index 703b9208..28f8fe18 100644
--- a/client/src/lib/components/screens/Success.svelte
+++ b/client/src/lib/components/screens/Success.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <div class="icon">
-	<CheckCircle />
+	<CheckCircle class="max-w-full"/>
 </div>
 <div class="message">
 	Successfully sent {$testnet.currency}s to your address.
@@ -19,7 +19,7 @@
 		target="_blank"
 		rel="noreferrer"
 	>
-		<button class="submit-btn"> See transaction details</button>
+		<button class="btn btn-primary"> See transaction details</button>
 	</a>
 {/if}
 
@@ -31,7 +31,6 @@
 	}
 
 	.icon {
-		@apply w-full grid place-items-center;
-		color: #27ae60;
+		@apply w-full grid place-items-center text-success;
 	}
 </style>