Updated looks to match rebranding

inventory-manager/src/components/EncoraHeader.tsx

@@ -1,19 +1,26 @@
 import React from 'react';
 import {Layout} from 'antd';
-import encora from "../assets/images/encora-logo-square.png"
+import encora from "../assets/images/e-shape-chatreuse-400.png"
+import encoraTxt from "../assets/images/White-Encora-Logo.png"
+
 
 const {Header} = Layout;
 
 const EncoraHeader: React.FC = () => {
     return (
-        <Header style={{display: 'flex', alignItems: 'center'}}>
+        <Header style={{display: 'flex', alignItems: 'center', backgroundColor:"rgb(36,59,104)"}}>
             <img
                 src={encora}
                 alt="Logo"
                 style={{cursor: 'pointer', marginRight: '20px', width:"50px"}}
                 onClick={() => window.open('https://www.encora.com/', '_blank')}
             />
-            <span style={{color: 'white', fontSize: '42px', fontFamily:'encora', wordSpacing:'20px'}}>encora</span>
+            <img
+                src={encoraTxt}
+                alt="Logo"
+                style={{cursor: 'pointer', marginRight: '20px', width:"180px"}}
+                onClick={() => window.open('https://www.encora.com/', '_blank')}
+            />
         </Header>
     );
 };

inventory-manager/src/components/page-content/EncoraContent.tsx

@@ -12,7 +12,7 @@ const HomePageContent: React.FC = () => {
         <SearchProvider>
             <DataProvider>
                 <Layout>
-                    <div style={{padding: '24px', backgroundColor: '#f5f5f5', minHeight: '100vh'}}>
+                    <div style={{padding: '24px', minHeight: '100vh'}}>
                         <div style={{
                             display: 'flex',
                             justifyContent: "space-evenly",

inventory-manager/src/components/page-content/segment2-new_product/NewProductButton.tsx

@@ -15,11 +15,11 @@ const NewProductButton = () => {
              style={{
                  display: 'flex',
                  justifyContent: 'space-between',
-                 alignItems: 'center',   // <- vertical alignment
+                 alignItems: 'center',
                  marginBottom: 16,
              }}
         >
-            <Button type="primary" onClick={showModal}>Add new product</Button>
+            <Button type="primary" onClick={showModal} style={{backgroundColor:"#3b5891"}}>Add new product</Button>
             <Modal
                 title="Add new product to inventory"
                 open={isModalVisible}

inventory-manager/src/index.css

@@ -28,6 +28,12 @@ body {
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  background-color: rgb(237, 236, 236);
+  background-image: url(./assets/images/e-shape-white.png);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  background-attachment: fixed;
 }
 
 code {
@@ -71,3 +77,8 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+.ant-layout,
+.ant-layout-footer {
+  background: transparent;
+}