support for light and dark theme

components/ConnectWalletButton.tsx

@@ -26,7 +26,7 @@ const ConnectWalletButton = () => {
         <div className="flex flex-row items-center px-2 justify-center h-full rounded-l default-transition hover:bg-th-primary hover:text-th-fgd-1">
           <WalletIcon className="w-5 h-5 mr-3 fill-current" />
           <div>
-            <span className="whitespace-nowrap">Connect Wallet</span>
+            <span className="whitespace-nowrap text-sm">Connect Wallet</span>
             <StyledWalletTypeLabel className="font-normal text-th-fgd-1 text-left leading-3">
               {WALLET_PROVIDERS.filter((p) => p.url === savedProviderUrl).map(
                 ({ name }) => name
@@ -36,7 +36,7 @@ const ConnectWalletButton = () => {
         </div>
       </button>
       <div className="relative h-full">
-        <WalletSelect isPrimary />
+        <WalletSelect />
       </div>
     </div>
   )

components/DropMenu.tsx

@@ -0,0 +1,58 @@
+import { FunctionComponent, ReactNode } from 'react'
+import { Listbox } from '@headlessui/react'
+
+type DropMenuProps = {
+  button: ReactNode
+  buttonClassName?: string
+  onChange: (...args: any[]) => any
+  options: Array<any>
+  toolTipContent?: string
+  value?: any
+}
+
+const DropMenu: FunctionComponent<DropMenuProps> = ({
+  button,
+  buttonClassName,
+  value,
+  onChange,
+  options,
+  toolTipContent,
+}) => {
+  return (
+    <div className={`relative`}>
+      <Listbox value={value} onChange={onChange}>
+        {({ open }) => (
+          <>
+            <Listbox.Button className={`${buttonClassName} default-transition`}>
+              {toolTipContent && !open ? { button } : button}
+            </Listbox.Button>
+            {open ? (
+              <Listbox.Options
+                className={`z-20 p-1 absolute right-0 top-11 bg-th-bkg-1 divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md`}
+              >
+                {options.map((option) => (
+                  <Listbox.Option key={option.name} value={option.name}>
+                    {({ selected }) => (
+                      <div
+                        className={`p-2 hover:bg-th-bkg-2 hover:cursor-pointer text-sm ${
+                          selected && `text-th-primary`
+                        } ${option.icon && `flex flex-row items-center`}`}
+                      >
+                        {option.icon ? (
+                          <div className="mr-2 w-5 h-5">{option.icon}</div>
+                        ) : null}
+                        {option.name}
+                      </div>
+                    )}
+                  </Listbox.Option>
+                ))}
+              </Listbox.Options>
+            ) : null}
+          </>
+        )}
+      </Listbox>
+    </div>
+  )
+}
+
+export default DropMenu

components/ThemeSwitch.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react'
+import { useTheme } from 'next-themes'
+import { MoonIcon, SunIcon } from '@heroicons/react/outline'
+import DropMenu from './DropMenu'
+
+const THEMES = [
+  { name: 'Light', icon: <SunIcon className="w-5" /> },
+  { name: 'Dark', icon: <MoonIcon className="w-5" /> },
+]
+
+const ThemeSwitch = () => {
+  const [mounted, setMounted] = useState(false)
+  const { theme, setTheme } = useTheme()
+
+  // When mounted on client, now we can show the UI
+  useEffect(() => setMounted(true), [])
+
+  if (!mounted) return null
+
+  return (
+    <DropMenu
+      button={
+        <div className="h-5">{THEMES.find((t) => t.name === theme).icon}</div>
+      }
+      buttonClassName="w-10 h-10 flex items-center justify-center hover:text-th-primary rounded-md focus:outline-none"
+      value={theme}
+      onChange={(theme) => setTheme(theme)}
+      options={THEMES}
+    />
+  )
+}
+
+export default ThemeSwitch

components/TopBar.tsx

@@ -9,6 +9,7 @@ import {
 } from '@heroicons/react/outline'
 import ConnectWalletButton from './ConnectWalletButton'
 import WalletIcon from './WalletIcon'
+import ThemeSwitch from './ThemeSwitch'
 import useWalletStore from '../stores/useWalletStore'
 
 const Code = styled.code`
@@ -61,6 +62,9 @@ const TopBar = () => {
           </div>
           <div className="flex">
             <div className="flex items-center">
+              <div className="flex items-center justify-center rounded-full bg-th-bkg-3 w-8 h-8 mr-2">
+                <ThemeSwitch />
+              </div>
               <div className="hidden sm:ml-4 sm:block">
                 {connected && wallet?.publicKey ? (
                   <Menu>

components/WalletSelect.tsx

@@ -9,7 +9,7 @@ import useWalletStore from '../stores/useWalletStore'
 import { WALLET_PROVIDERS, DEFAULT_PROVIDER } from '../hooks/useWallet'
 import useLocalStorageState from '../hooks/useLocalStorageState'
 
-export default function WalletSelect({ isPrimary = false }) {
+export default function WalletSelect() {
   const setWalletStore = useWalletStore((s) => s.set)
   const [savedProviderUrl] = useLocalStorageState(
     'walletProvider',
@@ -27,11 +27,7 @@ export default function WalletSelect({ isPrimary = false }) {
       {({ open }) => (
         <>
           <Menu.Button
-            className={`flex justify-center items-center h-full rounded-r rounded-l-none focus:outline-none text-th-primary hover:text-th-fgd-1 ${
-              isPrimary
-                ? 'px-3 hover:bg-th-primary'
-                : 'px-2 hover:bg-th-bkg-3 border-l border-th-fgd-4'
-            } cursor-pointer`}
+            className={`flex justify-center items-center h-full rounded-r rounded-l-none focus:outline-none text-th-primary hover:text-th-fgd-1 px-3 hover:bg-th-primary cursor-pointer`}
           >
             {open ? (
               <ChevronUpIcon className="h-5 w-5" />
@@ -46,7 +42,7 @@ export default function WalletSelect({ isPrimary = false }) {
                   className="flex flex-row items-center justify-between w-full p-2 hover:bg-th-bkg-2 hover:cursor-pointer font-normal focus:outline-none"
                   onClick={() => handleSelectProvider(url)}
                 >
-                  <div className="flex">
+                  <div className="flex items-center text-sm">
                     <img src={icon} className="w-5 h-5 mr-2" />
                     {name}
                   </div>

pages/_app.tsx

@@ -35,7 +35,7 @@ function App({ Component, pageProps }) {
 
         <link rel="manifest" href="/manifest.json"></link>
       </Head>
-      <ThemeProvider defaultTheme="Mango">
+      <ThemeProvider defaultTheme="Light">
         <Component {...pageProps} />
       </ThemeProvider>
     </>

styles/index.css

@@ -1,3 +1,45 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+:root {
+  --primary: theme('colors.light-theme.orange');
+  --red: theme('colors.light-theme.red.DEFAULT');
+  --red-dark: theme('colors.light-theme.red.dark');
+  --green: theme('colors.light-theme.green.DEFAULT');
+  --green-dark: theme('colors.light-theme.green.dark');
+  --bkg-1: theme('colors.light-theme["bkg-1"]');
+  --bkg-2: theme('colors.light-theme["bkg-2"]');
+  --bkg-3: theme('colors.light-theme["bkg-3"]');
+  --fgd-1: theme('colors.light-theme["fgd-1"]');
+  --fgd-2: theme('colors.light-theme["fgd-2"]');
+  --fgd-3: theme('colors.light-theme["fgd-3"]');
+  --fgd-4: theme('colors.light-theme["fgd-4"]');
+}
+
+[data-theme='Dark'] {
+  --primary: theme('colors.dark-theme.yellow');
+  --red: theme('colors.dark-theme.red.DEFAULT');
+  --red-dark: theme('colors.dark-theme.red.dark');
+  --green: theme('colors.dark-theme.green.DEFAULT');
+  --green-dark: theme('colors.dark-theme.green.dark');
+  --bkg-1: theme('colors.dark-theme["bkg-1"]');
+  --bkg-2: theme('colors.dark-theme["bkg-2"]');
+  --bkg-3: theme('colors.dark-theme["bkg-3"]');
+  --fgd-1: theme('colors.dark-theme["fgd-1"]');
+  --fgd-2: theme('colors.dark-theme["fgd-2"]');
+  --fgd-3: theme('colors.dark-theme["fgd-3"]');
+  --fgd-4: theme('colors.dark-theme["fgd-4"]');
+}
+
+* {
+  @apply m-0 p-0;
+}
+
+body {
+  @apply font-body text-base text-th-fgd-1;
+}
+
+button {
+  @apply font-bold;
+}

tailwind.config.js

@@ -1,6 +1,3 @@
-// const colors = require('tailwindcss/colors')
-// const defaultTheme = require('tailwindcss/defaultTheme')
-
 module.exports = {
   mode: 'jit',
   purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
@@ -19,36 +16,19 @@ module.exports = {
         help: 'help',
       },
       colors: {
-        'mango-orange': {
-          DEFAULT: '#DFAB01',
-          dark: '#CB9C01',
+        'light-theme': {
+          orange: '#FF9C24',
+          red: { DEFAULT: '#CC2929', dark: '#AA2222' },
+          green: { DEFAULT: '#5EBF4D', dark: '#4BA53B' },
+          'bkg-1': '#f7f7f7',
+          'bkg-2': '#FFFFFF',
+          'bkg-3': '#EDEDED',
+          'fgd-1': '#061f23',
+          'fgd-2': '#0C3F45',
+          'fgd-3': '#446065',
+          'fgd-4': '#B0B0B0',
         },
-        'mango-yellow': '#F2C94C',
-        'mango-red': '#E54033',
-        'mango-green': '#AFD803',
-        'mango-dark': {
-          lighter: '#332F46',
-          light: '#262337',
-          DEFAULT: '#141026',
-        },
-        'mango-med': {
-          light: '#C2BDD9',
-          DEFAULT: '#9490A6',
-          dark: '#706C81',
-        },
-        'mango-light': {
-          light: '#FCFCFF',
-          DEFAULT: '#F0EDFF',
-          dark: '#B9B5CE',
-        },
-        'mango-grey': {
-          lighter: '#f7f7f7',
-          light: '#e6e6e6',
-          dark: '#092e34',
-          darker: '#072428',
-          darkest: '#061f23',
-        },
-        'mango-theme': {
+        'dark-theme': {
           yellow: '#F2C94C',
           red: { DEFAULT: '#E54033', dark: '#C7251A' },
           green: { DEFAULT: '#AFD803', dark: '#91B503' },