From 566bd0b9a6051ea9bea81858f372b7828fa61e80 Mon Sep 17 00:00:00 2001 From: Maha Date: Tue, 8 Oct 2024 11:37:40 -0400 Subject: [PATCH 01/26] style: listitem name and checkbox colors --- src/components/ListItem.scss | 4 ++++ src/views/authenticated/List.scss | 7 +++++++ src/views/authenticated/List.tsx | 5 +++-- 3 files changed, 14 insertions(+), 2 deletions(-) create mode 100644 src/views/authenticated/List.scss diff --git a/src/components/ListItem.scss b/src/components/ListItem.scss index 0ec3352..7b4f304 100644 --- a/src/components/ListItem.scss +++ b/src/components/ListItem.scss @@ -1,9 +1,13 @@ +@import "../styles/_variables"; + .ListItem { align-items: baseline; display: flex; flex-direction: row; font-size: 1.2em; justify-content: space-between; + background-color: $primary-blue; + color: $primary-beige; } .ListItem-checkbox { diff --git a/src/views/authenticated/List.scss b/src/views/authenticated/List.scss new file mode 100644 index 0000000..b4b33da --- /dev/null +++ b/src/views/authenticated/List.scss @@ -0,0 +1,7 @@ +@import "../../styles/variables"; + +.ListName { + color: $primary-beige; + background-color: $primary-blue; + text-align: center; +} diff --git a/src/views/authenticated/List.tsx b/src/views/authenticated/List.tsx index 4f59426..aa64390 100644 --- a/src/views/authenticated/List.tsx +++ b/src/views/authenticated/List.tsx @@ -1,3 +1,4 @@ +import "./List.scss"; import { useParams, useNavigate } from "react-router-dom"; import { useState, useMemo } from "react"; import { ListItemCheckBox } from "../../components/ListItem"; @@ -39,7 +40,7 @@ export function List({ data: unfilteredListItems, listPath }: Props) { if (unfilteredListItems.length === 0) { return ( <> -

{listName}

+

{listName}

@@ -61,7 +62,7 @@ export function List({ data: unfilteredListItems, listPath }: Props) { // Main content when list is not empty return ( <> -

{listName}

+

{listName}

From ac390b5ea82a3f98b421d636c928e7799d3092b7 Mon Sep 17 00:00:00 2001 From: Maha Date: Wed, 9 Oct 2024 00:18:09 -0400 Subject: [PATCH 02/26] style: layout of list items --- src/components/ListItem.tsx | 44 +++++++++++++---------- src/components/forms/ItemQuantityForm.tsx | 7 ++-- src/views/authenticated/List.tsx | 2 +- 3 files changed, 31 insertions(+), 22 deletions(-) diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx index ee1a433..f1c2e0e 100644 --- a/src/components/ListItem.tsx +++ b/src/components/ListItem.tsx @@ -119,23 +119,31 @@ export function ListItemCheckBox({ item, listPath }: Props) { }; return ( -
- - x{" "} - {item.name}{" "} - - {getUrgencyStatus(item)} - - -
+ <> + {getUrgencyStatus(item)} +
+ +

{item.name}

+ + + +
+ ); } diff --git a/src/components/forms/ItemQuantityForm.tsx b/src/components/forms/ItemQuantityForm.tsx index df58b20..0b057ba 100644 --- a/src/components/forms/ItemQuantityForm.tsx +++ b/src/components/forms/ItemQuantityForm.tsx @@ -45,6 +45,7 @@ export function ItemQuantityForm({ return ( <> {edit ? ( - {" "} - + {" "} + ) : ( - + )} ); diff --git a/src/views/authenticated/List.tsx b/src/views/authenticated/List.tsx index aa64390..ad8f350 100644 --- a/src/views/authenticated/List.tsx +++ b/src/views/authenticated/List.tsx @@ -66,7 +66,7 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
-
+
{unfilteredListItems.length > 0 && ( Date: Thu, 10 Oct 2024 12:24:34 -0400 Subject: [PATCH 03/26] style: styling the list item component and layout --- src/components/FilterListInput.tsx | 2 +- src/components/ListItem.scss | 8 ++++++++ src/components/ListItem.tsx | 10 +++++----- src/views/authenticated/List.tsx | 10 +++++++--- 4 files changed, 21 insertions(+), 9 deletions(-) diff --git a/src/components/FilterListInput.tsx b/src/components/FilterListInput.tsx index bed95fa..5b7b9ba 100644 --- a/src/components/FilterListInput.tsx +++ b/src/components/FilterListInput.tsx @@ -27,7 +27,7 @@ export function FilterListInput({ return (
- Filter List: + Filter List: - {getUrgencyStatus(item)} -
+
+ {getUrgencyStatus(item)} +
-

{item.name}

+

{item.name}

- +
); } diff --git a/src/views/authenticated/List.tsx b/src/views/authenticated/List.tsx index ad8f350..6da4759 100644 --- a/src/views/authenticated/List.tsx +++ b/src/views/authenticated/List.tsx @@ -3,6 +3,7 @@ import { useParams, useNavigate } from "react-router-dom"; import { useState, useMemo } from "react"; import { ListItemCheckBox } from "../../components/ListItem"; import { FilterListInput } from "../../components/FilterListInput"; +import { ManageList } from "./ManageList"; import { ListItem, comparePurchaseUrgency } from "../../api"; import Button from "react-bootstrap/Button"; @@ -27,7 +28,9 @@ export function List({ data: unfilteredListItems, listPath }: Props) { const Header = () => { return (

- Hello from the /list page! + Shopping has never been easier. You can now view and edit shopping list + items on the go. For your ease, items are sorted by their next purchase + dates.

); }; @@ -66,21 +69,22 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
-
+
{unfilteredListItems.length > 0 && ( )} -

Want to add more items to your list?

+
{filteredListItems.map((item) => ( From fa4ebea3e9b099cd242d752026f25e8393a45c05 Mon Sep 17 00:00:00 2001 From: Maha Date: Thu, 10 Oct 2024 12:53:25 -0400 Subject: [PATCH 04/26] style: aligning filterlist form label with its form control --- src/components/FilterListInput.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/FilterListInput.tsx b/src/components/FilterListInput.tsx index 5b7b9ba..1fc8983 100644 --- a/src/components/FilterListInput.tsx +++ b/src/components/FilterListInput.tsx @@ -26,8 +26,11 @@ export function FilterListInput({ return ( - - Filter List: + + + {" "} + Filter List: + - + ); From 66405163f7c698f913149f09d9de3ef11e531273 Mon Sep 17 00:00:00 2001 From: Maha Date: Fri, 11 Oct 2024 12:11:20 -0400 Subject: [PATCH 05/26] style: font sizing and margins of list items --- src/components/ListItem.scss | 16 +++++----------- src/components/ListItem.tsx | 4 ++-- src/views/authenticated/List.scss | 7 +++++++ src/views/authenticated/List.tsx | 15 +++++++-------- 4 files changed, 21 insertions(+), 21 deletions(-) diff --git a/src/components/ListItem.scss b/src/components/ListItem.scss index c7aca25..38bbaed 100644 --- a/src/components/ListItem.scss +++ b/src/components/ListItem.scss @@ -1,27 +1,21 @@ @import "../styles/_variables"; -.ListItem { +.ListItemBox { align-items: baseline; display: flex; flex-direction: row; - font-size: 1.2em; + font-size: 1.5em; justify-content: space-between; background-color: $primary-blue; color: $primary-beige; -} - -.ListItem-checkbox { - accent-color: var(--color-accent); -} - -.ListItem-label { - margin-left: 0.2em; + border-radius: 4px; } .UrgencyStatus { display: block; background-color: $secondary-blue; color: $primary-beige; - font-size: 1.5em; + font-size: 1.25em; max-width: 50%; + border-radius: 4px; } diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx index b1eeeb2..01b75ea 100644 --- a/src/components/ListItem.tsx +++ b/src/components/ListItem.tsx @@ -121,7 +121,7 @@ export function ListItemCheckBox({ item, listPath }: Props) { return (
{getUrgencyStatus(item)} -
+
-

{item.name}

+

{item.name}

- +
); } From 348974e617b0be4ca8875789e8725e1fe40cebf0 Mon Sep 17 00:00:00 2001 From: Maha Date: Fri, 11 Oct 2024 13:10:39 -0400 Subject: [PATCH 06/26] layout: adding React col, row, container components --- src/components/ListItem.tsx | 58 ++++++++++++++++++-------------- src/views/authenticated/List.tsx | 58 ++++++++++++++++++-------------- 2 files changed, 66 insertions(+), 50 deletions(-) diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx index 01b75ea..641827c 100644 --- a/src/components/ListItem.tsx +++ b/src/components/ListItem.tsx @@ -6,6 +6,7 @@ import { moreThan24HoursPassed, getDaysBetweenDates } from "../utils"; import { ItemQuantityForm } from "./forms/ItemQuantityForm"; import Button from "react-bootstrap/Button"; import Form from "react-bootstrap/Form"; +import { Row, Col, Container } from "react-bootstrap"; interface Props { item: ListItem; @@ -119,31 +120,38 @@ export function ListItemCheckBox({ item, listPath }: Props) { }; return ( -
+ {getUrgencyStatus(item)} -
- -

{item.name}

- - - -
-
+ + + + + +

{item.name}

+ + + + + + + + + ); } diff --git a/src/views/authenticated/List.tsx b/src/views/authenticated/List.tsx index 59193c3..a47f0e9 100644 --- a/src/views/authenticated/List.tsx +++ b/src/views/authenticated/List.tsx @@ -4,6 +4,7 @@ import { useState, useMemo } from "react"; import { ListItemCheckBox } from "../../components/ListItem"; import { FilterListInput } from "../../components/FilterListInput"; import { ListItem, comparePurchaseUrgency } from "../../api"; +import { Container, Row, Col } from "react-bootstrap"; import Button from "react-bootstrap/Button"; interface Props { @@ -41,9 +42,8 @@ export function List({ data: unfilteredListItems, listPath }: Props) { // Early return if the list is empty if (unfilteredListItems.length === 0) { return ( - <> +

{listName}

-

You haven’t added any items yet. @@ -57,38 +57,46 @@ export function List({ data: unfilteredListItems, listPath }: Props) { {"Get started!"}

- + ); } // Main content when list is not empty return ( -
-

{listName}

- -
- + + +

{listName}

+
+
- {unfilteredListItems.length > 0 && ( - - )} - + + + {unfilteredListItems.length > 0 && ( + + )} + + + + +
- {filteredListItems.map((item) => ( - - ))} + + {filteredListItems.map((item) => ( + + ))} +
-
+ ); } From fff0edf6630e6be956d652f482c7e5ac97e513ac Mon Sep 17 00:00:00 2001 From: Maha Date: Sat, 12 Oct 2024 00:35:11 -0400 Subject: [PATCH 07/26] layout: adjusted grid layout to better suit list items --- package-lock.json | 9 +++ package.json | 1 + src/components/ListItem.scss | 2 + src/components/ListItem.tsx | 67 ++++++++++++----------- src/components/forms/ItemQuantityForm.tsx | 2 +- src/views/authenticated/List.scss | 7 ++- src/views/authenticated/List.tsx | 58 +++++++++----------- 7 files changed, 80 insertions(+), 66 deletions(-) diff --git a/package-lock.json b/package-lock.json index 186c080..9bcd3c1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "react-bootstrap": "^2.10.5", "react-dom": "^18.3.1", "react-hot-toast": "^2.4.1", + "react-icons": "^5.3.0", "react-router-dom": "^6.26.2" }, "devDependencies": { @@ -8985,6 +8986,14 @@ "react-dom": ">=16" } }, + "node_modules/react-icons": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz", + "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/package.json b/package.json index 7c50e44..24a73ef 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "react-bootstrap": "^2.10.5", "react-dom": "^18.3.1", "react-hot-toast": "^2.4.1", + "react-icons": "^5.3.0", "react-router-dom": "^6.26.2" }, "devDependencies": { diff --git a/src/components/ListItem.scss b/src/components/ListItem.scss index 38bbaed..6e90c3f 100644 --- a/src/components/ListItem.scss +++ b/src/components/ListItem.scss @@ -4,11 +4,13 @@ align-items: baseline; display: flex; flex-direction: row; + gap: 10px; font-size: 1.5em; justify-content: space-between; background-color: $primary-blue; color: $primary-beige; border-radius: 4px; + max-width: 100%; } .UrgencyStatus { diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx index 641827c..85aefca 100644 --- a/src/components/ListItem.tsx +++ b/src/components/ListItem.tsx @@ -6,7 +6,8 @@ import { moreThan24HoursPassed, getDaysBetweenDates } from "../utils"; import { ItemQuantityForm } from "./forms/ItemQuantityForm"; import Button from "react-bootstrap/Button"; import Form from "react-bootstrap/Form"; -import { Row, Col, Container } from "react-bootstrap"; +import { Row, Container, Col } from "react-bootstrap"; +import { MdOutlineDeleteForever } from "react-icons/md"; interface Props { item: ListItem; @@ -120,38 +121,40 @@ export function ListItemCheckBox({ item, listPath }: Props) { }; return ( - + {getUrgencyStatus(item)} - - - - - -

{item.name}

- - - - - - - - +
+ + + +

{item.name}

+ + + + + + + + + +
); } diff --git a/src/components/forms/ItemQuantityForm.tsx b/src/components/forms/ItemQuantityForm.tsx index 0b057ba..dc749d0 100644 --- a/src/components/forms/ItemQuantityForm.tsx +++ b/src/components/forms/ItemQuantityForm.tsx @@ -45,7 +45,7 @@ export function ItemQuantityForm({ return ( <> - -

{listName}

+ <> +
+

{listName}

- -
- - - {unfilteredListItems.length > 0 && ( - - )} - - - - - +
+ +
+ {unfilteredListItems.length > 0 && ( + + )} + +
-
- - {filteredListItems.map((item) => ( - - ))} - +
+ {filteredListItems.map((item) => ( + + ))}
- + ); } From 882d546eab986581e610416d03e6bf2ab31c74fb Mon Sep 17 00:00:00 2001 From: Maha Date: Sat, 12 Oct 2024 00:50:55 -0400 Subject: [PATCH 08/26] fix: list items no longer overflow their parent --- src/components/ListItem.tsx | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx index 85aefca..ab58d1c 100644 --- a/src/components/ListItem.tsx +++ b/src/components/ListItem.tsx @@ -123,9 +123,9 @@ export function ListItemCheckBox({ item, listPath }: Props) { return ( {getUrgencyStatus(item)} -
- - +
+ + {item.name} - + - - From 34cfb7baecc60feae1e55dcf3e33f564e372d496 Mon Sep 17 00:00:00 2001 From: Maha Date: Sat, 12 Oct 2024 22:53:48 -0400 Subject: [PATCH 09/26] style: imported and added react icons to itemquantity edits --- src/components/ListItem.scss | 6 +++++ src/components/ListItem.tsx | 2 +- src/components/forms/ItemQuantityForm.tsx | 30 +++++++++++++++++------ 3 files changed, 29 insertions(+), 9 deletions(-) diff --git a/src/components/ListItem.scss b/src/components/ListItem.scss index 6e90c3f..72c8d2a 100644 --- a/src/components/ListItem.scss +++ b/src/components/ListItem.scss @@ -21,3 +21,9 @@ max-width: 50%; border-radius: 4px; } + +@media (min-width: 576px) { + .EditItem { + display: flex; + } +} diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx index ab58d1c..f69b943 100644 --- a/src/components/ListItem.tsx +++ b/src/components/ListItem.tsx @@ -146,7 +146,7 @@ export function ListItemCheckBox({ item, listPath }: Props) { diff --git a/src/components/forms/ItemQuantityForm.tsx b/src/components/forms/ItemQuantityForm.tsx index dc749d0..9095a0a 100644 --- a/src/components/forms/ItemQuantityForm.tsx +++ b/src/components/forms/ItemQuantityForm.tsx @@ -3,6 +3,9 @@ import { ListItem } from "../../api"; import { toast } from "react-hot-toast"; import Button from "react-bootstrap/Button"; import Form from "react-bootstrap/Form"; +import { FaEdit } from "react-icons/fa"; +import { IoMdCheckmark } from "react-icons/io"; +import { GiCancel } from "react-icons/gi"; interface ItemQuantityFormProps { saveItemQuantity: (quantity: number) => void; @@ -56,14 +59,25 @@ export function ItemQuantityForm({ onChange={(e) => setItemQuantity(Number(e.target.value))} disabled={!edit} /> - {edit ? ( - - {" "} - - - ) : ( - - )} +
+ {edit ? ( + + {" "} + + + ) : ( + + )} +
); } From 9e37b048e6346759c5180c00382a4793b4826789 Mon Sep 17 00:00:00 2001 From: Maha Date: Sun, 13 Oct 2024 03:11:05 -0400 Subject: [PATCH 10/26] refactor: using flexbox instead of bootstrap grid for layout --- src/components/ListItem.scss | 10 ++-- src/components/ListItem.tsx | 64 ++++++++++++----------- src/components/forms/ItemQuantityForm.tsx | 8 +-- 3 files changed, 42 insertions(+), 40 deletions(-) diff --git a/src/components/ListItem.scss b/src/components/ListItem.scss index 72c8d2a..0a24823 100644 --- a/src/components/ListItem.scss +++ b/src/components/ListItem.scss @@ -2,15 +2,14 @@ .ListItemBox { align-items: baseline; - display: flex; - flex-direction: row; - gap: 10px; font-size: 1.5em; justify-content: space-between; background-color: $primary-blue; color: $primary-beige; border-radius: 4px; max-width: 100%; + overflow-wrap: break-word; + box-sizing: border-box; } .UrgencyStatus { @@ -19,11 +18,12 @@ color: $primary-beige; font-size: 1.25em; max-width: 50%; + width: 100%; border-radius: 4px; } -@media (min-width: 576px) { +@media (max-width: 576px) { .EditItem { - display: flex; + flex-direction: column; } } diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx index f69b943..d33fb26 100644 --- a/src/components/ListItem.tsx +++ b/src/components/ListItem.tsx @@ -6,7 +6,6 @@ import { moreThan24HoursPassed, getDaysBetweenDates } from "../utils"; import { ItemQuantityForm } from "./forms/ItemQuantityForm"; import Button from "react-bootstrap/Button"; import Form from "react-bootstrap/Form"; -import { Row, Container, Col } from "react-bootstrap"; import { MdOutlineDeleteForever } from "react-icons/md"; interface Props { @@ -121,36 +120,39 @@ export function ListItemCheckBox({ item, listPath }: Props) { }; return ( - - {getUrgencyStatus(item)} -
- - - -

{item.name}

- - - - - - - - - +
+ + {getUrgencyStatus(item)} + +
+
+ +

{item.name}

+
+ +
+ + + +
- +
); } diff --git a/src/components/forms/ItemQuantityForm.tsx b/src/components/forms/ItemQuantityForm.tsx index 9095a0a..c7af256 100644 --- a/src/components/forms/ItemQuantityForm.tsx +++ b/src/components/forms/ItemQuantityForm.tsx @@ -46,7 +46,7 @@ export function ItemQuantityForm({ }; return ( - <> +
{edit ? ( - + <> - + ) : ( )}
- +
); } From ead409b913d7dfef0305cdd8ec77d3928ebf7819 Mon Sep 17 00:00:00 2001 From: Maha Date: Sun, 13 Oct 2024 03:18:44 -0400 Subject: [PATCH 11/26] style: align delete button below edit button on small screen sizes --- src/components/ListItem.scss | 5 ++++- src/components/ListItem.tsx | 6 +++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/ListItem.scss b/src/components/ListItem.scss index 0a24823..c5022ff 100644 --- a/src/components/ListItem.scss +++ b/src/components/ListItem.scss @@ -8,7 +8,6 @@ color: $primary-beige; border-radius: 4px; max-width: 100%; - overflow-wrap: break-word; box-sizing: border-box; } @@ -22,6 +21,10 @@ border-radius: 4px; } +.DeleteButton { + width: fit-content; +} + @media (max-width: 576px) { .EditItem { flex-direction: column; diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx index d33fb26..755ae31 100644 --- a/src/components/ListItem.tsx +++ b/src/components/ListItem.tsx @@ -140,16 +140,16 @@ export function ListItemCheckBox({ item, listPath }: Props) {

{item.name}

-
+
From f76004b6baf045478093ffdbccf2d84fcab0303a Mon Sep 17 00:00:00 2001 From: Maha Date: Wed, 16 Oct 2024 23:21:25 -0400 Subject: [PATCH 12/26] adding additem, sharelist into list page view --- src/views/Layout.scss | 3 +- src/views/authenticated/List.scss | 5 +-- src/views/authenticated/List.tsx | 65 ++++++++++++++++++++----------- 3 files changed, 46 insertions(+), 27 deletions(-) diff --git a/src/views/Layout.scss b/src/views/Layout.scss index de8cbbd..693fd80 100644 --- a/src/views/Layout.scss +++ b/src/views/Layout.scss @@ -32,5 +32,6 @@ margin: 0 auto; padding-block: 0; padding-block-end: 6.26rem; - width: min(72ch, 100%); + //width: min(72ch, 100%); + width: 100%; } diff --git a/src/views/authenticated/List.scss b/src/views/authenticated/List.scss index 0df04f1..f186889 100644 --- a/src/views/authenticated/List.scss +++ b/src/views/authenticated/List.scss @@ -13,7 +13,6 @@ text-align: center; } -.ListContainer { - max-width: 100%; - width: fit-content; +.ListPageContainer { + width: 100%; } diff --git a/src/views/authenticated/List.tsx b/src/views/authenticated/List.tsx index eb1767f..18c2e5a 100644 --- a/src/views/authenticated/List.tsx +++ b/src/views/authenticated/List.tsx @@ -5,7 +5,9 @@ import { ListItemCheckBox } from "../../components/ListItem"; import { FilterListInput } from "../../components/FilterListInput"; import { ListItem, comparePurchaseUrgency } from "../../api"; import { Container } from "react-bootstrap"; +import { AddItemForm } from "../../components/forms/AddItemForm"; import Button from "react-bootstrap/Button"; +import ShareListForm from "../../components/forms/ShareListForm"; interface Props { data: ListItem[]; @@ -63,34 +65,51 @@ export function List({ data: unfilteredListItems, listPath }: Props) { // Main content when list is not empty return ( - <> +

{listName}

-
+
+ {/* This is the div for the filter and adding items. */} + {/* Width should be 100% */} +
+
+ {unfilteredListItems.length > 0 && ( + + )} -
- {unfilteredListItems.length > 0 && ( - - )} + +
- -
+
+ {filteredListItems.map((item) => ( + + ))} +
+
-
- {filteredListItems.map((item) => ( - - ))} -
- + {/* Width of this section should be 50%. */} +
+
+
+
+
+ +
+
+ +
+
+
+ ); } From 10a5d95a82d3a225846b29801afc0bb0b1768fc6 Mon Sep 17 00:00:00 2001 From: Maha Date: Thu, 17 Oct 2024 16:09:23 -0400 Subject: [PATCH 13/26] style: listpage layouting --- src/components/ListItem.scss | 8 ++++++++ src/components/ListItem.tsx | 2 +- src/components/forms/AddItemForm.tsx | 19 +++++++++---------- src/components/forms/ShareListForm.scss | 9 +++++++++ src/components/forms/ShareListForm.tsx | 13 +++++++++---- src/views/authenticated/List.scss | 12 ++++++++++++ src/views/authenticated/List.tsx | 25 ++++++++++++++----------- src/views/authenticated/ManageList.tsx | 9 +++++++-- 8 files changed, 69 insertions(+), 28 deletions(-) create mode 100644 src/components/forms/ShareListForm.scss diff --git a/src/components/ListItem.scss b/src/components/ListItem.scss index c5022ff..ca9b0c3 100644 --- a/src/components/ListItem.scss +++ b/src/components/ListItem.scss @@ -25,6 +25,14 @@ width: fit-content; } +.custom-borders { + border: 2px solid $secondary-blue !important; + border-radius: 4px !important; + padding: 20px; + margin-top: 20px; + position: relative; +} + @media (max-width: 576px) { .EditItem { flex-direction: column; diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx index 755ae31..6d21a8a 100644 --- a/src/components/ListItem.tsx +++ b/src/components/ListItem.tsx @@ -124,7 +124,7 @@ export function ListItemCheckBox({ item, listPath }: Props) { {getUrgencyStatus(item)} -
+
+
handleSubmit(e, listPath)}> -

New Item

+

Add Item

+ -
Item Name:
 -
-
+ +
When to buy: @@ -184,12 +183,12 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) { /> Not soon -- Within {purchaseTimelines[PurchaseTime.notSoon]} days! -
- {/**/} + +
); } diff --git a/src/components/forms/ShareListForm.scss b/src/components/forms/ShareListForm.scss new file mode 100644 index 0000000..63a632b --- /dev/null +++ b/src/components/forms/ShareListForm.scss @@ -0,0 +1,9 @@ +@import "../../styles/variables"; + +.custom-borders { + border: 2px solid $secondary-blue !important; + border-radius: 4px !important; + padding: 20px; + margin-top: 20px; + position: relative; +} diff --git a/src/components/forms/ShareListForm.tsx b/src/components/forms/ShareListForm.tsx index 6b87be5..b59f23f 100644 --- a/src/components/forms/ShareListForm.tsx +++ b/src/components/forms/ShareListForm.tsx @@ -1,10 +1,10 @@ +import "./ShareListForm.scss"; import { ChangeEvent, FormEvent, useState } from "react"; import { shareList } from "../../api"; import { getUser } from "../ProtectedRoute"; import Button from "react-bootstrap/Button"; import Form from "react-bootstrap/Form"; import { InputGroup } from "react-bootstrap"; - import toast from "react-hot-toast"; interface Props { @@ -43,8 +43,13 @@ const ShareListForm = ({ listPath }: Props) => { }; return ( -
handleInvite(e, listPath)}> - Recipient Email: + handleInvite(e, listPath)} + > + + Invite friends and family to view your list! + { aria-required />
diff --git a/src/views/authenticated/List.scss b/src/views/authenticated/List.scss index f186889..f123b89 100644 --- a/src/views/authenticated/List.scss +++ b/src/views/authenticated/List.scss @@ -16,3 +16,15 @@ .ListPageContainer { width: 100%; } + +.Add-ShareList { + flex-grow: 1; + width: 50%; +} + +.ListItemSection, +.Add-ShareList { + flex-grow: 1; /* Both sections will take up equal width */ + width: 50%; + align-items: flex-end; +} diff --git a/src/views/authenticated/List.tsx b/src/views/authenticated/List.tsx index 6591a2f..00bbaf3 100644 --- a/src/views/authenticated/List.tsx +++ b/src/views/authenticated/List.tsx @@ -30,9 +30,13 @@ export function List({ data: unfilteredListItems, listPath }: Props) { const Header = () => { return (

- For your ease, items are sorted by next purchase date. View and edit - shopping list items on the go. Mark items as purchased. Shopping has - never been easier. + Your list items are organized based on when you need to buy them. Items + that need to be purchased soonest are at the top. If two or more items + are due at the same time, they will be sorted alphabetically. If an + items purchase date has passed, it will be marked as overdue and placed + at the top of the list. Additionally, items that have not been used + recently will be labeled as inactive and moved to the bottom of your + list.

); }; @@ -68,8 +72,9 @@ export function List({ data: unfilteredListItems, listPath }: Props) {

{listName}

+
-
+
{/* This is the div for the filter and adding items. */} {/* Width should be 100% */}
@@ -81,13 +86,14 @@ export function List({ data: unfilteredListItems, listPath }: Props) { /> )} - + */}
@@ -98,14 +104,11 @@ export function List({ data: unfilteredListItems, listPath }: Props) { {/* Width of this section should be 50%. */} -
-
-
-
-
+
+
-
+
diff --git a/src/views/authenticated/ManageList.tsx b/src/views/authenticated/ManageList.tsx index 9cdd3cf..f94e895 100644 --- a/src/views/authenticated/ManageList.tsx +++ b/src/views/authenticated/ManageList.tsx @@ -11,7 +11,13 @@ export function ManageList({ listPath, data }: Props) { const Header = () => { return (

- Hello from the /manage-list page! + Your list items are organized based on when you need to buy them. Items + that need to be purchased soonest are at the top. If two or more items + are due at the same time, they will be sorted alphabetically. If an + items purchase date has passed, it will be marked as overdue and placed + at the top of the list. Additionally, items that have not been used + recently will be labeled as inactive and moved to the bottom of your + list.

); }; @@ -22,7 +28,6 @@ export function ManageList({ listPath, data }: Props) { return (
-
From ea845fbebbe56d89facc99fbbad8f03da6a23fc2 Mon Sep 17 00:00:00 2001 From: Maha Date: Thu, 17 Oct 2024 17:21:47 -0400 Subject: [PATCH 14/26] fix: mobile responsive --- src/components/forms/AddItemForm.scss | 2 +- src/views/authenticated/List.scss | 37 ++++++++++--- src/views/authenticated/List.tsx | 77 +++++++++++++++------------ 3 files changed, 73 insertions(+), 43 deletions(-) diff --git a/src/components/forms/AddItemForm.scss b/src/components/forms/AddItemForm.scss index d7e3378..ee3e1a4 100644 --- a/src/components/forms/AddItemForm.scss +++ b/src/components/forms/AddItemForm.scss @@ -15,6 +15,6 @@ position: relative; top: -40px; left: 10px; - background-color: #f3ecd3; + background-color: rgb(241, 230, 204); width: 80%; } diff --git a/src/views/authenticated/List.scss b/src/views/authenticated/List.scss index f123b89..1365274 100644 --- a/src/views/authenticated/List.scss +++ b/src/views/authenticated/List.scss @@ -9,22 +9,45 @@ max-width: 100%; } -.Header { - text-align: center; -} - .ListPageContainer { width: 100%; + display: flex; + flex-wrap: wrap; + box-sizing: border-box; } .Add-ShareList { - flex-grow: 1; - width: 50%; + flex-basis: 20%; +} + +.Share-ListForm { + flex-basis: 80%; +} + +.Add-ItemForm { + flex-basis: 80%; } .ListItemSection, .Add-ShareList { flex-grow: 1; /* Both sections will take up equal width */ - width: 50%; + flex-shrink: 1; align-items: flex-end; + flex-wrap: column; +} + +@media (max-width: 1000px) { + .ListItemSection, + .Add-ShareList { + flex-basis: 50%; + margin: auto; + align-items: flex-end; + } +} + +@media (max-width: 575px) { + .Add-ShareList { + flex-basis: 100%; /* Full width for both sections */ + flex-wrap: wrap; + } } diff --git a/src/views/authenticated/List.tsx b/src/views/authenticated/List.tsx index 00bbaf3..ad5ede1 100644 --- a/src/views/authenticated/List.tsx +++ b/src/views/authenticated/List.tsx @@ -1,5 +1,6 @@ import "./List.scss"; import { useParams, useNavigate } from "react-router-dom"; +import { useRef } from "react"; import { useState, useMemo } from "react"; import { ListItemCheckBox } from "../../components/ListItem"; import { FilterListInput } from "../../components/FilterListInput"; @@ -67,6 +68,15 @@ export function List({ data: unfilteredListItems, listPath }: Props) { ); } + const addShareListRef = useRef(null); + + // Function to handle scrolling to the Add-ShareList section + const scrollToAddShareItem = () => { + if (addShareListRef.current) { + addShareListRef.current.scrollIntoView({ behavior: "smooth" }); + } + }; + // Main content when list is not empty return ( @@ -74,45 +84,42 @@ export function List({ data: unfilteredListItems, listPath }: Props) {

{listName}

-
- {/* This is the div for the filter and adding items. */} - {/* Width should be 100% */} -
-
- {unfilteredListItems.length > 0 && ( - - )} - - {/* - */} -
+
+
+ {unfilteredListItems.length > 0 && ( + + )} -
- {filteredListItems.map((item) => ( - - ))} -
-
+ +
- {/* Width of this section should be 50%. */} -
-
- -
-
- -
+
+ {filteredListItems.map((item) => ( + + ))}
+ +
+
+ +
+
+ +
+
); } From 6cfaca237078df85c58e128595a6c8ce69caca0b Mon Sep 17 00:00:00 2001 From: Maha Date: Thu, 17 Oct 2024 17:40:32 -0400 Subject: [PATCH 15/26] refactor: scrolling back up to top of listpage view when at bottom of listpage --- src/components/forms/AddItemForm.tsx | 9 +-------- src/views/authenticated/List.tsx | 13 ++++++++++++- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/src/components/forms/AddItemForm.tsx b/src/components/forms/AddItemForm.tsx index 96fd378..bd06e48 100644 --- a/src/components/forms/AddItemForm.tsx +++ b/src/components/forms/AddItemForm.tsx @@ -1,3 +1,4 @@ +import { useRef } from "react"; import { ChangeEvent, FormEvent, useState } from "react"; import { addItem, ListItem } from "../../api"; import { validateItemName } from "../../utils"; @@ -96,13 +97,6 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) { } }; - const navigateToListPage = () => { - if (listPath) { - const listName = listPath.split("/").pop(); - navigate(`/list/${listName}`); - } - }; - return (
handleSubmit(e, listPath)}> @@ -188,7 +182,6 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) { -
); } diff --git a/src/views/authenticated/List.tsx b/src/views/authenticated/List.tsx index ad5ede1..3183e07 100644 --- a/src/views/authenticated/List.tsx +++ b/src/views/authenticated/List.tsx @@ -77,6 +77,15 @@ export function List({ data: unfilteredListItems, listPath }: Props) { } }; + const viewListRef = useRef(null); + + // Function to handle scrolling to the Add-ShareList section + const scrollToViewList = () => { + if (viewListRef.current) { + viewListRef.current.scrollIntoView({ behavior: "smooth" }); + } + }; + // Main content when list is not empty return ( @@ -102,7 +111,7 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
-
+
{filteredListItems.map((item) => ( ))} @@ -120,6 +129,8 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
+ + ); } From e1ce2a066b5df85897133387be097ccc7799b519 Mon Sep 17 00:00:00 2001 From: Maha Date: Thu, 17 Oct 2024 19:06:50 -0400 Subject: [PATCH 16/26] style: cleaning up button sizing --- src/components/FilterListInput.tsx | 2 +- src/components/forms/AddItemForm.tsx | 10 +++------- src/components/forms/ShareListForm.tsx | 2 +- src/views/authenticated/List.scss | 3 ++- src/views/authenticated/List.tsx | 14 ++++++++------ 5 files changed, 15 insertions(+), 16 deletions(-) diff --git a/src/components/FilterListInput.tsx b/src/components/FilterListInput.tsx index 1fc8983..45ca5e3 100644 --- a/src/components/FilterListInput.tsx +++ b/src/components/FilterListInput.tsx @@ -25,7 +25,7 @@ export function FilterListInput({ }; return ( - + {" "} diff --git a/src/components/forms/AddItemForm.tsx b/src/components/forms/AddItemForm.tsx index bd06e48..b71d441 100644 --- a/src/components/forms/AddItemForm.tsx +++ b/src/components/forms/AddItemForm.tsx @@ -1,11 +1,9 @@ -import { useRef } from "react"; import { ChangeEvent, FormEvent, useState } from "react"; import { addItem, ListItem } from "../../api"; import { validateItemName } from "../../utils"; import toast from "react-hot-toast"; import Button from "react-bootstrap/Button"; import Form from "react-bootstrap/Form"; -import { useNavigate } from "react-router-dom"; import "./AddItemForm.scss"; interface Props { @@ -26,8 +24,6 @@ const purchaseTimelines = { }; export function AddItemForm({ listPath, data: unfilteredListItems }: Props) { - const navigate = useNavigate(); - const [itemName, setItemName] = useState(""); const [itemNextPurchaseTimeline, setItemNextPurchaseTimeline] = useState( PurchaseTime.soon, @@ -177,11 +173,11 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) { /> Not soon -- Within {purchaseTimelines[PurchaseTime.notSoon]} days! + -
); } diff --git a/src/components/forms/ShareListForm.tsx b/src/components/forms/ShareListForm.tsx index b59f23f..0f79700 100644 --- a/src/components/forms/ShareListForm.tsx +++ b/src/components/forms/ShareListForm.tsx @@ -47,7 +47,7 @@ const ShareListForm = ({ listPath }: Props) => { className="custom-borders d-flex flex-column align-items-center mt-3" onSubmit={(e) => handleInvite(e, listPath)} > - + Invite friends and family to view your list! diff --git a/src/views/authenticated/List.scss b/src/views/authenticated/List.scss index 1365274..67ad5cb 100644 --- a/src/views/authenticated/List.scss +++ b/src/views/authenticated/List.scss @@ -17,7 +17,7 @@ } .Add-ShareList { - flex-basis: 20%; + flex-basis: 25%; } .Share-ListForm { @@ -34,6 +34,7 @@ flex-shrink: 1; align-items: flex-end; flex-wrap: column; + margin-left: 2%; } @media (max-width: 1000px) { diff --git a/src/views/authenticated/List.tsx b/src/views/authenticated/List.tsx index 3183e07..6ea0fa6 100644 --- a/src/views/authenticated/List.tsx +++ b/src/views/authenticated/List.tsx @@ -30,7 +30,7 @@ export function List({ data: unfilteredListItems, listPath }: Props) { const Header = () => { return ( -

+

Your list items are organized based on when you need to buy them. Items that need to be purchased soonest are at the top. If two or more items are due at the same time, they will be sorted alphabetically. If an @@ -51,7 +51,8 @@ export function List({ data: unfilteredListItems, listPath }: Props) { return (

{listName}

-
+
+

You haven’t added any items yet.
@@ -103,11 +104,11 @@ export function List({ data: unfilteredListItems, listPath }: Props) { )}

@@ -128,9 +129,10 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
+
- - ); } From d0a46848b64d99691031d0ef0e8916106de2ce6d Mon Sep 17 00:00:00 2001 From: Maha Date: Thu, 17 Oct 2024 20:15:38 -0400 Subject: [PATCH 17/26] style: updated urgency status to reflect urgency with color codes --- src/components/FilterListInput.tsx | 2 +- src/components/ListItem.scss | 25 +++++++++++++++++++++++++ src/components/ListItem.tsx | 10 +++++++--- src/components/forms/AddItemForm.tsx | 2 +- src/views/authenticated/List.scss | 2 +- src/views/authenticated/List.tsx | 21 ++++++++------------- 6 files changed, 43 insertions(+), 19 deletions(-) diff --git a/src/components/FilterListInput.tsx b/src/components/FilterListInput.tsx index 45ca5e3..d2d8c7d 100644 --- a/src/components/FilterListInput.tsx +++ b/src/components/FilterListInput.tsx @@ -26,7 +26,7 @@ export function FilterListInput({ return (
- + {" "} Filter List: diff --git a/src/components/ListItem.scss b/src/components/ListItem.scss index ca9b0c3..a0e9efa 100644 --- a/src/components/ListItem.scss +++ b/src/components/ListItem.scss @@ -21,6 +21,31 @@ border-radius: 4px; } +.UrgencyStatus { + // Default styles for urgency status + font-weight: bold; + + &.inactive { + color: gray; + } + + &.overdue { + color: red; + } + + &.soon { + color: orange; + } + + &.kind-of-soon { + color: yellow; + } + + &.not-soon { + color: green; + } +} + .DeleteButton { width: fit-content; } diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx index 6d21a8a..147cda1 100644 --- a/src/components/ListItem.tsx +++ b/src/components/ListItem.tsx @@ -64,6 +64,8 @@ export function ListItemCheckBox({ item, listPath }: Props) { return "kind of soon"; }; + const urgencyStatus = getUrgencyStatus(item); + const handleCheckChange = async (e: React.ChangeEvent) => { const newCheckedState = e.target.checked; @@ -120,9 +122,11 @@ export function ListItemCheckBox({ item, listPath }: Props) { }; return ( -
- - {getUrgencyStatus(item)} +
+ + {urgencyStatus}
diff --git a/src/components/forms/AddItemForm.tsx b/src/components/forms/AddItemForm.tsx index b71d441..06f032e 100644 --- a/src/components/forms/AddItemForm.tsx +++ b/src/components/forms/AddItemForm.tsx @@ -94,7 +94,7 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) { }; return ( -
+
handleSubmit(e, listPath)}>

Add Item

diff --git a/src/views/authenticated/List.scss b/src/views/authenticated/List.scss index 67ad5cb..f2f6a15 100644 --- a/src/views/authenticated/List.scss +++ b/src/views/authenticated/List.scss @@ -21,7 +21,7 @@ } .Share-ListForm { - flex-basis: 80%; + flex-basis: 50%; } .Add-ItemForm { diff --git a/src/views/authenticated/List.tsx b/src/views/authenticated/List.tsx index 6ea0fa6..eb9e42e 100644 --- a/src/views/authenticated/List.tsx +++ b/src/views/authenticated/List.tsx @@ -30,14 +30,10 @@ export function List({ data: unfilteredListItems, listPath }: Props) { const Header = () => { return ( -

- Your list items are organized based on when you need to buy them. Items - that need to be purchased soonest are at the top. If two or more items - are due at the same time, they will be sorted alphabetically. If an +

+ Your list items are organized based on when you need to buy them. If an items purchase date has passed, it will be marked as overdue and placed - at the top of the list. Additionally, items that have not been used - recently will be labeled as inactive and moved to the bottom of your - list. + at the top of the list.

); }; @@ -52,8 +48,7 @@ export function List({ data: unfilteredListItems, listPath }: Props) {

{listName}

-
-

+

You haven’t added any items yet.
Let’s get started by adding your first item! @@ -90,11 +85,11 @@ export function List({ data: unfilteredListItems, listPath }: Props) { // Main content when list is not empty return ( -
-

{listName}

-
-
+
+

{listName}

+
+
{unfilteredListItems.length > 0 && ( Date: Thu, 17 Oct 2024 20:28:44 -0400 Subject: [PATCH 18/26] style: improved visibility of filterlist text upon scrolling --- src/components/FilterListInput.tsx | 3 +-- src/components/ListItem.scss | 2 +- src/views/authenticated/List.scss | 4 ++++ src/views/authenticated/List.tsx | 2 +- 4 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/FilterListInput.tsx b/src/components/FilterListInput.tsx index d2d8c7d..407db91 100644 --- a/src/components/FilterListInput.tsx +++ b/src/components/FilterListInput.tsx @@ -28,8 +28,7 @@ export function FilterListInput({ - {" "} - Filter List: + Filter List: {listName}

-
+
{unfilteredListItems.length > 0 && ( Date: Fri, 18 Oct 2024 00:43:43 -0400 Subject: [PATCH 19/26] refactor: listpage to excluse additem form and refactor sharelist form to appear in form of modal to reduce extra space --- src/components/ListItem.scss | 2 - src/components/forms/AddItemForm.tsx | 11 +++- src/components/forms/ShareListForm.tsx | 6 ++- src/views/authenticated/List.scss | 4 +- src/views/authenticated/List.tsx | 75 +++++++++++++------------- src/views/authenticated/ManageList.tsx | 1 - 6 files changed, 55 insertions(+), 44 deletions(-) diff --git a/src/components/ListItem.scss b/src/components/ListItem.scss index 8294627..20db2d3 100644 --- a/src/components/ListItem.scss +++ b/src/components/ListItem.scss @@ -19,9 +19,7 @@ max-width: 50%; width: 80%; border-radius: 4px; -} -.UrgencyStatus { // Default styles for urgency status font-weight: bold; diff --git a/src/components/forms/AddItemForm.tsx b/src/components/forms/AddItemForm.tsx index 06f032e..848e091 100644 --- a/src/components/forms/AddItemForm.tsx +++ b/src/components/forms/AddItemForm.tsx @@ -1,4 +1,5 @@ import { ChangeEvent, FormEvent, useState } from "react"; +import { useNavigate, useParams } from "react-router-dom"; import { addItem, ListItem } from "../../api"; import { validateItemName } from "../../utils"; import toast from "react-hot-toast"; @@ -31,6 +32,9 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) { const [addedQuantity, setAddedQuantity] = useState(1); + const navigate = useNavigate(); + const listName = listPath.split("/").pop(); + const handleItemNameTextChange = (e: ChangeEvent) => { setItemName(e.target.value); }; @@ -87,6 +91,7 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) { }, }, ); + navigate(`/list/${listName}`); console.log("Quantity added from Add Item form:", addedQuantity); } catch (error) { console.error("Failed to add item:", error); @@ -94,11 +99,12 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) { }; return ( -
+
handleSubmit(e, listPath)}> -

Add Item

+

New Item

+

Item Name:
-
-
- - -
+
{unfilteredListItems.length > 0 && (
- {filteredListItems.map((item) => ( - - ))} +
+ +
+
+ {filteredListItems.map((item) => ( + + ))} +
- setShowShareModal(false)}> - - Share Your List - - - - - - - - - + From d1a41de7bd638b93a5c0af8ae27c6fddea1880a0 Mon Sep 17 00:00:00 2001 From: Maha Date: Fri, 18 Oct 2024 13:13:03 -0400 Subject: [PATCH 21/26] fix: resolve merge conflict in list page --- src/views/authenticated/List.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/views/authenticated/List.tsx b/src/views/authenticated/List.tsx index 97cbc42..137f6ba 100644 --- a/src/views/authenticated/List.tsx +++ b/src/views/authenticated/List.tsx @@ -80,9 +80,12 @@ export function List({ data: unfilteredListItems, listPath }: Props) {

{listName}

-
- -
+ +
+
+ +
+
{unfilteredListItems.length > 0 && (
-
{filteredListItems.map((item) => ( @@ -102,12 +104,10 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
- - ); } From 1a8a0e89596846ae41f7c296052956dac5136494 Mon Sep 17 00:00:00 2001 From: Maha Date: Fri, 18 Oct 2024 16:04:31 -0400 Subject: [PATCH 22/26] refactor: removing unnecessary css in list page style page --- src/views/Layout.scss | 5 ++-- src/views/authenticated/List.scss | 48 ++++++++++++------------------- src/views/authenticated/List.tsx | 1 - 3 files changed, 21 insertions(+), 33 deletions(-) diff --git a/src/views/Layout.scss b/src/views/Layout.scss index 0c873d7..b926927 100644 --- a/src/views/Layout.scss +++ b/src/views/Layout.scss @@ -20,9 +20,8 @@ margin: 0 auto; padding-block: 0; padding-block-end: 6.26rem; - //width: min(72ch, 100%); - width: 100%; + width: min(72ch, 100%); + //width: 100%; height: 100dvh; } - } diff --git a/src/views/authenticated/List.scss b/src/views/authenticated/List.scss index 28652a9..320f423 100644 --- a/src/views/authenticated/List.scss +++ b/src/views/authenticated/List.scss @@ -15,6 +15,8 @@ flex-wrap: wrap; box-sizing: border-box; flex-direction: column; + flex-grow: 1; + flex-shrink: 1; } .list-functions { @@ -22,39 +24,27 @@ z-index: 1020; } -.Add-ShareList { - flex-basis: 25%; -} +//.Share-ListForm { +//flex-basis: 50%; +//} -.Share-ListForm { - flex-basis: 50%; -} +//.Add-ItemForm { +//flex-basis: 80%; +//} -.Add-ItemForm { - flex-basis: 80%; -} +//.ListItemSection { -.ListItemSection, -.Add-ShareList { - flex-grow: 1; /* Both sections will take up equal width */ - flex-shrink: 1; - align-items: flex-end; - flex-wrap: column; - margin-left: 2%; -} +//flex-grow: 1; /* Both sections will take up equal width */ +//flex-shrink: 1; +//flex-wrap: column; -@media (max-width: 1000px) { - .ListItemSection, - .Add-ShareList { - flex-basis: 50%; - margin: auto; - align-items: flex-end; - } -} +//} -@media (max-width: 575px) { +/*@media (max-width: 1000px) { + .ListItemSection, .Add-ShareList { - flex-basis: 100%; /* Full width for both sections */ - flex-wrap: wrap; + //flex-basis: 50%; + //margin: auto; + //align-items: flex-end; } -} +} */ diff --git a/src/views/authenticated/List.tsx b/src/views/authenticated/List.tsx index 137f6ba..71b5fe7 100644 --- a/src/views/authenticated/List.tsx +++ b/src/views/authenticated/List.tsx @@ -82,7 +82,6 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
-
From f89fc80bfd56779fe59b7824b8a91bb4abd6ac51 Mon Sep 17 00:00:00 2001 From: Brianna Bland <104288486+bbland1@users.noreply.github.com> Date: Fri, 18 Oct 2024 19:47:28 -0400 Subject: [PATCH 23/26] making adjustments to use RB 1 Container on list, adjust classes on edit buttons for styling, list item classes for responsiveness (#68) --- src/components/ListItem.tsx | 9 ++++----- src/components/NavBar.scss | 6 +++--- src/components/forms/ItemQuantityForm.tsx | 13 ++++++------- src/styles/global.scss | 4 ++-- src/views/authenticated/List.tsx | 9 ++++++--- 5 files changed, 21 insertions(+), 20 deletions(-) diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx index cf6ad47..7e48c6c 100644 --- a/src/components/ListItem.tsx +++ b/src/components/ListItem.tsx @@ -122,14 +122,13 @@ export function ListItemCheckBox({ item, listPath }: Props) { }; return ( -
{urgencyStatus} -
+
-

{item.name}

+ {item.name}
-
+
{" "} - ) : ( - )}
- ); } diff --git a/src/styles/global.scss b/src/styles/global.scss index 9126035..2305c4f 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -5,6 +5,7 @@ $theme-colors: ( "secondary": $primary-blue, "info": $tertiary-blue, "dark": $secondary-blue, + "danger": #dc3545, ); $font-size-root: null; @@ -26,7 +27,6 @@ body { text-align: center; border: none; padding: 0.5rem; - width: 11rem; &:hover { background-color: $secondary-blue; @@ -34,6 +34,6 @@ body { } } -a svg { +svg { fill: $primary-beige; } diff --git a/src/views/authenticated/List.tsx b/src/views/authenticated/List.tsx index 71b5fe7..c42e19d 100644 --- a/src/views/authenticated/List.tsx +++ b/src/views/authenticated/List.tsx @@ -4,7 +4,7 @@ import { useState, useMemo, useRef } from "react"; import { ListItemCheckBox } from "../../components/ListItem"; import { FilterListInput } from "../../components/FilterListInput"; import { ListItem, comparePurchaseUrgency } from "../../api"; -import { Container } from "react-bootstrap"; +import Container from "react-bootstrap/Container"; import Button from "react-bootstrap/Button"; import ShareListForm from "../../components/forms/ShareListForm"; import { AddItemForm } from "../../components/forms/AddItemForm"; @@ -75,7 +75,7 @@ export function List({ data: unfilteredListItems, listPath }: Props) { // Main content when list is not empty return ( - +

{listName}

@@ -104,7 +104,10 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
- From cfc6a8ef3b5a3f4dc0794e6f2d6312b82a620293 Mon Sep 17 00:00:00 2001 From: Maha Date: Fri, 18 Oct 2024 20:28:54 -0400 Subject: [PATCH 24/26] fix: adjusted font-sizes and listitem inputs to be more responsive at small screen sizes --- src/components/ListItem.scss | 3 +++ src/components/ListItem.tsx | 6 +++--- src/components/forms/ItemQuantityForm.tsx | 4 ++-- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/ListItem.scss b/src/components/ListItem.scss index 20db2d3..0527427 100644 --- a/src/components/ListItem.scss +++ b/src/components/ListItem.scss @@ -60,4 +60,7 @@ .EditItem { flex-direction: column; } + .PurchaseItem { + font-size: 0.75em; + } } diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx index 7e48c6c..ea199b8 100644 --- a/src/components/ListItem.tsx +++ b/src/components/ListItem.tsx @@ -124,12 +124,12 @@ export function ListItemCheckBox({ item, listPath }: Props) { return (
{urgencyStatus}
-
+
- {item.name} + {item.name}
diff --git a/src/components/forms/ItemQuantityForm.tsx b/src/components/forms/ItemQuantityForm.tsx index c0452c8..086323e 100644 --- a/src/components/forms/ItemQuantityForm.tsx +++ b/src/components/forms/ItemQuantityForm.tsx @@ -46,9 +46,9 @@ export function ItemQuantityForm({ }; return ( -
+
Date: Fri, 18 Oct 2024 20:38:51 -0400 Subject: [PATCH 25/26] style: center view list button --- src/components/forms/ShareListForm.tsx | 9 ++++++--- src/views/authenticated/List.scss | 25 ------------------------- src/views/authenticated/List.tsx | 17 ++++++++++------- 3 files changed, 16 insertions(+), 35 deletions(-) diff --git a/src/components/forms/ShareListForm.tsx b/src/components/forms/ShareListForm.tsx index 5e01780..e279bcf 100644 --- a/src/components/forms/ShareListForm.tsx +++ b/src/components/forms/ShareListForm.tsx @@ -52,7 +52,7 @@ const ShareListForm = ({ listPath }: Props) => { className="h3 Share-ListForm text-center " htmlFor="recipient-email" > - Invite friends and family to view your list! + Invite others to view your list! { aria-required /> - diff --git a/src/views/authenticated/List.scss b/src/views/authenticated/List.scss index 320f423..da651ca 100644 --- a/src/views/authenticated/List.scss +++ b/src/views/authenticated/List.scss @@ -23,28 +23,3 @@ background-color: rgb(241, 230, 204); z-index: 1020; } - -//.Share-ListForm { -//flex-basis: 50%; -//} - -//.Add-ItemForm { -//flex-basis: 80%; -//} - -//.ListItemSection { - -//flex-grow: 1; /* Both sections will take up equal width */ -//flex-shrink: 1; -//flex-wrap: column; - -//} - -/*@media (max-width: 1000px) { - .ListItemSection, - .Add-ShareList { - //flex-basis: 50%; - //margin: auto; - //align-items: flex-end; - } -} */ diff --git a/src/views/authenticated/List.tsx b/src/views/authenticated/List.tsx index c42e19d..71e677f 100644 --- a/src/views/authenticated/List.tsx +++ b/src/views/authenticated/List.tsx @@ -103,13 +103,16 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
- - +
+ + + +
); } From e56ab5cd26e18b8ae9c4a8e8a47414ec46ca1a17 Mon Sep 17 00:00:00 2001 From: Maha Date: Fri, 18 Oct 2024 20:41:40 -0400 Subject: [PATCH 26/26] refactor: remove managelist navbar button as no longer necessart --- src/components/authenticated/AuthenticatedNavBar.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/components/authenticated/AuthenticatedNavBar.tsx b/src/components/authenticated/AuthenticatedNavBar.tsx index 78cc1b6..ea72c06 100644 --- a/src/components/authenticated/AuthenticatedNavBar.tsx +++ b/src/components/authenticated/AuthenticatedNavBar.tsx @@ -24,14 +24,7 @@ export function AuthenticatedNavBar() { Home - - Manage List - +