use select for theme selection

2022-12-01 16:21:28 +11:00 · 2022-12-01 16:21:28 +11:00 · 2b27464d6e
parent 4af775a1c3
commit 2b27464d6e
7 changed files with 119 additions and 19 deletions
--- a/components/forms/Select.tsx
+++ b/components/forms/Select.tsx
@ -27,10 +27,10 @@ const Select = ({
        {({ open }) => (
          <>
            <Listbox.Button
-              className={`h-full w-full rounded-md bg-th-bkg-1 font-normal ring-1 ring-inset ring-th-fgd-4 hover:ring-th-fgd-3 focus:border-th-fgd-3 focus:outline-none`}
+              className={`default-transition h-full w-full rounded-md bg-th-bkg-1 py-2.5 font-normal ring-1 ring-inset ring-th-bkg-4 hover:ring-th-fgd-4 focus:border-th-fgd-3 focus:outline-none`}
            >
              <div
-                className={`flex h-12 items-center justify-between space-x-2 px-3 text-base text-th-fgd-1`}
+                className={`flex items-center justify-between space-x-2 px-3 text-th-fgd-1`}
              >
                {value ? (
                  value
--- a/components/icons/OrderbookIcon.tsx
+++ b/components/icons/OrderbookIcon.tsx
@ -9,10 +9,8 @@ const OrderbookIcon = ({
  className?: string
 }) => {
  const { theme } = useTheme()
-  const oppositeSideColor =
-    theme === 'Light' ? 'rgba(0,0,0,0.2)' : 'rgba(255,255,255,0.2)'
-  const buyColor = side === 'buy' ? COLORS.UP[theme] : oppositeSideColor
-  const sellColor = side === 'sell' ? COLORS.DOWN[theme] : oppositeSideColor
+  const buyColor = side === 'buy' ? COLORS.UP[theme] : COLORS.FGD4[theme]
+  const sellColor = side === 'sell' ? COLORS.DOWN[theme] : COLORS.FGD4[theme]
  return (
    <svg
      className={`${className}`}
--- a/components/settings/DisplaySettings.tsx
+++ b/components/settings/DisplaySettings.tsx
@ -1,4 +1,5 @@
 import ButtonGroup from '@components/forms/ButtonGroup'
+import Select from '@components/forms/Select'
 import dayjs from 'dayjs'
 import useLocalStorageState from 'hooks/useLocalStorageState'
 import { useTranslation } from 'next-i18next'
@ -41,7 +42,12 @@ const DisplaySettings = () => {
    'Slider'
  )
  const themes = useMemo(() => {
-    return [t('settings:light'), t('settings:mango'), t('settings:dark')]
+    return [
+      t('settings:light'),
+      t('settings:dark'),
+      t('settings:mango'),
+      'Smoothy',
+    ]
  }, [t])

  const handleLangChange = useCallback(
@ -58,12 +64,25 @@ const DisplaySettings = () => {
      <h2 className="mb-4 text-base">{t('settings:display')}</h2>
      <div className="flex flex-col border-t border-th-bkg-3 py-4 md:flex-row md:items-center md:justify-between md:px-4">
        <p className="mb-2 lg:mb-0">{t('settings:theme')}</p>
-        <div className="w-full min-w-[220px] md:w-auto">
-          <ButtonGroup
+        <div className="w-full min-w-[140px] md:w-auto">
+          <Select
+            value={theme}
+            onChange={(t) => setTheme(t)}
+            className="w-full"
+          >
+            {themes.map((t) => (
+              <Select.Option key={t} value={t}>
+                <div className="flex w-full items-center justify-between">
+                  {t}
+                </div>
+              </Select.Option>
+            ))}
+          </Select>
+          {/* <ButtonGroup
            activeValue={theme}
            onChange={(t) => setTheme(t)}
            values={themes}
-          />
+          /> */}
        </div>
      </div>
      <div className="flex flex-col border-t border-th-bkg-3 py-4 md:flex-row md:items-center md:justify-between md:px-4">
--- a/components/shared/Button.tsx
+++ b/components/shared/Button.tsx
@ -1,4 +1,3 @@
-import { useTheme } from 'next-themes'
 import { FunctionComponent, ReactNode } from 'react'

 interface AllButtonProps {
@ -24,7 +23,6 @@ const Button: FunctionComponent<ButtonCombinedProps> = ({
  size = 'medium',
  ...props
 }) => {
-  const { theme } = useTheme()
  return (
    <button
      onClick={onClick}
@ -32,9 +30,7 @@ const Button: FunctionComponent<ButtonCombinedProps> = ({
      className={`whitespace-nowrap rounded-md ${
        secondary
          ? 'border border-th-bkg-4 text-th-fgd-1 md:hover:border-th-fgd-4'
-          : `bg-th-button md:hover:bg-th-button-hover ${
-              theme === 'Light' ? 'text-th-bkg-1' : 'text-th-fgd-1'
-            }`
+          : 'bg-th-button text-white md:hover:bg-th-button-hover'
      } ${
        size === 'medium'
          ? 'h-10 px-4'
--- a/styles/colors.ts
+++ b/styles/colors.ts
@ -3,25 +3,48 @@ export const COLORS: any = {
    Mango: 'hsl(256, 18%, 12%)',
    Dark: 'hsl(240, 6%, 7%)',
    Light: 'hsl(0, 0%, 99%)',
+    Smoothy: 'hsl(45, 100%, 96%)',
  },
  BKG2: {
    Mango: 'hsl(256, 18%, 17%)',
    Dark: 'hsl(240, 6%, 12%)',
    Light: 'hsl(0, 0%, 94%)',
+    Smoothy: 'hsl(45, 100%, 91%)',
+  },
+  BKG3: {
+    Mango: 'hsl(256, 18%, 22%)',
+    Dark: 'hsl(240, 6%, 17%)',
+    Light: 'hsl(0, 0%, 89%)',
+    Smoothy: 'hsl(45, 100%, 86%)',
+  },
+  BKG4: {
+    Mango: 'hsl(256, 18%, 27%)',
+    Dark: 'hsl(240, 6%, 22%)',
+    Light: 'hsl(0, 0%, 84%)',
+    Smoothy: 'hsl(45, 100%, 81%)',
+  },
+  FGD4: {
+    Mango: 'hsl(253, 19%, 61%)',
+    Dark: 'hsl(0, 0%, 52%)',
+    Light: 'hsl(188, 71%, 38%)',
+    Smoothy: 'hsl(45, 100%, 34%)',
  },
  UP: {
    Mango: 'hsl(72, 97%, 41%)',
    Dark: 'hsl(111, 47%, 53%)',
    Light: 'hsl(111, 47%, 53%)',
+    Smoothy: 'hsl(110, 73%, 40%)',
  },
  ACTIVE: {
    Mango: 'hsl(45, 86%, 62%)',
    Dark: 'hsl(45, 86%, 62%)',
    Light: 'hsl(33, 100%, 57%)',
+    Smoothy: 'hsl(321, 100%, 48%)',
  },
  DOWN: {
    Mango: 'hsl(4, 93%, 60%)',
    Dark: 'hsl(0, 67%, 48%)',
    Light: 'hsl(0, 67%, 48%)',
+    Smoothy: 'hsl(0, 100%, 56%)',
  },
 }
--- a/styles/globals.css
+++ b/styles/globals.css
@ -157,6 +157,32 @@ th {
  --warning: theme('colors.mango-theme.warning');
 }

+[data-theme='Smoothy'] {
+  --active: theme('colors.smoothy-theme.active.DEFAULT');
+  --active-dark: theme('colors.smoothy-theme.active.dark');
+  --down: theme('colors.smoothy-theme.down.DEFAULT');
+  --down-dark: theme('colors.smoothy-theme.down.dark');
+  --down-muted: theme('colors.smoothy-theme.down.muted');
+  --up: theme('colors.smoothy-theme.up.DEFAULT');
+  --up-dark: theme('colors.smoothy-theme.up.dark');
+  --up-muted: theme('colors.smoothy-theme.up.muted');
+  --link: theme('colors.smoothy-theme.link.DEFAULT');
+  --link-hover: theme('colors.smoothy-theme.link.hover');
+  --bkg-1: theme('colors.smoothy-theme.bkg-1');
+  --bkg-2: theme('colors.smoothy-theme.bkg-2');
+  --bkg-3: theme('colors.smoothy-theme.bkg-3');
+  --bkg-4: theme('colors.smoothy-theme.bkg-4');
+  --fgd-1: theme('colors.smoothy-theme.fgd-1');
+  --fgd-2: theme('colors.smoothy-theme.fgd-2');
+  --fgd-3: theme('colors.smoothy-theme.fgd-3');
+  --fgd-4: theme('colors.smoothy-theme.fgd-4');
+  --button: theme('colors.smoothy-theme.button.DEFAULT');
+  --button-hover: theme('colors.smoothy-theme.button.hover');
+  --error: theme('colors.smoothy-theme.error');
+  --success: theme('colors.smoothy-theme.success');
+  --warning: theme('colors.smoothy-theme.warning');
+}
+
 /* Base */

 body {
@ -203,6 +229,12 @@ li {
  @apply text-sm text-th-fgd-3;
 }

+/* Forms */
+
+input::placeholder {
+  @apply text-th-fgd-4;
+}
+
 /* Slider */

 input[type='range']::-webkit-slider-thumb {
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -31,7 +31,7 @@ module.exports = {
            DEFAULT: 'hsl(251, 41%, 48%)',
            hover: 'hsl(251, 41%, 38%)',
          },
-          link: { DEFAULT: 'hsl(33, 100%, 57%)', hover: 'hsl(33, 100%, 37%)' },
+          link: { DEFAULT: 'hsl(33, 100%, 57%)', hover: 'hsl(33, 100%, 47%)' },
          down: {
            DEFAULT: 'hsl(4, 93%, 60%)',
            dark: 'hsl(4, 93%, 50%)',
@ -63,7 +63,7 @@ module.exports = {
            DEFAULT: 'hsl(251, 41%, 56%)',
            hover: 'hsl(251, 41%, 46%)',
          },
-          link: { DEFAULT: 'hsl(33, 100%, 57%)', hover: 'hsl(33, 100%, 37%)' },
+          link: { DEFAULT: 'hsl(33, 100%, 57%)', hover: 'hsl(33, 100%, 47%)' },
          down: {
            DEFAULT: 'hsl(0, 67%, 48%)',
            dark: 'hsl(0, 67%, 38%)',
@ -84,7 +84,7 @@ module.exports = {
          'fgd-1': 'hsl(188, 71%, 8%)',
          'fgd-2': 'hsl(188, 71%, 18%)',
          'fgd-3': 'hsl(188, 71%, 28%)',
-          'fgd-4': 'hsl(188, 71%, 38%))',
+          'fgd-4': 'hsl(188, 71%, 38%)',
        },
        'dark-theme': {
          active: {
@ -95,7 +95,7 @@ module.exports = {
            DEFAULT: 'hsl(251, 41%, 48%)',
            hover: 'hsl(251, 41%, 38%)',
          },
-          link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 42%)' },
+          link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 52%)' },
          down: {
            DEFAULT: 'hsl(0, 67%, 48%)',
            dark: 'hsl(0, 67%, 38%)',
@ -118,6 +118,38 @@ module.exports = {
          'fgd-3': 'hsl(0, 0%, 62%)',
          'fgd-4': 'hsl(0, 0%, 52%)',
        },
+        'smoothy-theme': {
+          active: {
+            DEFAULT: 'hsl(321, 100%, 48%)',
+            dark: 'hsl(321, 100%, 38%)',
+          },
+          button: {
+            DEFAULT: 'hsl(284, 100%, 56%)',
+            hover: 'hsl(284, 100%, 46%)',
+          },
+          link: { DEFAULT: 'hsl(21, 100%, 56%)', hover: 'hsl(21, 100%, 46%)' },
+          down: {
+            DEFAULT: 'hsl(0, 100%, 56%)',
+            dark: 'hsl(0, 100%, 46%)',
+            muted: 'hsl(0, 60%, 46%)',
+          },
+          up: {
+            DEFAULT: 'hsl(110, 73%, 40%)',
+            dark: 'hsl(110, 73%, 30%)',
+            muted: 'hsl(110, 33%, 30%)',
+          },
+          error: 'hsl(0, 100%, 56%)',
+          success: 'hsl(110, 73%, 40%)',
+          warning: 'hsl(21, 100%, 56%)',
+          'bkg-1': 'hsl(45, 100%, 96%)',
+          'bkg-2': 'hsl(45, 100%, 91%)',
+          'bkg-3': 'hsl(45, 100%, 86%)',
+          'bkg-4': 'hsl(45, 100%, 81%)',
+          'fgd-1': 'hsl(45, 100%, 4%)',
+          'fgd-2': 'hsl(45, 100%, 14%)',
+          'fgd-3': 'hsl(45, 100%, 24%)',
+          'fgd-4': 'hsl(45, 100%, 34%)',
+        },
        'th-bkg-1': 'var(--bkg-1)',
        'th-bkg-2': 'var(--bkg-2)',
        'th-bkg-3': 'var(--bkg-3)',