Merge pull request 'Css tweaks' (#18) from React-Group/interstellar_ai:main into main

Reviewed-on: https://interstellardevelopment.org/code/code/sageTheDm/interstellar_ai/pulls/18

app/components/Header.tsx

@@ -40,7 +40,7 @@ const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, sho
             )}
           </nav>
         <button onClick={() => onViewChange('AI')} className="header-button header-logo">
-          <p>1</p>
+          
         </button>
         <div className="login-button">
           <Login /> 

app/components/Login.tsx

@@ -53,8 +53,8 @@ const Login: React.FC = () => {
   return (
     <div>
       {/* Login or Settings Button */}
-      
-      <button onClick={isLoggedIn ? toggleSettingsPopup : toggleLoginPopup}>
+
+      <button className='header-login-button' onClick={isLoggedIn ? toggleSettingsPopup : toggleLoginPopup}>
         {isLoggedIn ? 'Settings' : 'Log In'}
       </button>
 

app/styles/header.css

@@ -6,15 +6,46 @@ header{
     width: 100%;
     height: 10vh;
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    margin: 1.5vh 0;
 }
 
 .hamburger{
     display: none;
 }
 
-.login-button button{
+.hamburger.open:nth-child(1)
+
+.nav-links{
+    position: absolute;
+    display: flex;
+    gap: 15px;
+    width: 25vw;
+    height: 5vh;
+}
+
+.nav-btn{
+    background-color: transparent;
+    border: none;
+}
+
+.header-logo{
+    margin:auto;
+    width: 250px;
+    height: 5vh;
+    background-image: url(../../public/img/logo.png);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-color: transparent;
+    border: none;
+}
+
+.login-button .header-login-button{
+    position: absolute;
+    top: 2.5vh;
+    right: 1vw;
+    justify-self: flex-end;
     padding: 10px 20px;
     background-color: var(--input-button-color);
     color: var(--text-color);