Improve dark theme + move theme toggle in the navbar

components/Auth.js

@@ -35,7 +35,7 @@ const AuthComponent = () => {
           socialLayout='horizontal'
           socialButtonSize='xlarge'
           socialColors={true}
-          className='p-5'
+          className='p-5 bg-neutral-content rounded-md'
         />
       </Container>
     </Auth.UserContextProvider>

components/Nav.js

@@ -48,10 +48,6 @@ const Nav = (props) => {
         <a className='btn btn-ghost btn-sm'>Pricing</a>
       </Link>
 
-      <Link href='/'>
-        <a className='btn btn-ghost btn-sm'>About</a>
-      </Link>
-
       <Link href='/contact'>
         <a className='btn btn-ghost btn-sm'>Contact</a>
       </Link>
@@ -67,7 +63,7 @@ const Nav = (props) => {
           <a className='btn btn-primary btn-sm'>Login</a>
         </Link>
       )}
-      <ThemeToggle />
+      <ThemeToggle/>
     </>
   );
 

components/UI/ThemeToggle.js

@@ -27,7 +27,7 @@ const ThemeToggle = () => {
   }, [activeTheme]);
 
   return (
-    <button className='flex' onClick={() => setActiveTheme(inactiveTheme)}>
+    <button className='flex ml-3' onClick={() => setActiveTheme(inactiveTheme)}>
       {activeTheme === theme.secondary ? (
         <HiOutlineSun className='m-auto text-xl hover:text-accent' />
       ) : (