BP-12 (Install "Classnames" library and apply to all components) (#7)

* Add CSS Loader

* Installed Classnames

Installed Classnames and changed the syntax for components with two styles.

package.json

@@ -8,6 +8,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "classnames": "^2.2.6",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1"

src/components/ContactInfo/ContactInfo.js

@@ -1,39 +1,43 @@
 import React from 'react';
-import './ContactInfo.css';
+import cn from './ContactInfo.module.css';
+import classNames from 'classnames/bind';
 
 const ContactInfo = () => {
   return (
     <>
-      <div className="ContactInfo">
+      <div className={cn.ContactInfo}>
 
-        <div className={`ContactInfo_Column Left`}>
+        <div className={classNames(cn.Column, cn.Column_Left)}>
           <div>
-            <p>OFFICE HOURS</p>
+            <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 className={classNames(cn.Column, cn.Column_Middle)}>
           <div>
-            <p>LOCATION</p>
+            <p>Location</p>
             <p>3819 NE 45th St Suite C</p>
             <p>Seattle, WA 98105</p>
+            <hr style={{visibility:"hidden"}}/>
+            <p>Contact</p>
+            <p>206-866-6466</p>
           </div>
         </div>
 
-        <div className={`ContactInfo_Column Right`}>
+        <div className={classNames(cn.Column, cn.Column_Right)}>
           <div>
-            <p>MAP</p>
+            <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">
+      <div className ={cn.Copyright}>
          © 2020 Junping Bergin PLLC, Incorporated. All Rights Reserved.
       </div>
     </>

src/components/ContactInfo/ContactInfo.css → src/components/ContactInfo/ContactInfo.module.css

@@ -12,12 +12,12 @@
         text-transform: uppercase;
     }
 
-.ContactInfo_Column {
+.Column {
     padding: 16px;
     text-align: center;
 }
 
-    .ContactInfo_Column.Left {
+    .Column_Left {
         display: flex;
         justify-content: flex-end;
 
@@ -26,13 +26,13 @@
         flex-basis: 33.3333%;
     }
 
-    .ContactInfo_Column.Middle {
+    .Column_Middle {
         flex-grow: 0;
         max-width: 25%;
         flex-basis: 25%;
     }
 
-    .ContactInfo_Column.Right {
+    .Column_Right {
         display: flex;
         justify-content: flex-start;
 
@@ -41,7 +41,7 @@
         flex-basis: 33.3333%;
     }
 
-.ContactInfo_Copyright {
+.Copyright {
     font-size: 14px;
     letter-spacing: 0.02857em;
     color: white;

src/components/Navigation/Navigation.js

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

src/components/Navigation/Navigation.css → src/components/Navigation/Navigation.module.css

@@ -1,21 +1,21 @@
-.Navigation_Toolbar {
+.Toolbar {
     min-height: 50px !important;
     align-items: flex-start !important; 
     padding-top: 8px;
     display: flex; 
     justify-content: flex-end; 
 }
 
-.Navigation_Phone_Icon {
+.Phone_Icon {
     margin-right: 5px;
     margin-top: 8px;
 }
 
-.Navigation_Phone_Number {
+.Phone_Number {
     margin-right: 10px;
     margin-top: 7px;
 }
 
-.Navigation_Tab_Dropdown {
+.Tab_Dropdown {
     overflow: hidden !important;
 }

src/components/Navigation/TabDropdown/TabDropdown.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import "./TabDropdown.css";
+import cn from "./TabDropdown.module.css";
 import { AppBar, Paper, Tabs, Tab, Popper, MenuList, MenuItem} from "@material-ui/core";
 
 const aboutUsItems = ["Our Practice", "Meet Dr. Bergin", "Meet Our Team"];
@@ -56,7 +56,7 @@ class TabDropdown extends Component {
                 <Tab
                   key={tab.key}
                   onMouseEnter={this.showDropdown.bind(this, tab.key)}
-                  className="TabDropdown_Tab"
+                  className={cn.Tab}
                   label={tab.label}
                   aria-owns={showDropdown ? "menu-list-grow" : undefined}
                   aria-haspopup={"true"}

src/components/Navigation/TabDropdown/TabDropdown.module.css

@@ -0,0 +1,4 @@
+.Tab {
+    min-width: 73px !important;
+    color: white !important;
+}