boxyhq · jatingodnani · Oct 13, 2023 · Oct 13, 2023 · Oct 14, 2023 · Oct 14, 2023
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -5,15 +5,22 @@ import classNames from 'classnames';
 import Link from 'next/link';
 import { useTranslation } from 'next-i18next';
 import PowerIcon from '@heroicons/react/20/solid/PowerIcon';
+import useTheme from '@lib/ui/hooks/useTheme';
 
 export const Navbar = ({ session }: { session: Session | null }) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const { t } = useTranslation('common');
+  const { selectedTheme, toggleTheme } = useTheme();
 
   return (
-    <div className='flex flex-1 justify-between px-4'>
+    <div className='flex flex-1 justify-between px-4 relative z-1'>
       <div className='flex flex-1'></div>
       <div className='ml-4 flex items-center md:ml-6'>
+        <button
+          className='p-0 w-10 h-10 rounded-lg flex items-center justify-center hover:bg-slate-200 dark:hover:bg-gray-200 dark:hover:text-black'
+          onClick={toggleTheme}>
+          <selectedTheme.icon className='w-5 h-5' />
+        </button>
         <div className='relative ml-3'>
           {session && (
             <div>
@@ -31,10 +38,11 @@ export const Navbar = ({ session }: { session: Session | null }) => {
               </button>
             </div>
           )}
+
           {session && (
             <div
               className={classNames(
-                'absolute right-0 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none',
+                'absolute right-0 mt-2 w-48 origin-top-right rounded-md py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none',
                 { hidden: !isOpen }
               )}
               role='menu'

diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
@@ -139,10 +139,10 @@ export const Sidebar = ({ isOpen, setIsOpen }: SidebarProps) => {
         className={classNames('relative z-40 md:hidden', { hidden: isOpen })}
         role='dialog'
         aria-modal='true'>
-        <div className='fixed inset-0 bg-gray-600 bg-opacity-75' />
-        <div className='fixed inset-0 z-40 flex'>
-          <div className='relative flex w-full max-w-xs flex-1 flex-col bg-white pt-5 pb-4'>
-            <div className='absolute top-0 right-0 -mr-12 pt-2'>
+        <div className='fixed inset-0 ' />
+        <div className='fixed inset-0  flex'>
+          <div className='relative z-300 flex w-full max-w-xs flex-1 flex-col  pt-5 pb-4 bg-gray-900'>
+            <div className='absolute  top-2 left-64 ml-6 pt-2'>
               <button
                 onClick={() => {
                   setIsOpen(!isOpen);
@@ -162,10 +162,10 @@ export const Sidebar = ({ isOpen, setIsOpen }: SidebarProps) => {
                 </svg>
               </button>
             </div>
-            <div className='flex flex-shrink-0 items-center px-4'>
+            <div className='flex flex-shrink-0 items-center px-4 '>
               <Link href='/' className='flex items-center'>
                 <Image src={Logo} alt='BoxyHQ' width={36} height={36} className='h-8 w-auto' />
-                <span className='ml-4 text-xl font-bold text-gray-900'>BoxyHQ Admin Portal</span>
+                <span className='ml-4 text-xl font-bold '>BoxyHQ Admin Portal</span>
               </Link>
             </div>
             <div className='mt-5 h-0 flex-1 overflow-y-auto'>
@@ -178,13 +178,14 @@ export const Sidebar = ({ isOpen, setIsOpen }: SidebarProps) => {
 
       {/* Sidebar for desktop */}
       <div className='hidden md:fixed md:inset-y-0 md:flex md:w-64 md:flex-col'>
-        <div className='flex flex-grow flex-col overflow-y-auto border-r border-gray-200 bg-white pt-5'>
+        <div className='flex flex-grow flex-col overflow-y-auto border-r border-gray-200 pt-5'>
           <div className='flex flex-shrink-0 items-center px-4'>
             <Link href='/' className='flex items-center'>
               <Image src={Logo} alt='BoxyHQ' width={36} height={36} className='h-8 w-auto' />
-              <span className='ml-4 text-lg font-bold text-gray-900'>BoxyHQ Admin Portal</span>
+              <span className='ml-4 text-lg font-bold'>BoxyHQ Admin Portal</span>
             </Link>
           </div>
+
           <div className='mt-5 flex flex-1 flex-col'>
             <MenuItems menus={menus} />
           </div>
@@ -228,8 +229,8 @@ const ItemLink = (props: MenuItem) => {
     <Link
       href={href}
       className={classNames(
-        'group mx-2 flex items-center rounded-md py-2 px-2 text-sm text-gray-900',
-        active ? 'bg-gray-100 font-bold' : 'font-medium hover:bg-gray-100 hover:text-gray-900'
+        'group mx-2 flex items-center rounded-md py-2 px-2 text-sm ',
+        active ? 'bg-gray-100 font-bold text-gray-900' : 'font-medium hover:bg-gray-100 hover:text-gray-900'
       )}>
       {props.icon && <props.icon className='mr-2 h-6 w-6 flex-shrink-0' aria-hidden='true' />}
       {text}

diff --git a/components/layouts/AccountLayout.tsx b/components/layouts/AccountLayout.tsx
@@ -7,6 +7,7 @@ import { Navbar } from '@components/Navbar';
 import { useTranslation } from 'next-i18next';
 import Loading from '@components/Loading';
 
+
 export const AccountLayout = ({ children }: { children: React.ReactNode }) => {
   const { t } = useTranslation('common');
   const { data: session, status } = useSession({ required: true });
@@ -24,8 +25,9 @@ export const AccountLayout = ({ children }: { children: React.ReactNode }) => {
         <link rel='icon' href='/favicon.ico' />
       </Head>
       <Sidebar isOpen={isOpen} setIsOpen={setIsOpen} />
+
       <div className='flex flex-1 flex-col md:pl-64'>
-        <div className='sticky top-0 z-10 flex h-16 flex-shrink-0 border-b bg-white'>
+        <div className='sticky top-0 z-10 flex h-16 flex-shrink-0 border-b'>
           <button
             onClick={() => {
               setIsOpen(!isOpen);
@@ -44,10 +46,12 @@ export const AccountLayout = ({ children }: { children: React.ReactNode }) => {
               <path strokeLinecap='round' strokeLinejoin='round' d='M4 6h16M4 12h16M4 18h7' />
             </svg>
           </button>
+
           <Navbar session={session} />
         </div>
+
         <main>
-          <div className='py-6'>
+          <div className='py-6 '>
             <div className='mx-auto max-w-7xl px-4 sm:px-6 md:px-8'>{children}</div>
           </div>
         </main>

diff --git a/lib/theme.ts b/lib/theme.ts
@@ -0,0 +1,38 @@
+export type Theme = 'system' | 'dark' | 'light';
+export type ThemesProps = {
+  id: Theme;
+  name: string;
+  icon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, 'ref'> & {
+      title?: string | undefined;
+      titleId?: string | undefined;
+    } & React.RefAttributes<SVGSVGElement>
+  >;
+};
+
+export const applyTheme = (theme: Theme) => {
+  switch (theme) {
+    case 'dark':
+      document.documentElement.classList.add('dark');
+      document.documentElement.setAttribute('data-theme', 'black');
+      localStorage.setItem('theme', 'dark');
+      break;
+    case 'light':
+      document.documentElement.classList.remove('dark');
+      document.documentElement.setAttribute('data-theme', 'corporate');
+      localStorage.setItem('theme', 'light');
+      break;
+    case 'system':
+    default:
+      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        document.documentElement.classList.add('dark');
+        document.documentElement.setAttribute('data-theme', 'black');
+        localStorage.removeItem('theme');
+      } else {
+        document.documentElement.classList.remove('dark');
+        document.documentElement.setAttribute('data-theme', 'corporate');
+        localStorage.removeItem('theme');
+      }
+      break;
+  }
+};
diff --git a/lib/ui/hooks/useTheme.ts b/lib/ui/hooks/useTheme.ts
@@ -0,0 +1,53 @@
+import { ComputerDesktopIcon, MoonIcon, SunIcon } from '@heroicons/react/24/outline';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'next-i18next';
+
+import { ThemesProps, applyTheme } from '../../../lib/theme';
+
+const useTheme = () => {
+  const [theme, setTheme] = useState<string | null>(null);
+  const { t } = useTranslation('common');
+
+  useEffect(() => {
+    setTheme(localStorage.getItem('theme'));
+  }, []);
+
+  const themes: ThemesProps[] = [
+    {
+      id: 'system',
+      name: t('system'),
+      icon: ComputerDesktopIcon,
+    },
+    {
+      id: 'dark',
+      name: t('dark'),
+      icon: MoonIcon,
+    },
+    {
+      id: 'light',
+      name: t('light'),
+      icon: SunIcon,
+    },
+  ];
+
+  const selectedTheme = themes.find((t) => t.id === theme) || themes[0];
+
+  const toggleTheme = () => {
+    selectedTheme.id === 'light' ? applyTheme('dark') : applyTheme('light');
+
+    if (selectedTheme.id === 'light') {
+      applyTheme('dark');
+      setTheme('dark');
+    } else if (selectedTheme.id === 'dark') {
+      applyTheme('light');
+      setTheme('light');
+    } else if (selectedTheme.id === 'system') {
+      applyTheme('dark');
+      setTheme('dark');
+    }
+  };
+
+  return { theme, setTheme, selectedTheme, toggleTheme, themes, applyTheme };
+};
+
+export default useTheme;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -59,7 +59,7 @@
     "@boxyhq/metrics": "0.2.5",
     "@boxyhq/react-ui": "3.3.13",
     "@boxyhq/saml-jackson": "file:npm",
-    "@heroicons/react": "2.0.18",
+    "@heroicons/react": "^2.0.18",
     "@retracedhq/logs-viewer": "2.5.1",
     "@retracedhq/retraced": "0.7.0",
     "@tailwindcss/typography": "0.5.10",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -5,13 +5,14 @@ import { SessionProvider } from 'next-auth/react';
 import { useRouter } from 'next/router';
 import { Toaster } from '@components/Toaster';
 import { appWithTranslation } from 'next-i18next';
-import { ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode, useEffect } from 'react';
 import micromatch from 'micromatch';
 import nextI18NextConfig from '../next-i18next.config.js';
 
 import { AccountLayout, SetupLinkLayout } from '@components/layouts';
 import '@boxyhq/react-ui/dist/style.css';
 import '../styles/globals.css';
+import { applyTheme } from '../lib/theme';
 
 const unauthenticatedRoutes = [
   '/',
@@ -35,7 +36,9 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   const { session, ...props } = pageProps;
 
   const getLayout = Component.getLayout;
-
+  useEffect(() => {
+    applyTheme(localStorage.getItem('theme') as Theme);
+  }, []);
   // If a page level layout exists, use it
   if (getLayout) {
     return (

diff --git a/pages/admin/sso-connection/index.tsx b/pages/admin/sso-connection/index.tsx
@@ -1,5 +1,6 @@
 import type { GetServerSidePropsContext, NextPage } from 'next';
 import ConnectionList from '@components/connection/ConnectionList';
+
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 
 const ConnectionsIndexPage: NextPage = () => {

diff --git a/styles/globals.css b/styles/globals.css
@@ -121,3 +121,12 @@ span.react-datepicker__navigation-icon {
 .modal-content > div > textarea {
   background-color: white;
 }
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #a0a0a0;
+  border-radius: 4px;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -23,6 +23,8 @@ module.exports = {
           error: '#F87272',
         },
       },
+      'black',
+      'corporate',
     ],
   },
   plugins: [require('@tailwindcss/typography'), require('daisyui')],