m
/
blog
mirror of https://github.com/kremalicious/blog.git
1
0
Fork 0
Code

new thanks page layout

This commit is contained in:
Matthias Kretschmann 2023-10-31 19:27:16 +00:00
parent 3234d574cd
commit 14bc7fdf92
Signed by: m
GPG Key ID: 606EEEF3C479A91F
12 changed files with 100 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.github/FUNDING.yml vendored Normal file
View File

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

6
scripts/create-icons/toAstroComponent.ts
View File

@ -24,14 +24,16 @@ height = toAttributeSize(height)
---
<style is:global>
.icon {
width: 1em;
height: 1em;
width: .85em;
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>`

6
src/components/Footer/index.astro
View File

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

17
src/components/Coin.astro → src/components/Thanks/Coin.astro
View File

@ -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} />

18
src/features/Web3/components/Form/index.module.css
View File

@ -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);
margin-bottom: var(--spacer);
font-size: var(--font-size-mini);
}
/* 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;

9
src/features/Web3/components/Form/index.tsx
View File

@ -33,7 +33,9 @@ export default function Web3Form(): ReactElement {
await send()
}}
>
<ConnectButton chainStatus="icon" showBalance={false} />
<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>
)
}

16
src/features/Web3/components/Input/InputGroup.module.css
View File

@ -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;

4
src/features/Web3/components/Input/InputGroup.tsx
View File

@ -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>
</>
)
}

2
src/features/Web3/components/TokenSelect/TokenLoading.css
View File

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

4
src/features/Web3/lib/rainbowkit.ts
View File

@ -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)',

2
src/layouts/Base/index.module.css
View File

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

78
src/pages/thanks.astro
View File

@ -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'
const coins = Object.entries(config.author).filter(
([key]) => key === 'bitcoin' || key === 'ether'
)
import Coin from '@components/Thanks/Coin.astro'
import { Bitcoin } from '@images/components'
---
<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-right: calc(var(--spacer) * -1);
margin-bottom: calc(var(--spacer) / 1.5);
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">
<BackButton />
<LayoutBase title="Say Thanks" pageTitle="Say Thanks">
<!-- <BackButton /> -->
<div class="content">
<h3 class="subTitle">Send from your browser wallet</h3>
<Web3 client:only="react" />
</div>
<div class="grid">
<div class="content">
<h3 class="subTitle">Send Magic Internet Money</h3>
<div class="content">
<h3 class="subTitle">Send from any wallet</h3>
<h4 class="coinTitle">Browser wallet</h4>
{
coins.map(([key, value]: [key: string, value: string]) => (
<Coin title={key} address={value} />
))
}
<Web3 client:load />
<Coin address={config.author.ether} />
<Coin address={config.author.bitcoin}>
<Bitcoin /> Bitcoin
</Coin>
</div>
<div>
<h3 class="subTitle">Sponsor</h3>
<a href="https://github.com/sponsors/kremalicious/">
<img
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"
/>
</a>
</div>
</div>
</LayoutBase>
@components/Sponsor/Web3/Web3 @components/Web3