From 3dfea56831633b22bfcc5ae0bd47d6617dc9a354 Mon Sep 17 00:00:00 2001
From: Tyler Shipe <tjshipe@gmail.com>
Date: Mon, 12 Apr 2021 12:20:17 -0400
Subject: [PATCH] adding additional theme classes

---
 components/MarketSelect.jsx       | 39 +++++++++++++++----------------
 components/MenuItem.tsx           |  3 ++-
 components/RecentMarketTrades.tsx |  2 +-
 components/ThemeSwitch.tsx        | 12 ++++++----
 components/TopBar.tsx             | 14 +++++------
 5 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/components/MarketSelect.jsx b/components/MarketSelect.jsx
index 79afcaa..f026376 100644
--- a/components/MarketSelect.jsx
+++ b/components/MarketSelect.jsx
@@ -6,10 +6,6 @@ import useMarketList from '../hooks/useMarketList'
 // import useMarket from '../hooks/useMarket'
 import useMangoStore from '../stores/useMangoStore'
 
-const StyledDiv = styled.div`
-  cursor: pointer;
-`
-
 const MarketSelect = () => {
   const { spotMarkets } = useMarketList()
   const selectedMarket = useMangoStore((s) => s.selectedMarket)
@@ -22,23 +18,26 @@ const MarketSelect = () => {
   }
 
   return (
-    <div
-      css={xw`relative flex items-center py-2 px-3 sm:px-6 divide-x divide-th-fgd-4 bg-th-bkg-3`}
-    >
+    <div css={xw`bg-th-bkg-3`}>
       {/*<div css={xw`opacity-50 p-2`}>Markets</div>*/}
-      {Object.entries(spotMarkets).map(([name, address]) => (
-        <StyledDiv
-          css={
-            selectedMarket.name === name
-              ? xw`px-3 py-1 text-th-primary text-xs font-normal`
-              : xw`px-3 py-1 text-th-fgd-3 hover:text-th-fgd-1 text-xs font-normal`
-          }
-          onClick={() => handleChange(name)}
-          key={address}
-        >
-          {name}
-        </StyledDiv>
-      ))}
+      <div
+        css={xw`flex items-center py-2 px-3 sm:px-8 divide-x divide-th-fgd-4 `}
+      >
+        {Object.entries(spotMarkets).map(([name, address]) => (
+          <div
+            css={[
+              xw`cursor-pointer`,
+              selectedMarket.name === name
+                ? xw`px-3 py-1 text-th-primary text-xs font-normal`
+                : xw`px-3 py-1 text-th-fgd-3 hover:text-th-fgd-1 text-xs font-normal`,
+            ]}
+            onClick={() => handleChange(name)}
+            key={address}
+          >
+            {name}
+          </div>
+        ))}
+      </div>
       {/*<Listbox value={selectedMarket.name} onChange={handleChange}>
         {({ open }) => (
           <>
diff --git a/components/MenuItem.tsx b/components/MenuItem.tsx
index 16c9298..8e6ca3e 100644
--- a/components/MenuItem.tsx
+++ b/components/MenuItem.tsx
@@ -9,7 +9,8 @@ const MenuItem = ({ href, children }) => {
     <Link href={href} passHref>
       <a
         css={[
-          xw`block text-th-fgd-1 font-semibold items-center pl-3 pr-4 py-2 sm:inline-flex sm:ml-4 sm:px-1 sm:pt-1 sm:pb-0 border-l-4 sm:border-l-0 sm:border-b-2 text-base`,
+          xw`block text-th-fgd-1 font-semibold items-center pl-3 pr-4 py-2 
+          sm:inline-flex sm:ml-4 sm:px-1 sm:py-0 border-l-4 sm:border-l-0 sm:border-b-2 text-base`,
           asPath === href
             ? xw`border-th-primary`
             : xw`border-transparent hover:border-th-primary`,
diff --git a/components/RecentMarketTrades.tsx b/components/RecentMarketTrades.tsx
index a897fe6..0f35726 100644
--- a/components/RecentMarketTrades.tsx
+++ b/components/RecentMarketTrades.tsx
@@ -26,7 +26,7 @@ export default function PublicTrades() {
   return (
     <FloatingElement>
       <ElementTitle>Recent Market Trades</ElementTitle>
-      <div css={xw`grid grid-cols-3 text-gray-500 mb-2`}>
+      <div css={xw`grid grid-cols-3 text-th-fgd-4 mb-2`}>
         <div>Price ({quoteCurrency}) </div>
         <div css={xw`text-right`}>Size ({baseCurrency})</div>
         <div css={xw`text-right`}>Time</div>
diff --git a/components/ThemeSwitch.tsx b/components/ThemeSwitch.tsx
index 975d66c..57c98ae 100644
--- a/components/ThemeSwitch.tsx
+++ b/components/ThemeSwitch.tsx
@@ -2,7 +2,11 @@ import { useEffect, useState } from 'react'
 import xw from 'xwind'
 import { useTheme } from 'next-themes'
 
-const themes = [{ name: 'light' }, { name: 'dark' }, { name: 'mango' }]
+const THEMES = [
+  { name: 'light', display: 'Light' },
+  { name: 'dark', display: 'Dark' },
+  { name: 'mango', display: 'Mango' },
+]
 
 const ThemeChanger = () => {
   const [mounted, setMounted] = useState(false)
@@ -17,14 +21,14 @@ const ThemeChanger = () => {
     <select
       name="theme"
       id="theme-select"
-      css={xw`px-3 py-1 text-sm bg-th-bkg-1 border border-th-fgd-4 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 rounded-md`}
+      css={xw`px-3 py-1 text-sm bg-th-bkg-1 border border-th-fgd-4 focus:outline-none focus:ring-th-primary focus:border-th-primary rounded-md`}
       onChange={(e) => setTheme(e.currentTarget.value)}
       value={theme}
     >
       <option value="">Select Theme</option>
-      {themes.map((t) => (
+      {THEMES.map((t) => (
         <option key={t.name.toLowerCase()} value={t.name.toLowerCase()}>
-          {t.name}
+          {t.display}
         </option>
       ))}
     </select>
diff --git a/components/TopBar.tsx b/components/TopBar.tsx
index b263429..8927c4e 100644
--- a/components/TopBar.tsx
+++ b/components/TopBar.tsx
@@ -1,8 +1,7 @@
 import { useState } from 'react'
 import xw from 'xwind'
 import styled from '@emotion/styled'
-// import { useTheme } from 'next-themes'
-import { SunIcon, MoonIcon, MenuIcon, XIcon } from '@heroicons/react/outline'
+import { MenuIcon, XIcon } from '@heroicons/react/outline'
 import MenuItem from './MenuItem'
 import useWallet from '../hooks/useWallet'
 import ThemeSwitch from './ThemeSwitch'
@@ -16,7 +15,6 @@ const Code = styled.code`
 const TopBar = () => {
   const { connected, wallet } = useWallet()
   const [showMenu, setShowMenu] = useState(false)
-  // const { theme, setTheme } = useTheme()
 
   const handleConnectDisconnect = () => {
     connected ? wallet.disconnect() : wallet.connect()
@@ -27,14 +25,14 @@ const TopBar = () => {
       <div css={xw`px-4 sm:px-6 lg:px-8`}>
         <div css={xw`flex justify-between h-16`}>
           <div css={xw`flex`}>
-            <div css={xw`flex-shrink-0 flex items-center`}>
+            <div css={xw`flex-shrink-0 flex items-center ml-2`}>
               <img
                 css={xw`h-8 w-auto`}
                 src="/assets/icons/logo.svg"
                 alt="next"
               />
             </div>
-            <div css={xw`hidden sm:flex sm:space-x-8 sm:ml-4`}>
+            <div css={xw`hidden sm:flex sm:space-x-8 sm:ml-4 py-2`}>
               <MenuItem href="/">Trade</MenuItem>
               <MenuItem href="/stats">Stats</MenuItem>
               <MenuItem href="https://docs.mango.markets/">Learn</MenuItem>
@@ -88,9 +86,9 @@ const TopBar = () => {
               >
                 <span css={xw`sr-only`}>Open main menu</span>
                 {showMenu ? (
-                  <XIcon css={xw`h-5 w-5`} />
+                  <XIcon css={xw`h-5 w-5 text-th-primary`} />
                 ) : (
-                  <MenuIcon css={xw`h-5 w-5`} />
+                  <MenuIcon css={xw`h-5 w-5 text-th-primary`} />
                 )}
               </button>
             </div>
@@ -101,7 +99,7 @@ const TopBar = () => {
         css={[showMenu ? xw`visible` : xw`hidden`, xw`sm:hidden`]}
         id="mobile-menu"
       >
-        <div css={xw`bg-mango-grey-dark pt-2 pb-3 space-y-1`}>
+        <div css={xw`bg-th-bkg-3 pt-2 pb-3 space-y-1 border-b border-th-fgd-4`}>
           <MenuItem href="/">Trade</MenuItem>
           <MenuItem href="/stats">Stats</MenuItem>
           <MenuItem href="https://docs.mango.markets/">Learn</MenuItem>