Bp 31 implement contact us (#32)

* Added design for the homepage. * Added new design for the website. * Update Navigation.module.scss * Revert "Update Navigation.module.scss" This reverts commit 1199540. * Revert "updated top bar colors" This reverts commit 67ac0c8. * Remake Summer's MeetDrBergin component * Added logos to the MeetDrBergin page. * Added some routing * Fix all routing, not aesthetic * Make routes look a bit prettier Still WIP, hyperlinks are still blue, and the "Home" text is weirdly lighter colored even though it's black like the other ones. * added ContactUs page added separate page for ContactUs, clickable link in "CONTACT US" button. Still need to fix column formatting, left column text size + spacing, and add a text box inside the Google Maps window * Google maps box contains address text box now still trying to figure out how to get the columns working properly * major restructuring is done still tweaking minor details like sizes and position * updated position of items per JIRA design ContactInfo content still present at bottom of each page * Remove tabs that are not needed * duplicate "ContactInfo" at bottom removed * changed background color for ContactUs * Can't figure out line spacing yet * all changes done aside from "Contact Us" font can't find the font corresponding to the one shown in the design image in "global.scss" * realized everything in the design for Column_Left has the same font * fixed remaining issues 1) modified "Contact Us" button format to match "Meet Dr. Bergin" button 2) added a new folder "CopyrightInfo" and split out the Copyright line into a separate file * Remove unneeded SCSS, fix text sizes * Revert CopyRightInfo component * Fix remaining spacing issues, make map smaller to align Co-authored-by: Summer Mickelsen <[email protected]> Co-authored-by: Minh Lu <[email protected]>
MinhLu12 · Sep 5, 2020 · 05fcd5d · 05fcd5d
1 parent 3beff4f
commit 05fcd5d
Show file tree

Hide file tree

Showing 8 changed files with 154 additions and 23 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
diff --git a/package.json b/package.json
@@ -36,4 +36,4 @@
       "last 1 safari version"
     ]
   }
-}
+}
diff --git a/src/App.js b/src/App.js
@@ -2,6 +2,7 @@ import React from "react";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import Home from "pages/home/Home";
 import Meetdrbergin from "pages/meetdrbergin/Meetdrbergin";
+import ContactUs from "pages/contact/ContactUs";
 import Navigation from "./components/Navigation/Navigation";
 import ContactInfo from "components/ContactInfo/ContactInfo";
 import ScrollIntoView from "components/ScrollIntoView/ScrollIntoView";
@@ -13,15 +14,20 @@ export default function App() {
                 <Navigation></Navigation>
 
                 <Switch>
-                    <Route path="/contact">Contact Page</Route>
+                    <Route path="/contact" component={ContactUs} />
                     <Route path="/meetdrbergin" component={Meetdrbergin} />
-
                     <Route path="/">
                         <Home></Home>
                     </Route>
                 </Switch>
 
-                <ContactInfo></ContactInfo>
+                <Route
+                    render={({ location }) =>
+                        location.pathname !== "/contact" ? (
+                            <ContactInfo />
+                        ) : null
+                    }
+                />
             </ScrollIntoView>
         </Router>
     );

diff --git a/src/components/ContactInfo/ContactInfo.js b/src/components/ContactInfo/ContactInfo.js
@@ -35,10 +35,11 @@ const ContactInfo = () => {
                         ></iframe>
                     </div>
                 </div>
-            </div>
 
-            <div className={cn.Copyright}>
-                © 2020 Junping Bergin PLLC, Incorporated. All Rights Reserved.
+                <div className={cn.Copyright}>
+                    © 2020 Junping Bergin PLLC, Incorporated. All Rights
+                    Reserved.
+                </div>
             </div>
         </>
     );

diff --git a/src/components/ContactInfo/ContactInfo.module.scss b/src/components/ContactInfo/ContactInfo.module.scss
@@ -1,4 +1,4 @@
-@import 'global.scss';
+@import "global.scss";
 
 .Contact_Info {
     display: flex;
@@ -18,22 +18,22 @@
     flex-basis: 33.3333%;
 }
 
-    .Column_Left {
-        justify-content: flex-end;
-    }
+.Column_Left {
+    justify-content: flex-end;
+}
 
-    .Column_Middle {
-        justify-content: center;
-    }
+.Column_Middle {
+    justify-content: center;
+}
 
