Add CSS modules for background, buttons, etc.

package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
     "axios": "^1.3.4",
+    "classnames": "^2.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

src/App.js

@@ -2,6 +2,11 @@
 import React, { useState, useEffect, useReducer } from 'react';
 import axios from 'axios';
 
+import styles from './App.module.css';
+
+// For getting around using template literals when assigning multiple styles to a single element
+import cs from 'classnames';
+
 // ************************************************************************************************************************ //
 // CUSTOM HOOK (useSemiPersistentState) ///////////////////////////////////////////////////////////////
 // ************************************************************************************************************************ //
@@ -142,8 +147,8 @@ const App = () => {
   };
 
   return (
-    <div>
-      <h1>
+    <div className={styles.container}>
+      <h1 className={styles.headlinePrimary}>
         NewsFilt: <em>A Hacker News Stories Filter</em>
       </h1>
 
@@ -156,8 +161,6 @@ const App = () => {
         onSearchSubmit={handleSearchSubmit}
       />
 
-      <hr />
-
       {/* ************************************************************************************************************************ */}
       {/* LIST: Instantiation of <List/> Component - Draws from above filter so only shows stories that are searched */}
       {/* Added onRemoveItem below (Lesson 1-6), & isError & isLoading (Lesson 1-7), then stories.data (Lesson 1-8) */}
@@ -183,7 +186,7 @@ const SearchForm = ({
   onSearchInput,
   onSearchSubmit,
 }) => (
-  <form onSubmit={onSearchSubmit}>
+  <form onSubmit={onSearchSubmit} className={styles.searchForm}>
     {/* ************************************************************************************************************************ 
     INPUT WITH LABEL: Instantiation of <InputWithLabel/> Component  */}
     <InputWithLabel
@@ -199,7 +202,12 @@ const SearchForm = ({
     </InputWithLabel>
 
     {/* Search button */}
-    <button type="submit" disabled={!searchTerm}>
+    <button
+      type="submit"
+      disabled={!searchTerm}
+      // Uses classnames library imported above for easier multi-style assignment to a single element
+      className={cs(styles.button, styles.buttonLarge)}
+    >
       Submit
     </button>
   </form>
@@ -228,13 +236,15 @@ const InputWithLabel = ({
       // D: "... since the ref is passed to the input field’s ref attribute, its current property gives access to the element. Execute its focus programmatically as a side-effect, but only if isFocused is set AND the current property is existent"
       inputRef.current.focus();
     }
-    // Dependency array--I believe if isFocused updates, then the effect will run again (more here: https://www.w3schools.com/react/react_useeffect.asp)
+    // Dependency array--if isFocused updates, effect will run again (more here: https://www.w3schools.com/react/react_useeffect.asp)
   }, [isFocused]);
 
   return (
     // Changed from "{label}" below to "{children}" after placing "Search" in between <InputWithLabel> and a new closing </InputWithLabel> tag.
     <>
-      <label htmlFor={id}>{children}</label>
+      <label htmlFor={id} className={styles.label}>
+        {children}
+      </label>
       &nbsp;
       {/* B: Pass React useRef hook ("inputRef") to JSX-reserved ref attribute */}
       <input
@@ -247,6 +257,7 @@ const InputWithLabel = ({
         // Changed to isFocused to use as prop from above (1/24/2023 update)
         autoFocus={isFocused}
         onChange={onInputChange}
+        className={styles.input}
       />
     </>
   );
@@ -280,16 +291,21 @@ const List = ({ list, onRemoveItem }) => (
 // Added onRemoveItem prop (Lesson 1-6, 1/26/23)
 const Item = ({ item, onRemoveItem }) => {
   return (
-    <li>
-      <span>
+    <li className={styles.item}>
+      <span style={{ width: '40%' }}>
         <a href={item.url}>{item.title}</a>
       </span>
-      <span>{item.author}</span>
-      <span>{item.num_comments}</span>
-      <span>{item.points}</span>
+      <span style={{ width: '30%' }}>{item.author}</span>
+      <span style={{ width: '10%' }}>{item.num_comments}</span>
+      <span style={{ width: '10%' }}>{item.points}</span>
       {/*  Button to remove item via inline handler in button */}
-      <span>
-        <button type="button" onClick={() => onRemoveItem(item)}>
+      <span style={{ width: '10%' }}>
+        <button
+          type="button"
+          onClick={() => onRemoveItem(item)}
+          // Uses template literal syntax to add multiple CSS classes (can also use classnames library imported above, but leaving to show both)
+          className={`${styles.button} ${styles.button_small}`}
+        >
           Dismiss
         </button>
       </span>

src/App.module.css

@@ -0,0 +1,135 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+/* Built container to put around whole page */
+.container {
+  height: 100vw;
+  padding: 20px;
+
+  /* Background & other colors */
+  background: #83a4d4; /* fallback for old browsers */
+  background: linear-gradient(to left, #b6fbff, #83a4d4);
+
+  color: #171212;
+}
+
+/* Headline text formatting */
+.headlinePrimary {
+  font-size: 48px;
+  font-weight: 300;
+  letter-spacing: 2px;
+}
+
+/* Item component formatting */
+.item {
+  display: flex;
+  align-items: center;
+  padding-bottom: 5px;
+}
+
+.item > span {
+  padding: 0 5px;
+  white-space: nowrap;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.item > span > a {
+  color: inherit;
+}
+
+/* Formatting for buttons */
+.button {
+  background: transparent;
+  border: 1px solid #171212;
+  padding: 5px;
+  cursor: pointer;
+
+  transition: all 0.1s ease-in;
+}
+
+.button:hover {
+  background: #171212;
+  color: #ffffff;
+}
+
+.buttonSmall {
+  padding: 5px;
+}
+
+/* Adding margin-left for now though not in textbook */
+.buttonLarge {
+  padding: 10px;
+  margin-left: 10px;
+}
+
+/* Search form, labels & input */
+.searchForm {
+  padding: 10px 0 20px 0;
+  display: flex;
+  align-items: baseline;
+}
+
+/* Added bottom & right borders for now, even though not in textbook */
+.label {
+  border-top: 1px solid #171212;
+  border-bottom: 1px solid #171212;
+  border-left: 1px solid #171212;
+  border-right: 1px solid #171212;
+  padding-left: 5px;
+  font-size: 24px;
+}
+
+/* Added top, left, & right borders for now, even though not in textbook */
+.input {
+  border: none;
+  border-top: 1px solid #171212;
+  border-bottom: 1px solid #171212;
+  border-left: 1px solid #171212;
+  border-right: 1px solid #171212;
+  background-color: transparent;
+
+  font-size: 24px;
+}
+
+/* Below didn't work, same for padding-left */
+/* h1 {
+  margin-left: 1000px;
+} */
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

yarn.lock

@@ -3008,6 +3008,11 @@
   "resolved" "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz"
   "version" "1.2.2"
 
+"classnames@^2.3.2":
+  "integrity" "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+  "resolved" "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz"
+  "version" "2.3.2"
+
 "clean-css@^5.2.2":
   "integrity" "sha512-lCr8OHhiWCTw4v8POJovCoh4T7I9U11yVsPjMWWnnMmp9ZowCxyad1Pathle/9HjaDp+fdQKjO9fQydE6RHTZg=="
   "resolved" "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz"