From 5a32b5cafd3b5ebe6f2a4fdff0ce85c9a4849dae Mon Sep 17 00:00:00 2001
From: Apoorv Taneja <purutaneja.com@gmail.com>
Date: Tue, 26 Dec 2023 05:19:27 +0530
Subject: [PATCH] fix: added constants for theme variables (#777)

fixes: #776
---
 .../components/(dashboard)/common/command-menu.tsx |  7 ++++---
 packages/ui/primitives/constants.ts                |  5 +++++
 packages/ui/primitives/theme-switcher.tsx          | 14 ++++++++------
 3 files changed, 17 insertions(+), 9 deletions(-)
 create mode 100644 packages/ui/primitives/constants.ts

diff --git a/apps/web/src/components/(dashboard)/common/command-menu.tsx b/apps/web/src/components/(dashboard)/common/command-menu.tsx
index 19a35874e..fe690329b 100644
--- a/apps/web/src/components/(dashboard)/common/command-menu.tsx
+++ b/apps/web/src/components/(dashboard)/common/command-menu.tsx
@@ -22,6 +22,7 @@ import {
   CommandList,
   CommandShortcut,
 } from '@documenso/ui/primitives/command';
+import { THEMES_TYPE } from '@documenso/ui/primitives/constants';
 
 const DOCUMENTS_PAGES = [
   {
@@ -215,9 +216,9 @@ const Commands = ({
 const ThemeCommands = ({ setTheme }: { setTheme: (_theme: string) => void }) => {
   const THEMES = useMemo(
     () => [
-      { label: 'Light Mode', theme: 'light', icon: Sun },
-      { label: 'Dark Mode', theme: 'dark', icon: Moon },
-      { label: 'System Theme', theme: 'system', icon: Monitor },
+      { label: 'Light Mode', theme: THEMES_TYPE.LIGHT, icon: Sun },
+      { label: 'Dark Mode', theme: THEMES_TYPE.DARK, icon: Moon },
+      { label: 'System Theme', theme: THEMES_TYPE.SYSTEM, icon: Monitor },
     ],
     [],
   );
diff --git a/packages/ui/primitives/constants.ts b/packages/ui/primitives/constants.ts
new file mode 100644
index 000000000..9771eb35a
--- /dev/null
+++ b/packages/ui/primitives/constants.ts
@@ -0,0 +1,5 @@
+export const THEMES_TYPE = {
+  DARK: 'dark',
+  LIGHT: 'light',
+  SYSTEM: 'system'
+};
\ No newline at end of file
diff --git a/packages/ui/primitives/theme-switcher.tsx b/packages/ui/primitives/theme-switcher.tsx
index 7aa570749..fcc789404 100644
--- a/packages/ui/primitives/theme-switcher.tsx
+++ b/packages/ui/primitives/theme-switcher.tsx
@@ -4,6 +4,8 @@ import { useTheme } from 'next-themes';
 
 import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
 
+import { THEMES_TYPE } from './constants';
+
 export const ThemeSwitcher = () => {
   const { theme, setTheme } = useTheme();
   const isMounted = useIsMounted();
@@ -12,9 +14,9 @@ export const ThemeSwitcher = () => {
     <div className="bg-muted flex items-center gap-x-1 rounded-full p-1">
       <button
         className="text-muted-foreground relative z-10 flex h-8 w-8 items-center justify-center rounded-full"
-        onClick={() => setTheme('light')}
+        onClick={() => setTheme(THEMES_TYPE.LIGHT)}
       >
-        {isMounted && theme === 'light' && (
+        {isMounted && theme === THEMES_TYPE.LIGHT && (
           <motion.div
             className="bg-background absolute inset-0 rounded-full mix-blend-exclusion"
             layoutId="selected-theme"
@@ -25,9 +27,9 @@ export const ThemeSwitcher = () => {
 
       <button
         className="text-muted-foreground relative z-10 flex h-8 w-8 items-center justify-center rounded-full"
-        onClick={() => setTheme('dark')}
+        onClick={() => setTheme(THEMES_TYPE.DARK)}
       >
-        {isMounted && theme === 'dark' && (
+        {isMounted && theme === THEMES_TYPE.DARK && (
           <motion.div
             className="bg-background absolute inset-0 rounded-full mix-blend-exclusion"
             layoutId="selected-theme"
@@ -39,9 +41,9 @@ export const ThemeSwitcher = () => {
 
       <button
         className="text-muted-foreground relative z-10 flex h-8 w-8 items-center justify-center rounded-full"
-        onClick={() => setTheme('system')}
+        onClick={() => setTheme(THEMES_TYPE.SYSTEM)}
       >
-        {isMounted && theme === 'system' && (
+        {isMounted && theme === THEMES_TYPE.SYSTEM && (
           <motion.div
             className="bg-background absolute inset-0 rounded-full mix-blend-exclusion"
             layoutId="selected-theme"