refactor: style

.gitignore

@@ -33,3 +33,6 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
+
+# linter
+.eslintcache

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<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>['type']
+    onClick?: () => void
+}> = ({ text, isLoading = false, disabled = false, secondary = false, danger = false, type = 'button', onClick }) => {
+    return (
+        <button
+            className={`flex items-center justify-center px-4 py-2 text-white
+      transition-all duration-300 ease-linear
+       rounded-xl group  ${isLoading ? 'cursor-not-allowed' : 'cursor-pointer'}`}
+            disabled={disabled || isLoading}
+            onClick={onClick}
+            type={type}
+        >
+            {isLoading && (
+                <div className='mr-3'>
+                    <Spinner />
+                </div>
+            )}
+            {text}
+        </button>
+    )
+}
+
+export default Button

components/layout/Modal.tsx → components/Modal.tsx

@@ -1,7 +1,7 @@
 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/Modal.module.css'
+import styles from 'styles/modules/Modal.module.scss'
 
 const Modal: FC<{
     isOpen: boolean
@@ -108,7 +108,7 @@ const Modal: FC<{
                                         </span>
                                     </>
                                 )}{' '}
-                                {isLoading && <ActionButton text='Removing account...' isLoading={true} />}
+                                {isLoading && <Button text='Removing account...' isLoading={true} />}
                             </span>
                         </span>
                     </span>

components/layout/Navbar.tsx → components/Navbar.tsx

@@ -26,47 +26,56 @@ const Navbar: FC = () => {
     ]
 
     return (
-        <div
+        <nav
             className='
                 fixed top-0 left-0 z-10 
-                flex flex-row md:flex-col items-center md:justify-between px-2 py-4
+                flex flex-row md:flex-col md:justify-between py-4 px-6
                 md:h-screen w-screen md:w-48 
-                transition-all ease-linear 
-                text-white shadow-lg bg-slate-300
+                bg-gray-200
             '
         >
-            <div className='w-full flex flex-row md:flex-col space-x-4 md:space-x-0 md:space-y-4'>
-                {NAVBAR_ELEMENTS.map((element) => {
-                    return <NavbarElement disabled={!publicKey} key={element.url} {...element} />
-                })}
+            <div className='w-full'>
+                <h4 className='uppercase mb-6'>Sugar Rush</h4>
+                <div className='w-full flex flex-row md:flex-col space-x-4 md:space-x-0 md:space-y-4'>
+                    {NAVBAR_ELEMENTS.map((element) => {
+                        return <NavbarElement disabled={!publicKey} key={element.url} {...element} />
+                    })}
+                </div>
             </div>
-        </div>
+            <p className='text-left text-xs'>
+                By{' '}
+                <a href='https://boxfish.studio' target='_blank' rel='noopener noreferrer'>
+                    Boxfish Studio
+                </a>
+            </p>
+        </nav>
     )
 }
 
 const NavbarElement = ({ title, url, tooltip, disabled }: INavbarElement) => (
     <Link href={url}>
         <div
             style={{ pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? '50%' : '' }}
-            className='
-            group w-auto md:w-full
-            relative text-center text-white cursor-pointer px-2 py-3 
-            flex items-center justify-center 
-            transition-all duration-300 ease-linear
-            rounded-xl hover:rounded-xl
-            bg-[hsl(258,52%,56%)] hover:bg-[hsl(258,52%,65%)]'
+            className={`
+                    cursor-pointer
+                    group
+                    w-auto md:w-full
+                    relative
+                    flex items-center
+                    transition-all
+                    font-semibold text-blue-regular
+                    `}
         >
             {title}
             <span
-                style={{ left: 'calc(100% + 8px)' }}
+                style={{ left: 'calc(100% + 16px)' }}
                 className='
-                    absolute w-auto md:w-full 
-                    p-2 m-2 
+                    absolute p-2 m-2 w-max
                     text-xs font-bold text-red 
                     transition-all duration-300
-                    bg-gray-800 
+                    bg-gray-800 text-white
                     rounded-md shadow-md 
-                    scale-0 after:group-hover:scale-100'
+                    scale-0 group-hover:scale-100'
             >
                 {tooltip}
             </span>

components/forms/UpdateCreateCandyMachineForm.tsx

@@ -1,7 +1,7 @@
 import { AnchorProvider, BN } from '@project-serum/anchor'
 import { useAnchorWallet, useWallet } from '@solana/wallet-adapter-react'
 import { LAMPORTS_PER_SOL, PublicKey } from '@solana/web3.js'
-import { ActionButton, CheckConnectedWallet } from 'components'
+import { Button, CheckConnectedWallet } from 'components'
 import { useForm, useRPC, useUploadCache, useUploadFiles } from 'hooks'
 import { updateV2 } from 'lib/candy-machine'
 import { DEFAULT_GATEKEEPER } from 'lib/candy-machine/constants'
@@ -304,7 +304,7 @@ const UpdateCreateCandyMachineForm: FC<{
     }
     return (
         <form className='flex flex-col items-center h-auto justify-center mt-4' onSubmit={onSubmit}>
-            <div className='create-form flex flex-col p-6 xxl-shadow rounded-2xl scale-90 bg-slate-300 items-center justify-center'>
+            <div className='flex flex-col p-6 xxl-shadow rounded-2xl scale-90 bg-slate-300 items-center justify-center'>
                 <FormInput
                     id='price'
                     text='Price of each NFT (SOL)'
@@ -431,19 +431,13 @@ const UpdateCreateCandyMachineForm: FC<{
                     <span className='text-red-500 border border-red-500 mt-3 p-3 rounded-xl'>{errorMessage}</span>
                 )}
 
-                {updateCandyMachine && !isInteractingWithCM && (
-                    <ActionButton text='Update Candy Machine' type='submit' />
-                )}
-                {!updateCandyMachine && !isInteractingWithCM && (
-                    <ActionButton text='Create Candy Machine' type='submit' />
-                )}
+                {updateCandyMachine && !isInteractingWithCM && <Button text='Update Candy Machine' type='submit' />}
+                {!updateCandyMachine && !isInteractingWithCM && <Button text='Create Candy Machine' type='submit' />}
 
-                {updateCandyMachine && isInteractingWithCM && (
-                    <ActionButton text='Updating Candy Machine...' isLoading />
-                )}
+                {updateCandyMachine && isInteractingWithCM && <Button text='Updating Candy Machine...' isLoading />}
                 {!updateCandyMachine && isInteractingWithCM && (
                     <>
-                        <ActionButton text='Creating Candy Machine...' isLoading />
+                        <Button text='Creating Candy Machine...' isLoading />
                         <span className='text-red-500 text-center mt-6 w-full md:w-1/2 my-3'>
                             IMPORTANT! Make sure to save the Cache file that will be downloaded at the end! Without it,
                             you will not be able to update your Candy Machine.

components/index.ts

@@ -1,3 +1,10 @@
+export { default as Button } from './Button'
+export { default as CheckConnectedWallet } from './CheckConnectedWallet'
+export { default as Modal } from './Modal'
+export { default as Navbar } from './Navbar'
+export { default as Spinner } from './Spinner'
+export { default as Title } from './Title'
+export { default as Wallet } from './Wallet'
+
 export * from './cards'
 export * from './forms'
-export * from './layout'

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"
   },

pages/[id].tsx

@@ -61,7 +61,7 @@ const CandyMachine: NextPage = () => {
     }, [account, connection, anchorWallet])
 
     return (
-        <div className='relative'>
+        <>
             <Head>
                 <title>Update Candy Machine</title>
                 <meta name='description' content='Generated by create next app' />
@@ -112,7 +112,7 @@ const CandyMachine: NextPage = () => {
                     </div>
                 )}
             </div>
-        </div>
+        </>
     )
 }
 

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

