Ui Updates

frontend/package.json

@@ -18,6 +18,7 @@
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.13.0",
     "react-scripts": "5.0.1",
+    "sass": "^1.63.6",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -43,5 +44,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.3.2"
   }
 }

frontend/src/App.js → frontend/src/App.jsx

@@ -3,6 +3,7 @@ import SearchTextList from "./components/SearchTextList";
 import PriceHistoryTable from "./components/PriceHistoryTable";
 import axios from "axios";
 import TrackedProductList from "./components/TrackedProductList";
+import "./App.scss";
 
 const URL = "http://localhost:5000";
 
@@ -67,29 +68,39 @@ function App() {
   };
 
   return (
-    <div className="main">
-      <h1>Product Search Tool</h1>
-      <form onSubmit={handleNewSearchTextSubmit}>
-        <label>Search for a new item:</label>
-        <input
-          type="text"
-          value={newSearchText}
-          onChange={handleNewSearchTextChange}
+    <main className="scrapper__container">
+      <header className="scrapper__header">
+        <h1 className="title">Product Search Tool</h1>
+      </header>
+      <section className="scrapper__section">
+        <form onSubmit={handleNewSearchTextSubmit} className="scrapper__search">
+          <div className="form__input">
+            <input
+              type="text"
+              id="search-text"
+              className="input"
+              value={newSearchText}
+              onChange={handleNewSearchTextChange}
+            />
+            <label>Search for a new item</label>
+          </div>
+          <button type="submit" className="btn">
+            Start Scraper
+          </button>
+        </form>
+        <SearchTextList
+          searchTexts={searchTexts}
+          onSearchTextClick={handleSearchTextClick}
         />
-        <button type="submit">Start Scraper</button>
-      </form>
-      <SearchTextList
-        searchTexts={searchTexts}
-        onSearchTextClick={handleSearchTextClick}
-      />
-      <TrackedProductList />
-      {showPriceHistory && (
-        <PriceHistoryTable
-          priceHistory={priceHistory}
-          onClose={handlePriceHistoryClose}
-        />
-      )}
-    </div>
+        <TrackedProductList />
+        {showPriceHistory && (
+          <PriceHistoryTable
+            priceHistory={priceHistory}
+            onClose={handlePriceHistoryClose}
+          />
+        )}
+      </section>
+    </main>
   );
 }
 

frontend/src/App.scss

@@ -0,0 +1,35 @@
+.scrapper {
+  &__container {
+    @apply container p-5 m-auto;
+  }
+  &__header {
+    @apply flex justify-between items-center;
+    .title {
+      @apply text-primary;
+    }
+  }
+
+  &__search {
+    @apply flex gap-4;
+  }
+}
+.title {
+  @apply text-3xl font-bold;
+}
+
+.form__input {
+  @apply border-2 border-primary rounded-md p-2 relative;
+  label {
+    @apply absolute top-1/2 left-2 -translate-y-1/2 bg-white px-1 transition-all duration-200 ease-in-out pointer-events-none text-gray-500;
+  }
+  input {
+    @apply w-full focus:outline-none;
+  }
+  input:focus + label,
+  input:active + label {
+    @apply -translate-y-[160%] text-primary text-sm;
+  }
+}
+.product-list {
+  @apply flex flex-col gap-4;
+}

frontend/src/components/PriceHistoryTable.jsx

@@ -1,13 +1,13 @@
 import React, { useState } from "react";
