From e285f7bdf42e4af4916f8a739581ed0d4ec3de8c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bego=C3=B1a=20Alvarez?= Date: Thu, 23 Jun 2022 11:08:50 +0200 Subject: [PATCH 01/10] feat: remove unnecessary divs --- pages/[id].tsx | 4 ++-- pages/create-candy-machine.tsx | 4 ++-- pages/index.tsx | 4 ++-- pages/verify-candy-machine/[id].tsx | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/pages/[id].tsx b/pages/[id].tsx index 24d388b..c389aff 100644 --- a/pages/[id].tsx +++ b/pages/[id].tsx @@ -61,7 +61,7 @@ const CandyMachine: NextPage = () => { }, [account, connection, anchorWallet]) return ( -
+ <> Update Candy Machine @@ -112,7 +112,7 @@ const CandyMachine: NextPage = () => {
)} - + ) } diff --git a/pages/create-candy-machine.tsx b/pages/create-candy-machine.tsx index 71bfcec..cd19a88 100644 --- a/pages/create-candy-machine.tsx +++ b/pages/create-candy-machine.tsx @@ -11,7 +11,7 @@ const CreateCandyMachine: NextPage = () => { } return ( -
+ <> Create Candy Machine @@ -21,7 +21,7 @@ const CreateCandyMachine: NextPage = () => { <UpdateCreateCandyMachineForm /> </div> - </div> + </> ) } diff --git a/pages/index.tsx b/pages/index.tsx index 7a2be8a..ec02084 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -57,7 +57,7 @@ const ManageCandyMachines: NextPage = () => { } return ( - <div className='relative'> + <> <Head> <title>Manage Candy Machine @@ -88,7 +88,7 @@ const ManageCandyMachines: NextPage = () => { )}
- + ) } diff --git a/pages/verify-candy-machine/[id].tsx b/pages/verify-candy-machine/[id].tsx index e4c14b7..89c754d 100644 --- a/pages/verify-candy-machine/[id].tsx +++ b/pages/verify-candy-machine/[id].tsx @@ -12,7 +12,7 @@ const VerifyCandyMachine: NextPage = () => { const { connected } = useWallet() const { error, isLoading, verifyCandyMachine, message, connection } = useVerifyCandyMachineV2(cache) return ( -
+ <> Verify Candy Machine @@ -64,7 +64,7 @@ const VerifyCandyMachine: NextPage = () => { ) : ( )} -
+ ) } From cbbc33ad459d371d48e1dea9974862b45d464909 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bego=C3=B1a=20Alvarez?= Date: Thu, 23 Jun 2022 11:10:27 +0200 Subject: [PATCH 02/10] style: move wallet adapter hardcoded style to standalone file --- styles/globals.css | 295 +------------------------------------- styles/wallet-adapter.css | 293 +++++++++++++++++++++++++++++++++++++ 2 files changed, 294 insertions(+), 294 deletions(-) create mode 100644 styles/wallet-adapter.css diff --git a/styles/globals.css b/styles/globals.css index cf7c96a..9326792 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,4 +1,5 @@ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap'); +@import './wallet-adapter.css'; @tailwind base; @tailwind components; @@ -38,297 +39,3 @@ a { min-width: 700px; } } - -.wallet-adapter-button { - background-color: transparent; - border: none; - color: #fff; - cursor: pointer; - display: flex; - align-items: center; - font-family: 'DM Sans', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-size: 16px; - font-weight: 600; - height: 48px; - line-height: 48px; - padding: 0 24px; - border-radius: 4px; -} - -.wallet-adapter-button-trigger { - background-color: #512da8; -} - -.wallet-adapter-button:not([disabled]):focus-visible { - outline-color: white; -} - -.wallet-adapter-button:not([disabled]):hover { - background-color: #1a1f2e; -} - -.wallet-adapter-button[disabled] { - background: #404144; - color: #999; - cursor: not-allowed; -} - -.wallet-adapter-button-end-icon, -.wallet-adapter-button-start-icon, -.wallet-adapter-button-end-icon img, -.wallet-adapter-button-start-icon img { - display: flex; - align-items: center; - justify-content: center; - width: 24px; - height: 24px; -} - -.wallet-adapter-button-end-icon { - margin-left: 12px; -} - -.wallet-adapter-button-start-icon { - margin-right: 12px; -} - -.wallet-adapter-collapse { - width: 100%; -} - -.wallet-adapter-dropdown { - position: relative; - display: inline-block; -} - -.wallet-adapter-dropdown-list { - position: absolute; - z-index: 99; - display: grid; - grid-template-rows: 1fr; - grid-row-gap: 10px; - padding: 10px; - top: 100%; - right: 0; - margin: 0; - list-style: none; - background: #2c2d30; - border-radius: 10px; - box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6); - opacity: 0; - visibility: hidden; - transition: opacity 200ms ease, transform 200ms ease, visibility 200ms; - font-family: 'DM Sans', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; -} - -.wallet-adapter-dropdown-list-active { - opacity: 1; - visibility: visible; - transform: translateY(10px); -} - -.wallet-adapter-dropdown-list-item { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - border: none; - outline: none; - cursor: pointer; - white-space: nowrap; - box-sizing: border-box; - padding: 0 20px; - width: 100%; - border-radius: 6px; - font-size: 14px; - font-weight: 600; - height: 37px; - color: #fff; -} - -.wallet-adapter-dropdown-list-item:not([disabled]):hover { - background-color: #1a1f2e; -} - -.wallet-adapter-modal-collapse-button svg { - align-self: center; - fill: #999; -} - -.wallet-adapter-modal-collapse-button.wallet-adapter-modal-collapse-button-active svg { - transform: rotate(180deg); - transition: transform ease-in 150ms; -} - -.wallet-adapter-modal { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - opacity: 0; - transition: opacity linear 150ms; - background: rgba(0, 0, 0, 0.5); - z-index: 1040; - overflow-y: auto; -} - -.wallet-adapter-modal.wallet-adapter-modal-fade-in { - opacity: 1; -} - -.wallet-adapter-modal-button-close { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - top: 18px; - right: 18px; - padding: 12px; - cursor: pointer; - background: #1a1f2e; - border: none; - border-radius: 50%; -} - -.wallet-adapter-modal-button-close:focus-visible { - outline-color: white; -} - -.wallet-adapter-modal-button-close svg { - fill: #777; - transition: fill 200ms ease 0s; -} - -.wallet-adapter-modal-button-close:hover svg { - fill: #fff; -} - -.wallet-adapter-modal-overlay { - background: rgba(0, 0, 0, 0.5); - position: fixed; - top: 0; - left: 0; - bottom: 0; - right: 0; -} - -.wallet-adapter-modal-container { - display: flex; - margin: 3rem; - min-height: calc(100vh - 6rem); /* 100vh - 2 * margin */ - align-items: center; - justify-content: center; -} - -@media (max-width: 480px) { - .wallet-adapter-modal-container { - margin: 1rem; - min-height: calc(100vh - 2rem); /* 100vh - 2 * margin */ - } -} - -.wallet-adapter-modal-wrapper { - box-sizing: border-box; - position: relative; - display: flex; - align-items: center; - flex-direction: column; - z-index: 1050; - max-width: 400px; - border-radius: 10px; - background: #10141f; - box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6); - font-family: 'DM Sans', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; - flex: 1; -} - -.wallet-adapter-modal-wrapper .wallet-adapter-button { - width: 100%; -} - -.wallet-adapter-modal-title { - font-weight: 500; - font-size: 24px; - line-height: 36px; - margin: 0; - padding: 64px 48px 48px 48px; - text-align: center; - color: #fff; -} - -@media (max-width: 374px) { - .wallet-adapter-modal-title { - font-size: 18px; - } -} - -.wallet-adapter-modal-list { - margin: 0 0 12px 0; - padding: 0; - width: 100%; - list-style: none; -} - -.wallet-adapter-modal-list .wallet-adapter-button { - font-weight: 400; - border-radius: 0; - font-size: 18px; -} - -.wallet-adapter-modal-list .wallet-adapter-button-end-icon, -.wallet-adapter-modal-list .wallet-adapter-button-start-icon, -.wallet-adapter-modal-list .wallet-adapter-button-end-icon img, -.wallet-adapter-modal-list .wallet-adapter-button-start-icon img { - width: 28px; - height: 28px; -} - -.wallet-adapter-modal-list .wallet-adapter-button span { - margin-left: auto; - font-size: 14px; - opacity: 0.6; -} - -.wallet-adapter-modal-list-more { - cursor: pointer; - border: none; - padding: 12px 24px 24px 12px; - align-self: flex-end; - display: flex; - align-items: center; - background-color: transparent; - color: #fff; -} - -.wallet-adapter-modal-list-more svg { - transition: all 0.1s ease; - fill: rgba(255, 255, 255, 1); - margin-left: 0.5rem; -} - -.wallet-adapter-modal-list-more-icon-rotate { - transform: rotate(180deg); -} - -.wallet-adapter-modal-middle { - width: 100%; - display: flex; - flex-direction: column; - align-items: center; - padding: 0 24px 24px 24px; - box-sizing: border-box; -} - -.wallet-adapter-modal-middle-button { - display: block; - cursor: pointer; - margin-top: 48px; - width: 100%; - background-color: #512da8; - padding: 12px; - font-size: 18px; - border: none; - border-radius: 8px; - color: #fff; -} diff --git a/styles/wallet-adapter.css b/styles/wallet-adapter.css new file mode 100644 index 0000000..6d09bf1 --- /dev/null +++ b/styles/wallet-adapter.css @@ -0,0 +1,293 @@ +.wallet-adapter-button { + background-color: transparent; + border: none; + color: #fff; + cursor: pointer; + display: flex; + align-items: center; + font-family: 'DM Sans', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-size: 16px; + font-weight: 600; + height: 48px; + line-height: 48px; + padding: 0 24px; + border-radius: 4px; +} + +.wallet-adapter-button-trigger { + background-color: #512da8; +} + +.wallet-adapter-button:not([disabled]):focus-visible { + outline-color: white; +} + +.wallet-adapter-button:not([disabled]):hover { + background-color: #1a1f2e; +} + +.wallet-adapter-button[disabled] { + background: #404144; + color: #999; + cursor: not-allowed; +} + +.wallet-adapter-button-end-icon, +.wallet-adapter-button-start-icon, +.wallet-adapter-button-end-icon img, +.wallet-adapter-button-start-icon img { + display: flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; +} + +.wallet-adapter-button-end-icon { + margin-left: 12px; +} + +.wallet-adapter-button-start-icon { + margin-right: 12px; +} + +.wallet-adapter-collapse { + width: 100%; +} + +.wallet-adapter-dropdown { + position: relative; + display: inline-block; +} + +.wallet-adapter-dropdown-list { + position: absolute; + z-index: 99; + display: grid; + grid-template-rows: 1fr; + grid-row-gap: 10px; + padding: 10px; + top: 100%; + right: 0; + margin: 0; + list-style: none; + background: #2c2d30; + border-radius: 10px; + box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6); + opacity: 0; + visibility: hidden; + transition: opacity 200ms ease, transform 200ms ease, visibility 200ms; + font-family: 'DM Sans', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; +} + +.wallet-adapter-dropdown-list-active { + opacity: 1; + visibility: visible; + transform: translateY(10px); +} + +.wallet-adapter-dropdown-list-item { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border: none; + outline: none; + cursor: pointer; + white-space: nowrap; + box-sizing: border-box; + padding: 0 20px; + width: 100%; + border-radius: 6px; + font-size: 14px; + font-weight: 600; + height: 37px; + color: #fff; +} + +.wallet-adapter-dropdown-list-item:not([disabled]):hover { + background-color: #1a1f2e; +} + +.wallet-adapter-modal-collapse-button svg { + align-self: center; + fill: #999; +} + +.wallet-adapter-modal-collapse-button.wallet-adapter-modal-collapse-button-active svg { + transform: rotate(180deg); + transition: transform ease-in 150ms; +} + +.wallet-adapter-modal { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + opacity: 0; + transition: opacity linear 150ms; + background: rgba(0, 0, 0, 0.5); + z-index: 1040; + overflow-y: auto; +} + +.wallet-adapter-modal.wallet-adapter-modal-fade-in { + opacity: 1; +} + +.wallet-adapter-modal-button-close { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 18px; + right: 18px; + padding: 12px; + cursor: pointer; + background: #1a1f2e; + border: none; + border-radius: 50%; +} + +.wallet-adapter-modal-button-close:focus-visible { + outline-color: white; +} + +.wallet-adapter-modal-button-close svg { + fill: #777; + transition: fill 200ms ease 0s; +} + +.wallet-adapter-modal-button-close:hover svg { + fill: #fff; +} + +.wallet-adapter-modal-overlay { + background: rgba(0, 0, 0, 0.5); + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; +} + +.wallet-adapter-modal-container { + display: flex; + margin: 3rem; + min-height: calc(100vh - 6rem); /* 100vh - 2 * margin */ + align-items: center; + justify-content: center; +} + +@media (max-width: 480px) { + .wallet-adapter-modal-container { + margin: 1rem; + min-height: calc(100vh - 2rem); /* 100vh - 2 * margin */ + } +} + +.wallet-adapter-modal-wrapper { + box-sizing: border-box; + position: relative; + display: flex; + align-items: center; + flex-direction: column; + z-index: 1050; + max-width: 400px; + border-radius: 10px; + background: #10141f; + box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6); + font-family: 'DM Sans', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; + flex: 1; +} + +.wallet-adapter-modal-wrapper .wallet-adapter-button { + width: 100%; +} + +.wallet-adapter-modal-title { + font-weight: 500; + font-size: 24px; + line-height: 36px; + margin: 0; + padding: 64px 48px 48px 48px; + text-align: center; + color: #fff; +} + +@media (max-width: 374px) { + .wallet-adapter-modal-title { + font-size: 18px; + } +} + +.wallet-adapter-modal-list { + margin: 0 0 12px 0; + padding: 0; + width: 100%; + list-style: none; +} + +.wallet-adapter-modal-list .wallet-adapter-button { + font-weight: 400; + border-radius: 0; + font-size: 18px; +} + +.wallet-adapter-modal-list .wallet-adapter-button-end-icon, +.wallet-adapter-modal-list .wallet-adapter-button-start-icon, +.wallet-adapter-modal-list .wallet-adapter-button-end-icon img, +.wallet-adapter-modal-list .wallet-adapter-button-start-icon img { + width: 28px; + height: 28px; +} + +.wallet-adapter-modal-list .wallet-adapter-button span { + margin-left: auto; + font-size: 14px; + opacity: 0.6; +} + +.wallet-adapter-modal-list-more { + cursor: pointer; + border: none; + padding: 12px 24px 24px 12px; + align-self: flex-end; + display: flex; + align-items: center; + background-color: transparent; + color: #fff; +} + +.wallet-adapter-modal-list-more svg { + transition: all 0.1s ease; + fill: rgba(255, 255, 255, 1); + margin-left: 0.5rem; +} + +.wallet-adapter-modal-list-more-icon-rotate { + transform: rotate(180deg); +} + +.wallet-adapter-modal-middle { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + padding: 0 24px 24px 24px; + box-sizing: border-box; +} + +.wallet-adapter-modal-middle-button { + display: block; + cursor: pointer; + margin-top: 48px; + width: 100%; + background-color: #512da8; + padding: 12px; + font-size: 18px; + border: none; + border-radius: 8px; + color: #fff; +} From 84d6eb3fd3589e1def7811961bdadf66f1a0688f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bego=C3=B1a=20Alvarez?= Date: Thu, 23 Jun 2022 11:24:15 +0200 Subject: [PATCH 03/10] style: remove unnecessary classes --- .../forms/UpdateCreateCandyMachineForm.tsx | 2 +- styles/globals.css | 35 ------------------- tailwind.config.js | 5 --- 3 files changed, 1 insertion(+), 41 deletions(-) diff --git a/components/forms/UpdateCreateCandyMachineForm.tsx b/components/forms/UpdateCreateCandyMachineForm.tsx index c562723..28a57cc 100644 --- a/components/forms/UpdateCreateCandyMachineForm.tsx +++ b/components/forms/UpdateCreateCandyMachineForm.tsx @@ -304,7 +304,7 @@ const UpdateCreateCandyMachineForm: FC<{ } return (
-
+
Date: Thu, 23 Jun 2022 11:47:00 +0200 Subject: [PATCH 04/10] style: force wallet adapter style --- styles/wallet-adapter.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/wallet-adapter.css b/styles/wallet-adapter.css index 6d09bf1..1299ed9 100644 --- a/styles/wallet-adapter.css +++ b/styles/wallet-adapter.css @@ -15,7 +15,7 @@ } .wallet-adapter-button-trigger { - background-color: #512da8; + background-color: #512da8 !important; } .wallet-adapter-button:not([disabled]):focus-visible { From 40cebc5fcd13bfa16b6386c1c24f809265713b09 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bego=C3=B1a=20Alvarez?= Date: Thu, 23 Jun 2022 12:00:38 +0200 Subject: [PATCH 05/10] style: move module css to another folder and remove debris --- components/layout/Modal.tsx | 2 +- styles/Home.module.css | 116 -------------------------- styles/{ => modules}/Modal.module.css | 0 3 files changed, 1 insertion(+), 117 deletions(-) delete mode 100644 styles/Home.module.css rename styles/{ => modules}/Modal.module.css (100%) diff --git a/components/layout/Modal.tsx b/components/layout/Modal.tsx index 376117d..8113443 100644 --- a/components/layout/Modal.tsx +++ b/components/layout/Modal.tsx @@ -1,7 +1,7 @@ import { useConnection } from '@solana/wallet-adapter-react' import { ActionButton } from 'components' import { Dispatch, FC, SetStateAction, useState } from 'react' -import styles from 'styles/Modal.module.css' +import styles from 'styles/modules/Modal.module.css' const Modal: FC<{ isOpen: boolean diff --git a/styles/Home.module.css b/styles/Home.module.css deleted file mode 100644 index 316b30d..0000000 --- a/styles/Home.module.css +++ /dev/null @@ -1,116 +0,0 @@ -.container { - padding: 0 2rem; -} - -.main { - min-height: 100vh; - padding: 4rem 0; - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.footer { - display: flex; - flex: 1; - padding: 2rem 0; - border-top: 1px solid #eaeaea; - justify-content: center; - align-items: center; -} - -.footer a { - display: flex; - justify-content: center; - align-items: center; - flex-grow: 1; -} - -.title a { - color: #0070f3; - text-decoration: none; -} - -.title a:hover, -.title a:focus, -.title a:active { - text-decoration: underline; -} - -.title { - margin: 0; - line-height: 1.15; - font-size: 4rem; -} - -.title, -.description { - text-align: center; -} - -.description { - margin: 4rem 0; - line-height: 1.5; - font-size: 1.5rem; -} - -.code { - background: #fafafa; - border-radius: 5px; - padding: 0.75rem; - font-size: 1.1rem; - font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, - monospace; -} - -.grid { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - max-width: 800px; -} - -.card { - margin: 1rem; - padding: 1.5rem; - text-align: left; - color: inherit; - text-decoration: none; - border: 1px solid #eaeaea; - border-radius: 10px; - transition: color 0.15s ease, border-color 0.15s ease; - max-width: 300px; -} - -.card:hover, -.card:focus, -.card:active { - color: #0070f3; - border-color: #0070f3; -} - -.card h2 { - margin: 0 0 1rem 0; - font-size: 1.5rem; -} - -.card p { - margin: 0; - font-size: 1.25rem; - line-height: 1.5; -} - -.logo { - height: 1em; - margin-left: 0.5rem; -} - -@media (max-width: 600px) { - .grid { - width: 100%; - flex-direction: column; - } -} diff --git a/styles/Modal.module.css b/styles/modules/Modal.module.css similarity index 100% rename from styles/Modal.module.css rename to styles/modules/Modal.module.css From 9bba9f9eaee9a1b57e8da666431defc39c07edeb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bego=C3=B1a=20Alvarez?= Date: Thu, 23 Jun 2022 12:59:30 +0200 Subject: [PATCH 06/10] feat: add sass support and apply changes to stylesheets --- components/layout/Modal.tsx | 2 +- package.json | 1 + pages/_app.tsx | 2 +- styles/{globals.css => globals.scss} | 2 +- .../{Modal.module.css => Modal.module.scss} | 56 +++++++++---------- ...wallet-adapter.css => wallet-adapter.scss} | 0 yarn.lock | 18 +++++- 7 files changed, 48 insertions(+), 33 deletions(-) rename styles/{globals.css => globals.scss} (82%) rename styles/modules/{Modal.module.css => Modal.module.scss} (50%) rename styles/{wallet-adapter.css => wallet-adapter.scss} (100%) diff --git a/components/layout/Modal.tsx b/components/layout/Modal.tsx index 8113443..eb42b10 100644 --- a/components/layout/Modal.tsx +++ b/components/layout/Modal.tsx @@ -1,7 +1,7 @@ import { useConnection } from '@solana/wallet-adapter-react' import { ActionButton } from 'components' import { Dispatch, FC, SetStateAction, useState } from 'react' -import styles from 'styles/modules/Modal.module.css' +import styles from 'styles/modules/Modal.module.scss' const Modal: FC<{ isOpen: boolean diff --git a/package.json b/package.json index a8dd6c4..19be07c 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "postcss": "^8.4.13", "react": "^18.1.0", "react-dom": "18.1.0", + "sass": "^1.53.0", "tailwindcss": "^3.0.24", "yarn": "^1.22.18" }, diff --git a/pages/_app.tsx b/pages/_app.tsx index 2e1b64c..4e04301 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -14,7 +14,7 @@ import { clusterApiUrl } from '@solana/web3.js' import { Navbar, Wallet } from 'components' import type { AppProps } from 'next/app' import React, { useMemo } from 'react' -import '../styles/globals.css' +import '../styles/globals.scss' function MyApp({ Component, pageProps }: AppProps) { const network = WalletAdapterNetwork.Devnet diff --git a/styles/globals.css b/styles/globals.scss similarity index 82% rename from styles/globals.css rename to styles/globals.scss index e561305..b802c4d 100644 --- a/styles/globals.css +++ b/styles/globals.scss @@ -1,5 +1,5 @@ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap'); -@import './wallet-adapter.css'; +@import './wallet-adapter.scss'; @tailwind base; @tailwind components; diff --git a/styles/modules/Modal.module.css b/styles/modules/Modal.module.scss similarity index 50% rename from styles/modules/Modal.module.css rename to styles/modules/Modal.module.scss index 986c1f3..d03e17c 100644 --- a/styles/modules/Modal.module.css +++ b/styles/modules/Modal.module.scss @@ -11,37 +11,37 @@ animation: slide-right 300ms ease-in-out forwards; animation-delay: 200ms; animation-iteration-count: 1; -} -.line { - transition: transform 300ms ease-in-out; -} -.line:nth-child(1) { - background-color: hsl(0, 0%, 0%); - display: block; - width: 40px; - height: 3px; - transform: rotate(45deg) translateY(10px) translateX(-4px); - margin-block: 10px; -} -.line:nth-child(2) { - background-color: hsl(0, 0%, 0%); - display: block; - width: 40px; - height: 3px; - margin-block: 10px; - transform: rotate(-45deg) translateY(-13px); -} -.hamb:hover .line:nth-child(2) { - transform: rotate(0deg) translateY(-13px) translateX(-10px) scaleX(0.8); -} -.hamb:hover .line:nth-child(1) { - transform: rotate(0deg) translateY(-0px) translateX(-10px) scaleX(0.8); + &:hover { + .line { + &:nth-child(1) { + transform: rotate(0deg) translateY(-0px) translateX(-10px) scaleX(0.8); + } + &:nth-child(2) { + transform: rotate(0deg) translateY(-13px) translateX(-10px) scaleX(0.8); + } + } + } } -.text { - animation: slide-left 300ms ease-in-out; - animation-delay: 100ms; +.line { + transition: transform 300ms ease-in-out; + &:nth-child(1) { + background-color: hsl(0, 0%, 0%); + display: block; + width: 40px; + height: 3px; + transform: rotate(45deg) translateY(10px) translateX(-4px); + margin-block: 10px; + } + &:nth-child(2) { + background-color: hsl(0, 0%, 0%); + display: block; + width: 40px; + height: 3px; + margin-block: 10px; + transform: rotate(-45deg) translateY(-13px); + } } @keyframes slide-left { diff --git a/styles/wallet-adapter.css b/styles/wallet-adapter.scss similarity index 100% rename from styles/wallet-adapter.css rename to styles/wallet-adapter.scss diff --git a/yarn.lock b/yarn.lock index f19503c..098e2ef 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1294,7 +1294,7 @@ check-more-types@2.24.0: resolved "https://registry.yarnpkg.com/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600" integrity sha1-FCD/sQ/URNz8ebQ4kbv//TKoRgA= -chokidar@^3.5.3: +"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3: version "3.5.3" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd" integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw== @@ -2297,6 +2297,11 @@ ignore@^5.2.0: resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a" integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ== +immutable@^4.0.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.1.0.tgz#f795787f0db780183307b9eb2091fcac1f6fafef" + integrity sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ== + import-fresh@^3.0.0, import-fresh@^3.2.1: version "3.3.0" resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b" @@ -3460,6 +3465,15 @@ safe-json-utils@^1.1.1: resolved "https://registry.yarnpkg.com/safe-json-utils/-/safe-json-utils-1.1.1.tgz#0e883874467d95ab914c3f511096b89bfb3e63b1" integrity sha512-SAJWGKDs50tAbiDXLf89PDwt9XYkWyANFWVzn4dTXl5QyI8t2o/bW5/OJl3lvc2WVU4MEpTo9Yz5NVFNsp+OJQ== +sass@^1.53.0: + version "1.53.0" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.53.0.tgz#eab73a7baac045cc57ddc1d1ff501ad2659952eb" + integrity sha512-zb/oMirbKhUgRQ0/GFz8TSAwRq2IlR29vOUJZOx0l8sV+CkHUfHa4u5nqrG+1VceZp7Jfj59SVW9ogdhTvJDcQ== + dependencies: + chokidar ">=3.0.0 <4.0.0" + immutable "^4.0.0" + source-map-js ">=0.6.2 <2.0.0" + scheduler@^0.22.0: version "0.22.0" resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.22.0.tgz#83a5d63594edf074add9a7198b1bae76c3db01b8" @@ -3608,7 +3622,7 @@ socket.io-parser@~4.2.0: "@socket.io/component-emitter" "~3.1.0" debug "~4.3.1" -source-map-js@^1.0.1, source-map-js@^1.0.2: +"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== From 11107e1f9d9ecd01469c648db6d4af6524467bb5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bego=C3=B1a=20Alvarez?= Date: Thu, 23 Jun 2022 13:17:54 +0200 Subject: [PATCH 07/10] refactor: improve components file structure --- components/Button.tsx | 32 ++++++++ .../{layout => }/CheckConnectedWallet.tsx | 0 components/{layout => }/Modal.tsx | 4 +- components/{layout => }/Navbar.tsx | 0 components/{layout => }/Spinner.tsx | 0 components/{layout => }/Title.tsx | 0 components/{layout => }/Wallet.tsx | 0 .../forms/UpdateCreateCandyMachineForm.tsx | 16 ++-- components/index.ts | 9 ++- components/layout/ActionButton.tsx | 45 ----------- components/layout/index.ts | 7 -- pages/verify-candy-machine/[id].tsx | 6 +- styles/modules/Button.module.scss | 75 +++++++++++++++++++ 13 files changed, 125 insertions(+), 69 deletions(-) create mode 100644 components/Button.tsx rename components/{layout => }/CheckConnectedWallet.tsx (100%) rename components/{layout => }/Modal.tsx (97%) rename components/{layout => }/Navbar.tsx (100%) rename components/{layout => }/Spinner.tsx (100%) rename components/{layout => }/Title.tsx (100%) rename components/{layout => }/Wallet.tsx (100%) delete mode 100644 components/layout/ActionButton.tsx delete mode 100644 components/layout/index.ts create mode 100644 styles/modules/Button.module.scss diff --git a/components/Button.tsx b/components/Button.tsx new file mode 100644 index 0000000..4b8cf4f --- /dev/null +++ b/components/Button.tsx @@ -0,0 +1,32 @@ +import { Spinner } from 'components' +import React, { FC } from 'react' + +const Button: FC<{ + text: string + isLoading?: boolean + disabled?: boolean + secondary?: boolean + danger?: boolean + type?: React.DetailedHTMLProps, HTMLButtonElement>['type'] + onClick?: () => void +}> = ({ text, isLoading = false, disabled = false, secondary = false, danger = false, type = 'button', onClick }) => { + return ( + + ) +} + +export default Button diff --git a/components/layout/CheckConnectedWallet.tsx b/components/CheckConnectedWallet.tsx similarity index 100% rename from components/layout/CheckConnectedWallet.tsx rename to components/CheckConnectedWallet.tsx diff --git a/components/layout/Modal.tsx b/components/Modal.tsx similarity index 97% rename from components/layout/Modal.tsx rename to components/Modal.tsx index eb42b10..2a9dba9 100644 --- a/components/layout/Modal.tsx +++ b/components/Modal.tsx @@ -1,5 +1,5 @@ import { useConnection } from '@solana/wallet-adapter-react' -import { ActionButton } from 'components' +import { Button } from 'components' import { Dispatch, FC, SetStateAction, useState } from 'react' import styles from 'styles/modules/Modal.module.scss' @@ -108,7 +108,7 @@ const Modal: FC<{ )}{' '} - {isLoading && } + {isLoading && - ) -} - -export default ActionButton diff --git a/components/layout/index.ts b/components/layout/index.ts deleted file mode 100644 index 1fb6d31..0000000 --- a/components/layout/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -export { default as Navbar } from './Navbar' -export { default as Wallet } from './Wallet' -export { default as Spinner } from './Spinner' -export { default as Title } from './Title' -export { default as CheckConnectedWallet } from './CheckConnectedWallet' -export { default as Modal } from './Modal' -export { default as ActionButton } from './ActionButton' diff --git a/pages/verify-candy-machine/[id].tsx b/pages/verify-candy-machine/[id].tsx index 89c754d..6605368 100644 --- a/pages/verify-candy-machine/[id].tsx +++ b/pages/verify-candy-machine/[id].tsx @@ -1,5 +1,5 @@ import { useWallet } from '@solana/wallet-adapter-react' -import { ActionButton, CheckConnectedWallet, Title } from 'components' +import { Button, CheckConnectedWallet, Title } from 'components' import { useUploadCache, useVerifyCandyMachineV2 } from 'hooks' import type { NextPage } from 'next' import Head from 'next/head' @@ -52,10 +52,10 @@ const VerifyCandyMachine: NextPage = () => { />
- {isLoading && } + {isLoading &&