added image in header

web/frontend/src/components/Footer.tsx

@@ -8,7 +8,7 @@ export default function Footer() {
         <footer className={styles.Footer}>
             <p><Link  className={styles.Footerlink} to="/about">About</Link></p>
             <p><Link className={styles.Footerlink} to="/about">Code</Link></p>
-            <p><Link className={styles.Footerlink} to="/about">manuscript</Link></p>
+            <p><Link className={styles.Footerlink} to="/about">Manuscript</Link></p>
             <p ><a className={styles.Footerlink} href="https://www.tri.global/privacy-policy/" target="_blank" rel="noreferrer">Privacy Policy</a></p>
             <p className={styles.Footercopyright}>© Copyright Toyota Research Institute {year}</p>
         </footer>

web/frontend/src/components/Header.tsx

@@ -1,15 +1,17 @@
 import { AmplifySignOut } from '@aws-amplify/ui-react';
 import styles from './components.module.css';
-
+import logo from '../images/blackimage.png'
 
 export default function Header() {
+    //var logo = require('../images/Toyota_Research_Institute_Logo.png')
+    console.log(logo)
     return (
         <header className={styles.AppHeader}>
+            <img src={logo} alt="Logo" width={"150px"}/>
             <h3>Piro Synthesis Analyzer</h3>
             <a href="/about" className={styles.Aboutlink}>About</a>
-            <button className={styles.Signout}>Sign Out</button>
+            <button className={styles.Signout}>SIGN OUT</button>
             {AMPLIFY_ENABLED && <AmplifySignOut />}
-
         </header>
     );
 }

web/frontend/src/components/components.module.css

@@ -8,12 +8,13 @@
     background: var(--grey-900, #212121);
     .Signout{
         display: flex;
-height: 36px;
-padding: 8px 14px;
-justify-content: center;
-align-items: center;
-gap: 8px;
+        height: 36px;
+        padding: 8px 14px;
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
         border-radius: 8px;
+        font-size: 13px;
         background: var(--white, #FFF);
         box-shadow: 0px 2px 4px -2px rgba(33, 33, 33, 0.20), 0px 4px 6px -1px rgba(33, 33, 33, 0.20);
     }
@@ -31,7 +32,7 @@ gap: 8px;
 }
 .Footer{
     display: flex;
-    padding: 30px;
+    padding: 25px;
     gap: 24px;
     background: var(--grey-900, #212121);
     align-items: center;

web/frontend/src/index.css

@@ -19,6 +19,6 @@ code {
 
 .app {
     background-color: rgb(246, 246, 248);
-    min-height: 100%;
+    min-height: 76.2%;
     padding: 12px;
 }