-import ModalComponent from './Modal';
+import ModalComponent from "./Modal";
 import ProductDetailsPage from "./ProductDetailsPage";
 
 function PriceHistoryTable({ priceHistory, onClose }) {
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [currentProduct, setCurrentProduct] = useState({})
+  const [currentProduct, setCurrentProduct] = useState({});
 
   const openModal = (product) => {
-    setCurrentProduct(product)
+    setCurrentProduct(product);
     setIsModalOpen(true);
   };
 
@@ -29,7 +29,7 @@ function PriceHistoryTable({ priceHistory, onClose }) {
 
   return (
     <div>
-      <h2>Price History</h2>
+      <h2 className="subtitle">Price History</h2>
       <table>
         <thead>
           <tr className="row">
@@ -47,18 +47,22 @@ function PriceHistoryTable({ priceHistory, onClose }) {
             return (
               <tr key={product.url} className="row">
                 <td>{priceData.date}</td>
-                <td ><a onClick={() => openModal(product)}>{product.name}</a></td>
+                <td>
+                  <a onClick={() => openModal(product)}>{product.name}</a>
+                </td>
                 <td>${priceData.price}</td>
                 <td style={change > 0 ? { color: "red" } : { color: "green" }}>
-                  {change >= 0 && "+" }
+                  {change >= 0 && "+"}
                   {change}%
                 </td>
               </tr>
             );
           })}
         </tbody>
       </table>
-      <button onClick={onClose}>Close</button>
+      <button onClick={onClose} className="btn">
+        Close
+      </button>
       <ModalComponent
         isOpen={isModalOpen}
         closeModal={closeModal}

frontend/src/components/ProductDetailsPage.jsx

@@ -59,7 +59,7 @@ const ProductDetailsPage = ({ product }) => {
 
   return (
     <div>
-      <h2>{name}</h2>
+      <h2 className="subtitle">{name}</h2>
       <img src={img} alt="Product" />
       <p>
         URL:{" "}

frontend/src/components/SearchTextList.jsx

@@ -1,13 +1,17 @@
-import React from 'react';
+import React from "react";
 
 function SearchTextList({ searchTexts, onSearchTextClick }) {
   return (
     <div>
       <h2>All Products</h2>
-      <ul>
+      <ul className="product-list">
         {searchTexts.map((searchText, index) => (
-          <li key={index} onClick={() => onSearchTextClick(searchText)}>
-            <button>{searchText}</button>
+          <li
+            className="product-list__item"
+            key={index}
+            onClick={() => onSearchTextClick(searchText)}
+          >
+            <button className="btn btn--chip">{searchText}</button>
           </li>
         ))}
       </ul>

frontend/src/components/TrackedProductList.jsx

@@ -60,29 +60,36 @@ const TrackedProductList = () => {
   };
 
   return (
-    <div>
+    <div className="section-wrapper">
       <h2>Tracked Products</h2>
-      <ul>
+      <ul className="tracked-products">
         {trackedProducts.map((product) => (
-          <li key={product.id}>
-            {product.name}{" "}
-            <input
-              type="checkbox"
-              onChange={() => handleToggleTrackedProduct(product.id)}
-              checked={product.tracked}
-            />
-          </li>
+          <label htmlFor={product.id}>
+            <li key={product.id} className="tracked-products__item">
+              <span>{product.name}</span>
+              <input
+                type="checkbox"
+                id={product.id}
+                onChange={() => handleToggleTrackedProduct(product.id)}
+                checked={product.tracked}
+              />
+            </li>
+          </label>
         ))}
       </ul>
 
-      <div>
-        <h3>Add Tracked Product</h3>
-        <input
-          type="text"
-          value={newTrackedProduct}
-          onChange={handleNewTrackedProductChange}
-        />
-        <button onClick={handleAddTrackedProduct}>Add</button>
+      <div className="input-button-wrapper">
+        <div className="form__input">
+          <input
+            type="text"
+            value={newTrackedProduct}
+            onChange={handleNewTrackedProductChange}
+          />
+          <label>Add Tracked Product</label>
+        </div>
+        <button onClick={handleAddTrackedProduct} className="btn">
+          Add
+        </button>
       </div>
     </div>
   );

frontend/src/index.js

@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import "./index.css";
+import "./index.scss";
 import App from "./App";
 import Modal from 'react-modal';
 

frontend/src/index.scss

@@ -0,0 +1,74 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@tailwind variants;
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
+
+.main {
+  padding: 5%;
+}
+
+.row td {
+  align-items: center;
+  justify-content: center;
+  padding: 15px;
+}
+
+th {
+  background-color: #f2f2f2;
+}
+
+tr:nth-child(even) {
+  background-color: #f2f2f2;
+}
+
+h {
+  &1 {
+    //implies h1
+    @apply text-3xl font-bold;
+  }
+  &2 {
+    //implies h2
+    @apply text-xl font-bold text-primary-sublime;
+  }
+  &3 {
+    @apply text-base font-medium text-primary-sublime;
+  }
+}
+.btn {
+  @apply px-3 py-1 font-medium bg-primary text-white rounded-md hover:bg-primary-shade focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75;
+  &--chip {
+    @apply bg-secondary hover:bg-secondary-shade;
+  }
+}
+section {
+  @apply p-5 flex flex-col gap-6;
+}
+.input-button-wrapper {
+  @apply flex gap-4;
+}
+.section-wrapper {
+  @apply flex flex-col gap-4;
+}
+.tracked-products {
+  @apply flex flex-col gap-2;
+  &__item {
+    @apply bg-green-100 w-fit p-1  pl-3 pr-4 flex justify-between items-center gap-4 text-green-950;
+    & input[type="checkbox"] {
+      @apply accent-primary-sublime;
+    }
+  }
+}

frontend/tailwind.config.js

@@ -0,0 +1,17 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{html,js}"],
+  theme: {
+    extend: {
+      colors: {
+        "primary": "#22c55e",
+        "primary-shade": "#16A34A",
+        "primary-sublime": "#21a03e",
+        "secondary": "#009688",
+        "secondary-shade": "#02766b"
+      }
+    },
+  },
+  plugins: [],
+}
+