introduce css modules

css-modules/src/App.js

@@ -1,13 +1,13 @@
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import Form from "./components/Form/Form";
 import Success from "./components/Success/Success";
-import "./App.css";
+import styles from "./App.module.css";
 
 function App() {
   return (
     <Router>
-      <div className="App">
-        <header className="App-header">
+      <div className={styles.App}>
+        <header className={styles["App-header"]}>
           <h1 className="page-header">Let's connect</h1>
           <p className="page-subtitle">Who are you looking to connect with?</p>
         </header>
@@ -24,14 +24,14 @@ function App() {
             </h2>
           </Route>
         </Switch>
-        <footer className="App-footer">
-          <h2 className="footer-title">headquarters</h2>
+        <footer className={styles["App-footer"]}>
+          <h2 className={styles["footer-title"]}>headquarters</h2>
           <address>
             500 Sansome St. #200
             <br />
             San Francisco, CA 94111
           </address>
-          <h2 className="footer-title">phone</h2>
+          <h2 className={styles["footer-title"]}>phone</h2>
           <address>888.987.8337</address>
         </footer>
       </div>

css-modules/src/components/ContentWrapper/ContentWrapper.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import "./ContentWrapper.css";
+import styles from "./ContentWrapper.module.css";
 
 ContentWrapper.propTypes = {
   className: PropTypes.string,
@@ -9,7 +9,11 @@ ContentWrapper.propTypes = {
 function ContentWrapper({ className, children }) {
   return (
     <main
-      className={className ? `content-wrapper ${className}` : "content-wrapper"}
+      className={
+        className
+          ? `${styles["content-wrapper"]} ${className}`
+          : styles["content-wrapper"]
+      }
     >
       {children}
     </main>

css-modules/src/components/ControlWithLabel/ControlWithLabel.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import "./ControlWithLabel.css";
+import styles from "./ControlWithLabel.module.css";
 
 ControlWithLabel.propTypes = {
   id: PropTypes.string.isRequired,
@@ -11,16 +11,21 @@ ControlWithLabel.propTypes = {
 };
 
 function ControlWithLabel({ id, title, invalid, required, children }) {
-  const className = required && invalid ? "control invalid" : "control";
+  const className =
+    required && invalid
+      ? `${styles.control} ${styles.invalid}`
+      : styles.control;
   return (
-    <div className="responsive-field-wrapper">
+    <div className={styles["responsive-field-wrapper"]}>
       <label htmlFor={id}>
         {title}
-        {required && <span className="required">*</span>}
+        {required && <span className={styles.required}>*</span>}
       </label>
-      <div className="control-wrapper">
+      <div className={styles["control-wrapper"]}>
         {React.cloneElement(children, { id, className })}
-        {required && invalid && <p className="help">{title} is required.</p>}
+        {required && invalid && (
+          <p className={styles.help}>{title} is required.</p>
+        )}
       </div>
     </div>
   );

css-modules/src/components/Form/Form.js

@@ -5,7 +5,7 @@ import { ReactComponent as Users } from "../../icons/users.svg";
 import { ReactComponent as Question } from "../../icons/question.svg";
 import ContentWrapper from "../ContentWrapper/ContentWrapper";
 import ControlWithLabel from "../ControlWithLabel/ControlWithLabel";
-import "./Form.css";
+import styles from "./Form.module.css";
 
 const formTypes = [
   {
@@ -126,31 +126,31 @@ function Form() {
 
   return (
     <ContentWrapper>
-      <nav className="button-nav">
-        <ul className="button-list">
+      <nav className={styles["button-nav"]}>
+        <ul className={styles["button-list"]}>
           {formTypes.map(({ type, Icon, title }) => {
             return (
-              <li className="button-list-item" key={type}>
+              <li className={styles["button-list-item"]} key={type}>
                 <button
                   type="button"
                   className={
                     formType === type
-                      ? "button-list-button active"
-                      : "button-list-button"
+                      ? `${styles["button-list-button"]} ${styles.active}`
+                      : styles["button-list-button"]
                   }
                   onClick={() => {
                     dispatch({ type: "setFormType", value: type });
                   }}
                 >
-                  <Icon className="button-list-button-icon" />
+                  <Icon className={styles["button-list-button-icon"]} />
                   {title}
                 </button>
               </li>
             );
           })}
         </ul>
       </nav>
-      <form className="form" onSubmit={handleSubmit}>
+      <form className={styles.form} onSubmit={handleSubmit}>
         <ControlWithLabel
           id="name"
           title="Name"
@@ -236,8 +236,8 @@ function Form() {
             onChange={handleChange}
           />
         </ControlWithLabel>
-        <p className="submit-button-wrapper">
-          <button className="button" type="submit">
+        <p className={styles["submit-button-wrapper"]}>
+          <button className={styles.button} type="submit">
             Get in touch
           </button>
         </p>

css-modules/src/components/Success/Success.js

@@ -1,13 +1,13 @@
 import React from "react";
 import { ReactComponent as Trophy } from "../../icons/trophy.svg";
 import ContentWrapper from "../ContentWrapper/ContentWrapper";
-import "./Success.css";
+import styles from "./Success.module.css";
 
-function Success(props) {
+function Success() {
   return (
-    <ContentWrapper className="success-wrapper">
-      <h2 className="success-title">Success!</h2>
-      <p className="success-icon">
+    <ContentWrapper className={styles["success-wrapper"]}>
+      <h2 className={styles["success-title"]}>Success!</h2>
+      <p className={styles["success-icon"]}>
         <Trophy />
       </p>
     </ContentWrapper>

css-modules/src/components/Success/Success.module.css

@@ -0,0 +1,16 @@
+.success-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.success-title {
+  color: green;
+}
+
+.success-icon svg {
+  color: green;
+  width: 64px;
+  height: 64px;
+}