navbar modifications

TritonSE · Apr 26, 2024 · 7e892b3 · 7e892b3
1 parent 181a124
commit 7e892b3
Show file tree

Hide file tree

Showing 14 changed files with 140 additions and 108 deletions.
diff --git a/admin-portal-frontend/src/app/HorizontalNavBarStyles.tsx b/admin-portal-frontend/src/app/HorizontalNavBarStyles.tsx
diff --git a/admin-portal-frontend/src/app/components/GPComponent.tsx b/admin-portal-frontend/src/app/components/GPComponent.tsx
@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+
+interface Props {
+  width?: number;
+  height?: number;
+  color?: string;
+}
+
+const GpComponent: FC<Props> = ({ width = '30.855px', height = '30.855px', color = "#182B49" }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 32 32" fill="none">
+    <path d="M9.26562 29.157H22.379" stroke={color} strokeWidth="2.81"/>
+    <path d="M21.0639 3.86698V22.3672C21.0639 23.4019 20.2252 24.2406 19.1906 24.2406H12.3878C11.3532 24.2406 10.5145 23.4019 10.5145 22.3672V3.86699C10.5145 2.83237 11.3532 1.99365 12.3878 1.99365H19.1906C20.2252 1.99365 21.0639 2.83237 21.0639 3.86698Z" stroke={color} strokeWidth="2.81"/>
+  </svg>
+);
+
+export default GpComponent;
diff --git a/admin-portal-frontend/src/app/components/HomeComponent.tsx b/admin-portal-frontend/src/app/components/HomeComponent.tsx
@@ -0,0 +1,9 @@
+import React, { FC } from 'react';
+
+const HomeComponent: FC = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 27 27" fill="none">
+    <path d="M1.16211 13.7778L3.88488 11.1806M3.88488 11.1806L13.4146 2.09033L22.9443 11.1806M3.88488 11.1806V24.1667C3.88488 24.5111 4.02831 24.8414 4.28362 25.085C4.53893 25.3285 4.8852 25.4653 5.24627 25.4653H9.33042M22.9443 11.1806L25.6671 13.7778M22.9443 11.1806V24.1667C22.9443 24.5111 22.8008 24.8414 22.5455 25.085C22.2902 25.3285 21.944 25.4653 21.5829 25.4653H17.4987M9.33042 25.4653C9.69149 25.4653 10.0378 25.3285 10.2931 25.085C10.5484 24.8414 10.6918 24.5111 10.6918 24.1667V18.9723C10.6918 18.6279 10.8352 18.2976 11.0906 18.054C11.3459 17.8105 11.6921 17.6737 12.0532 17.6737H14.776C15.137 17.6737 15.4833 17.8105 15.7386 18.054C15.9939 18.2976 16.1374 18.6279 16.1374 18.9723V24.1667C16.1374 24.5111 16.2808 24.8414 16.5361 25.085C16.7914 25.3285 17.1377 25.4653 17.4987 25.4653M9.33042 25.4653H17.4987" stroke="#182B49" stroke-width="2.3375" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+);
+
+export default HomeComponent;
diff --git a/admin-portal-frontend/src/app/components/HorizontalNavBarStyles.tsx b/admin-portal-frontend/src/app/components/HorizontalNavBarStyles.tsx
@@ -0,0 +1,60 @@
+const HorizonalNavBarStyles = {
+  container: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      backgroundColor: '#ffffff',
+      height: '72px',
+      width: '100vw',
+      padding: '0 1vw',
+      boxShadow: '0px 1px 0px 0px #D9D9D9',
+  },
+  logoContainer: {
+      display: 'flex',
+      alignItems: 'center',
+  },
+  logoBackground: {
+      width: '40px',
+      height: '40px',
+      backgroundColor: 'var(--DFM-Navy, #182B49)',
+      borderRadius: '3px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginRight: '0.7vw',
+  },
+  logoText: {
+      fontWeight: 'bold',
+      marginRight: '20vw',
+  },
+  searchBarContainer: {
+      flex: 1,
+      display: 'flex',
+      justifyContent: 'center',
+      marginRight: '20vw',
+      width: '20vw',
+  },
+  profileContainer: {
+      display: 'flex',
+      alignItems: 'center',
+  },
+  profileBackground: {
+      width: '40px',
+      height: '40px',
+      backgroundColor: '#00629B',
+      borderRadius: '4.683px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginRight: '0.7vw',
+  },
+  profileLogoText: {
+      fontWeight: 'bold',
+      color: '#FFFFFF',
+  },
+  profileText: {
+      fontWeight: 'bold',
+  },
+};
+
+export default HorizonalNavBarStyles;
diff --git a/...tal-frontend/src/app/HorizontalNavbar.tsx → ...d/src/app/components/HorizontalNavbar.tsx b/...tal-frontend/src/app/HorizontalNavbar.tsx → ...d/src/app/components/HorizontalNavbar.tsx
@@ -2,23 +2,16 @@
 
 import React from 'react';
 import SearchBar from './SearchBar';
