Adds basic header and footer for front end (#24)

* adds basic header and footer * add
CDCgov · Oct 24, 2023 · ff0d5e4 · ff0d5e4
1 parent 4490b3b
commit ff0d5e4
Show file tree

Hide file tree

Showing 8 changed files with 167 additions and 32 deletions.
diff --git a/front-end/app/footer.tsx b/front-end/app/footer.tsx
@@ -0,0 +1,46 @@
+import Image from 'next/image'
+export default function FooterComponent() {
+  return (
+    <footer className="usa-footer">
+      <div className="usa-footer__secondary-section max-w-full bg-primary-darker">
+        <div className="grid-container usa-nav-container">
+          <div className="grid-row grid-gap">
+            <div
+              className="
+                usa-footer__logo
+                grid-row
+                mobile-lg:grid-col-8 mobile-lg:grid-gap-1
+              "
+            >
+              <div className="mobile-lg:grid-col-auto">
+                <Image
+                  src="/CDC_logo.png"
+                  className="usa-footer__logo-img"
+                  alt="CDC logo"
+                  width={62}
+                  height={36}
+                />
+              </div>
+              <div className="mobile-lg:grid-col-auto">
+                <p className=" text-base-lightest usa-footer__logo-heading">Centers for Disease Control and Prevention</p>
+              </div>
+            </div>
+            <div
+              className="
+                usa-footer__logo
+                grid-row
+                mobile-lg:grid-col-4 mobile-lg:grid-gap-1
+              "
+            >
+              <div className="mobile-lg:grid-col-auto">
+                <p className="text-base-lightest usa_footer-trademark">© 2023 CDC. All rights reserved.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+
+
+  )
+}
diff --git a/front-end/app/global.css b/front-end/app/global.css
diff --git a/front-end/app/global.scss b/front-end/app/global.scss
@@ -0,0 +1,62 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import '@trussworks/react-uswds/lib/uswds.css';
+@import '@trussworks/react-uswds/lib/index.css';
+
+.usa-button {
+    background-color: #005ea2;
+}
+
+.usa-modal__close {
+    background-color: rgba(0,0,0,0);
+}
+
+.usa-button--unstyled {
+    background-color: rgba(0,0,0,0);
+}
+
+
+@media (min-width: 64em) {
+  .usa-header--basic .usa-navbar {
+    position: relative;
+    width: 50%;
+  }
+}
+
+
+.footer-primary {
+  div{
+    background: #162E51;
+    color: white !important;
+    min-height: 84px;
+    a {
+      color: white !important;
+    }
+  }
+  .usa_footer-trademark {
+    font-family: Public Sans,sans-serif!important;
+    font-size: 14px;
+    font-weight: 300;
+    line-height: 23px;
+    letter-spacing: 0em;
+    text-align: right;
+  }
+
+}
+
+
+.hover\:text-base-lightest:hover, .text-base-lightest {
+  color: #f0f0f0 !important;
+}
+
+.usa-nav-container {
+    max-width: 88rem!important;
+}
+
+.main-body{
+  min-height: 40rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
diff --git a/front-end/app/header.tsx b/front-end/app/header.tsx
@@ -0,0 +1,15 @@
+export default function HeaderComponent() {
+  return (
+    <header className="usa-header usa-header--basic bg-primary-darker">
+      <div className="usa-nav-container max-w-full">
+        <div className="usa-navbar w-full">
+          <div className="usa-logo">
+            <em className="usa-logo__text text-base-lightest">
+              <a className="text-base-lightest" href="/" title="DIBBs Pipeline Demo Site">DIBBs Pipeline Demo Site</a>
+            </em>
+          </div>
+        </div>
+      </div>
+    </header>
+  )
+}
diff --git a/front-end/app/layout.tsx b/front-end/app/layout.tsx
@@ -1,5 +1,8 @@
+import "./global.scss"
+import Header from "./header"
+import Footer from "./footer"
 import { DataProvider } from "@/utils/DataContext"
-import "./global.css"
+
 
 export const metadata = {
   title: 'Next.js',
@@ -14,10 +17,14 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
-        <DataProvider>
-          {children}
-        </DataProvider>
-      </body>
+        <Header />
+        <div className="grid-container maxw-desktop-lg main-body">
+         <DataProvider>
+           {children}
+         </DataProvider>
+        </div>
+        <Footer />
+        </body>
     </html>
   )
 }
diff --git a/front-end/package-lock.json b/front-end/package-lock.json
diff --git a/front-end/package.json b/front-end/package.json
@@ -10,7 +10,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@trussworks/react-uswds": "^5.3.0",
+    "@trussworks/react-uswds": "^5.5.0",
     "@types/node": "20.5.0",
     "@types/react": "18.2.19",
     "@types/react-dom": "18.2.7",
@@ -22,6 +22,7 @@
     "postcss": "8.4.31",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "sass": "^1.69.4",
     "tailwindcss": "3.3.3",
     "typescript": "5.1.6"
   },

diff --git a/front-end/public/CDC_logo.png b/front-end/public/CDC_logo.png