BP-23 (Standardize CSS Usage) (#11)

* Download SCSS, fix project path for SCSS files, update ContactInfo and WIP for Navigation

* Finish refactoring SCSS for Navigation and TabDropdown, remove Theme JS from Material UI

* Address Summer's feedback to rename and use reusable SCSS

.env

@@ -0,0 +1 @@
+SASS_PATH=src/

package.json

@@ -9,6 +9,7 @@
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "classnames": "^2.2.6",
+    "node-sass": "^4.14.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1"

src/components/ContactInfo/ContactInfo.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import cn from './ContactInfo.module.css';
+import cn from './ContactInfo.module.scss';
 import classNames from 'classnames/bind';
 
 const ContactInfo = () => {

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

@@ -1,14 +1,16 @@
+@import 'scss/global.scss';
+
 .ContactInfo {
     display: flex;
-    background-color: #67697C;
+    background-color: $primary-background-color;
     justify-content: center;
 }
 
     .ContactInfo p {
         line-height: 10px;
         font-size: 14px;
         letter-spacing: 0.02857em;
-        color: white;
+        color: $primary-text;;
         text-transform: uppercase;
     }
 
@@ -44,8 +46,8 @@
 .Copyright {
     font-size: 14px;
     letter-spacing: 0.02857em;
-    color: white;
+    color: $primary-text;;
     text-transform: uppercase;
-    background-color: #67697C;
+    background-color: $primary-background-color;
     text-align: center;
 }

src/components/Navigation/Navigation.js

@@ -1,17 +1,17 @@
 import React from "react";
 import TabDropdown from "./TabDropdown/TabDropdown";
-import cn from  "./Navigation.module.css";
+import cn from  "./Navigation.module.scss";
 import { AppBar, Toolbar, Button } from "@material-ui/core";
 import PhoneIcon from "@material-ui/icons/Phone";
 
 const Navigation = () => {
   return (
-    <AppBar position="static">
+    <AppBar position="static" className={cn.AppBar}>
 
       <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>
+        <Button variant="contained" className={cn.Button}>Contact Us</Button>
       </Toolbar>
 
       <div className={cn.Tab_Dropdown}>

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

@@ -1,3 +1,9 @@
+@import 'scss/global.scss';
+
+.AppBar {
+    background-color: $primary-background-color;
+}
+
 .Toolbar {
     min-height: 50px !important;
     align-items: flex-start !important; 
@@ -18,4 +24,9 @@
 
 .Tab_Dropdown {
     overflow: hidden !important;
-}
+}
+
+.Button {
+    background-color: $secondary-background-color;
+    color: $primary-text;
+}

src/components/Navigation/TabDropdown/TabDropdown.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import cn from "./TabDropdown.module.css";
+import cn from "./TabDropdown.module.scss";
 import { AppBar, Paper, Tabs, Tab, Popper, MenuList, MenuItem} from "@material-ui/core";
 
 const aboutUsItems = ["Our Practice", "Meet Dr. Bergin", "Meet Our Team"];
@@ -45,11 +45,11 @@ class TabDropdown extends Component {
 
     return (
       <div onMouseLeave={this.hideDropdown}>
-        <AppBar position="static">
+        <AppBar position="static" className={cn.AppBar}>
 
             <Tabs
               value={tabIndex}
-              indicatorColor="primary"
+              classes={{indicator: cn.TabUnderline}}
               textColor="primary"
               centered>
               {tabs.map((tab) => (

src/components/Navigation/TabDropdown/TabDropdown.module.scss

@@ -0,0 +1,14 @@
+@import 'scss/global.scss';
+
+.TabUnderline {
+    background-color: transparent !important;
+}
+
+.AppBar {
+    background-color: $primary-background-color;
+}
+
+.Tab {
+    min-width: 73px !important;
+    color: $primary-text;
+}

src/index.js

@@ -1,16 +1,11 @@
 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>
-    <ThemeProvider theme={theme}>
       <App />
-    </ThemeProvider>
   </React.StrictMode>,
   document.getElementById('root')
 );

src/scss/global.scss

@@ -0,0 +1,6 @@
+// Background colors
+$primary-background-color: #67697C !important;
+$secondary-background-color: #C6878F !important;
+
+// Texts
+$primary-text: white !important;