Skip to content

Commit

Permalink
List and Manage List styling (#63)
Browse files Browse the repository at this point in the history
* List name header styling and component

* Heading bottom margin and share list styling

* List header bottom margin

* Moved colors object in theme into extend to allow use of Tailwind colors

* Delete List button styling

* Added tailwindcss-forms plugin, basic list item styling without purchase urgency pill

* Created dynamic list item urgency label as component, added hover color to palette, changed urgency return 'Kind of soon' to 'Kinda soon'

* Urgency label text styling, list item wrapping

* Adjusted responsiveness for label and delete button

* Cleaned up List view logic

* Added no listpath logic for ManageList view, match header section nesting in List and ManageList views

* List view filter styling

* Added default icon to list item names

* WIP - Style add item form

* Finish styling add item form

* Adjusted new item and filter form input widths, filter form button responsive styling

* Refactored ListItem with grid for better aesthetics, removed unneeded code from AddItem, refactored grid templates for tiny screen size into one.

* Changed all form input backgrounds to default white

---------

Co-authored-by: andiedoescode <[email protected]>
Co-authored-by: Andrea Pang <[email protected]>
  • Loading branch information
3 people authored Apr 7, 2024
1 parent e0388fa commit 4045baa
Show file tree
Hide file tree
Showing 11 changed files with 260 additions and 116 deletions.
22 changes: 22 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
"devDependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@nabla/vite-plugin-eslint": "^1.5.0",
"@tailwindcss/forms": "^0.5.7",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.4.3",
Expand Down
62 changes: 36 additions & 26 deletions src/components/AddItem.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,34 +48,44 @@ export function AddItem({ data, listPath }) {
};

return (
<section>
<form onSubmit={handleItemSubmit}>
<label htmlFor="itemName">
Item Name
<input
id="itemName"
name="itemName"
type="text"
value={newItem.itemName}
onChange={handleItemChange}
></input>
<section className="mt-8 mb-8">
<form
onSubmit={handleItemSubmit}
className="grid xs:grid-cols-addItem grid-cols-gridTiny grid-rows-2 items-center"
>
<label htmlFor="itemName" className="col-span-1">
New Item:
</label>
<label htmlFor="daysUntilNextPurchase">
Next Purchase
<select
id="daysUntilNextPurchase"
name="daysUntilNextPurchase"
value={newItem.daysUntilNextPurchase}
onChange={handleItemChange}
required
>
<option value="">Select Next Purchase Date</option>
<option value={7}>Soon</option>
<option value={14}>Kind of soon</option>
<option value={30}>Not soon</option>
</select>
<input
id="itemName"
name="itemName"
type="text"
value={newItem.itemName}
onChange={handleItemChange}
className="bg-white border-solid border-2 rounded-xl border-sage pl-2 min-h-14 mx-4 max-w-full mt-2 text-2xl col-span-1 shrink"
></input>
<button
type="submit"
className="bg-sage p-2 px-4 rounded-xl text-3xl min-h-14 mt-4 md:m-w-2xl order-last xs:order-none col-span-2 xs:col-span-1"
>
Add
</button>
<label htmlFor="daysUntilNextPurchase" className="col-span-1">
Urgency:
</label>
<button type="submit">Add Item</button>
<select
id="daysUntilNextPurchase"
name="daysUntilNextPurchase"
value={newItem.daysUntilNextPurchase}
onChange={handleItemChange}
required
className="bg-white border-solid border-2 rounded-xl border-sage pl-2 min-h-14 mx-4 max-w-full grow mt-2 text-xl xs:text-2xl"
>
<option value="">Select Urgency</option>
<option value={7}>Soon</option>
<option value={14}>Kind of soon</option>
<option value={30}>Not soon</option>
</select>
</form>
</section>
);
Expand Down
7 changes: 7 additions & 0 deletions src/components/ListHeader.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export function ListHeader({ text }) {
return (
<h2 className="flex-1 bg-sage min-h-24 text-center content-center font-bold text-4xl mb-12">
{text}
</h2>
);
}
44 changes: 27 additions & 17 deletions src/components/ListItem.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@ import { updateItem, deleteItem } from '../api/firebase.js';
import { useState, useEffect } from 'react';
import { ONE_DAY_IN_MILLISECONDS } from '../utils/dates.js';
import { purchaseUrgency } from '../utils/hooks.js';
import { FaRegTrashCan } from 'react-icons/fa6';
import { UrgencyLabel } from './UrgencyLabel.jsx';
import { RiShoppingCart2Fill } from 'react-icons/ri';

export function ListItem({ listPath, item }) {
//Box is checked on render if purchased within 24 hrs
Expand Down Expand Up @@ -46,26 +49,33 @@ export function ListItem({ listPath, item }) {
};

return (
<li className="ListItem">
<li className="ListItem bg-pale-green hover:bg-green-hover border border-dark-green min-h-14 rounded-xl text-3xl mb-2 items-center grid grid-cols-gridTiny xs:grid-cols-listItem">
<input
type="checkbox"
id={item.name}
name="purchased"
onChange={changeHandler}
checked={isChecked}
className="rounded-full border-dark-green w-8 h-8 mx-4 hover:bg-slate-100 row-span-2 xs:row-span-1"
/>
<label htmlFor={item.name}>
{item.name}
<input
type="checkbox"
id={item.name}
name="purchased"
onChange={changeHandler}
checked={isChecked}
/>
<RiShoppingCart2Fill className="inline" /> {item.name}
</label>
<div>
{purchaseUrgency(
item.dateNextPurchased,
item.dateLastPurchased[item.dateLastPurchased.length - 1],
)}
<div className="ml-auto flex items-center">
<UrgencyLabel
text={purchaseUrgency(
item.dateNextPurchased,
item.dateLastPurchased[item.dateLastPurchased.length - 1],
)}
/>
<button
type="button"
onClick={deleteHandler}
className="border border-dark-green p-1 px-3 rounded-lg mr-2 hover:bg-red-400"
>
<FaRegTrashCan aria-hidden="true" title="Delete" />
</button>
</div>
<button type="button" onClick={deleteHandler}>
Delete
</button>
</li>
);
}
32 changes: 32 additions & 0 deletions src/components/UrgencyLabel.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
export function UrgencyLabel({ text }) {
let labelColor = '';

switch (text) {
case 'Overdue':
labelColor = 'bg-red-400';
break;
case 'Soon':
labelColor = 'bg-orange-400';
break;
case 'Kinda Soon':
labelColor = 'bg-amber-300';
break;
case 'Not Soon':
labelColor = 'bg-teal-400';
break;
default:
labelColor = 'border border-dark-green';
break;
}

return (
<span
className={
'ml-auto mr-4 rounded-lg px-2 py-1 text-center uppercase text-xl ' +
labelColor
}
>
{text}
</span>
);
}
2 changes: 1 addition & 1 deletion src/utils/hooks.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export function purchaseUrgency(dateNextPurchased, lastPurchased) {
} else if (nextPurchaseDaysBetween <= 7) {
return 'Soon';
} else if (nextPurchaseDaysBetween < 30) {
return 'Kind Of Soon';
return 'Kinda Soon';
} else {
return 'Not Soon';
}
Expand Down
8 changes: 4 additions & 4 deletions src/views/Layout.jsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { Outlet, NavLink } from 'react-router-dom';
import { IoHome, IoList, IoCreate } from 'react-icons/io5';
import { auth } from '../api/config.js';

import './Layout.css';
import { auth } from '../api/config.js';
import { useAuth, SignInButton, SignOutButton } from '../api/useAuth.jsx';
import buddyLogo from '../../public/img/basket-buddy-logo.png';

Expand All @@ -14,9 +14,9 @@ export function Layout() {
'Nav-link text-eggshell border-2 rounded-full border-vanilla hover:text-sage hover:border-sage';
return (
<>
<div className="Layout">
<div className="Layout bg-eggshell">
<header
className="Layout-header flex flex-col items-center bg-eggshell font-Rubik
className="Layout-header flex flex-col items-center bg-eggshell font-Rubik
text-off-black"
>
<img className="md:w-1/3" src={buddyLogo} alt="Basket Buddy" />
Expand All @@ -29,7 +29,7 @@ export function Layout() {
<SignInButton />
)}
</header>
<main className="Layout-main">
<main className="Layout-main flex flex-col px-0 font-Rubik">
<Outlet />
</main>
<nav className="Nav bg-brown">
Expand Down
89 changes: 49 additions & 40 deletions src/views/List.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { comparePurchaseUrgency } from '../api/firebase';
import { AddItem, ListItem } from '../components';
import { ListHeader } from '../components/ListHeader.jsx';

export function List({ data, listPath }) {
const [searchTerm, setSearchTerm] = useState('');
Expand Down Expand Up @@ -31,54 +32,62 @@ export function List({ data, listPath }) {

return (
<>
{listPath ? (
<>
<h2>{listName}</h2>
<AddItem data={data} listPath={listPath} />
</>
) : null}
{data.length > 0 ? (
<section>
<form>
<label htmlFor="itemFilter">
Search for an item:
{listPath ? <ListHeader text={listName} /> : null}
<section className="mx-8 md:mx-24 flex flex-col">
{listPath ? <AddItem data={data} listPath={listPath} /> : null}
{data.length > 0 ? (
<section className="mt-8 mb-4">
<form className="flex flex-wrap items-center gap-x-6">
<label htmlFor="itemFilter" className="">
Filter:
</label>
<input
type="text"
id="itemFilter"
name="itemFilter"
value={searchTerm}
onChange={handleChange}
className="bg-white border-solid border-2 rounded-xl border-sage pl-2 min-h-14 grow max-w-full mt-2 text-2xl"
/>
</label>
{searchTerm ? <button onClick={reset}>Reset</button> : null}
</form>
</section>
) : null}
{listPath && data.length === 0 ? (
<h2>This list is currently empty!</h2>
) : null}
{!listPath ? (
<>
<h2>{listName}</h2>
<AddItem data={data} listPath={listPath} />
</>
) : null}

{!listPath ? (
<>
<h2>
You haven't selected a list yet. Click below to select a list.
</h2>
<button onClick={() => handleClick('/')}>Select a list</button>
</>
) : null}
{searchTerm ? (
<button
onClick={reset}
className="bg-red-400 rounded-xl px-2 py-1 grow min-h-14 xs:max-w-28 mt-2"
>
Reset
</button>
) : null}
</form>
</section>
) : null}
{listPath && data.length === 0 ? (
<div className="bg-pale-green border border-dark-green rounded-2xl py-8 mt-8">
<h3 className="text-center font-semibold">
This list is currently empty!
</h3>
</div>
) : null}
{!listPath ? (
<>
<ListHeader text="You haven't selected a list yet. Click below to select a list." />
<div className="flex justify-center">
<button
onClick={() => handleClick('/')}
className="border border-dark-green rounded-2xl px-4 py-2 hover:bg-pale-green"
>
Select a list
</button>
</div>
</>
) : null}

<section>
<ul>
{filteredData.map((item) => {
return <ListItem key={item.id} item={item} listPath={listPath} />;
})}
</ul>
<section>
<ul>
{filteredData.map((item) => {
return <ListItem key={item.id} item={item} listPath={listPath} />;
})}
</ul>
</section>
</section>
</>
);
Expand Down
Loading

0 comments on commit 4045baa

Please sign in to comment.