From 0f1f25b48166ae4eb3eff1c37c06c1984708918a Mon Sep 17 00:00:00 2001 From: Paige Date: Fri, 5 Apr 2024 14:42:09 -0500 Subject: [PATCH 01/10] added color styling to search input clear btn --- src/custom-styles.css | 24 ++++++++++++++++++++++++ src/views/List.jsx | 5 +++-- 2 files changed, 27 insertions(+), 2 deletions(-) diff --git a/src/custom-styles.css b/src/custom-styles.css index 9453e93..22812ec 100644 --- a/src/custom-styles.css +++ b/src/custom-styles.css @@ -21,6 +21,12 @@ .Nav { background-color: var(--color-accent-bg-dark); } + .cross-icon-btn { + background-color: var(--color-accent-bg-dark); + } + .cross-icon { + color: var(--color-text-dark); + } } } @@ -41,6 +47,12 @@ .Nav { background-color: var(--color-accent-bg-light); } + .cross-icon-btn { + background-color: var(--color-accent-bg-light); + } + .cross-icon { + color: var(--color-text-light); + } } } @@ -60,6 +72,12 @@ .Nav { background-color: var(--color-accent-bg-dark); } + .cross-icon-btn { + background-color: var(--color-accent-bg-dark); + } + .cross-icon { + color: var(--color-text-dark); + } } .light, @@ -78,6 +96,12 @@ .Nav { background-color: var(--color-accent-bg-light); } + .cross-icon-btn { + background-color: var(--color-accent-bg-light); + } + .cross-icon { + color: var(--color-text-light); + } } button { diff --git a/src/views/List.jsx b/src/views/List.jsx index 2d93dc3..6bb992d 100644 --- a/src/views/List.jsx +++ b/src/views/List.jsx @@ -74,13 +74,14 @@ export function List({ listPath, data, listName, userIdFromPath }) { {searchItem && ( setSearchItem('')} > - + )} From 64dfd1dbf4b326a400b9f8f275de7deae6394c84 Mon Sep 17 00:00:00 2001 From: Paige Date: Fri, 5 Apr 2024 15:36:17 -0500 Subject: [PATCH 02/10] styled owner message p tag for dark and light mode --- src/components/ListOwnerMessage.css | 5 +++-- src/custom-styles.css | 16 ++++++++++++++++ src/views/Layout.css | 2 +- 3 files changed, 20 insertions(+), 3 deletions(-) diff --git a/src/components/ListOwnerMessage.css b/src/components/ListOwnerMessage.css index 3721037..7f51ca2 100644 --- a/src/components/ListOwnerMessage.css +++ b/src/components/ListOwnerMessage.css @@ -1,8 +1,9 @@ .owner-message { position: fixed; width: min(72ch, 100%); - bottom: 5.18rem; + bottom: 7.38rem; padding: 0.4em 0.4em; margin: 0 auto; - background-color: white; + /* background-color: white; */ + /* z-index: 1; */ } diff --git a/src/custom-styles.css b/src/custom-styles.css index 22812ec..f179fe1 100644 --- a/src/custom-styles.css +++ b/src/custom-styles.css @@ -27,6 +27,10 @@ .cross-icon { color: var(--color-text-dark); } + .owner-message { + background-color: hsla(000, 0.5%, 20%, 1); + color: var(--color-text-dark); + } } } @@ -53,6 +57,10 @@ .cross-icon { color: var(--color-text-light); } + .owner-message { + background-color: white; + color: var(--color-text-light); + } } } @@ -78,6 +86,10 @@ .cross-icon { color: var(--color-text-dark); } + .owner-message { + background-color: hsla(000, 0.5%, 20%, 1); + color: var(--color-text-dark); + } } .light, @@ -102,6 +114,10 @@ .cross-icon { color: var(--color-text-light); } + .owner-message { + background-color: white; + color: var(--color-text-light); + } } button { diff --git a/src/views/Layout.css b/src/views/Layout.css index a176c53..4cd5942 100644 --- a/src/views/Layout.css +++ b/src/views/Layout.css @@ -41,7 +41,7 @@ .Layout-main { margin: 0 auto; padding-block: 0; - padding-block-end: 6.26rem; + padding-block-end: 9.4rem; width: min(72ch, 100%); } From 1bab7b33550c2e9f6354e20cf1f11a1f291603f8 Mon Sep 17 00:00:00 2001 From: Paige Date: Fri, 5 Apr 2024 16:02:12 -0500 Subject: [PATCH 03/10] styled home page logo links for dark and light mode --- src/assets/StackedLogo.jsx | 5 ++++- src/custom-styles.css | 18 ++++++++++++++++++ src/views/Layout.css | 4 ++-- 3 files changed, 24 insertions(+), 3 deletions(-) diff --git a/src/assets/StackedLogo.jsx b/src/assets/StackedLogo.jsx index ace0341..17dbc19 100644 --- a/src/assets/StackedLogo.jsx +++ b/src/assets/StackedLogo.jsx @@ -1,4 +1,7 @@ +import { useContext } from 'react'; +import { DarkModeContext } from '../providers/DarkModeProvider'; export default function StackedLogo() { + const { isDarkMode } = useContext(DarkModeContext); return (
- + diff --git a/src/custom-styles.css b/src/custom-styles.css index f179fe1..5a2effa 100644 --- a/src/custom-styles.css +++ b/src/custom-styles.css @@ -31,6 +31,12 @@ background-color: hsla(000, 0.5%, 20%, 1); color: var(--color-text-dark); } + .home-links > a { + color: var(--color-text-dark); + } + .logo-a > a { + background-color: var(--color-text-dark); + } } } @@ -61,6 +67,9 @@ background-color: white; color: var(--color-text-light); } + .home-links > a { + color: var(--color-text-light); + } } } @@ -90,6 +99,12 @@ background-color: hsla(000, 0.5%, 20%, 1); color: var(--color-text-dark); } + .home-links > a { + color: var(--color-text-dark); + } + .logo-a > a { + background-color: var(--color-text-dark); + } } .light, @@ -118,6 +133,9 @@ background-color: white; color: var(--color-text-light); } + .home-links > a { + color: var(--color-text-light); + } } button { diff --git a/src/views/Layout.css b/src/views/Layout.css index 4cd5942..10c3ccd 100644 --- a/src/views/Layout.css +++ b/src/views/Layout.css @@ -51,7 +51,7 @@ align-items: center; justify-content: flex-end; position: fixed; - bottom: 8.18em; + bottom: 4.6em; left: 0; padding: 0.4em 0.4em; } @@ -66,7 +66,7 @@ .repo-icon { display: flex; font-size: 2em; - background-color: var(--color-bg); + /* background-color: var(--color-bg); */ } .logo-a { From fc049b6d23f6a236845505fd3652443731a1681e Mon Sep 17 00:00:00 2001 From: Paige Date: Fri, 5 Apr 2024 16:23:43 -0500 Subject: [PATCH 04/10] styled position of toggle and sign in/out button --- src/views/Layout.css | 5 ++++- src/views/Layout.jsx | 18 ++++++++++++------ 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/src/views/Layout.css b/src/views/Layout.css index 10c3ccd..0603760 100644 --- a/src/views/Layout.css +++ b/src/views/Layout.css @@ -19,13 +19,16 @@ .Layout-header { background-color: var(--color-bg); - padding-bottom: 0.5rem; + padding: 1em; padding-top: max(env(safe-area-inset-top), 1rem); text-align: center; + display: flex; + flex-direction: column; } .Layout-header > h1 { margin: 0; + padding: 0.5em; } .sign-in { diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx index f488a2a..ad1f9c1 100644 --- a/src/views/Layout.jsx +++ b/src/views/Layout.jsx @@ -19,18 +19,24 @@ export function Layout() { <>
-
- {!!user ? : } -
-

Smart shopping list

- +
- +
+ {!!user ? : } +
+
+

Smart Shop

From 6d79f91daaa6dbd2437e9bbf9543cdd9ae581f40 Mon Sep 17 00:00:00 2001 From: Paige Date: Fri, 5 Apr 2024 16:41:30 -0500 Subject: [PATCH 05/10] swapped light and dark accent colors globally --- src/components/ListItem.css | 4 +-- src/components/SingleList.css | 4 +-- src/custom-styles.css | 48 ++++++++++++++++++++++++++++++----- src/index.css | 4 +-- 4 files changed, 48 insertions(+), 12 deletions(-) diff --git a/src/components/ListItem.css b/src/components/ListItem.css index 56448ca..0ace1d7 100644 --- a/src/components/ListItem.css +++ b/src/components/ListItem.css @@ -13,7 +13,7 @@ align-items: center; } -.ListItem > li:hover { +/* .ListItem > li:hover { background-color: hsla(220, 13%, 98%, 0.25); } @@ -21,7 +21,7 @@ .ListItem > li:hover { background-color: hsla(220, 13%, 25%, 0.25); } -} +} */ .ListItem-checkbox { accent-color: var(--color-accent); diff --git a/src/components/SingleList.css b/src/components/SingleList.css index a72b04b..47ba61d 100644 --- a/src/components/SingleList.css +++ b/src/components/SingleList.css @@ -18,7 +18,7 @@ margin: auto; } -.SingleList > li:hover { +/* .SingleList > li:hover { background-color: hsla(220, 13%, 98%, 0.25); } @@ -26,7 +26,7 @@ .SingleList > li:hover { background-color: hsla(220, 13%, 25%, 0.25); } -} +} */ .list-link { margin-left: 1em; diff --git a/src/custom-styles.css b/src/custom-styles.css index 5a2effa..e3e3fb7 100644 --- a/src/custom-styles.css +++ b/src/custom-styles.css @@ -12,6 +12,7 @@ button.custom-button { background-color: var(--color-accent-bg-dark); + color: var(--color-text-light); } button.custom-button:hover { @@ -20,12 +21,13 @@ .Nav { background-color: var(--color-accent-bg-dark); + color: var(--color-text-light); } .cross-icon-btn { background-color: var(--color-accent-bg-dark); } .cross-icon { - color: var(--color-text-dark); + color: var(--color-text-light); } .owner-message { background-color: hsla(000, 0.5%, 20%, 1); @@ -37,6 +39,18 @@ .logo-a > a { background-color: var(--color-text-dark); } + .SingleList > li:hover { + background-color: hsla(220, 13%, 98%, 0.25); + } + .SingleList > li { + border-bottom: 0.5px solid var(); + } + .ListItem > li:hover { + background-color: hsla(220, 13%, 98%, 0.25); + } + .ListItem > li { + border-bottom: 0.5px solid var(); + } } } @@ -47,7 +61,7 @@ button.custom-button { background-color: var(--color-accent-bg-light); - color: var(--color-text-light); + color: var(--color-text-dark); } button.custom-button:hover { @@ -56,12 +70,13 @@ .Nav { background-color: var(--color-accent-bg-light); + color: var(--color-text-dark); } .cross-icon-btn { background-color: var(--color-accent-bg-light); } .cross-icon { - color: var(--color-text-light); + color: var(--color-text-dark); } .owner-message { background-color: white; @@ -70,6 +85,12 @@ .home-links > a { color: var(--color-text-light); } + .SingleList > li:hover { + background-color: hsla(220, 13%, 25%, 0.25); + } + .ListItem > li:hover { + background-color: hsla(220, 13%, 25%, 0.25); + } } } @@ -80,6 +101,7 @@ button.custom-button { background-color: var(--color-accent-bg-dark); + color: var(--color-text-light); } button.custom-button:hover { @@ -88,12 +110,13 @@ .Nav { background-color: var(--color-accent-bg-dark); + color: var(--color-text-light); } .cross-icon-btn { background-color: var(--color-accent-bg-dark); } .cross-icon { - color: var(--color-text-dark); + color: var(--color-text-light); } .owner-message { background-color: hsla(000, 0.5%, 20%, 1); @@ -105,6 +128,12 @@ .logo-a > a { background-color: var(--color-text-dark); } + .SingleList > li:hover { + background-color: hsla(220, 13%, 98%, 0.25); + } + .ListItem > li:hover { + background-color: hsla(220, 13%, 98%, 0.25); + } } .light, @@ -113,7 +142,7 @@ button.custom-button { background-color: var(--color-accent-bg-light); - color: var(--color-text-light); + color: var(--color-text-dark); } button.custom-button:hover { @@ -122,12 +151,13 @@ .Nav { background-color: var(--color-accent-bg-light); + color: var(--color-text-dark); } .cross-icon-btn { background-color: var(--color-accent-bg-light); } .cross-icon { - color: var(--color-text-light); + color: var(--color-text-dark); } .owner-message { background-color: white; @@ -136,6 +166,12 @@ .home-links > a { color: var(--color-text-light); } + .SingleList > li:hover { + background-color: hsla(220, 13%, 25%, 0.25); + } + .ListItem > li:hover { + background-color: hsla(220, 13%, 25%, 0.25); + } } button { diff --git a/src/index.css b/src/index.css index fc86a40..7b57865 100644 --- a/src/index.css +++ b/src/index.css @@ -9,8 +9,8 @@ --color-bg-dark: var(--color-dark); --color-bg-light: var(--color-light); - --color-accent-bg-dark: var(--color-dark-blue-two); - --color-accent-bg-light: var(--color-powder-blue); + --color-accent-bg-light: var(--color-dark-blue-two); + --color-accent-bg-dark: var(--color-powder-blue); --color-text-dark: var(--color-white); --color-text-light: var(--color-black); } From 8ce40e09653fa74d8c3293080fcecf4202c12a7c Mon Sep 17 00:00:00 2001 From: Paige Date: Fri, 5 Apr 2024 16:46:04 -0500 Subject: [PATCH 06/10] styled border lines between list items --- src/components/ListItem.css | 2 +- src/components/SingleList.css | 2 +- src/custom-styles.css | 22 ++++++++++++++++++++-- 3 files changed, 22 insertions(+), 4 deletions(-) diff --git a/src/components/ListItem.css b/src/components/ListItem.css index 0ace1d7..bef6931 100644 --- a/src/components/ListItem.css +++ b/src/components/ListItem.css @@ -7,7 +7,7 @@ .ListItem > li { display: flex; - border-bottom: 0.5px solid var(--color-border); + /* border-bottom: 0.5px solid var(--color-border); */ width: 100%; margin: auto; align-items: center; diff --git a/src/components/SingleList.css b/src/components/SingleList.css index 47ba61d..ae6c74a 100644 --- a/src/components/SingleList.css +++ b/src/components/SingleList.css @@ -12,7 +12,7 @@ .SingleList > li { display: flex; align-items: center; - border-bottom: 0.5px solid var(--color-border); + /* border-bottom: 0.5px solid var(--color-border); */ width: 100%; height: 2em; margin: auto; diff --git a/src/custom-styles.css b/src/custom-styles.css index e3e3fb7..51ac67c 100644 --- a/src/custom-styles.css +++ b/src/custom-styles.css @@ -43,13 +43,13 @@ background-color: hsla(220, 13%, 98%, 0.25); } .SingleList > li { - border-bottom: 0.5px solid var(); + border-bottom: 0.5px solid var(--color-accent-bg-dark); } .ListItem > li:hover { background-color: hsla(220, 13%, 98%, 0.25); } .ListItem > li { - border-bottom: 0.5px solid var(); + border-bottom: 0.5px solid var(--color-accent-bg-dark); } } } @@ -88,9 +88,15 @@ .SingleList > li:hover { background-color: hsla(220, 13%, 25%, 0.25); } + .SingleList > li { + border-bottom: 0.5px solid var(--color-accent-bg-light); + } .ListItem > li:hover { background-color: hsla(220, 13%, 25%, 0.25); } + .ListItem > li { + border-bottom: 0.5px solid var(--color-accent-bg-light); + } } } @@ -131,9 +137,15 @@ .SingleList > li:hover { background-color: hsla(220, 13%, 98%, 0.25); } + .SingleList > li { + border-bottom: 0.5px solid var(--color-accent-bg-dark); + } .ListItem > li:hover { background-color: hsla(220, 13%, 98%, 0.25); } + .ListItem > li { + border-bottom: 0.5px solid var(--color-accent-bg-dark); + } } .light, @@ -169,9 +181,15 @@ .SingleList > li:hover { background-color: hsla(220, 13%, 25%, 0.25); } + .SingleList > li { + border-bottom: 0.5px solid var(--color-accent-bg-light); + } .ListItem > li:hover { background-color: hsla(220, 13%, 25%, 0.25); } + .ListItem > li { + border-bottom: 0.5px solid var(--color-accent-bg-light); + } } button { From 3e93fe9fb9ff1aa20480fac4bc1ddc1083306885 Mon Sep 17 00:00:00 2001 From: Paige Date: Fri, 5 Apr 2024 17:02:45 -0500 Subject: [PATCH 07/10] styled text color of priority badges --- src/components/ListItem.css | 4 ++-- src/components/ListItem.jsx | 1 + src/custom-styles.css | 12 ++++++++++++ 3 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/components/ListItem.css b/src/components/ListItem.css index bef6931..1631570 100644 --- a/src/components/ListItem.css +++ b/src/components/ListItem.css @@ -37,9 +37,9 @@ margin-bottom: 0.5em; } -.ListItem-badge > span { +/* .ListItem-badge > span { color: black; -} +} */ .column-name { display: flex; diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx index cfdd8ae..bb2edc2 100644 --- a/src/components/ListItem.jsx +++ b/src/components/ListItem.jsx @@ -55,6 +55,7 @@ export function ListItem({ listPath, item, name }) { case isInactive: return { badgeColor: 'blue', + variant: 'solid', message: 'inactive (last purchased over 60 days ago)', }; case isOverdue: diff --git a/src/custom-styles.css b/src/custom-styles.css index 51ac67c..a9f725d 100644 --- a/src/custom-styles.css +++ b/src/custom-styles.css @@ -51,6 +51,9 @@ .ListItem > li { border-bottom: 0.5px solid var(--color-accent-bg-dark); } + .ListItem-badge > span { + color: white; + } } } @@ -97,6 +100,9 @@ .ListItem > li { border-bottom: 0.5px solid var(--color-accent-bg-light); } + .ListItem-badge > span { + color: black; + } } } @@ -146,6 +152,9 @@ .ListItem > li { border-bottom: 0.5px solid var(--color-accent-bg-dark); } + .ListItem-badge > span { + color: white; + } } .light, @@ -190,6 +199,9 @@ .ListItem > li { border-bottom: 0.5px solid var(--color-accent-bg-light); } + .ListItem-badge > span { + color: black; + } } button { From 99fd37807df9742068997da492a23d854d095873 Mon Sep 17 00:00:00 2001 From: Paige Date: Fri, 5 Apr 2024 17:06:16 -0500 Subject: [PATCH 08/10] styled position of delete list button on home page --- src/components/ListItem.css | 15 --------------- src/components/SingleList.css | 12 +----------- 2 files changed, 1 insertion(+), 26 deletions(-) diff --git a/src/components/ListItem.css b/src/components/ListItem.css index 1631570..96e87af 100644 --- a/src/components/ListItem.css +++ b/src/components/ListItem.css @@ -7,22 +7,11 @@ .ListItem > li { display: flex; - /* border-bottom: 0.5px solid var(--color-border); */ width: 100%; margin: auto; align-items: center; } -/* .ListItem > li:hover { - background-color: hsla(220, 13%, 98%, 0.25); -} - -@media screen and (prefers-color-scheme: light) { - .ListItem > li:hover { - background-color: hsla(220, 13%, 25%, 0.25); - } -} */ - .ListItem-checkbox { accent-color: var(--color-accent); } @@ -37,10 +26,6 @@ margin-bottom: 0.5em; } -/* .ListItem-badge > span { - color: black; -} */ - .column-name { display: flex; justify-content: space-between; diff --git a/src/components/SingleList.css b/src/components/SingleList.css index ae6c74a..263385a 100644 --- a/src/components/SingleList.css +++ b/src/components/SingleList.css @@ -12,22 +12,12 @@ .SingleList > li { display: flex; align-items: center; - /* border-bottom: 0.5px solid var(--color-border); */ + justify-content: space-between; width: 100%; height: 2em; margin: auto; } -/* .SingleList > li:hover { - background-color: hsla(220, 13%, 98%, 0.25); -} - -@media screen and (prefers-color-scheme: light) { - .SingleList > li:hover { - background-color: hsla(220, 13%, 25%, 0.25); - } -} */ - .list-link { margin-left: 1em; color: var(--color-text); From 7d5b0cb7bbcb5bba79e8b814d6f7b1b569128f43 Mon Sep 17 00:00:00 2001 From: Paige Date: Fri, 5 Apr 2024 18:35:05 -0500 Subject: [PATCH 09/10] styled radio buttons on manage list as well as removed email invalid message p tag --- package-lock.json | 5 +++-- src/components/AddItem.jsx | 16 ++++++++++------ src/components/ModalAlerts.jsx | 4 ++-- src/components/ShareList.jsx | 11 +++-------- src/index.jsx | 2 +- src/views/Layout.css | 6 +++--- src/views/List.jsx | 2 +- 7 files changed, 23 insertions(+), 23 deletions(-) diff --git a/package-lock.json b/package-lock.json index 32d1eba..e4c1e5d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11351,9 +11351,10 @@ } }, "node_modules/vite": { - "version": "4.5.2", + "version": "4.5.3", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz", + "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==", "dev": true, - "license": "MIT", "dependencies": { "esbuild": "^0.18.10", "postcss": "^8.4.27", diff --git a/src/components/AddItem.jsx b/src/components/AddItem.jsx index 4872dc8..f2bfd1f 100644 --- a/src/components/AddItem.jsx +++ b/src/components/AddItem.jsx @@ -67,12 +67,16 @@ export function AddItem({ listPath, data }) {

Please select an option:

- - Soon (7 Days) - - - Kind of Soon (14 Days) - + + + Soon (7 Days) + + + + + Kind of Soon (14 Days) + + Not Soon (30 Days) diff --git a/src/components/ModalAlerts.jsx b/src/components/ModalAlerts.jsx index 3b0f9f5..ecbf1d1 100644 --- a/src/components/ModalAlerts.jsx +++ b/src/components/ModalAlerts.jsx @@ -71,8 +71,8 @@ export function DeleteListConfirm({ name, onDelete }) { return ( - diff --git a/src/components/ShareList.jsx b/src/components/ShareList.jsx index ff6b33a..43aec0e 100644 --- a/src/components/ShareList.jsx +++ b/src/components/ShareList.jsx @@ -23,7 +23,9 @@ export function ShareList({ listPath }) { setEmailValidator( 'Please enter a valid email, e.g., example@example.com.', ); + setIsValid(false); } + console.log('email valid?', isValid); }; const handleSubmit = async (e) => { @@ -60,19 +62,12 @@ export function ShareList({ listPath }) { value={recipientEmail} onChange={handleChange} /> */} - + - - - - {emailValidator} - - - {user ? (