-    .Column_Right {
-        justify-content: flex-start;
-    }
+.Column_Right {
+    justify-content: flex-start;
+}
 
 .Copyright {
     font-size: 14px;
     letter-spacing: 0.02857em;
-    color: $primary-text;;
+    color: $primary-text;
     text-transform: uppercase;
     background-color: $gray-background-color;
     text-align: center;
@@ -43,5 +43,4 @@
 .Bold_Header {
     font-family: Raleway-Bold;
     text-transform: uppercase;
-
-}
+}
diff --git a/src/components/Navigation/Navigation.js b/src/components/Navigation/Navigation.js
@@ -3,6 +3,7 @@ import TabDropdown from "./TabDropdown/TabDropdown";
 import cn from "./Navigation.module.scss";
 import { AppBar, Toolbar, Button } from "@material-ui/core";
 import PhoneIcon from "@material-ui/icons/Phone";
+import { Link } from 'react-router-dom'
 
 const Navigation = () => {
     return (
@@ -12,9 +13,12 @@ const Navigation = () => {
                 <div className={cn.Contact}>
                     <PhoneIcon className={cn.Phone_Icon} fontSize="small" />
                     <span className={cn.Phone_Number}>206-866-6466</span>
-                    <Button variant="contained" className={cn.Button}>
-                        Contact Us
-                    </Button>
+
+                    <Link to={"/contact"}>
+                        <Button variant="contained" className={cn.Button}>
+                            Contact Us
+                        </Button>
+                    </Link>
                 </div>
             </Toolbar>
 

diff --git a/src/pages/contact/ContactUs.js b/src/pages/contact/ContactUs.js
@@ -0,0 +1,57 @@
+import React from "react";
+import cn from "./ContactUs.module.scss";
+import classNames from "classnames/bind";
+
+const ContactUs = () => {
+    return (
+        <>
+            <div className={cn.Contact_Us}>
+                <div className={classNames(cn.Column, cn.Column_Left)}>
+                    <div>
+                        <p className={cn.BigHeader}>Contact Us</p>
+                        <p className={cn.BigText}>
+                            We'd love to hear from you!
+                        </p>
+                        <br></br>
+                        <br></br>
+                        <p className={cn.Bold_Header}>Email</p>
+                        <p>[email protected] </p>
+                        <br></br>
+                        <br></br>
+                        <p className={cn.Bold_Header}>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>
+                        <br></br>
+                        <br></br>
+                        <p className={cn.Bold_Header}>Phone Number</p>
+                        <p>206-866-6466</p>
+                        <br></br>
+                        <br></br>
+                        <p className={cn.Bold_Header}>Fax</p>
+                        <p>206-866-6465</p>
+                    </div>
+                </div>
+
+                <div className={classNames(cn.Column, cn.Column_Right)}>
+                    <div>
+                        <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"
+                            width="600"
+                            height="400"
+                            frameborder="0"
+                            style={{ border: 0 }}
+                            allowfullscreen="true"
+                            aria-hidden="false"
+                            tabindex="1"
+                            title="Bergin Prosthodontics Location"
+                        ></iframe>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default ContactUs;
diff --git a/src/pages/contact/ContactUs.module.scss b/src/pages/contact/ContactUs.module.scss
@@ -0,0 +1,49 @@
+@import "global.scss";
+
+.Contact_Us {
+    display: flex;
+    background-color: $white-background-color;
+    justify-content: center;
+    min-height: 300px;
+    color: $primary-text;
+    font-family: OpenSans-Regular;
+    font-size: 16px;
+}
+
+.Column {
+    display: flex;
+    align-items: left;
+    text-align: left;
+    line-height: 0.2;
+}
+
+.Column_Left {
+    justify-content: center;
+    max-width: 40%;
+    flex-basis: 50%;
+    margin-top: 50px;
+    margin-bottom: 50px;
+}
+
+.Column_Right {
+    justify-content: flex-start;
+    max-width: 60%;
+    flex-basis: 50%;
+    margin-top: 50px;
+    margin-bottom: 50px;
+}
+
+.BigHeader {
+    font-size: $mainheader-font-size;
+    font-family: Raleway-Regular;
+    margin-top: 22px !important;
+}
+
+.BigText {
+    font-size: $caption-font-size;
+    font-family: Raleway-Regular;
+}
+
+.Bold_Header {
+    font-family: Raleway-Bold;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -36,4 +36,4 @@ @@
           "last 1 safari version"
         ]
       }
-    }
+    }