diff --git a/admin-portal-frontend/src/app/HorizontalNavBarStyles.tsx b/admin-portal-frontend/src/app/HorizontalNavBarStyles.tsx deleted file mode 100644 index 9c6f821..0000000 --- a/admin-portal-frontend/src/app/HorizontalNavBarStyles.tsx +++ /dev/null @@ -1,60 +0,0 @@ -const HorizonalNavBarStyles = { - container: { - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - backgroundColor: '#ffffff', - height: '72px', - padding: '0 22px', - 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: '14px', - }, - logoText: { - fontWeight: 'bold', - marginRight: '239px', - }, - searchBarContainer: { - flex: 1, - display: 'flex', - justifyContent: 'center', - marginLeft: '50vh', - marginRight: '50vh', - }, - profileContainer: { - display: 'flex', - alignItems: 'center', - }, - profileBackground: { - width: '40px', - height: '40px', - backgroundColor: '#00629B', - borderRadius: '4.683px', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - marginRight: '14px', - }, - profileLogoText: { - fontWeight: 'bold', - color:'#FFFFFF' - }, - profileText: { - fontWeight: 'bold', - }, - }; - - export default HorizonalNavBarStyles; - \ No newline at end of file diff --git a/admin-portal-frontend/src/app/components/GPComponent.tsx b/admin-portal-frontend/src/app/components/GPComponent.tsx new file mode 100644 index 0000000..c1fa21a --- /dev/null +++ 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 = ({ width = '30.855px', height = '30.855px', color = "#182B49" }) => ( + + + + +); + +export default GpComponent; diff --git a/admin-portal-frontend/src/app/components/HomeComponent.tsx b/admin-portal-frontend/src/app/components/HomeComponent.tsx new file mode 100644 index 0000000..8099727 --- /dev/null +++ b/admin-portal-frontend/src/app/components/HomeComponent.tsx @@ -0,0 +1,9 @@ +import React, { FC } from 'react'; + +const HomeComponent: FC = () => ( + + + +); + +export default HomeComponent; diff --git a/admin-portal-frontend/src/app/components/HorizontalNavBarStyles.tsx b/admin-portal-frontend/src/app/components/HorizontalNavBarStyles.tsx new file mode 100644 index 0000000..c6175af --- /dev/null +++ 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/admin-portal-frontend/src/app/HorizontalNavbar.tsx b/admin-portal-frontend/src/app/components/HorizontalNavbar.tsx similarity index 69% rename from admin-portal-frontend/src/app/HorizontalNavbar.tsx rename to admin-portal-frontend/src/app/components/HorizontalNavbar.tsx index f267d01..d88d1fa 100644 --- a/admin-portal-frontend/src/app/HorizontalNavbar.tsx +++ b/admin-portal-frontend/src/app/components/HorizontalNavbar.tsx @@ -2,9 +2,8 @@ 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 ( @@ -12,13 +11,7 @@ const HorizontalNavBar: React.FC = () => {
- Image +
Sideline Sidekick
diff --git a/admin-portal-frontend/src/app/SearchBar.tsx b/admin-portal-frontend/src/app/components/SearchBar.tsx similarity index 84% rename from admin-portal-frontend/src/app/SearchBar.tsx rename to admin-portal-frontend/src/app/components/SearchBar.tsx index fb91671..cf856a7 100644 --- a/admin-portal-frontend/src/app/SearchBar.tsx +++ b/admin-portal-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/admin-portal-frontend/src/app/SearchBarStyles.tsx b/admin-portal-frontend/src/app/components/SearchBarStyles.tsx similarity index 96% rename from admin-portal-frontend/src/app/SearchBarStyles.tsx rename to admin-portal-frontend/src/app/components/SearchBarStyles.tsx index 05027f1..9355424 100644 --- a/admin-portal-frontend/src/app/SearchBarStyles.tsx +++ b/admin-portal-frontend/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 new file mode 100644 index 0000000..25b5faf --- /dev/null +++ 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 = ({ width, height, color}) => ( + + + +); + +export default SearchComponent; diff --git a/admin-portal-frontend/src/app/VerticalNavBar.tsx b/admin-portal-frontend/src/app/components/VerticalNavBar.tsx similarity index 61% rename from admin-portal-frontend/src/app/VerticalNavBar.tsx rename to admin-portal-frontend/src/app/components/VerticalNavBar.tsx index f6df05c..71e0bd5 100644 --- a/admin-portal-frontend/src/app/VerticalNavBar.tsx +++ b/admin-portal-frontend/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';
- {'Home'} + {/* {'Home'} */} +
Home
@@ -61,15 +60,15 @@ import { Card, useAccordionButton } from 'react-bootstrap';
- {'Search'} +
Search
    -
  • All
  • -
  • By Category
  • +
  • All
  • +
  • By Category
@@ -77,26 +76,28 @@ import { Card, useAccordionButton } from 'react-bootstrap';
- {'General + {/* {'General */} +
General Principles
-
    -
  • All
  • -
  • Emergency Action Plan
  • -
  • Trauma Centers
  • -
  • Burn Centers
  • -
  • Stroke Centers
  • -
  • Serious On-Field Injury
  • -
  • Catastrophic Incident
  • -
  • Adminstering Medication
  • -
  • Muscle Injuries
  • -
  • Ligament Injuries
  • -
  • Dislocations/Sublaxations
  • -
  • Fractures
  • -
+
    +
  • All
  • +
  • Emergency Action Plan
  • +
  • Trauma Centers
  • +
  • Burn Centers
  • +
  • Stroke Centers
  • +
  • Serious On-Field Injury
  • +
  • Catastrophic Incident
  • +
  • Adminstering Medication
  • +
  • Muscle Injuries
  • +
  • Ligament Injuries
  • +
  • Dislocations/Sublaxations
  • +
  • Fractures
  • +
+
diff --git a/admin-portal-frontend/src/app/VerticalNavBarStyles.tsx b/admin-portal-frontend/src/app/components/VerticalNavBarStyles.tsx similarity index 79% rename from admin-portal-frontend/src/app/VerticalNavBarStyles.tsx rename to admin-portal-frontend/src/app/components/VerticalNavBarStyles.tsx index 6f68e0b..a830e56 100644 --- a/admin-portal-frontend/src/app/VerticalNavBarStyles.tsx +++ b/admin-portal-frontend/src/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 deleted file mode 100644 index 445b9ae..0000000 Binary files a/admin-portal-frontend/src/app/icons/Home.png and /dev/null differ diff --git a/admin-portal-frontend/src/app/icons/gen principles.png b/admin-portal-frontend/src/app/icons/gen principles.png deleted file mode 100644 index 573f28b..0000000 Binary files a/admin-portal-frontend/src/app/icons/gen principles.png and /dev/null differ diff --git a/admin-portal-frontend/src/app/icons/ic_search.png b/admin-portal-frontend/src/app/icons/ic_search.png deleted file mode 100644 index ae1752a..0000000 Binary files a/admin-portal-frontend/src/app/icons/ic_search.png and /dev/null differ diff --git a/admin-portal-frontend/src/app/page.tsx b/admin-portal-frontend/src/app/page.tsx index 379452a..67d77fb 100644 --- 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 = () => {