Styling

civicteam · Feb 13, 2024 · 62be5d3 · 62be5d3
1 parent 2d37af1
commit 62be5d3
Show file tree

Hide file tree

Showing 10 changed files with 307 additions and 109 deletions.
diff --git a/app/package.json b/app/package.json
@@ -23,6 +23,7 @@
     "typescript": "^5.2.2",
     "viem": "2.x",
     "vite": "^5.1.0",
+    "vite-plugin-svgr": "^4.2.0",
     "wagmi": "^2.5.6"
   },
   "scripts": {

diff --git a/app/src/App.css b/app/src/App.css
@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

diff --git a/app/src/App.tsx b/app/src/App.tsx
@@ -1,31 +1,34 @@
 import './App.css';
-import {useAirdrop} from "./AirdropContext";
-import {useAccount, usePrepareTransactionRequest, useSendTransaction} from "wagmi";
+import {useAirdrop} from './AirdropContext';
 import {ConnectButton} from '@rainbow-me/rainbowkit';
-import {GatewayStatus, IdentityButton, useGateway} from "@civic/ethereum-gateway-react";
+import {GatewayStatus, IdentityButton, useGateway} from '@civic/ethereum-gateway-react';
+import Ticket from "./ticket.svg?react";
 
 const Dashboard = () => {
-    const { balance, totalSupply, claim, isConfirming, isConfirmed, txHash, error } = useAirdrop();
+    const { balance, totalSupply, claim, isConfirming, txHash, error } = useAirdrop();
     const { gatewayStatus } = useGateway();
 
-    return (<div style={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        gap: "0.5rem"
-    }}>
-        <h1>Claim your Airdrop</h1>
-        <IdentityButton />
-        { gatewayStatus !== GatewayStatus.ACTIVE && <div>Verify you are a unique person before entering</div>}
-        { !balance && <button disabled={gatewayStatus !== GatewayStatus.ACTIVE} onClick={claim}>{ gatewayStatus !== GatewayStatus.ACTIVE ? "Verify first!": "Claim"}</button>}
-        { (!!balance || (gatewayStatus !== GatewayStatus.ACTIVE) )&& <button onClick={() => claim({gasLimit: 3000000})}>I don't care, try to claim anyway!</button>}
-        { isConfirming && <p><>Claiming...</></p>}
-        { !!balance && <p><>Congratulations, you have a token!</></p>}
-        { txHash && <p><>Transaction: {txHash}</></p>}
-        { error && <p><>Error: {error.message}</></p>}
-        <div>Claimed so far: { totalSupply?.toString() ?? 0 }</div>
+    return (<div id="main">
+        <Ticket />
+        <h1>Claim Airdrop</h1>
+        <IdentityButton/>
+        {gatewayStatus !== GatewayStatus.ACTIVE && <div>Verify you are a unique person before entering</div>}
+        {!balance && <button disabled={gatewayStatus !== GatewayStatus.ACTIVE}
+                             onClick={claim}>{gatewayStatus !== GatewayStatus.ACTIVE ? "Verify first!" : "Claim"}</button>}
+        {(!!balance || (gatewayStatus !== GatewayStatus.ACTIVE)) &&
+            <button onClick={() => claim({gasLimit: 3000000})}>I don't care, try to claim anyway!</button>}
+        {isConfirming && <p><>Claiming...</>
+        </p>}
+        {!!balance && <p><>Congratulations, you have a token!</>
+        </p>}
+        {txHash && <p><>Transaction: {txHash}</>
+        </p>}
+        {error && <p><>Error: {error.message}</>
+        </p>}
+        <div>Claimed so far: {totalSupply?.toString() ?? 0}</div>
     </div>)
 }
+
 function App() {
     return (
         <div className="App">
@@ -36,7 +39,7 @@ function App() {
                 justifyContent: "center",
                 height: "100vh"
             }}>
-                <ConnectButton/>
+                <ConnectButton showBalance={false}/>
                 <hr/>
                 <Dashboard/>
             </div>

diff --git a/app/src/index.css b/app/src/index.css
@@ -2,67 +2,105 @@
     font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
     line-height: 1.5;
     font-weight: 400;
-
-    color-scheme: light dark;
-    color: rgba(255, 255, 255, 0.87);
-    background-color: #242424;
-
+    color-scheme: light;
+    color: rgba(0, 0, 0, 0.87);
+    background: radial-gradient(110.49% 110.55% at 43.95% 4.02%, #FFF7F3 0%, #FFA877 100%);
+    height: 100%;
     font-synthesis: none;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
 
+body {
+    margin: 1em;
+    flex-wrap: wrap;
+    display: grid;
+    gap: 10px;
+    place-items: center;
+    justify-content: center;
+    min-width: 320px;
+}
+
+h1 {
+    font-size: 3.2em;
+    text-transform: uppercase;
+    text-align: center;
+    letter-spacing: .05em;
+    font-weight: 800;
+    color: rgba(0, 0, 0, 0.0);
+    line-height: .9;
+    margin: 0;
+    -webkit-text-stroke-width: 2px;
+    -webkit-text-stroke-color: #F15C3E;
+}
+
 a {
     font-weight: 500;
     color: #646cff;
     text-decoration: inherit;
 }
+
 a:hover {
     color: #535bf2;
 }
 
-body {
-    margin: 0;
-    display: flex;
-    place-items: center;
-    min-width: 320px;
-    min-height: 100vh;
-}
-
-h1 {
-    font-size: 3.2em;
-    line-height: 1.1;
+p {
+    text-align: center;
+    text-wrap: pretty;
+    line-height: 1.3;
 }
 
 button {
-    border-radius: 8px;
-    border: 1px solid transparent;
-    padding: 0.6em 1.2em;
+    border-radius: 50px;
+    border: .02px solid #EBEBEB;
+    justify-content: center;
+    height: 3em;
     font-size: 1em;
     font-weight: 500;
     font-family: inherit;
-    background-color: #1a1a1a;
+    line-height: 1.1;
+    text-wrap: pretty;
+    background-color: #F5F5F5;
     cursor: pointer;
     transition: border-color 0.25s;
+    display: flex;
+    align-items: center;
+    gap: .3em;
+    box-shadow: 0px 1px 3px 0px rgba(92, 24, 24, 0.05);
 }
 button:hover {
-    border-color: #646cff;
+    transform: scale(1.03);
+    transition:all .3s ease;
+    box-shadow: 0px 7px 23px 0px rgba(92, 24, 24, 0.15);
 }
 button:focus,
 button:focus-visible {
-    outline: 4px auto -webkit-focus-ring-color;
+    background: rgba(240, 240, 240, 0.85);
+    box-shadow: inset 0 0 10px rgba(92, 24, 24, 0.15);
+    outline: 4px auto rgba(255, 107, 78, 0.25);
+}
+
+#main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+#main button {
+    width: 70%;
 }
 
-@media (prefers-color-scheme: light) {
-    :root {
-        color: #213547;
-        background-color: #ffffff;
-    }
-    a:hover {
-        color: #747bff;
-    }
-    button {
-        background-color: #f9f9f9;
-    }
+.ticket1, .ticket2, .pin {
+    transform-origin: 100px 100px;
+    transition: 1s cubic-bezier(.23,1.45,.49,.95);
 }
+svg:hover .ticket1 {
+    transform: rotate(-10deg); }
+svg:hover .ticket2 {
+    transform: rotate(-25deg); }
+.ticket1 {
+    transform: rotate(-3deg); }
+.ticket2 {
+    transform: rotate(-10deg); }
diff --git a/app/src/main.tsx b/app/src/main.tsx
@@ -3,9 +3,9 @@ import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
 import '@rainbow-me/rainbowkit/styles.css';
-import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
-import {getDefaultConfig, RainbowKitProvider} from "@rainbow-me/rainbowkit";
-import {WagmiProvider} from "wagmi";
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
+import {getDefaultConfig, RainbowKitProvider} from '@rainbow-me/rainbowkit';
+import {WagmiProvider} from 'wagmi';
 import {optimismGoerli} from "wagmi/chains";
 import {AirdropProvider} from "./AirdropContext.tsx";
 import {CivicPassProvider} from "./CivicPassContext.tsx";

diff --git a/app/src/react-app-env.d.ts b/app/src/react-app-env.d.ts
@@ -1 +1 @@
-/// <reference types="react-scripts" />
+/// <reference types="vite-plugin-svgr/client" />
diff --git a/app/src/ticket.svg b/app/src/ticket.svg
diff --git a/app/vite.config.ts b/app/vite.config.ts
@@ -1,7 +1,8 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import svgr from "vite-plugin-svgr";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [svgr(), react()],
 })
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		/// <reference types="react-scripts" />
		/// <reference types="vite-plugin-svgr/client" />