-import Image from 'next/image';
-import IconSearch from './icons/ic_search.png';
-import styles from './HorizontalNavBarStyles'
+import styles from './HorizontalNavBarStyles';
+import SearchComponent from './SearchComponent';
 
 const HorizontalNavBar: React.FC = () => {
     return (
         <div style={styles.container}>
 
             <div style={styles.logoContainer}>
                 <div style={styles.logoBackground}>
-                    <Image
-                        src={IconSearch}
-                        alt="Image"
-                        width={18}
-                        height={18}
-                        style={{ filter: 'invert(100%)' }}
-                    />
+                    <SearchComponent width={18} height={18} color={"#FFFFFF"}/>
                 </div>
                 <span style={styles.logoText}>Sideline Sidekick</span>
             </div>

diff --git a/admin-portal-frontend/src/app/SearchBar.tsx → ...frontend/src/app/components/SearchBar.tsx b/admin-portal-frontend/src/app/SearchBar.tsx → ...frontend/src/app/components/SearchBar.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import styles from './searchbarStyles';
-import searchIcon from './icons/ic_search_grey.png'
+import styles from './SearchBarStyles';
+import searchIcon from '../icons/ic_search_grey.png'
 import Image from 'next/image';
 
 interface SearchBarProps {

diff --git a/...rtal-frontend/src/app/SearchBarStyles.tsx → ...nd/src/app/components/SearchBarStyles.tsx b/...rtal-frontend/src/app/SearchBarStyles.tsx → ...nd/src/app/components/SearchBarStyles.tsx
@@ -7,7 +7,7 @@ const styles = {
     borderRadius: '9.367px',
     border: '0.937px solid var(--Neutral-Gray2, #D8D8D8)',
     background: 'var(--Neutral-Gray0, #F3F3F3)',
-    height: '46px',
+    height: '43px',
     width: '561px'
   },
   input: {

diff --git a/admin-portal-frontend/src/app/components/SearchComponent.tsx b/admin-portal-frontend/src/app/components/SearchComponent.tsx
@@ -0,0 +1,15 @@
+import React, { FC } from 'react';
+
+interface Props {
+  width?: number;
+  height?: number;
+  color?: string;
+}
+
+const SearchComponent: FC<Props> = ({ width, height, color}) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 32 32" fill="none">
+    <path fill-rule="evenodd" fill={color} clip-rule="evenodd" d="M15.1283 5.74756C10.1581 5.74756 6.12891 9.77672 6.12891 14.7469C6.12891 19.7172 10.1581 23.7463 15.1283 23.7463C17.1497 23.7463 19.0155 23.0798 20.5178 21.9546L24.5042 25.941C25.0063 26.4431 25.8203 26.4431 26.3224 25.941C26.8244 25.4389 26.8244 24.6249 26.3224 24.1229L22.336 20.1365C23.4612 18.6341 24.1277 16.7684 24.1277 14.7469C24.1277 9.77672 20.0985 5.74756 15.1283 5.74756ZM8.70016 14.7469C8.70016 11.1968 11.5781 8.31881 15.1283 8.31881C18.6784 8.31881 21.5564 11.1968 21.5564 14.7469C21.5564 18.2971 18.6784 21.1751 15.1283 21.1751C11.5781 21.1751 8.70016 18.2971 8.70016 14.7469Z"/>
+  </svg>
+);
+
+export default SearchComponent;
diff --git a/...ortal-frontend/src/app/VerticalNavBar.tsx → ...end/src/app/components/VerticalNavBar.tsx b/...ortal-frontend/src/app/VerticalNavBar.tsx → ...end/src/app/components/VerticalNavBar.tsx
@@ -1,15 +1,13 @@
 'use client'
 
 import styles from './VerticalNavBarStyles';
-import profileIcon from './Profile Icon.png'
+import HomeComponent from './HomeComponent';
 import React, { ReactNode } from 'react';
 import Accordion from 'react-bootstrap/Accordion';
 import 'bootstrap/dist/css/bootstrap.css';
-import Image from 'next/image';
-import homeIcon from './icons/Home.png'
-import searchIcon from './icons/ic_search.png'
-import gpIcon from './icons/gen principles.png'
 import { Card, useAccordionButton } from 'react-bootstrap';
+import GpComponent from './GPComponent';
+import SearchComponent from './SearchComponent';
 
 
   const VerticalNavBar: React.FC = () => {
@@ -48,7 +46,8 @@ import { Card, useAccordionButton } from 'react-bootstrap';
                 <CustomAccordion eventKey="0">
                   <div style={styles.firstCarDiv}>
                     <div style={styles.image}>
-                      <Image src={homeIcon} alt={'Home'} style={styles.homeIcon} />
+                      {/* <Image src={homeIcon} alt={'Home'} style={styles.homeIcon} /> */}
+                      <HomeComponent />
                     </div>
                     Home
                   </div>
@@ -61,42 +60,44 @@ import { Card, useAccordionButton } from 'react-bootstrap';
             <Accordion.Header>
               <div style={styles.cardDivs}>
                 <div style={styles.image}>
-                  <Image src={searchIcon} alt={'Search'} style={styles.searchIcon} />
+                  <SearchComponent height={30.855} width={30.855} color={"#182B49"}/>
                 </div>
                 Search
               </div>
             </Accordion.Header>
             <Accordion.Body>
                 <ul>
-                  <li>All</li>
-                  <li>By Category</li>
+                  <li style={styles.listItem}>All</li>
+                  <li style={styles.listItem}>By Category</li>
                 </ul>
             </Accordion.Body>
           </Accordion.Item>
           <Accordion.Item eventKey="2" style={{ border: 'none'}}>
             <Accordion.Header>
               <div style={styles.cardDivs}>
                 <div style={styles.image}>
-                  <Image src={gpIcon} alt={'General Principles'} style={styles.gpIcon} />
+                  {/* <Image src={gpIcon} alt={'General Principles'} style={styles.gpIcon} /> */}
+                  <GpComponent/>
                 </div>
                 General Principles
               </div>
             </Accordion.Header>
             <Accordion.Body>
-                <ul>
-                  <li>All</li>
-                  <li>Emergency Action Plan</li>
-                  <li>Trauma Centers</li>
-                  <li>Burn Centers</li>
-                  <li>Stroke Centers</li>
-                  <li>Serious On-Field Injury</li>
-                  <li>Catastrophic Incident</li>
-                  <li>Adminstering Medication</li>
-                  <li>Muscle Injuries</li>
-                  <li>Ligament Injuries</li>
-                  <li>Dislocations/Sublaxations</li>
-                  <li>Fractures</li>
-                </ul>
+            <ul style={{ listStyleType: 'none' }}>
+              <li style={styles.listItem}>All</li>
+              <li style={styles.listItem}>Emergency Action Plan</li>
+              <li style={styles.listItem}>Trauma Centers</li>
+              <li style={styles.listItem}>Burn Centers</li>
+              <li style={styles.listItem}>Stroke Centers</li>
+              <li style={styles.listItem}>Serious On-Field Injury</li>
+              <li style={styles.listItem}>Catastrophic Incident</li>
+              <li style={styles.listItem}>Adminstering Medication</li>
+              <li style={styles.listItem}>Muscle Injuries</li>
+              <li style={styles.listItem}>Ligament Injuries</li>
+              <li style={styles.listItem}>Dislocations/Sublaxations</li>
+              <li style={styles.listItem}>Fractures</li>
+            </ul>
+
             </Accordion.Body>
           </Accordion.Item>
         </Accordion>

diff --git a/...frontend/src/app/VerticalNavBarStyles.tsx → ...c/app/components/VerticalNavBarStyles.tsx b/...frontend/src/app/VerticalNavBarStyles.tsx → ...c/app/components/VerticalNavBarStyles.tsx
@@ -12,14 +12,8 @@ const VerticalNavBarStyles = {
     border: 'none',
   },
   accordionContainer: {
-    paddingTop: '109px' 
-  },
-  iconContainer: {
-    width: '30.855px',
-    height: '30.855px',
-    marginRight: '20px',
-    display: 'flex',
-    alignItems: 'center',
+    paddingTop: '109px',
+
   },
   homeIcon: {
     width: '24px',
@@ -29,6 +23,10 @@ const VerticalNavBarStyles = {
     width: '31px',
     height: '30px',
   },
+  listItem: {
+    marginBottom: '0.6vh',
+    fontSize: '14.96px'
+  },
   gpIcon: {
     width: '13px',
     height: '27px',
@@ -38,7 +36,7 @@ const VerticalNavBarStyles = {
     height: '30.855px',
     marginRight: '20px',
     display: 'flex',
-    alignItems: 'center' 
+    alignItems: 'center'  
   },
   firstCarDiv: {
     display: 'flex',

diff --git a/admin-portal-frontend/src/app/icons/Home.png b/admin-portal-frontend/src/app/icons/Home.png
diff --git a/admin-portal-frontend/src/app/icons/gen principles.png b/admin-portal-frontend/src/app/icons/gen principles.png
diff --git a/admin-portal-frontend/src/app/icons/ic_search.png b/admin-portal-frontend/src/app/icons/ic_search.png
diff --git a/admin-portal-frontend/src/app/page.tsx b/admin-portal-frontend/src/app/page.tsx
@@ -1,6 +1,6 @@
-import HorizontalNavBar from './horizontalNavbar'
+import HorizontalNavBar from './components/HorizontalNavbar'
 import React from 'react';
-import VerticalNavBar from './VerticalNavBar';
+import VerticalNavBar from './components/VerticalNavBar';
 import styles from './pageStyles'
 
 const AnotherPage: React.FC = () => {