Fixed Bug UI bug and center auth form.

Author: namos2502

src/App.tsx

@@ -3,6 +3,7 @@ import Authentication from './routes/Authentication.tsx';
 import Dashboard from './routes/Dashboard.tsx';
 import { useState } from 'react';
 import { UserState } from './types.ts';
+import './scss/app.scss';
 
 function App() {
   // track the username in state

src/components/Login.tsx

@@ -65,7 +65,7 @@ const Login = ({ setUser, setLoggingIn }: SignupProps) => {
           required
         />
         {loginFail ? (
-          <p className='auth-cofinfirm'>Username or password incorrect</p>
+          <p className='auth-confirm'>Username or password incorrect</p>
         ) : null}
         <button className='auth-submit' type='submit'>
           Login

src/main.tsx

@@ -7,9 +7,7 @@ import './scss/app.scss';
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <BrowserRouter>
-      <div className='app'>
         <App />
-      </div>
     </BrowserRouter>
   </React.StrictMode>
 );

src/scss/app.scss

@@ -11,3 +11,11 @@ body {
 #root {
   height: 100%;
 }
+
+.authContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  position: relative;
+}

src/scss/authContainer.scss

@@ -1,8 +1,8 @@
 .title {
   font-size: 32px;
   color: goldenrod;
-  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
-    "Lucida Sans", Arial, sans-serif;
+  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
+    'Lucida Sans', Arial, sans-serif;
 }
 
 .title-wrapper {
@@ -14,7 +14,10 @@
   align-items: center;
   justify-content: center;
   width: 300px; /* Adjust width as needed */
-  margin: auto; /* Center horizontally */
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   padding: 20px;
   border: 2px solid black;
   border-radius: 8px;

src/scss/authWrapper.scss

@@ -13,6 +13,8 @@
   padding: 8px;
   width: 100%;
   box-sizing: border-box;
+  border: 2px solid black;
+  border-radius: 5px;
 }
 .auth-label {
   margin-bottom: 10px; /* Add margin between labels and inputs */

src/scss/leftContainer.scss

@@ -37,7 +37,7 @@
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
-  max-height: 450px;
+  max-height: 90%;
   overflow-y: auto;
   margin-top: 20px;
 }