BP-8 (Create contact info component) (#6)

* Add draft of structure of contact component

* Improve CSS

* Use box instead

* Tidy up CSS a bit

* Change text for tab dropdowns

* Fix theming to apply correctly to all components in App

* Tidy up ContactInfo and replace some material UI with div

* Replace parent grid with div

* Replace all Grids with div

* Refactor CSS in ContactInfo

* Finish refactor of HTML & CSS of ContactInfo component

* Add copyright and map

* Add title to map

.gitignore

@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+package-lock.json

src/App.js

@@ -1,6 +1,13 @@
 import React from "react";
 import Navigation from "./components/Navigation/Navigation";
+import ContactInfo from "./components/ContactInfo/ContactInfo";
 
 export default function App() {
-  return <Navigation></Navigation>
+  return (
+    <>
+      <Navigation></Navigation>
+      <div style={{minHeight: "1000px"}}></div>
+      <ContactInfo></ContactInfo>
+    </>
+  )
 }

src/components/ContactInfo/ContactInfo.css

@@ -0,0 +1,51 @@
+.ContactInfo {
+    display: flex;
+    background-color: #67697C;
+    justify-content: center;
+}
+
+    .ContactInfo p {
+        line-height: 10px;
+        font-size: 14px;
+        letter-spacing: 0.02857em;
+        color: white;
+        text-transform: uppercase;
+    }
+
+.ContactInfo_Column {
+    padding: 16px;
+    text-align: center;
+}
+
+    .ContactInfo_Column.Left {
+        display: flex;
+        justify-content: flex-end;
+
+        flex-grow: 0;
+        max-width: 33.3333%;
+        flex-basis: 33.3333%;
+    }
+
+    .ContactInfo_Column.Middle {
+        flex-grow: 0;
+        max-width: 25%;
+        flex-basis: 25%;
+    }
+
+    .ContactInfo_Column.Right {
+        display: flex;
+        justify-content: flex-start;
+
+        flex-grow: 0;
+        max-width: 33.3333%;
+        flex-basis: 33.3333%;
+    }
+
+.ContactInfo_Copyright {
+    font-size: 14px;
+    letter-spacing: 0.02857em;
+    color: white;
+    text-transform: uppercase;
+    background-color: #67697C;
+    text-align: center;
+}

src/components/ContactInfo/ContactInfo.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import './ContactInfo.css';
+
+const ContactInfo = () => {
+  return (
+    <>
+      <div className="ContactInfo">
+
+        <div className={`ContactInfo_Column Left`}>
+          <div>
+            <p>OFFICE HOURS</p>
+            <p>Monday 8 AM - 5 PM</p>
+            <p>Tuesday 8 AM - 5 PM</p>
+            <p>Wednesday 8 AM - 5 PM</p>
+            <p>Thursday 8 AM - 12 PM</p>
+          </div>
+        </div>
+
+        <div className={`ContactInfo_Column Middle`}>
+          <div>
+            <p>LOCATION</p>
+            <p>3819 NE 45th St Suite C</p>
+            <p>Seattle, WA 98105</p>
+          </div>
+        </div>
+
+        <div className={`ContactInfo_Column Right`}>
+          <div>
+            <p>MAP</p>
+            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2687.2076114399465!2d-122.2885698841777!3d47.660963092213805!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5490149cab95f4f7%3A0xfbe3c5ac7551bbd7!2sBergin%20Prosthodontics!5e0!3m2!1sen!2sus!4v1590447131151!5m2!1sen!2sus" title="Bergin Prosthodontics Location"></iframe>
+          </div>
+        </div>
+
+      </div>
+
+      <div className ="ContactInfo_Copyright">
+         © 2020 Junping Bergin PLLC, Incorporated. All Rights Reserved.
+      </div>
+    </>
+  );
+}
+
+export default ContactInfo;

src/components/Navigation/Navigation.js

@@ -1,28 +1,24 @@
 import React from "react";
 import TabDropdown from "./TabDropdown/TabDropdown";
 import "./Navigation.css";
-import { ThemeProvider } from '@material-ui/styles';
-import Theme from "../../Theme";
 import { AppBar, Toolbar, Button } from "@material-ui/core";
 import PhoneIcon from "@material-ui/icons/Phone";
 
 const Navigation = () => {
   return (
-    <ThemeProvider theme={Theme}>
-      <AppBar position="static">
+    <AppBar position="static">
 
-        <Toolbar className="Navigation_Toolbar">
-          <PhoneIcon className = "Navigation_Phone_Icon" fontSize="small"/>
-          <p className="Navigation_Phone_Number">206-866-6466</p>
-          <Button variant="contained" color="secondary">Contact Us</Button>
-        </Toolbar>
+      <Toolbar className="Navigation_Toolbar">
+        <PhoneIcon className = "Navigation_Phone_Icon" fontSize="small"/>
+        <p className="Navigation_Phone_Number">206-866-6466</p>
+        <Button variant="contained" color="secondary">Contact Us</Button>
+      </Toolbar>
 
-        <div className="Navigation_Tab_Dropdown">
-          <TabDropdown></TabDropdown>  
-        </div>
-
-      </AppBar>
-    </ThemeProvider>
+      <div className="Navigation_Tab_Dropdown">
+        <TabDropdown></TabDropdown>  
+      </div>
+
+    </AppBar>
   )
 }
 

src/components/Navigation/TabDropdown/TabDropdown.js

@@ -2,17 +2,16 @@ import React, { Component } from "react";
 import "./TabDropdown.css";
 import { AppBar, Paper, Tabs, Tab, Popper, MenuList, MenuItem} from "@material-ui/core";
 
-const homeItems = ["Home 1", "Home 2", "Home 3"];
-const aboutUsItems = ["AboutUs 1", "AboutUs 2", "AboutUs 3"];
-const forPatientsItems = ["ForPatients 1", "ForPatients 2", "ForPatients 3"];
-const servicesItems = ["Services 1", "Services 2", "Services 3"];
-const forDoctorsItems = ["ForDoctors 1", "ForDoctors 2", "ForDoctors 3"];
+const aboutUsItems = ["Our Practice", "Meet Dr. Bergin", "Meet Our Team"];
+const forPatientsItems = ["Patient Forms", "Financial Policy", "Insurance"];
+const servicesItems = ["Cosmetic Dentistry", "Restorative Denstistry", "Implant Prosthodontics", "Removable Prosthodontics"];
+const forDoctorsItems = ["Referring Dentists", "Publications"];
 
 const tabs = [
-  { key: 0, pathName: "/test", label: "Home", items: homeItems },
+  { key: 0, pathName: "/test", label: "Home", items: [] },
   { key: 1, pathName: "/test", label: "About Us", items: aboutUsItems },
-  { key: 2, pathName: "/test", label: "For Patients", items: forPatientsItems },
-  { key: 3, pathName: "/test", label: "Services", items: servicesItems },
+  { key: 2, pathName: "/test", label: "Services", items: servicesItems },
+  { key: 3, pathName: "/test", label: "For Patients", items: forPatientsItems },
   { key: 4, pathName: "/test", label: "Gallery", items: [] },
   { key: 5, pathName: "/test", label: "For Doctors", items: forDoctorsItems }
 ];

src/index.js

@@ -1,11 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
+import theme from './Theme';
 import App from './App';
 
+import { ThemeProvider } from '@material-ui/core/styles';
+
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <ThemeProvider theme={theme}>
+      <App />
+    </ThemeProvider>
   </React.StrictMode>,
   document.getElementById('root')
 );