feat: Styling React applications for beginners

src/components/contact-form.js

@@ -1,9 +1,12 @@
 import React, { useEffect } from "react";
+import { useHistory } from "react-router-dom";
 import FormInput from "./form-input";
 import useContactForm from "./use-contact-form";
 import { useGlobalStore } from "./global-state";
+import styles from "./contact-form.module.css";
 
 const ContactForm = ({ id, title, ...props }) => {
+  const history = useHistory();
   const { contacts } = useGlobalStore();
   const [formValues, dispatchForm] = useContactForm({
     name: "",
@@ -36,6 +39,7 @@ const ContactForm = ({ id, title, ...props }) => {
 
   const onDiscard = () => {
     resetForm();
+    history.push("/");
   };
 
   const onChange = (e) => {
@@ -73,7 +77,11 @@ const ContactForm = ({ id, title, ...props }) => {
           required
         />
         <button type="submit">Save contact</button>
-        <button type="button" onClick={onDiscard}>
+        <button
+          type="button"
+          className={styles.discardButton}
+          onClick={onDiscard}
+        >
           Discard
         </button>
       </form>

src/components/contact-form.module.css

@@ -0,0 +1,3 @@
+.discardButton {
+  margin-left: 10px;
+}

src/components/contact-list.js

@@ -11,7 +11,12 @@ const ContactList = () => {
 
   return (
     <React.Fragment>
-      <ol>
+      <ol
+        style={{
+          padding: 0,
+          listStyle: "none",
+        }}
+      >
         {contacts.map((contact) => {
           return <Contact key={contact.id} {...contact} />;
         })}

src/components/contact.css

@@ -0,0 +1,18 @@
+.contact {
+  border: 1px solid #eee;
+  padding: 10px;
+  border-radius: 3px;
+  margin-bottom: 10px;
+}
+.contact-name {
+  margin: 0 0 10px 0;
+}
+.contact-email {
+  margin-bottom: 10px;
+}
+.button-group {
+  margin-top: 10px;
+}
+.remove-button {
+  margin-left: 10px;
+}

src/components/contact.js

@@ -1,13 +1,14 @@
 import React from "react";
+import "./contact.css";
 import { useHistory } from "react-router-dom";
 import { useGlobalStore } from "./global-state";
 import { deleteContacts } from "../api";
 
 const ContactItem = ({ name, email, phone }) => {
   return (
     <React.Fragment>
-      <h3>{name}</h3>
-      <div>
+      <h2 className="contact-name">{name}</h2>
+      <div className="contact-email">
         <strong>{email}</strong>
       </div>
       <div>{phone}</div>
@@ -39,11 +40,15 @@ const Contact = (props) => {
   };
 
   return (
-    <li>
+    <li className="contact">
       <React.Fragment>
         <MemoizedContactItem {...props} />
-        <button onClick={onEdit}>Edit</button>
-        <button onClick={onRemove}>Remove</button>
+        <section className="button-group">
+          <button onClick={onEdit}>Edit</button>
+          <button onClick={onRemove} className="remove-button">
+            Remove
+          </button>
+        </section>
       </React.Fragment>
     </li>
   );

src/components/form-input.js

@@ -1,12 +1,16 @@
 import React from "react";
+import styles from "./form-input.module.css";
 
 const FormInput = ({ label, value, onChange, ...props }) => {
   const inputId = label.toLowerCase();
 
   return (
     <div>
-      <label htmlFor={inputId}>{label}</label>
+      <label htmlFor={inputId} className={styles.label}>
+        {label}
+      </label>
       <input
+        className={styles.input}
         id={inputId}
         name={inputId}
         value={value}

src/components/form-input.module.css

@@ -0,0 +1,11 @@
+.label {
+  font-weight: bold;
+  font-size: 14px;
+  display: block;
+  margin-bottom: 4px;
+}
+.input {
+  padding: 10px 8px;
+  margin-bottom: 10px;
+  min-width: 300px;
+}

src/components/header.js

@@ -3,11 +3,25 @@ import { Link } from "react-router-dom";
 
 const NavLinks = () => {
   return (
-    <ul>
-      <li>
+    <ul
+      style={{
+        display: "flex",
+        listStyle: "none",
+        padding: 0,
+      }}
+    >
+      <li
+        style={{
+          margin: "0 10px",
+        }}
+      >
         <Link to="/">Home</Link>
       </li>
-      <li>
+      <li
+        style={{
+          margin: "0 10px",
+        }}
+      >
         <Link to="/add">Add contact</Link>
       </li>
     </ul>
@@ -16,11 +30,33 @@ const NavLinks = () => {
 
 const Header = () => {
   return (
-    <header>
-      <h3>
-        <a href="/">Conpro</a>
+    <header
+      style={{
+        display: "flex",
+        alignItems: "center",
+        width: "100%",
+      }}
+    >
+      <h3
+        style={{
+          fontSize: "24px",
+        }}
+      >
+        <a
+          href="/"
+          style={{
+            textDecoration: "none",
+            color: "black",
+          }}
+        >
+          Conpro
+        </a>
       </h3>
-      <nav>
+      <nav
+        style={{
+          marginLeft: "auto",
+        }}
+      >
         <NavLinks />
       </nav>
     </header>

src/index.css

@@ -5,6 +5,10 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 10px 15px;
 }
 
 code {