Had to use old Card, also some tweaks to font sizes

frequency-chain · Nov 21, 2024 · e56d89e · e56d89e
1 parent eb18225
commit e56d89e
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 33 deletions.
diff --git a/client/src/lib/components/Card.svelte b/client/src/lib/components/Card.svelte
@@ -3,15 +3,17 @@
 	import { testnet } from "$lib/utils/stores";
 </script>
 
-<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">
+<div class="bg-cream 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 class="items-center text-center px-f16">
 		<h3 class="title-h3 text-navy">{$testnet.networkName} Faucet</h3>
-		<p>
+    <p class="text-normal">
 			Get {$testnet.currency} tokens for {$testnet.networkName} testnet.
 		</p>
-		<div class="mt-2 md:mt-8 w-full">
-			<slot />
-		</div>
+    <div class="items-center text-center px-f16">
+      <div class="mt-2 md:mt-8 w-full">
+        <slot />
+      </div>
+    </div>
 	</div>
 </div>
 

diff --git a/client/src/lib/components/Faucet.svelte b/client/src/lib/components/Faucet.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Card } from "@frequency-chain/style-guide"
+  import Card from "$lib/components/Card.svelte";
   import Form from "$lib/components/Form.svelte";
   import SocialTags from "$lib/components/SocialTags.svelte";
   import Error from "$lib/components/screens/Error.svelte";
@@ -23,33 +23,23 @@
     testnet.set(network);
   });
 </script>
-
 <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 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}
-            <div in:fly={{ y: 30, duration: 500 }}>
-              {#if $operation.success}
-                <Success hash={$operation.hash} />
-              {:else}
-                <Error error={$operation.error} />
-              {/if}
-            </div>
-          {/if}
-        </div>
-      </div>
+    <!-- @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}
     </Card>
   </div>
   <FrequentlyAskedQuestions {faq} />

diff --git 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 lg:text-md p-f4 leading-tight 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"

diff --git a/client/src/lib/components/screens/FrequentlyAskedQuestions.svelte b/client/src/lib/components/screens/FrequentlyAskedQuestions.svelte
@@ -4,8 +4,8 @@
 	export let faq: string;
 </script>
 
-<div class="flex items-center justify-center my-2 md:my-16">
-	<div class="md:w-2/3 w-5/6 mt-2 md:mt-20">
+<div class="flex items-center justify-center my-2 md:my-f16">
+	<div class="md:w-2/3 w-5/6 mt-2 md:mt-f20">
 		<div class=" items-center text-center">
 			<h3 id="faq" class="title-h3 text-navy">Frequently Asked Questions</h3>
 			<div