chore (refactoring): a Select Theme component that fits better

package.json

@@ -31,6 +31,7 @@
     "@faceless-ui/slider": "^2.0.0-beta.0",
     "@faceless-ui/window-info": "^3.0.0-beta.0",
     "@next/bundle-analyzer": "^13.4.2",
+    "@radix-ui/react-select": "^2.1.1",
     "@sentry/nextjs": "^7.80.1",
     "@splinetool/react-spline": "^2.2.6",
     "@splinetool/runtime": "^1.3.0",

src/components/Footer/index.module.scss

@@ -132,6 +132,7 @@ $curve: cubic-bezier(.165, 0.84, 0.44, 1);
   max-width: 100%;
   align-items: center;
   margin-bottom: 3rem;
+  z-index: 0;
 }
 
 .socialIconLink {
@@ -188,13 +189,3 @@ $curve: cubic-bezier(.165, 0.84, 0.44, 1);
   position: absolute;
   margin-left: 1.25rem;
 }
-
-.themeIcon {
-  width: var(--theme-icon-width);
-}
-
-.upDownChevronIcon {
-  width: var(--theme-switcher-icon-width);
-  right: 0.75rem;
-  pointer-events: none;
-}

src/components/Footer/index.tsx

@@ -15,19 +15,16 @@ import Payload3D from '@components/Payload3D/index.js'
 import { DiscordIcon } from '@root/graphics/DiscordIcon/index.js'
 import { FacebookIcon } from '@root/graphics/FacebookIcon/index.js'
 import { InstagramIcon } from '@root/graphics/InstagramIcon/index.js'
-import { ThemeAutoIcon } from '@root/graphics/ThemeAutoIcon/index.js'
-import { ThemeDarkIcon } from '@root/graphics/ThemeDarkIcon/index.js'
-import { ThemeLightIcon } from '@root/graphics/ThemeLightIcon/index.js'
 import { TwitterIconAlt } from '@root/graphics/TwitterIconAlt/index.js'
 import { YoutubeIcon } from '@root/graphics/YoutubeIcon/index.js'
-import { ChevronUpDownIcon } from '@root/icons/ChevronUpDownIcon/index.js'
 import { useHeaderObserver } from '@root/providers/HeaderIntersectionObserver/index.js'
 import { useThemePreference } from '@root/providers/Theme/index.js'
 import { getImplicitPreference, themeLocalStorageKey } from '@root/providers/Theme/shared.js'
 import { Theme } from '@root/providers/Theme/types.js'
 import { getCookie } from '@root/utilities/get-cookie.js'
 
 import classes from './index.module.scss'
