Css changes

frontend/react-app/src/components/Header.jsx

@@ -2,8 +2,9 @@ import {useCookies} from 'react-cookie'
 function Header(){
     const [cookies] = useCookies(['userInfo'])
     return(
-
-                <h1 className ="inHeader">
+
+          <div>
+                <h1 className ="inner-header">
                         <ul className ='list'>
                             <li className ="logo list"><span><a href="/home">Whatever we Call this</a></span></li>
                             <li><span><a href="/home">Home</a></span></li>
@@ -12,6 +13,8 @@ function Header(){
                             {cookies.userInfo.role === 'admin' && (<li><span><a href="/admin-panel">Admin Controls</a></span></li>)}
                         </ul>
                 </h1>
+            </div>
+
     );
 }
 export default Header

frontend/react-app/src/css/Header.css

@@ -7,15 +7,13 @@ h1.inner-header{
     margin: 0;
     font-family: Calibri;
     width: 100%;
-    margin-left: 5%;
-    margin-right: 5%;
+    padding: 1% 5%;;
     height: auto;
     min-height: 10%;
     background-color: #3b3355;
     display: flex; 
     align-items: center; 
     justify-content: space-between;
-
 }
 
 li{
@@ -33,3 +31,4 @@ li.logo a{
     font-size: calc(30%+2vw);
     color: #fefcfd;
 }
+

frontend/react-app/src/css/MyTasks.css

@@ -41,3 +41,7 @@ div.flexbox{
     cursor: pointer;
     border-radius: 10px;
   }
+
+  .pageContainer {
+    width: 100%;
+  }

frontend/react-app/src/login.css

@@ -19,11 +19,6 @@
     color:#25274D;
 }
 
-#siteName h1 {
-    font-size: 2em;
-    text-align: left;
-}
-
 #siteName img {
     width: 200px;
     height: 200px;
@@ -90,3 +85,22 @@
     background-color: #25274D;
     cursor: pointer;
 }
+
+
+#logoBox {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+#logoBox h1 {
+    font-weight: bold;
+    font-size: 3em;
+    /* background-color: red; */
+    gap: 0px;
+}
+
+#logoBox img {
+    margin: 0;
+    /* background-color: red; */
+}

frontend/react-app/src/pages/Home.js → frontend/react-app/src/pages/Home.jsx

@@ -19,8 +19,6 @@ function setUpDataTasksToDo(obj){
             team: taskItem.team,
             dueDate: taskItem.dueDate
 
-
-
         }]
 
    }

frontend/react-app/src/pages/Login.jsx

@@ -1,15 +1,18 @@
 import React from 'react';
 import LoginForm from '../components/LoginForm';
 import '../login.css';
+import logo from '../icons/taskboard_checks.png';
 function Login(){
     return (
         <div id="login">
             <div className="loginContainer">
 
                 <div id="siteName">
-                    <img src="https://www.shutterstock.com/image-vector/sample-logo-business-brand-identity-600nw-1948366864.jpg" alt="logo"/>
-                    <h1>Our site name</h1>
-                    <p1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum nulla pharetra, ultrices mauris ut, pharetra massa. Morbi sodales in metus in porta. Morbi vel semper ligula, at dignissim eros. Aenean sollicitudin, diam et cursus elementum, elit dui viverra leo, et commodo tortor urna et dolor</p1>
+                    <div id="logoBox">
+                        <img src={logo} alt="logo"/>
+                        <h1>Taskly</h1>
+                    </div>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum nulla pharetra, ultrices mauris ut, pharetra massa. Morbi sodales in metus in porta. Morbi vel semper ligula, at dignissim eros. Aenean sollicitudin, diam et cursus elementum, elit dui viverra leo, et commodo tortor urna et dolor</p>
                 </div>
                 <div id="loginFormWrapper"> 
                     <LoginForm />

frontend/react-app/src/pages/MyTasks.jsx

@@ -1,7 +1,8 @@
 import TaskList from "../components/TaskList";
 import Header from "../components/Header";
-import "../css/MyTasks.css"
-import fakeData from "../FakeData/fakeTaskData.json"
+import "../css/MyTasks.css";
+import "../css/Header.css";
+import fakeData from "../FakeData/fakeTaskData.json";
 import { Link } from 'react-router-dom';
 import { getAssignedTasks } from "../api/teamMemberApi";
 import { useCookies } from 'react-cookie';