From decc11f8b149179f2149a2909a533475c9f359ea Mon Sep 17 00:00:00 2001
From: jatin <jatingodnani@gmail.com>
Date: Sat, 14 Oct 2023 01:01:31 +0530
Subject: [PATCH 1/2] toogle-light-dark-theme

---
 components/Navbar.tsx                |  8 ++++
 components/Sidebar.tsx               |  5 ++-
 components/layouts/AccountLayout.tsx |  9 ++++-
 lib/theme.ts                         | 38 +++++++++++++++++++
 lib/ui/hooks/useTheme.ts             | 53 ++++++++++++++++++++++++++
 npm/package-lock.json                | 56 +++++++++++-----------------
 package-lock.json                    |  5 ++-
 package.json                         |  2 +-
 pages/_app.tsx                       |  7 +++-
 pages/admin/sso-connection/index.tsx |  1 +
 tailwind.config.js                   |  2 +
 11 files changed, 143 insertions(+), 43 deletions(-)
 create mode 100644 lib/theme.ts
 create mode 100644 lib/ui/hooks/useTheme.ts

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 933fea32a..54807f2db 100644
--- 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'></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,6 +38,7 @@ export const Navbar = ({ session }: { session: Session | null }) => {
               </button>
             </div>
           )}
+
           {session && (
             <div
               className={classNames(
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index 8245379c8..958d70484 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -3,7 +3,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import classNames from 'classnames';
 import { useRouter } from 'next/router';
-
+import useTheme from '@lib/ui/hooks/useTheme';
 import Logo from '../public/logo.png';
 import { useTranslation } from 'next-i18next';
 import SSOLogo from '@components/logo/SSO';
@@ -28,7 +28,7 @@ type MenuItem = {
 export const Sidebar = ({ isOpen, setIsOpen }: SidebarProps) => {
   const { t } = useTranslation('common');
   const { asPath } = useRouter();
-
+  const { selectedTheme, toggleTheme } = useTheme();
   const menus = [
     {
       href: '/admin/dashboard',
@@ -185,6 +185,7 @@ export const Sidebar = ({ isOpen, setIsOpen }: SidebarProps) => {
               <span className='ml-4 text-lg font-bold text-gray-900'>BoxyHQ Admin Portal</span>
             </Link>
           </div>
+
           <div className='mt-5 flex flex-1 flex-col'>
             <MenuItems menus={menus} />
           </div>
diff --git a/components/layouts/AccountLayout.tsx b/components/layouts/AccountLayout.tsx
index f803d6067..9eda3f204 100644
--- a/components/layouts/AccountLayout.tsx
+++ b/components/layouts/AccountLayout.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useSession } from 'next-auth/react';
 import Head from 'next/head';
 
@@ -6,12 +6,16 @@ import { Sidebar } from '@components/Sidebar';
 import { Navbar } from '@components/Navbar';
 import { useTranslation } from 'next-i18next';
 import Loading from '@components/Loading';
+import { applyTheme } from '../../lib/theme';
 
 export const AccountLayout = ({ children }: { children: React.ReactNode }) => {
   const { t } = useTranslation('common');
   const { data: session, status } = useSession({ required: true });
 
   const [isOpen, setIsOpen] = useState(false);
+  useEffect(() => {
+    applyTheme(localStorage.getItem('theme') as Theme);
+  }, []);
 
   if (status === 'loading') {
     return <Loading />;
@@ -24,6 +28,7 @@ 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'>
           <button
@@ -44,8 +49,10 @@ 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='mx-auto max-w-7xl px-4 sm:px-6 md:px-8'>{children}</div>
diff --git a/lib/theme.ts b/lib/theme.ts
new file mode 100644
index 000000000..1344f7e9d
--- /dev/null
+++ 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
new file mode 100644
index 000000000..934e44fe8
--- /dev/null
+++ 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/npm/package-lock.json b/npm/package-lock.json
index 7e42ba870..411269cf6 100644
--- a/npm/package-lock.json
+++ b/npm/package-lock.json
@@ -1034,7 +1034,7 @@
     },
     "node_modules/@cspotcode/source-map-support": {
       "version": "0.8.1",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/trace-mapping": "0.3.9"
@@ -1045,7 +1045,7 @@
     },
     "node_modules/@cspotcode/source-map-support/node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.9",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.0.3",
@@ -1199,7 +1199,7 @@
     },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -1207,7 +1207,7 @@
     },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
@@ -2874,22 +2874,22 @@
     },
     "node_modules/@tsconfig/node10": {
       "version": "1.0.9",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@tsconfig/node12": {
       "version": "1.0.11",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@tsconfig/node14": {
       "version": "1.0.3",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@tsconfig/node16": {
       "version": "1.0.4",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@tufjs/canonical-json": {
@@ -2992,7 +2992,7 @@
     },
     "node_modules/acorn": {
       "version": "8.9.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -3003,7 +3003,7 @@
     },
     "node_modules/acorn-walk": {
       "version": "8.2.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.4.0"
@@ -3158,7 +3158,7 @@
     },
     "node_modules/arg": {
       "version": "4.1.3",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/array-buffer-byte-length": {
@@ -3859,7 +3859,7 @@
     },
     "node_modules/create-require": {
       "version": "1.1.1",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/cross-env": {
@@ -5030,7 +5030,7 @@
     },
     "node_modules/ip": {
       "version": "2.0.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/is-actual-promise": {
@@ -5626,7 +5626,7 @@
     },
     "node_modules/make-error": {
       "version": "1.3.6",
-      "devOptional": true,
+      "dev": true,
       "license": "ISC"
     },
     "node_modules/make-fetch-happen": {
@@ -7000,20 +7000,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/react-dom": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
-      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.0"
-      },
-      "peerDependencies": {
-        "react": "^18.2.0"
-      }
-    },
     "node_modules/react-element-to-jsx-string": {
       "version": "15.0.0",
       "resolved": "https://registry.npmjs.org/react-element-to-jsx-string/-/react-element-to-jsx-string-15.0.0.tgz",
@@ -7433,7 +7419,7 @@
     },
     "node_modules/smart-buffer": {
       "version": "4.2.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 6.0.0",
@@ -7442,7 +7428,7 @@
     },
     "node_modules/socks": {
       "version": "2.7.1",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ip": "^2.0.0",
@@ -8004,7 +7990,7 @@
     },
     "node_modules/ts-node": {
       "version": "10.9.1",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
@@ -8046,7 +8032,7 @@
     },
     "node_modules/ts-node/node_modules/diff": {
       "version": "4.0.2",
-      "devOptional": true,
+      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.3.1"
@@ -8392,7 +8378,7 @@
     },
     "node_modules/typescript": {
       "version": "5.2.2",
-      "devOptional": true,
+      "dev": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -8461,7 +8447,7 @@
     },
     "node_modules/v8-compile-cache-lib": {
       "version": "3.0.1",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/v8-to-istanbul": {
@@ -8868,7 +8854,7 @@
     },
     "node_modules/yn": {
       "version": "3.1.1",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
diff --git a/package-lock.json b/package-lock.json
index 75424de81..0c9f79cbc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,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",
@@ -1476,7 +1476,8 @@
     },
     "node_modules/@heroicons/react": {
       "version": "2.0.18",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.18.tgz",
+      "integrity": "sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==",
       "peerDependencies": {
         "react": ">= 16"
       }
diff --git a/package.json b/package.json
index ecc72d228..3780cefa4 100644
--- 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
index b6dbdca2d..018ed1148 100644
--- 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 '../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
index 53a3ba5ee..564125718 100644
--- 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/tailwind.config.js b/tailwind.config.js
index 9a16deb4b..004cf6b0a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -23,6 +23,8 @@ module.exports = {
           error: '#F87272',
         },
       },
+      'black',
+      'corporate',
     ],
   },
   plugins: [require('@tailwindcss/typography'), require('daisyui')],

From f5101f414ac0fb7265bc4889a89262c430454d1e Mon Sep 17 00:00:00 2001
From: jatin <jatingodnani@gmail.com>
Date: Sat, 14 Oct 2023 12:40:44 +0530
Subject: [PATCH 2/2] bug resolve and added some css in scrolbar in sidebar

---
 components/Navbar.tsx                |  4 ++--
 components/Sidebar.tsx               | 24 ++++++++++++------------
 components/layouts/AccountLayout.tsx | 11 ++++-------
 styles/globals.css                   |  9 +++++++++
 4 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 54807f2db..2f92bcf31 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -13,7 +13,7 @@ export const Navbar = ({ session }: { session: Session | null }) => {
   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
@@ -42,7 +42,7 @@ export const Navbar = ({ session }: { session: Session | null }) => {
           {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
index 958d70484..37370e077 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -3,7 +3,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import classNames from 'classnames';
 import { useRouter } from 'next/router';
-import useTheme from '@lib/ui/hooks/useTheme';
+
 import Logo from '../public/logo.png';
 import { useTranslation } from 'next-i18next';
 import SSOLogo from '@components/logo/SSO';
@@ -28,7 +28,7 @@ type MenuItem = {
 export const Sidebar = ({ isOpen, setIsOpen }: SidebarProps) => {
   const { t } = useTranslation('common');
   const { asPath } = useRouter();
-  const { selectedTheme, toggleTheme } = useTheme();
+
   const menus = [
     {
       href: '/admin/dashboard',
@@ -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,11 +178,11 @@ 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>
 
@@ -229,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
index 9eda3f204..0007095ed 100644
--- a/components/layouts/AccountLayout.tsx
+++ b/components/layouts/AccountLayout.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { useSession } from 'next-auth/react';
 import Head from 'next/head';
 
@@ -6,16 +6,13 @@ import { Sidebar } from '@components/Sidebar';
 import { Navbar } from '@components/Navbar';
 import { useTranslation } from 'next-i18next';
 import Loading from '@components/Loading';
-import { applyTheme } from '../../lib/theme';
+
 
 export const AccountLayout = ({ children }: { children: React.ReactNode }) => {
   const { t } = useTranslation('common');
   const { data: session, status } = useSession({ required: true });
 
   const [isOpen, setIsOpen] = useState(false);
-  useEffect(() => {
-    applyTheme(localStorage.getItem('theme') as Theme);
-  }, []);
 
   if (status === 'loading') {
     return <Loading />;
@@ -30,7 +27,7 @@ export const AccountLayout = ({ children }: { children: React.ReactNode }) => {
       <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);
@@ -54,7 +51,7 @@ export const AccountLayout = ({ children }: { children: React.ReactNode }) => {
         </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/styles/globals.css b/styles/globals.css
index ce2e60259..be6e43c16 100644
--- 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;
+}