+import { SelectTheme } from '@components/SelectTheme'
 
 export const Footer: React.FC<FooterType> = props => {
   const { columns } = props
@@ -300,32 +297,8 @@ export const Footer: React.FC<FooterType> = props => {
                 <DiscordIcon />
               </a>
             </div>
-
             <div className={classes.selectContainer}>
-              <label className="visually-hidden" htmlFor={themeId}>
-                Switch themes
-              </label>
-              {selectRef?.current && (
-                <div className={`${classes.switcherIcon} ${classes.themeIcon}`}>
-                  {selectRef.current.value === 'auto' && <ThemeAutoIcon />}
-                  {selectRef.current.value === 'light' && <ThemeLightIcon />}
-                  {selectRef.current.value === 'dark' && <ThemeDarkIcon />}
-                </div>
-              )}
-
-              <select
-                id={themeId}
-                onChange={e => onThemeChange(e.target.value as Theme & 'auto')}
-                ref={selectRef}
-              >
-                <option value="auto">Auto</option>
-                <option value="light">Light</option>
-                <option value="dark">Dark</option>
-              </select>
-
-              <ChevronUpDownIcon
-                className={`${classes.switcherIcon} ${classes.upDownChevronIcon}`}
-              />
+              <SelectTheme selectRef={selectRef} themeId={themeId} onThemeChange={onThemeChange} />
             </div>
           </div>
         </div>

src/components/SelectTheme/index.module.scss

@@ -0,0 +1,78 @@
+.themeIcons {
+  display: inline-flex;
+  height: 1rem;
+  justify-content: center;
+}
+
+.themeIcon {
+  width: var(--theme-icon-width);
+}
+
+.upDownChevronIcon {
+  width: var(--theme-switcher-icon-width);
+  right: 0.75rem;
+  pointer-events: none;
+}
+
+.SelectTrigger {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  padding: 1rem 1.5rem;
+  color: var(--theme-elevation-500);
+  font-size: 1rem;
+  line-height: 1.5;
+  width: 100%;
+  background-color: black;
+  border:1px solid var(--grid-line-dark);
+  cursor: pointer;
+}
+
+.SelectContent {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--theme-elevation-500);
+  font-size: 1rem;
+  font-family: inherit;
+  background-color: black;
+  border:1px solid var(--grid-line-dark);
+  cursor: pointer;
+  z-index: 10;
+
+}
+
+.SelectItem {
+  font-size: 1rem;
+  padding: 1rem 1.5rem;
+  line-height: 1;
+  height: 35px;
+  padding: 8px 16px;
+  border:1px solid var(--grid-line-dark);
+  width: 90vw;
+  cursor: pointer;
+
+  @media screen and (min-width: 600px) {
+    width: 95vw; 
+  }
+  @media screen and (min-width: 800px) {
+    width: 46vw; 
+  }
+  @media screen and (min-width: 1000px) {
+    width: 21vw; 
+  }
+
+}
+
+.SelectItem[data-highlighted] {
+  outline: none;
+  background-color: rgb(178, 217, 231);
+}
+
+.switcherIcon {
+  display: inline-flex;
+  height: 1rem;
+  justify-content: center;
+  position: absolute;
+  margin-left: 1.25rem;
+}

src/components/SelectTheme/index.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+
+import * as Select from '@radix-ui/react-select'
+import classes from './index.module.scss'
+
+import { ThemeAutoIcon } from '@root/graphics/ThemeAutoIcon/index.js'
+import { ThemeDarkIcon } from '@root/graphics/ThemeDarkIcon/index.js'
+import { ThemeLightIcon } from '@root/graphics/ThemeLightIcon/index.js'
+import { ChevronUpDownIcon } from '@root/icons/ChevronUpDownIcon/index.js'
+
+export const SelectTheme = ({
+  themeId,
+  onThemeChange,
+}: {
+  selectRef: any
+  themeId: string
+  onThemeChange: (e: string) => void
+}) => {
+  const [selectedValue, setSelectedValue] = React.useState('auto')
+  const selectRef = React.useRef<HTMLButtonElement>(null)
+
+  const handleValueChange = value => {
+    setSelectedValue(value)
+    onThemeChange(value)
+  }
+
+  return (
+    <Select.Root onValueChange={handleValueChange}>
+      <Select.Trigger className={classes.SelectTrigger} ref={selectRef} id={themeId}>
+        {selectRef?.current && (
+          <div className={`${classes.themeIcons} ${classes.themeIcon}`}>
+            {selectedValue === 'auto' && <ThemeAutoIcon />}
+            {selectedValue === 'light' && <ThemeLightIcon />}
+            {selectedValue === 'dark' && <ThemeDarkIcon />}
+          </div>
+        )}
+
+        <Select.Value placeholder="Auto" id="value"></Select.Value>
+        <ChevronUpDownIcon className={`${classes.switcherIcon} ${classes.upDownChevronIcon}`} />
+      </Select.Trigger>
+
+      <Select.Portal>
+        <Select.Content align="start" position="popper" className={classes.SelectContent}>
+          <Select.ScrollUpButton />
+          <Select.Viewport>
+            <Select.Item value="auto" className={classes.SelectItem}>
+              <Select.ItemText>Auto</Select.ItemText>
+              <Select.ItemIndicator />
+            </Select.Item>
+            <Select.Item value="light" className={classes.SelectItem}>
+              <Select.ItemText>Light</Select.ItemText>
+              <Select.ItemIndicator />
+            </Select.Item>
+            <Select.Item value="dark" className={classes.SelectItem}>
+              <Select.ItemText>Dark</Select.ItemText>
+              <Select.ItemIndicator />
+            </Select.Item>
+          </Select.Viewport>
+          <Select.ScrollDownButton />
+          <Select.Arrow />
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+  )
+}