mateusfg7 · mateusfg7 · Jul 27, 2024 · Jul 26, 2024 · Jul 26, 2024 · Jul 26, 2024
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -83,7 +83,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
           data-website-id={process.env.UMAMI_WEBSITE_ID}
         />
       </head>
-      <body className={nunito.variable}>
+      <body className={`${nunito.variable}`}>
         <Toaster position="bottom-right" />
         {children}
       </body>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -15,10 +15,8 @@ import { InteractionModal } from '~/components/interaction-modal'
 
 import { sounds } from '~/data/sounds'
 
-import { container } from './styles'
-
 export default function Home() {
-  const background = useThemeStore(set => set.theme)
+  const currTheme = useThemeStore(set => set.theme)
   const setUserHasInteracted = useUserInteractionStore(
     state => state.setUserHasInteracted
   )
@@ -30,19 +28,23 @@ export default function Home() {
   }, [])
 
   return (
-    <div className={container({ background })}>
-      <Header />
-      <div className="styled-scrollbar h-[90vh] space-y-24 overflow-y-scroll pt-16 md:h-[87vh]">
-        <div className="m-auto flex w-fit flex-col items-center gap-3">
-          <ActionButtons />
-          <div className="grid h-fit w-fit grid-cols-1 gap-12 xs:grid-cols-2 2xs:grid-cols-3 sm:grid-cols-4 lg:grid-cols-5 2xl:grid-cols-6">
-            {sounds.map(sound => (
-              <SoundButton key={sound.id} sound={sound} />
-            ))}
+    <div className={currTheme}>
+      <div className="bg-background-image bg-cover bg-fixed bg-center bg-no-repeat">
+        <div className="relative bg-background-color">
+          <Header />
+          <div className="styled-scrollbar h-[90vh] space-y-24 overflow-y-scroll pt-16 md:h-[87vh]">
+            <div className="m-auto flex w-fit flex-col items-center gap-3">
+              <ActionButtons />
+              <div className="grid h-fit w-fit grid-cols-1 gap-12 xs:grid-cols-2 2xs:grid-cols-3 sm:grid-cols-4 lg:grid-cols-5 2xl:grid-cols-6">
+                {sounds.map(sound => (
+                  <SoundButton key={sound.id} sound={sound} />
+                ))}
+              </div>
+            </div>
+            <Footer />
+            <InteractionModal />
           </div>
         </div>
-        <Footer />
-        <InteractionModal />
       </div>
     </div>
   )

diff --git a/src/app/styles.ts b/src/app/styles.ts
diff --git a/src/components/action-buttons/clear/index.tsx b/src/components/action-buttons/clear/index.tsx
@@ -1,14 +1,11 @@
 import { useSoundsStateStore } from '~/stores/sounds-state-store'
