codercatdev
diff --git a/‎frontend/main/package-lock.json‎
Lines changed: 30 additions & 0 deletions b/‎frontend/main/package-lock.json‎
Lines changed: 30 additions & 0 deletions
diff --git a/‎frontend/main/package.json‎
Lines changed: 1 addition & 0 deletions b/‎frontend/main/package.json‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎frontend/main/public/static/sounds/menu-open.mp3‎
10.6 KB b/‎frontend/main/public/static/sounds/menu-open.mp3‎
10.6 KB
diff --git a/‎frontend/main/public/static/sounds/switch-off.mp3‎
2.28 KB b/‎frontend/main/public/static/sounds/switch-off.mp3‎
2.28 KB
diff --git a/‎frontend/main/public/static/sounds/switch-on.mp3‎
1.72 KB b/‎frontend/main/public/static/sounds/switch-on.mp3‎
1.72 KB
diff --git a/‎…n/src/components/global/icons/Toggle.tsx‎ ‎…/components/global/icons/ThemeToggle.tsx‎frontend/main/src/components/global/icons/Toggle.tsx renamed to frontend/main/src/components/global/icons/ThemeToggle.tsx
Lines changed: 6 additions & 1 deletion b/‎…n/src/components/global/icons/Toggle.tsx‎ ‎…/components/global/icons/ThemeToggle.tsx‎frontend/main/src/components/global/icons/Toggle.tsx renamed to frontend/main/src/components/global/icons/ThemeToggle.tsx
Lines changed: 6 additions & 1 deletion
diff --git a/‎frontend/main/src/layout/AppTopbar.tsx‎
Lines changed: 3 additions & 3 deletions b/‎frontend/main/src/layout/AppTopbar.tsx‎
Lines changed: 3 additions & 3 deletions
@@ -36,6 +36,7 @@
     "react-instantsearch-dom": "^6.8.2",
     "react-player": "^2.7.2",
     "reactfire": "^4.2.0",
+    "use-sound": "^4.0.1",
     "video.js": "^7.11.4"
   },
   "devDependencies": {
 
@@ -1,18 +1,23 @@
 import { useTheme } from 'next-themes';
 import { useState, useEffect } from 'react';
+import useSound from 'use-sound';
 
-export default function Toggle(): JSX.Element {
+export default function ThemeToggle(): JSX.Element {
   const [loaded, setLoaded] = useState(false);
   const { theme, setTheme } = useTheme();
+  const [dark] = useSound('/static/sounds/switch-off.mp3');
+  const [light] = useSound('/static/sounds/switch-on.mp3');
 
   useEffect(() => {
     setLoaded(true);
   }, []);
 
   const toggle = () => {
     if (theme !== 'dark') {
+      dark();
       setTheme('dark');
     } else {
+      light();
       setTheme('light');
     }
   };
 
@@ -2,7 +2,7 @@ import { Dispatch, SetStateAction, useState } from 'react';
 import Link from 'next/link';
 import dynamic from 'next/dynamic';
 
-import Toggle from '@/components/global/icons/Toggle';
+import ThemeToggle from '@/components/global/icons/ThemeToggle';
 
 import OutsideClick from '@/components/OutsideClick';
 import AJLogoLeft from '@/components/global/icons/AJAlt';
@@ -25,7 +25,7 @@ export const AppTopbar = (props: {
     <header className="flex justify-between w-full h-20 p-4 lg:px-0 lg:mx-auto lg:w-80 lg:max-w-8xl">
       <Link href="/">
         <a>
-          <div className="flex items-center content-center shrink-0 h-full">
+          <div className="flex items-center content-center h-full shrink-0">
             <AJLogoLeft />
             <h2 className="hidden text-2xl text-basics-50 lg:block">
               CodingCat.dev
@@ -36,7 +36,7 @@ export const AppTopbar = (props: {
       {/* <div className="flex justify-between h-16"> */}
       <NavLinks />
 
-      <Toggle />
+      <ThemeToggle />
       <div className="flex items-center justify-end">
         <div className="flex items-center w-full space-x-2">
           <SearchModal />