Fixed the button inside a button issue

Author: Hudamabkhoot

src/components/NavBar.jsx

@@ -68,9 +68,7 @@ export function NavBar({ darkMode, toggleDarkMode }) {
 										darkMode ? 'Switch to light mode' : 'Switch to dark mode'
 									}
 								>
-									<button className=" rounded-full text-primary-pink hover:text-opacity-60">
-										{darkMode ? <Eclipse /> : <Sun />}
-									</button>
+									{darkMode ? <Eclipse /> : <Sun />}
 								</abbr>
 							</Button>
 						</div>
@@ -103,9 +101,7 @@ export function NavBar({ darkMode, toggleDarkMode }) {
 										darkMode ? 'Switch to light mode' : 'Switch to dark mode'
 									}
 								>
-									<button className="px-2 rounded-full text-primary-pink hover:text-opacity-60">
-										{darkMode ? <Eclipse /> : <Sun />}
-									</button>
+									{darkMode ? <Eclipse /> : <Sun />}
 								</abbr>
 							</Button>
 							{!!user ? (

src/views/Login.jsx

@@ -46,11 +46,11 @@ function Login() {
 				className="fixed w-16 bottom-16 right-16 p-2 rounded-full text-primary-pink hover:text-primary-pink hover:text-opacity-60 font-semibold"
 			>
 				<abbr title={darkMode ? 'Switch to light mode' : 'Switch to dark mode'}>
-					<button
-						className={`${darkMode && 'dark'} rounded-full text-primary-pink hover:text-opacity-60`}
-					>
-						{darkMode ? <Eclipse /> : <Sun />}
-					</button>
+					{darkMode ? (
+						<Eclipse className="w-8 h-8" />
+					) : (
+						<Sun className="w-8 h-8" />
+					)}
 				</abbr>
 			</Button>
 		</div>