feat(site): demo styling with terminal containers and demo buttons

unionlabs · Oct 18, 2023 · e3748a8 · e3748a8
1 parent 87ba085
commit e3748a8
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 14 deletions.
diff --git a/site/src/lib/DemoButton.svelte b/site/src/lib/DemoButton.svelte
@@ -1,3 +1,9 @@
-<button class="bg-red-500 px-4" on:click on:focus on:submit {...$$restProps}>
+<button
+	class="px-4 py-2 border-2 border-accent text-accent font-jetbrains"
+	on:click
+	on:focus
+	on:submit
+	{...$$restProps}
+>
 	<slot />
 </button>
diff --git a/site/src/lib/DemoButtonA.svelte b/site/src/lib/DemoButtonA.svelte
@@ -0,0 +1,9 @@
+<a
+	class="px-4 py-2 border-2 border-accent text-accent font-jetbrains"
+	on:click
+	on:focus
+	on:submit
+	{...$$restProps}
+>
+	<slot />
+</a>
diff --git a/site/src/lib/TerminalContainer.svelte b/site/src/lib/TerminalContainer.svelte
@@ -0,0 +1,3 @@
+<div class="my-4 p-4 md:shadow-2xl bg-black text-xs sm:text-lg font-jetbrains md:rounded-xl">
+	<slot />
+</div>
diff --git a/site/src/routes/blog/start-of-the-endgame/AddressesAndBalances.svelte b/site/src/routes/blog/start-of-the-endgame/AddressesAndBalances.svelte
@@ -2,10 +2,10 @@
 import { sendUnoToUnion } from '$lib/transferFromSepolia';
 import { unionAccount, unionUnoBalance, ethereumEthBalance, ethereumAddress, ethereumUnoBalance } from '$lib/stores/wallets'; 
 import { getUnoFromFaucet, sendUnoToUnionAddress, sendUnoToEthereum } from '$lib/transferDemo';
+import TerminalContainer from '$lib/TerminalContainer.svelte';
 </script>
 
-
-<div class="bg-black p-4 my-4 font-jetbrains">
+<TerminalContainer>
 	{#if $unionAccount === null}
 		Complete the previous step to continue
 	{:else}
@@ -39,5 +39,5 @@ import { getUnoFromFaucet, sendUnoToUnionAddress, sendUnoToEthereum } from '$lib
 		<button class="px-4 mt-4 py-2 border-2 font-jetbrains border-accent text-accent" on:click={sendUnoToUnionAddress}>Send UNO</button>
 		!-->
 	{/if}
-</div>
+</TerminalContainer>
 
diff --git a/site/src/routes/blog/start-of-the-endgame/ConnectToMetamask.svelte b/site/src/routes/blog/start-of-the-endgame/ConnectToMetamask.svelte
@@ -5,7 +5,9 @@
 	import { metamaskInstalled, connectedToSepolia, connectedToUnion, snapInstalled } from '$lib/stores/wallets';
 	import { ethersSetup, connectToSepolia, updateConnectedToSeplia, connectLeapSnap, updateSnapInstalled, updateConnectedToUnion, connectToUnion } from '$lib/ethersSetup';
 
+	import TerminalContainer from '$lib/TerminalContainer.svelte';
 	import DemoButton from '$lib/DemoButton.svelte';
+	import DemoButtonA from '$lib/DemoButtonA.svelte';
 	import BlogLayout from '../../../mdsvex/BlogLayout.svelte';
 	import ButtonA from '$lib/ButtonA.svelte';
 	import AddressesAndBalances from './AddressesAndBalances.svelte';
@@ -37,25 +39,31 @@
 </script>
 
 
-<div class="bg-black my-4 p-4 font-jetbrains rounded">
+<TerminalContainer>
 	{#if !$metamaskInstalled}
-		<a href="https://metamask.io/download/">Install MetaMask to continue 🦊</a>
+		<div class="my-4"><DemoButtonA href="https://metamask.io/download/">Install MetaMask to continue 🦊</DemoButtonA></div>
 	{:else}
 		<div>✅ MetaMask is installed </div>
 		{#if !$connectedToSepolia }
-			<DemoButton on:click={connectToSepolia}>Connect to Sepolia</DemoButton>
+			<div class="mt-4">
+				<DemoButton on:click={connectToSepolia}>Connect to Sepolia</DemoButton>
+			</div>
 		{:else}
 			<div>✅ Connected to Sepolia</div>
 			{#if !$snapInstalled}
-				<DemoButton on:click={connectLeapSnap}>Add Leap Cosmos Wallet to Metamask 🌌</DemoButton>
+				<div class="mt-4">
+					<DemoButton on:click={connectLeapSnap}>Add Leap Cosmos Wallet to Metamask 🌌</DemoButton>
+				</div>
 			{:else}
 				<div>✅ Leap Cosmos Wallet Installed </div>
 				{#if !$connectedToUnion}
-					<DemoButton on:click={connectToUnion}>Connect to Union in Leap 🚀</DemoButton>
+					<div class="mt-4">
+						<DemoButton on:click={connectToUnion}>Connect to Union in Leap 🚀</DemoButton>
+					</div>
 				{:else}
 					<div>✅ Connected to Union Testnet</div> 
 				{/if}
 			{/if}
 		{/if}
 	{/if}
-</div>
+</TerminalContainer>
diff --git a/site/src/routes/blog/start-of-the-endgame/FaucetButton.svelte b/site/src/routes/blog/start-of-the-endgame/FaucetButton.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
 	import DemoButton from "$lib/DemoButton.svelte";
+	import TerminalContainer from "$lib/TerminalContainer.svelte";
 	import { getUnoFromFaucet } from "$lib/transferDemo";
 </script>
 
-<DemoButton on:click={getUnoFromFaucet}>Get UNO from faucet</DemoButton>
+
+<TerminalContainer>
+	<DemoButton on:click={getUnoFromFaucet}>Get UNO from faucet</DemoButton>
+</TerminalContainer>
diff --git a/site/src/routes/blog/start-of-the-endgame/TransferUnoToEthereum.svelte b/site/src/routes/blog/start-of-the-endgame/TransferUnoToEthereum.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
 	import DemoButton from "$lib/DemoButton.svelte";
 	import { sendUnoToEthereum } from "$lib/transferDemo";
-
-
+	import TerminalContainer from "$lib/TerminalContainer.svelte";
 </script>
-<DemoButton on:click={sendUnoToEthereum}>Send UNO to Ethereum</DemoButton>
+
+<TerminalContainer>
+	<DemoButton on:click={sendUnoToEthereum}>Send UNO to Ethereum</DemoButton>
+</TerminalContainer>