-import { useThemeStore } from '~/stores/theme-store'
 
 import { actionButton } from '../styles'
 
 export function Clear() {
   const bulkSoundUpdate = useSoundsStateStore(state => state.bulkUpdate)
   const soundStates = useSoundsStateStore(state => state.sounds)
 
-  const theme = useThemeStore(state => state.theme)
-
   function clear() {
     const disabledSoundList = soundStates.map(sound => ({
       ...sound,
@@ -26,7 +23,7 @@ export function Clear() {
     <button
       disabled={isDisabled()}
       onClick={clear}
-      className={actionButton({ theme })}
+      className={actionButton()}
       title="Clear all active sounds"
       data-umami-event="Clear Button"
     >

diff --git a/src/components/action-buttons/save-combo/index.test.tsx b/src/components/action-buttons/save-combo/index.test.tsx
@@ -102,7 +102,7 @@ describe('Save Combo Button', () => {
         { active: true, id: 'rain', loaded: true, volume: 1 },
         { active: true, id: 'plain', loaded: true, volume: 0.5 }
       ],
-      theme: 'transition'
+      theme: 'transition-theme'
     }
 
     expect(input).not.toBeInTheDocument()

diff --git a/src/components/action-buttons/save-combo/index.tsx b/src/components/action-buttons/save-combo/index.tsx
@@ -8,7 +8,6 @@ import { useThemeStore } from '~/stores/theme-store'
 import { randomString } from '~/utils/random-string'
 
 import { actionButton } from '../styles'
-import { input } from './styles'
 
 export function SaveCombo() {
   const sounds = useSoundsStateStore(state => state.sounds)
@@ -56,15 +55,14 @@ export function SaveCombo() {
           placeholder="combo name..."
           value={comboName}
           onChange={e => setComboName(e.target.value)}
-          className={input({ theme })}
+          className="form-input w-32 animate-show-input rounded-xl border-none bg-primary-foreground/5 px-2 py-0 text-center leading-none tracking-wider text-primary-foreground duration-300 placeholder:text-sm placeholder:text-primary-foreground/60 focus:ring-0"
           data-testid="combo-name-input"
         />
       )}
       <button
         disabled={disabled}
         onClick={save}
         className={actionButton({
-          theme,
           className: /*tw:*/ 'flex items-center'
         })}
         title="Save current combo"

diff --git a/src/components/action-buttons/save-combo/styles.ts b/src/components/action-buttons/save-combo/styles.ts
diff --git a/src/components/action-buttons/share/confirmation-modal.tsx b/src/components/action-buttons/share/confirmation-modal.tsx
@@ -50,7 +50,7 @@ export function ConfirmationModal({ showModal, setShowModal }: Props) {
                     <button
                       onClick={closeModal}
                       data-umami-event="Confirm copy combo URL"
-                      className="w-full rounded-lg bg-dark-background/10 px-5 py-4 text-lg leading-none text-dark-background transition-colors hover:bg-dark-background hover:text-light-background md:w-fit md:py-3"
+                      className="bg-dark-background/10 text-dark-background hover:bg-dark-background hover:text-light-background w-full rounded-lg px-5 py-4 text-lg leading-none transition-colors md:w-fit md:py-3"
                     >
                       Ok, thanks!
                     </button>

diff --git a/src/components/action-buttons/share/index.tsx b/src/components/action-buttons/share/index.tsx
@@ -2,7 +2,6 @@ import { useState } from 'react'
 import { useSearchParams } from 'next/navigation'
 
 import { useSoundsStateStore } from '~/stores/sounds-state-store'
-import { useThemeStore } from '~/stores/theme-store'
 
 import { actionButton } from '../styles'
 
@@ -11,7 +10,6 @@ import { ConfirmationModal } from './confirmation-modal'
 export function Share() {
   const searchParams = useSearchParams()
   const soundStates = useSoundsStateStore(state => state.sounds)
-  const theme = useThemeStore(state => state.theme)
   const [showModal, setShowModal] = useState(false)
 
   async function handleCopyCombo() {
@@ -39,7 +37,7 @@ export function Share() {
       <button
         disabled={isDisabled()}
         onClick={handleCopyCombo}
-        className={actionButton({ theme })}
+        className={actionButton()}
         title="Share current combo"
         data-umami-event="Clear Button"
       >

diff --git a/src/components/action-buttons/styles.ts b/src/components/action-buttons/styles.ts
@@ -1,21 +1,5 @@
 import { tv } from 'tailwind-variants'
 
 export const actionButton = tv({
-  base: /*tw:*/ 'rounded-xl text-white bg-white/5 px-2 py-1 leading-none tracking-wider duration-300  hover:bg-white/20 active:bg-white/10 disabled:bg-white/5 disabled:opacity-70',
-  variants: {
-    theme: {
-      transition: /*tw:*/ '',
-      dark: /*tw:*/ 'text-dark-foreground bg-dark-foreground/5 hover:bg-dark-foreground/20 active:bg-dark-foreground/10 disabled:bg-dark-foreground/5',
-      light:
-        /*tw:*/ 'text-light-foreground bg-light-foreground/5 hover:bg-light-foreground/20 active:bg-light-foreground/10 disabled:bg-light-foreground/5',
-      'blue-room':
-        /*tw:*/ 'text-blue-room bg-blue-room/5 hover:bg-blue-room/20 active:bg-blue-room/10 disabled:bg-blue-room/5',
-      train:
-        /*tw:*/ 'text-train bg-train/5 hover:bg-train/20 active:bg-train/10 disabled:bg-train/5',
-      waterfall:
-        /*tw:*/ 'text-waterfall bg-waterfall/5 hover:bg-waterfall/20 active:bg-waterfall/10 disabled:bg-waterfall/5',
-      'camping-fire':
-        /*tw:*/ 'text-camping-fire bg-camping-fire/5 hover:bg-camping-fire/20 active:bg-camping-fire/10 disabled:bg-camping-fire/5'
-    }
-  }
+  base: /*tw:*/ 'rounded-xl text-primary-foreground bg-primary-foreground/5 px-2 py-1 leading-none tracking-wider duration-300  hover:bg-primary-foreground/20 active:bg-primary-foreground/10 disabled:bg-primary-foreground/5 disabled:opacity-70'
 })
diff --git a/src/components/config-menu/options/random-volume-settings.tsx b/src/components/config-menu/options/random-volume-settings.tsx
@@ -1,4 +1,3 @@
-import { useThemeStore } from '~/stores/theme-store'
 import { settingRow, input, dot } from './styles'
 
 type Option = {
@@ -18,16 +17,12 @@ export function RandomVolumeSettings({
   updateSteps,
   updateTransitionTime
 }: Props) {
-  const { theme } = useThemeStore()
-
   return (
     <div className="space-y-2">
       <h3 className="p-1 text-left opacity-60">Random volume</h3>
       <div className="space-y-1">
-        <div className={settingRow({ theme })}>
-          <span
-            className={dot({ theme, active: updateInterval.wasChanged() })}
-          />
+        <div className={settingRow()}>
+          <span className={dot({ active: updateInterval.wasChanged() })} />
 
           <label htmlFor="interval" className="flex-1 text-left">
             Update interval <span className="text-sm opacity-50">/s</span>
@@ -37,13 +32,12 @@ export function RandomVolumeSettings({
             id="interval"
             value={updateInterval.value / 1000}
             onChange={e => updateInterval.set(Number(e.target.value) * 1000)}
-            className={input({ theme })}
+            className={input()}
           />
         </div>
-        <div className={settingRow({ theme })}>
+        <div className={settingRow()}>
           <span
             className={dot({
-              theme,
               active: updateTransitionTime.wasChanged()
             })}
           />
@@ -57,13 +51,12 @@ export function RandomVolumeSettings({
             onChange={e =>
               updateTransitionTime.set(Number(e.target.value) * 1000)
             }
-            className={input({ theme })}
+            className={input()}
           />
         </div>
-        <div className={settingRow({ theme })}>
+        <div className={settingRow()}>
           <span
             className={dot({
-              theme,
               active: updateSteps.wasChanged()
             })}
           />
@@ -75,7 +68,7 @@ export function RandomVolumeSettings({
             id="steps"
             value={updateSteps.value}
             onChange={e => updateSteps.set(Number(e.target.value))}
-            className={input({ theme })}
+            className={input()}
           />
         </div>
       </div>

diff --git a/src/components/config-menu/options/styles.ts b/src/components/config-menu/options/styles.ts
@@ -1,51 +1,16 @@
 import { tv } from 'tailwind-variants'
 
 export const input = tv({
-  base: /*tw:*/ 'form-input w-24 h-full rounded-lg p-2 text-center bg-transparent',
-  variants: {
-    theme: {
-      transition: /*tw:*/ 'border-main/20 focus:border-main focus:ring-main',
-      dark: /*tw:*/ 'border-dark-background/20 focus:border-dark-background focus:ring-dark-background',
-      light:
-        /*tw:*/ 'border-light-foreground/20 focus:border-light-foreground focus:ring-light-foreground',
-      'blue-room':
-        /*tw:*/ 'border-blue-room/50 focus:border-blue-room focus:ring-blue-room',
-      train: /*tw:*/ 'border-train/50 focus:border-train focus:ring-train',
-      waterfall:
-        /*tw:*/ 'border-waterfall/70 focus:border-waterfall focus:ring-waterfall',
-      'camping-fire':
-        /*tw:*/ 'border-camping-fire/70 focus:border-camping-fire focus:ring-camping-fire'
-    }
-  }
+  base: /*tw:*/ 'form-input w-24 h-full rounded-lg p-2 text-center bg-transparent border-primary-foreground/70 focus:border-primary-foreground focus:ring-primary-foreground'
 })
 
 export const settingRow = tv({
-  base: /*tw:*/ 'flex items-center justify-between rounded-xl bg-neutral-600/10 p-1 text-lg relative',
-  variants: {
-    theme: {
-      transition: /*tw:*/ 'bg-main/0',
-      dark: /*tw:*/ 'bg-dark-background/0',
-      light: /*tw:*/ 'bg-light-background/0',
-      'blue-room': /*tw:*/ 'bg-blue-room/0',
-      train: /*tw:*/ 'bg-train/0',
-      waterfall: /*tw:*/ 'bg-waterfall/0',
-      'camping-fire': /*tw:*/ 'bg-camping-fire/0'
-    }
-  }
+  base: /*tw:*/ 'flex items-center justify-between rounded-xl p-1 text-lg relative'
 })
 
 export const dot = tv({
-  base: /*tw:*/ 'absolute -left-1 top-1 h-[0.4rem] w-[0.4rem] rounded-full opacity-0 transition-opacity duration-300',
+  base: /*tw:*/ 'absolute -left-1 top-1 h-[0.4rem] w-[0.4rem] rounded-full opacity-0 transition-opacity duration-300 bg-primary-foreground',
   variants: {
-    theme: {
-      transition: /*tw:*/ 'bg-main',
-      dark: /*tw:*/ 'bg-dark-background',
-      light: /*tw:*/ 'bg-light-background',
-      'blue-room': /*tw:*/ 'bg-blue-room',
-      train: /*tw:*/ 'bg-train',
-      waterfall: /*tw:*/ 'bg-waterfall',
-      'camping-fire': /*tw:*/ 'bg-camping-fire'
-    },
     active: {
       true: 'opacity-1'
     }

diff --git a/src/components/config-menu/styles.ts b/src/components/config-menu/styles.ts
diff --git a/src/components/config-menu/trigger-button.tsx b/src/components/config-menu/trigger-button.tsx
@@ -1,20 +1,14 @@
 import { FiSettings } from 'react-icons/fi'
 
-import { useThemeStore } from '~/stores/theme-store'
-
-import { triggerButton } from './styles'
-
 type Props = {
   openModal: () => void
 }
 export function TriggerButton({ openModal }: Props) {
-  const theme = useThemeStore(state => state.theme)
-
   return (
     <button
       type="button"
       onClick={openModal}
-      className={triggerButton({ theme })}
+      className="text-xl text-primary-foreground opacity-90 hover:opacity-100"
       data-umami-event="Open config menu"
       title="Open config menu"
     >

diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx
@@ -4,10 +4,7 @@ import { tv } from 'tailwind-variants'
 import { FiAward, FiGithub } from 'react-icons/fi'
 import { AiOutlineCopyrightCircle } from 'react-icons/ai'
 
-import { useThemeStore } from '~/stores/theme-store'
-
 import packageJson from '../../../package.json'
-import { container, version } from './styles'
 import { Logo } from './logo'
 
 export function Footer() {
@@ -22,10 +19,8 @@ export function Footer() {
     )
   }
 
-  const theme = useThemeStore(set => set.theme)
-
   return (
-    <footer className={container({ theme })}>
+    <footer className="flex flex-col items-center gap-10 p-11 text-primary-foreground">
       <div className="flex flex-col flex-wrap items-center justify-center gap-10 sm:flex-row md:gap-14">
         <div className="w-14 overflow-hidden rounded-2xl shadow-lg">
           <Link href="/">
@@ -65,7 +60,7 @@ export function Footer() {
       </div>
       <a
         href={`https://github.com/mateusfg7/Noisekun/releases/tag/${packageJson.version}`}
-        className={version({ theme })}
+        className="text-primary-foreground/60 hover:text-primary-foreground active:text-primary-foreground"
         data-umami-event="Version Link"
       >
         {packageJson.version}