new thanks page layout

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+github: kremalicious
+patreon: kremalicious
+custom: ['https://kremalicious.com/thanks']

scripts/create-icons/toAstroComponent.ts

@@ -24,14 +24,16 @@ height = toAttributeSize(height)
 ---
 <style is:global>
 .icon {
-  width: 1em;
+  width: .85em;
-  height: 1em;
+  height: .85em;
   stroke: currentcolor;
   stroke-width: var(--border-width);
   stroke-linecap: round;
   stroke-linejoin: round;
   fill: none;
   vertical-align: baseline;
+  margin: 0;
+  display: inline-block;
 }
 </style>
 <svg width={width} height={height} {...props} class="icon">{title ? (<title>{title}</title>) : ''}${innerSVG}</svg>`

src/components/Footer/index.astro

@@ -18,12 +18,10 @@ const { name, url, github } = config.author
         {name}
       </a>
       <a href={`${github}/blog`}>
-        <Github />
+        <Github />View source
-         View source
       </a>
       <a href="/thanks/">
-        <Bitcoin />
+        <Bitcoin />Sponsor
-         Say Thanks
       </a>
     </p>
   </section>

src/components/Thanks/Coin.astro

@@ -3,20 +3,25 @@ import Copy from '@components/Copy.astro'
 
 type Props = {
   address: string
-  title: string
+  title?: string
 }
 
-const { address, title }: Props = Astro.props
+const { address }: Props = Astro.props
 ---
 
 <style>
   .coin {
-    margin-top: var(--spacer);
+    margin-top: calc(var(--spacer) / 6);
   }
 
   .titleCoin {
-    margin-bottom: 0;
     font-size: var(--font-size-base);
+    margin-top: var(--spacer);
+    margin-bottom: calc(var(--spacer) / 6);
+  }
+
+  .titleCoin:empty {
+    display: none;
   }
 
   .code {
@@ -29,12 +34,12 @@ const { address, title }: Props = Astro.props
     display: block;
     padding: calc(var(--spacer) / 2);
     padding-right: 2rem;
-    font-size: 0.65rem;
+    font-size: var(--font-size-mini);
   }
 </style>
 
 <div class="coin">
-  <h4 class="titleCoin">{title}</h4>
+  <h4 class="titleCoin"><slot /></h4>
   <div class="code">
     <code>{address}</code>
     <Copy text={address} />

src/features/Web3/components/Form/index.module.css

@@ -6,19 +6,29 @@
   text-align: center;
 }
 
-.web3 > div:first-child {
+.rainbowkit button div {
+  padding-left: 0 !important;
+}
+
+.rainbowkit > div:first-child {
   display: flex;
+  flex-direction: row-reverse;
   justify-content: space-between;
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-mini);
-  margin-bottom: var(--spacer);
 }
 
 /* connect button */
-.web3 > div:first-child > button:only-child {
+.rainbowkit > div:first-child > button:only-child {
   margin-left: auto;
   margin-right: auto;
 }
 
+.disclaimer {
+  text-align: left;
+  font-size: var(--font-size-mini);
+  margin-top: calc(var(--spacer) / 3);
+}
+
 .message {
   font-size: var(--font-size-small);
   position: relative;

src/features/Web3/components/Form/index.tsx

@@ -33,7 +33,9 @@ export default function Web3Form(): ReactElement {
         await send()
       }}
     >
+      <div className={styles.rainbowkit}>
         <ConnectButton chainStatus="icon" showBalance={false} />
+      </div>
 
       {message ? (
         <Alert message={message} transactionHash={data?.hash} />
@@ -53,6 +55,11 @@ export default function Web3Form(): ReactElement {
       ) : (
         <SendErc20 amount={debouncedAmount} setSendFormData={setSendFormData} />
       )}
+
+      <div className={styles.disclaimer}>
+        This form sends tokens to the following account which you can also use
+        for manually sending any ERC-20 token.
+      </div>
     </form>
   )
 }

src/features/Web3/components/Input/InputGroup.module.css

@@ -2,7 +2,7 @@
   margin: auto;
   position: relative;
   animation: fadeIn 0.8s ease-out backwards;
-  margin-top: var(--spacer);
+  margin-top: calc(var(--spacer) / 3);
   display: flex;
 }
 
@@ -58,20 +58,6 @@
   }
 }
 
-.message {
-  composes: message from '../Form/index.module.css';
-}
-
-.disclaimer {
-  font-size: var(--font-size-mini);
-  color: var(--text-color-light);
-  margin-top: calc(var(--spacer) / 3);
-}
-
-.disclaimer code {
-  color: var(--text-color);
-}
-
 @keyframes fadeIn {
   from {
     opacity: 0.01;

src/features/Web3/components/Input/InputGroup.tsx

@@ -3,7 +3,6 @@ import Input from '@components/Input'
 import { Conversion } from '../Conversion'
 import styles from './InputGroup.module.css'
 import { TokenSelect } from '../TokenSelect'
-import config from '@config/blog.config'
 
 export function InputGroup({
   amount,
@@ -38,9 +37,6 @@ export function InputGroup({
         </button>
       </div>
       <Conversion amount={amount} />
-      <div className={styles.disclaimer}>
-        This form sends tokens to my account <code>{config.author.ether}</code>
-      </div>
     </>
   )
 }

src/features/Web3/components/TokenSelect/TokenLoading.css

@@ -1,4 +1,4 @@
-.loader {
+.TokenLogo .loader {
   --borderWidth: 5px;
   --dashes: 10;
   --gap: 5deg;

src/features/Web3/lib/rainbowkit.ts

@@ -38,9 +38,9 @@ export const theme = {
     actionButtonSecondaryBackground: 'var(--box-background-color)',
     closeButton: 'var(--text-color)',
     closeButtonBackground: 'var(--box-background-color)',
-    connectButtonBackground: 'var(--body-background-color)',
+    connectButtonBackground: 'transparent',
     connectButtonBackgroundError: 'var(--alert-error)',
-    connectButtonInnerBackground: 'var(--body-background-color)',
+    connectButtonInnerBackground: 'var(--box-background-color)',
     connectButtonText: 'var(--text-color)',
     connectButtonTextError: '#161a1b',
     connectionIndicator: 'var(--alert-success)',

src/layouts/Base/index.module.css

@@ -45,7 +45,7 @@
     margin-bottom: calc(var(--spacer) * 12);
     position: relative;
     z-index: 2;
-    min-height: 500px;
+    min-height: 45rem;
   }
 }
 

src/pages/thanks.astro

@@ -1,54 +1,82 @@
 ---
-import BackButton from '@components/BackButton.astro'
+// import BackButton from '@components/BackButton.astro'
 import LayoutBase from '@layouts/Base/index.astro'
 import { Web3 } from '@features/Web3'
 import config from '@config/blog.config'
-import Coin from '@components/Coin.astro'
+import Coin from '@components/Thanks/Coin.astro'
-
+import { Bitcoin } from '@images/components'
-const coins = Object.entries(config.author).filter(
-  ([key]) => key === 'bitcoin' || key === 'ether'
-)
 ---
 
 <style>
+  .grid {
+    display: grid;
+    grid-gap: var(--spacer);
+  }
+
+  @media (min-width: 40rem) {
+    .grid {
+      grid-template-columns: 2fr 1fr;
+    }
+  }
+
   .content {
     margin-left: auto;
     margin-right: auto;
-    max-width: 25rem;
     width: 100%;
     background-color: var(--box-background-color);
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius);
-    padding: 0 var(--spacer) var(--spacer) var(--spacer);
+    padding: 0 calc(var(--spacer) / 1.5) calc(var(--spacer) / 1.5)
+      calc(var(--spacer) / 1.5);
     margin-bottom: var(--spacer);
   }
 
   .subTitle {
     font-size: var(--font-size-large);
     border-bottom: 1px solid var(--border-color);
-    padding: calc(var(--spacer) / 2);
     margin-top: 0;
-    margin-left: calc(var(--spacer) * -1);
+    margin-bottom: calc(var(--spacer) / 1.5);
-    margin-right: calc(var(--spacer) * -1);
+    padding: calc(var(--spacer) / 2) 0;
+  }
+
+  .content .subTitle {
+    padding: calc(var(--spacer) / 2);
+    margin-left: calc(var(--spacer) / -1.5);
+    margin-right: calc(var(--spacer) / -1.5);
+  }
+
+  .coinTitle {
+    margin-top: calc(var(--spacer) / 1.5);
+    margin-bottom: calc(var(--spacer) / 3);
+    font-size: var(--font-size-base);
   }
 </style>
 
-<LayoutBase title="Say Thanks">
+<LayoutBase title="Say Thanks" pageTitle="Say Thanks">
-  <BackButton />
+  <!-- <BackButton /> -->
 
+  <div class="grid">
     <div class="content">
-    <h3 class="subTitle">Send from your browser wallet</h3>
+      <h3 class="subTitle">Send Magic Internet Money</h3>
-    <Web3 client:only="react" />
+
+      <h4 class="coinTitle">Browser wallet</h4>
+
+      <Web3 client:load />
+
+      <Coin address={config.author.ether} />
+
+      <Coin address={config.author.bitcoin}>
+        <Bitcoin /> Bitcoin
+      </Coin>
     </div>
 
-  <div class="content">
+    <div>
-    <h3 class="subTitle">Send from any wallet</h3>
+      <h3 class="subTitle">Sponsor</h3>
-
+      <a href="https://github.com/sponsors/kremalicious/">
-    {
+        <img
-      coins.map(([key, value]: [key: string, value: string]) => (
+          src="https://img.shields.io/static/v1?label=Sponsor%20On%20GitHub&labelColor=%2343a699&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86&style=for-the-badge"
-        <Coin title={key} address={value} />
+        />
-      ))
+      </a>
-    }
+    </div>
   </div>
 </LayoutBase>
- @components/Sponsor/Web3/Web3 @components/Web3