pages/create-candy-machine.tsx

@@ -11,7 +11,7 @@ const CreateCandyMachine: NextPage = () => {
     }
 
     return (
-        <div className='relative'>
+        <>
             <Head>
                 <title>Create Candy Machine</title>
                 <meta name='description' content='Generated by create next app' />
@@ -21,7 +21,7 @@ const CreateCandyMachine: NextPage = () => {
                 <Title text='Create Candy Machine' />
                 <UpdateCreateCandyMachineForm />
             </div>
-        </div>
+        </>
     )
 }
 

pages/index.tsx

@@ -57,7 +57,7 @@ const ManageCandyMachines: NextPage = () => {
     }
 
     return (
-        <div className='relative'>
+        <>
             <Head>
                 <title>Manage Candy Machine</title>
                 <meta name='description' content='Generated by create next app' />
@@ -88,7 +88,7 @@ const ManageCandyMachines: NextPage = () => {
                     </span>
                 )}
             </div>
-        </div>
+        </>
     )
 }
 

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'
@@ -12,7 +12,7 @@ const VerifyCandyMachine: NextPage = () => {
     const { connected } = useWallet()
     const { error, isLoading, verifyCandyMachine, message, connection } = useVerifyCandyMachineV2(cache)
     return (
-        <div className='relative'>
+        <>
             <Head>
                 <title>Verify Candy Machine</title>
                 <meta name='description' content='Generated by create next app' />
@@ -52,10 +52,10 @@ const VerifyCandyMachine: NextPage = () => {
                         />
                     </div>
 
-                    {isLoading && <ActionButton text='Verifying Candy Machine...' isLoading />}
+                    {isLoading && <Button text='Verifying Candy Machine...' isLoading />}
 
                     {!isLoading && (
-                        <ActionButton text='Verify Candy Machine' onClick={() => verifyCandyMachine({ account })} />
+                        <Button text='Verify Candy Machine' onClick={() => verifyCandyMachine({ account })} />
                     )}
                     {!error && message && <div className='text-[hsl(258,52%,56%)] text-center mt-6'>{message}</div>}
 
@@ -64,7 +64,7 @@ const VerifyCandyMachine: NextPage = () => {
             ) : (
                 <CheckConnectedWallet />
             )}
-        </div>
+        </>
     )
 }