From d4431593c3d0213fcfab78f2229e070a08572aa7 Mon Sep 17 00:00:00 2001 From: jaguilar89 Date: Fri, 29 Mar 2024 20:43:37 -0400 Subject: [PATCH 01/47] set user preference using localStorage --- src/context/DarkModeProvider.jsx | 19 ------------------- src/custom-styles.css | 3 +-- src/index.jsx | 5 ++++- src/providers/DarkModeProvider.jsx | 22 ++++++++++++++++++++++ src/views/Layout.jsx | 16 +++++++++------- 5 files changed, 36 insertions(+), 29 deletions(-) delete mode 100644 src/context/DarkModeProvider.jsx create mode 100644 src/providers/DarkModeProvider.jsx diff --git a/src/context/DarkModeProvider.jsx b/src/context/DarkModeProvider.jsx deleted file mode 100644 index 209cd5d..0000000 --- a/src/context/DarkModeProvider.jsx +++ /dev/null @@ -1,19 +0,0 @@ -import { createContext, useState } from 'react'; - -const DarkModeContext = createContext(); - -function DarkModeProvider({ children }) { - const [isDarkMode, setIsDarkMode] = useState(false); - - const toggleDarkMode = () => { - setIsDarkMode(!isDarkMode); - }; - - return ( - - {children} - - ); -} - -export { DarkModeContext, DarkModeProvider }; diff --git a/src/custom-styles.css b/src/custom-styles.css index 2adf46b..e78ae35 100644 --- a/src/custom-styles.css +++ b/src/custom-styles.css @@ -6,8 +6,7 @@ .dark, .dark-theme { - background-color: #282c34; - /* or #212121 ??? */ + background-color: #212121; } .light, diff --git a/src/index.jsx b/src/index.jsx index 86c7421..eda89ec 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -1,6 +1,9 @@ import { StrictMode, useContext } from 'react'; import { createRoot } from 'react-dom/client'; -import { DarkModeContext, DarkModeProvider } from './context/DarkModeProvider'; +import { + DarkModeContext, + DarkModeProvider, +} from './providers/DarkModeProvider'; import { Theme } from '@radix-ui/themes'; import { App } from './App'; diff --git a/src/providers/DarkModeProvider.jsx b/src/providers/DarkModeProvider.jsx new file mode 100644 index 0000000..476e3d0 --- /dev/null +++ b/src/providers/DarkModeProvider.jsx @@ -0,0 +1,22 @@ +import { createContext, useState } from 'react'; + +export const DarkModeContext = createContext(); + +export function DarkModeProvider({ children }) { + const [isDarkMode, setIsDarkMode] = useState(() => { + const value = localStorage.getItem('isDarkMode'); + return value ? JSON.parse(value) : false; + }); + + const toggleDarkMode = () => { + const newMode = !isDarkMode; + setIsDarkMode(newMode); + localStorage.setItem('isDarkMode', JSON.stringify(newMode)); + }; + + return ( + + {children} + + ); +} diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx index 1ba5a6f..c25c17f 100644 --- a/src/views/Layout.jsx +++ b/src/views/Layout.jsx @@ -1,9 +1,9 @@ import { Outlet, NavLink } from 'react-router-dom'; - import './Layout.css'; import { SignInButton, SignOutButton, useAuth } from '../api/useAuth.jsx'; +import { Flex } from '@radix-ui/themes'; import { useContext } from 'react'; -import { DarkModeContext } from '../context/DarkModeProvider.jsx'; +import { DarkModeContext } from '../providers/DarkModeProvider.jsx'; import DarkModeToggle from 'react-dark-mode-toggle'; /** @@ -23,12 +23,14 @@ export function Layout() {

Smart shopping list

- {!!user ? : } + + +
From 59994c448c7aa4a5d876260ba38eb610190a61a9 Mon Sep 17 00:00:00 2001 From: jaguilar89 Date: Sat, 30 Mar 2024 20:47:05 -0400 Subject: [PATCH 02/47] added logic to detect users system preference for dark mode and set radix theme accordingly --- src/api/useAuth.jsx | 17 ++++++++++---- src/components/AddItem.jsx | 2 +- src/components/SignInAlert.jsx | 11 ++------- src/custom-styles.css | 34 +++++++++++++++++++++++++-- src/index.css | 30 ++++++++++++++++++------ src/index.jsx | 2 +- src/providers/DarkModeProvider.jsx | 37 ++++++++++++++++++++++++++++-- src/views/Home.jsx | 2 +- src/views/Layout.css | 2 +- 9 files changed, 108 insertions(+), 29 deletions(-) diff --git a/src/api/useAuth.jsx b/src/api/useAuth.jsx index 5b1b123..4eb7813 100644 --- a/src/api/useAuth.jsx +++ b/src/api/useAuth.jsx @@ -2,28 +2,35 @@ import { useEffect, useState } from 'react'; import { auth } from './config.js'; import { GoogleAuthProvider, signInWithRedirect } from 'firebase/auth'; import { addUserToDatabase } from './firebase.js'; - +import { Button } from '@radix-ui/themes'; /** * A button that signs the user in using Google OAuth. When clicked, * the button redirects the user to the Google OAuth sign-in page. * After the user signs in, they are redirected back to the app. */ export const SignInButton = () => ( - + ); /** * A button that signs the user out of the app using Firebase Auth. */ export const SignOutButton = () => ( - + ); /** diff --git a/src/components/AddItem.jsx b/src/components/AddItem.jsx index d5c03b8..6195860 100644 --- a/src/components/AddItem.jsx +++ b/src/components/AddItem.jsx @@ -90,7 +90,7 @@ export function AddItem({ listPath, data }) {
{user ? ( - ) : ( diff --git a/src/components/SignInAlert.jsx b/src/components/SignInAlert.jsx index 4688e20..1705c24 100644 --- a/src/components/SignInAlert.jsx +++ b/src/components/SignInAlert.jsx @@ -1,6 +1,5 @@ import { AlertDialog, Button, Flex } from '@radix-ui/themes'; -import { auth } from '../api/config'; -import { GoogleAuthProvider, signInWithRedirect } from 'firebase/auth'; +import { SignInButton } from '../api/useAuth'; import '../custom-styles.css'; export function SignInAlert({ description, action }) { @@ -22,13 +21,7 @@ export function SignInAlert({ description, action }) { - + diff --git a/src/custom-styles.css b/src/custom-styles.css index e78ae35..051ce29 100644 --- a/src/custom-styles.css +++ b/src/custom-styles.css @@ -1,17 +1,47 @@ @layer radix_ui, utils; @import '@radix-ui/themes/styles.css' layer(radix_ui); +@import './index.css'; @layer utils { /* custom styles for Radix components go here*/ + @media screen and (prefers-color-scheme: dark) { + :root { + --color-accent: var(--color-pastel-blue); + --color-bg: var(--color-black); + --color-border: hsla(220, 13%, 32%, 1); + --color-error: var(--color-red); + --color-text: var(--color-white); + } + + .dark, + .dark-theme { + background-color: var(--color-bg); + } + } + .dark, .dark-theme { - background-color: #212121; + background-color: var(--color-black); + } + + @media screen and (prefers-color-scheme: light) { + :root { + --color-accent: var(--color-cobalt-blue); + --color-bg: var(--color-white); + --color-border: hsla(220, 13%, 78%, 1); + --color-text: var(--color-black); + } + + .light, + .light-theme { + background-color: var(--color-bg); + } } .light, .light-theme { - background-color: #f9fafb; + background-color: var(--color-white); } button.custom-button { diff --git a/src/index.css b/src/index.css index 28579f1..9394fb7 100644 --- a/src/index.css +++ b/src/index.css @@ -9,21 +9,21 @@ --color-pastel-blue: hsla(215, 100%, 73%, 1); --color-red: hsl(0, 68%, 42%); - --color-accent: var(--color-pastel-blue); + /* --color-accent: var(--color-pastel-blue); --color-bg: var(--color-black); --color-border: hsla(220, 13%, 32%, 1); --color-error: var(--color-red); - --color-text: var(--color-white); + --color-text: var(--color-white); */ } -@media screen and (prefers-color-scheme: light) { +/* @media screen and (prefers-color-scheme: light) { :root { --color-accent: var(--color-cobalt-blue); --color-bg: var(--color-white); --color-border: hsla(220, 13%, 78%, 1); --color-text: var(--color-black); } -} +} */ :root.theme-light { --color-accent: var(--color-cobalt-blue); @@ -57,8 +57,19 @@ html { body { background-color: var(--color-bg); color: var(--color-text); - font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, - helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif; + font-family: + -apple-system, + BlinkMacSystemFont, + avenir next, + avenir, + segoe ui, + helvetica neue, + helvetica, + Ubuntu, + roboto, + noto, + arial, + sans-serif; font-size: 1.8rem; line-height: 1.4; margin: 0; @@ -75,7 +86,12 @@ code { border-radius: 4px; color: var(--color-text); display: inline-block; - font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, + font-family: + Menlo, + Consolas, + Monaco, + Liberation Mono, + Lucida Console, monospace; font-size: 0.9em; padding: 0.15em 0.15em; diff --git a/src/index.jsx b/src/index.jsx index eda89ec..c48d91c 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -7,7 +7,7 @@ import { import { Theme } from '@radix-ui/themes'; import { App } from './App'; -import './index.css'; +//import './index.css'; import './custom-styles.css'; function AppWithTheme() { diff --git a/src/providers/DarkModeProvider.jsx b/src/providers/DarkModeProvider.jsx index 476e3d0..b68541f 100644 --- a/src/providers/DarkModeProvider.jsx +++ b/src/providers/DarkModeProvider.jsx @@ -1,8 +1,41 @@ -import { createContext, useState } from 'react'; +import { createContext, useState, useEffect } from 'react'; export const DarkModeContext = createContext(); export function DarkModeProvider({ children }) { + const [isDarkMode, setIsDarkMode] = useState(() => { + const storedPreference = localStorage.getItem('isDarkMode'); + const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)'); + + if (storedPreference) { + return JSON.parse(storedPreference); + } + + return prefersDarkMode.matches; + }); + + useEffect(() => { + const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); + const handleChange = () => setIsDarkMode(mediaQuery.matches); + mediaQuery.addEventListener('change', handleChange); + + return () => mediaQuery.removeEventListener('change', handleChange); + }, []); + + const toggleDarkMode = () => { + const newMode = !isDarkMode; + setIsDarkMode(newMode); + localStorage.setItem('isDarkMode', JSON.stringify(newMode)); + }; + + return ( + + {children} + + ); +} + +/* export function DarkModeProvider({ children }) { const [isDarkMode, setIsDarkMode] = useState(() => { const value = localStorage.getItem('isDarkMode'); return value ? JSON.parse(value) : false; @@ -19,4 +52,4 @@ export function DarkModeProvider({ children }) { {children} ); -} +} */ diff --git a/src/views/Home.jsx b/src/views/Home.jsx index a258948..76410d3 100644 --- a/src/views/Home.jsx +++ b/src/views/Home.jsx @@ -49,7 +49,7 @@ export function Home({ data, setListPath }) { required /> {user ? ( - ) : ( diff --git a/src/views/Layout.css b/src/views/Layout.css index 0b000e0..b764c7b 100644 --- a/src/views/Layout.css +++ b/src/views/Layout.css @@ -36,7 +36,7 @@ } .Nav { - /* background-color: var(--color-bg); */ + background-color: var(--color-bg); border-top: 1px solid var(--color-border); bottom: 0; display: flex; From a84223738c5967fe51c0182e9649e5ab1185faa6 Mon Sep 17 00:00:00 2001 From: jaguilar89 Date: Sun, 31 Mar 2024 17:13:18 -0400 Subject: [PATCH 03/47] added comments --- src/index.jsx | 2 -- src/providers/DarkModeProvider.jsx | 21 ++------------------- 2 files changed, 2 insertions(+), 21 deletions(-) diff --git a/src/index.jsx b/src/index.jsx index c48d91c..8dac073 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -6,8 +6,6 @@ import { } from './providers/DarkModeProvider'; import { Theme } from '@radix-ui/themes'; import { App } from './App'; - -//import './index.css'; import './custom-styles.css'; function AppWithTheme() { diff --git a/src/providers/DarkModeProvider.jsx b/src/providers/DarkModeProvider.jsx index b68541f..034f0d7 100644 --- a/src/providers/DarkModeProvider.jsx +++ b/src/providers/DarkModeProvider.jsx @@ -7,6 +7,7 @@ export function DarkModeProvider({ children }) { const storedPreference = localStorage.getItem('isDarkMode'); const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)'); + //return users manually chosen preference if it exists, otherwise return media query result if (storedPreference) { return JSON.parse(storedPreference); } @@ -17,6 +18,7 @@ export function DarkModeProvider({ children }) { useEffect(() => { const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); const handleChange = () => setIsDarkMode(mediaQuery.matches); + //'change' event listens for any changes in the users system preference mediaQuery.addEventListener('change', handleChange); return () => mediaQuery.removeEventListener('change', handleChange); @@ -34,22 +36,3 @@ export function DarkModeProvider({ children }) { ); } - -/* export function DarkModeProvider({ children }) { - const [isDarkMode, setIsDarkMode] = useState(() => { - const value = localStorage.getItem('isDarkMode'); - return value ? JSON.parse(value) : false; - }); - - const toggleDarkMode = () => { - const newMode = !isDarkMode; - setIsDarkMode(newMode); - localStorage.setItem('isDarkMode', JSON.stringify(newMode)); - }; - - return ( - - {children} - - ); -} */ From 640f793be3596863544292f0330ce7e7b9e1dadb Mon Sep 17 00:00:00 2001 From: Rachel Spencer Date: Mon, 1 Apr 2024 15:46:57 -0400 Subject: [PATCH 04/47] remove duplicate radix Theme import in index.jsx --- src/index.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/index.jsx b/src/index.jsx index 54cddb2..0888be6 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -2,7 +2,6 @@ import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import { Theme } from '@radix-ui/themes'; import { App } from './App'; -import { Theme } from '@radix-ui/themes'; import '@radix-ui/themes/styles.css'; import './index.css'; From 4f7d67fa89719c5ee546866d1f96d82008f89ce6 Mon Sep 17 00:00:00 2001 From: Rachel Spencer Date: Mon, 1 Apr 2024 16:50:14 -0400 Subject: [PATCH 05/47] add responsive styling for the list owner message on the List and Manage List pages. --- src/components/ListOwnerMessage.css | 8 ++++++++ src/components/ListOwnerMessage.jsx | 8 ++++++-- src/views/List.css | 4 ++++ 3 files changed, 18 insertions(+), 2 deletions(-) create mode 100644 src/components/ListOwnerMessage.css create mode 100644 src/views/List.css diff --git a/src/components/ListOwnerMessage.css b/src/components/ListOwnerMessage.css new file mode 100644 index 0000000..3721037 --- /dev/null +++ b/src/components/ListOwnerMessage.css @@ -0,0 +1,8 @@ +.owner-message { + position: fixed; + width: min(72ch, 100%); + bottom: 5.18rem; + padding: 0.4em 0.4em; + margin: 0 auto; + background-color: white; +} diff --git a/src/components/ListOwnerMessage.jsx b/src/components/ListOwnerMessage.jsx index b55bde6..19bc0fd 100644 --- a/src/components/ListOwnerMessage.jsx +++ b/src/components/ListOwnerMessage.jsx @@ -4,9 +4,13 @@ export function ListOwnerMessage({ currentUserId, userIdFromPath, listName }) { const sharedListOwner = useListOwnerDetails(userIdFromPath, listName); if (currentUserId === userIdFromPath) { - return

You own this list.

; + return

You own this list.

; } else if (sharedListOwner) { - return

This list belongs to {sharedListOwner.ownerName}.

; + return ( +

+ This list belongs to {sharedListOwner.ownerName}. +

+ ); } else { return null; // Handle the case where there's no owner information available } diff --git a/src/views/List.css b/src/views/List.css new file mode 100644 index 0000000..44de972 --- /dev/null +++ b/src/views/List.css @@ -0,0 +1,4 @@ +.list-owner { + position: fixed; + bottom: 0; +} From 92a5aacf115aff98f25d80428c01ca30db38f738 Mon Sep 17 00:00:00 2001 From: Rachel Spencer Date: Mon, 1 Apr 2024 16:51:19 -0400 Subject: [PATCH 06/47] alter view height of main layout page --- src/views/Layout.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/Layout.css b/src/views/Layout.css index 9ca0775..39782a4 100644 --- a/src/views/Layout.css +++ b/src/views/Layout.css @@ -10,7 +10,7 @@ .Layout { display: flex; flex-direction: column; - height: 100dvh; + height: 100%; } .Layout > * { From 796434870fbacda178548e9460df618f313b9ff6 Mon Sep 17 00:00:00 2001 From: Rachel Spencer Date: Mon, 1 Apr 2024 17:53:13 -0400 Subject: [PATCH 07/47] update copy on List page, make prompt a semantic italic tag --- src/index.css | 30 +++++++++++++++++++++++------- src/views/List.jsx | 3 +-- 2 files changed, 24 insertions(+), 9 deletions(-) diff --git a/src/index.css b/src/index.css index 28579f1..9394fb7 100644 --- a/src/index.css +++ b/src/index.css @@ -9,21 +9,21 @@ --color-pastel-blue: hsla(215, 100%, 73%, 1); --color-red: hsl(0, 68%, 42%); - --color-accent: var(--color-pastel-blue); + /* --color-accent: var(--color-pastel-blue); --color-bg: var(--color-black); --color-border: hsla(220, 13%, 32%, 1); --color-error: var(--color-red); - --color-text: var(--color-white); + --color-text: var(--color-white); */ } -@media screen and (prefers-color-scheme: light) { +/* @media screen and (prefers-color-scheme: light) { :root { --color-accent: var(--color-cobalt-blue); --color-bg: var(--color-white); --color-border: hsla(220, 13%, 78%, 1); --color-text: var(--color-black); } -} +} */ :root.theme-light { --color-accent: var(--color-cobalt-blue); @@ -57,8 +57,19 @@ html { body { background-color: var(--color-bg); color: var(--color-text); - font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, - helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif; + font-family: + -apple-system, + BlinkMacSystemFont, + avenir next, + avenir, + segoe ui, + helvetica neue, + helvetica, + Ubuntu, + roboto, + noto, + arial, + sans-serif; font-size: 1.8rem; line-height: 1.4; margin: 0; @@ -75,7 +86,12 @@ code { border-radius: 4px; color: var(--color-text); display: inline-block; - font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, + font-family: + Menlo, + Consolas, + Monaco, + Liberation Mono, + Lucida Console, monospace; font-size: 0.9em; padding: 0.15em 0.15em; diff --git a/src/views/List.jsx b/src/views/List.jsx index 14ebd22..4d1c50d 100644 --- a/src/views/List.jsx +++ b/src/views/List.jsx @@ -64,8 +64,7 @@ export function List({ listPath, data, listName, userIdFromPath }) { X )} -

Check off items as you shop, your list will reset after 24hrs.

-

Only manually uncheck if you didn't make the purchase.

+ Check items will reset after 24hrs. <>
    From 6036f7fed76a175d36236fe6ea1bae4852a22ece Mon Sep 17 00:00:00 2001 From: Rachel Spencer Date: Mon, 1 Apr 2024 17:55:05 -0400 Subject: [PATCH 08/47] remove unused css file for List --- src/views/List.css | 4 ---- 1 file changed, 4 deletions(-) delete mode 100644 src/views/List.css diff --git a/src/views/List.css b/src/views/List.css deleted file mode 100644 index 44de972..0000000 --- a/src/views/List.css +++ /dev/null @@ -1,4 +0,0 @@ -.list-owner { - position: fixed; - bottom: 0; -} From 95a8c6dbe3c3990f6ddcd620b47f2e8881237564 Mon Sep 17 00:00:00 2001 From: Paige Date: Mon, 1 Apr 2024 18:14:46 -0500 Subject: [PATCH 09/47] styled home page list of list names --- src/components/SingleList.css | 9 ++++----- src/components/SingleList.jsx | 9 ++++----- src/index.jsx | 1 - src/views/Home.css | 4 ++++ 4 files changed, 12 insertions(+), 11 deletions(-) diff --git a/src/components/SingleList.css b/src/components/SingleList.css index da876f4..a72b04b 100644 --- a/src/components/SingleList.css +++ b/src/components/SingleList.css @@ -28,11 +28,10 @@ } } -.SingleList > Link { - margin-left: 0.2em; - width: 100%; - display: flex; - justify-content: space-between; +.list-link { + margin-left: 1em; + color: var(--color-text); + text-decoration: none; } .list-title { diff --git a/src/components/SingleList.jsx b/src/components/SingleList.jsx index 2031e60..9dbfff4 100644 --- a/src/components/SingleList.jsx +++ b/src/components/SingleList.jsx @@ -1,19 +1,18 @@ -import { useNavigate } from 'react-router-dom'; +import { Link } from 'react-router-dom'; import './SingleList.css'; export function SingleList({ name, path, setListPath }) { - const navigate = useNavigate(); - function handleClick() { setListPath(path); - navigate('list'); } return (
  • - + + {name} +
    • ); diff --git a/src/index.jsx b/src/index.jsx index 54cddb2..0888be6 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -2,7 +2,6 @@ import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import { Theme } from '@radix-ui/themes'; import { App } from './App'; -import { Theme } from '@radix-ui/themes'; import '@radix-ui/themes/styles.css'; import './index.css'; diff --git a/src/views/Home.css b/src/views/Home.css index e69de29..aca3993 100644 --- a/src/views/Home.css +++ b/src/views/Home.css @@ -0,0 +1,4 @@ +ul { + margin: 1em; + padding: 0 1.25em; +} From d76c7b645bfb216f0599694c61e1eeb38fbd080a Mon Sep 17 00:00:00 2001 From: Rachel Spencer Date: Mon, 1 Apr 2024 20:52:59 -0400 Subject: [PATCH 10/47] arrange item info in 2 rows and update heading above items --- src/components/ListItem.css | 23 ++++++++++++++++++--- src/components/ListItem.jsx | 32 ++++++++++++++++------------- src/components/ListOwnerMessage.jsx | 1 + src/index.css | 4 ++-- src/views/List.jsx | 5 ++--- 5 files changed, 43 insertions(+), 22 deletions(-) diff --git a/src/components/ListItem.css b/src/components/ListItem.css index a5ae56b..1159c65 100644 --- a/src/components/ListItem.css +++ b/src/components/ListItem.css @@ -34,10 +34,16 @@ justify-content: space-between; } -.ListItem-badge { +/* .ListItem-badge { display: flex; - margin: 0px 10px; + margin: 1em 0em; align-items: center; + margin-left: auto; +} */ + +.ListItem-badge { + margin: 0; + margin-bottom: 0.5em; } .ListItem-badge > span { @@ -51,6 +57,17 @@ margin: auto; font-size: 1.3em; font-weight: bold; - text-decoration: underline; text-underline-offset: 5px; } + +.ListItem-container { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.ListItem-row { + display: flex; + align-items: center; + width: 100%; +} diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx index eb1591d..c04cde0 100644 --- a/src/components/ListItem.jsx +++ b/src/components/ListItem.jsx @@ -86,22 +86,29 @@ export function ListItem({ listPath, item, name }) { return (
    -
  • - - -
  • +
    + + + +
    +
    {getUrgencyBadgeInfo && (

    )} - - +
    • ); diff --git a/src/components/ListOwnerMessage.jsx b/src/components/ListOwnerMessage.jsx index 19bc0fd..de50c9e 100644 --- a/src/components/ListOwnerMessage.jsx +++ b/src/components/ListOwnerMessage.jsx @@ -1,4 +1,5 @@ import { useListOwnerDetails } from '../utils'; +import './ListOwnerMessage.css'; export function ListOwnerMessage({ currentUserId, userIdFromPath, listName }) { const sharedListOwner = useListOwnerDetails(userIdFromPath, listName); diff --git a/src/index.css b/src/index.css index 9394fb7..433bf8a 100644 --- a/src/index.css +++ b/src/index.css @@ -16,14 +16,14 @@ --color-text: var(--color-white); */ } -/* @media screen and (prefers-color-scheme: light) { +@media screen and (prefers-color-scheme: light) { :root { --color-accent: var(--color-cobalt-blue); --color-bg: var(--color-white); --color-border: hsla(220, 13%, 78%, 1); --color-text: var(--color-black); } -} */ +} :root.theme-light { --color-accent: var(--color-cobalt-blue); diff --git a/src/views/List.jsx b/src/views/List.jsx index 4d1c50d..b65af46 100644 --- a/src/views/List.jsx +++ b/src/views/List.jsx @@ -64,12 +64,11 @@ export function List({ listPath, data, listName, userIdFromPath }) { X )} - Check items will reset after 24hrs. +

    Check items will reset after 24hrs.

    <>
      -

      Item Name

      -

      Purchase Priority

      +

      Item Name & Priority

      {sortedItems.map((item) => ( Date: Mon, 1 Apr 2024 21:05:30 -0400 Subject: [PATCH 11/47] style delete buttons --- src/views/List.css | 5 +++++ src/views/List.jsx | 3 ++- 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 src/views/List.css diff --git a/src/views/List.css b/src/views/List.css new file mode 100644 index 0000000..b67d8bd --- /dev/null +++ b/src/views/List.css @@ -0,0 +1,5 @@ +* { + box-sizing: border-box; + background-color: white; + border: none; +} diff --git a/src/views/List.jsx b/src/views/List.jsx index b65af46..c568ceb 100644 --- a/src/views/List.jsx +++ b/src/views/List.jsx @@ -3,6 +3,7 @@ import { ListItem, ListOwnerMessage } from '../components'; import { Link } from 'react-router-dom'; import { comparePurchaseUrgency } from '../utils/comparePurchaseUrgency'; import { useAuth } from '../api'; +import './List.css'; export function List({ listPath, data, listName, userIdFromPath }) { const [searchItem, setSearchItem] = useState(''); @@ -64,7 +65,7 @@ export function List({ listPath, data, listName, userIdFromPath }) { X )} -

      Check items will reset after 24hrs.

      + Check items will reset after 24hrs. <>
        From b3641f08a3736a25839dd68ab2ad57be36f59b4c Mon Sep 17 00:00:00 2001 From: Rachel Spencer Date: Mon, 1 Apr 2024 21:13:04 -0400 Subject: [PATCH 12/47] correct styling for checkbox prompt --- src/views/List.css | 4 ++++ src/views/List.jsx | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/views/List.css b/src/views/List.css index b67d8bd..267bc34 100644 --- a/src/views/List.css +++ b/src/views/List.css @@ -3,3 +3,7 @@ background-color: white; border: none; } + +.checkbox-prompt { + font-style: italic; +} diff --git a/src/views/List.jsx b/src/views/List.jsx index c568ceb..37329b7 100644 --- a/src/views/List.jsx +++ b/src/views/List.jsx @@ -65,7 +65,7 @@ export function List({ listPath, data, listName, userIdFromPath }) { X )} - Check items will reset after 24hrs. +

        Check items will reset after 24hrs.

        <>
          From edeccfe378ec928b0a656755bad750ae40d0a35b Mon Sep 17 00:00:00 2001 From: Paige Date: Mon, 1 Apr 2024 20:20:44 -0500 Subject: [PATCH 13/47] moved position of sign in/out button, resized sign in/out button --- src/api/useAuth.jsx | 3 ++- src/index.jsx | 1 - src/views/Layout.css | 14 +++++++++++++- src/views/Layout.jsx | 4 +++- 4 files changed, 18 insertions(+), 4 deletions(-) diff --git a/src/api/useAuth.jsx b/src/api/useAuth.jsx index 5b1b123..aa6cb8d 100644 --- a/src/api/useAuth.jsx +++ b/src/api/useAuth.jsx @@ -11,6 +11,7 @@ import { addUserToDatabase } from './firebase.js'; export const SignInButton = () => ( ); diff --git a/src/index.jsx b/src/index.jsx index 54cddb2..0888be6 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -2,7 +2,6 @@ import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import { Theme } from '@radix-ui/themes'; import { App } from './App'; -import { Theme } from '@radix-ui/themes'; import '@radix-ui/themes/styles.css'; import './index.css'; diff --git a/src/views/Layout.css b/src/views/Layout.css index 9ca0775..bcdf646 100644 --- a/src/views/Layout.css +++ b/src/views/Layout.css @@ -28,6 +28,16 @@ margin: 0; } +.sign-in { + display: flex; + justify-content: flex-end; + padding-top: 1em; +} + +.sign-in-btn { + font-size: 1.2em; +} + .Layout-main { margin: 0 auto; padding-block: 0; @@ -47,8 +57,10 @@ } @media screen and (min-width: 850px) { + .sign-in-btn { + font-size: 0.9em; + } .home-links { - /* width: auto; */ flex-direction: row; padding-left: 0.7em; } diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx index 4c2028f..d7cd428 100644 --- a/src/views/Layout.jsx +++ b/src/views/Layout.jsx @@ -16,8 +16,10 @@ export function Layout() { <>
          +
          + {!!user ? : } +

          Smart shopping list

          - {!!user ? : }
          From 4223a6a0eaaa4a70b8883a9c27103c7b1efa156f Mon Sep 17 00:00:00 2001 From: Rachel Spencer Date: Mon, 1 Apr 2024 21:44:55 -0400 Subject: [PATCH 14/47] make delete button larger, remove white background and border --- src/components/ListItem.css | 6 ++++++ src/components/ListItem.jsx | 8 ++++++-- src/index.css | 13 +++++++++++++ src/views/List.css | 6 ------ 4 files changed, 25 insertions(+), 8 deletions(-) diff --git a/src/components/ListItem.css b/src/components/ListItem.css index 1159c65..275e696 100644 --- a/src/components/ListItem.css +++ b/src/components/ListItem.css @@ -71,3 +71,9 @@ align-items: center; width: 100%; } + +/* .item-delete-btn { + box-sizing: border-box; + background-color: white; + border: none; +} */ diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx index c04cde0..15dde5b 100644 --- a/src/components/ListItem.jsx +++ b/src/components/ListItem.jsx @@ -97,8 +97,12 @@ export function ListItem({ listPath, item, name }) { -
          diff --git a/src/index.css b/src/index.css index 433bf8a..494d567 100644 --- a/src/index.css +++ b/src/index.css @@ -9,6 +9,9 @@ --color-pastel-blue: hsla(215, 100%, 73%, 1); --color-red: hsl(0, 68%, 42%); + --color-delete-button-bg: white; + --color-delete-button-border: none; + /* --color-accent: var(--color-pastel-blue); --color-bg: var(--color-black); --color-border: hsla(220, 13%, 32%, 1); @@ -106,3 +109,13 @@ code { :root.theme-light code { --color-bg: var(--color-gray-light); } + +.delete-btn { + box-sizing: border-box; + background-color: unset; + border: var(--color-delete-button-border); +} + +.delete-icon { + height: 1.5em; +} diff --git a/src/views/List.css b/src/views/List.css index 267bc34..00631be 100644 --- a/src/views/List.css +++ b/src/views/List.css @@ -1,9 +1,3 @@ -* { - box-sizing: border-box; - background-color: white; - border: none; -} - .checkbox-prompt { font-style: italic; } From 519e7c134c9db6831f02252cd5e33ac2ca0e1d13 Mon Sep 17 00:00:00 2001 From: Rachel Spencer Date: Mon, 1 Apr 2024 21:55:43 -0400 Subject: [PATCH 15/47] alter delete btn css rules --- src/index.css | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/index.css b/src/index.css index 494d567..dea68b2 100644 --- a/src/index.css +++ b/src/index.css @@ -9,9 +9,6 @@ --color-pastel-blue: hsla(215, 100%, 73%, 1); --color-red: hsl(0, 68%, 42%); - --color-delete-button-bg: white; - --color-delete-button-border: none; - /* --color-accent: var(--color-pastel-blue); --color-bg: var(--color-black); --color-border: hsla(220, 13%, 32%, 1); @@ -113,7 +110,7 @@ code { .delete-btn { box-sizing: border-box; background-color: unset; - border: var(--color-delete-button-border); + border: none; } .delete-icon { From fe6dd5d5092ceb54e3139d85b2050fbd991a9d26 Mon Sep 17 00:00:00 2001 From: Rachel Spencer Date: Mon, 1 Apr 2024 22:02:56 -0400 Subject: [PATCH 16/47] make checkbox larger --- src/index.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/index.css b/src/index.css index dea68b2..4aff961 100644 --- a/src/index.css +++ b/src/index.css @@ -116,3 +116,8 @@ code { .delete-icon { height: 1.5em; } + +input[type='checkbox'] { + height: 1.4em; + width: 1.4em; +} From c423efd210de031b3c1f3e1e5c0d74714d8087ef Mon Sep 17 00:00:00 2001 From: jaguilar89 Date: Mon, 1 Apr 2024 22:07:11 -0400 Subject: [PATCH 17/47] fixed navbar and button colors on theme toggle --- src/custom-styles.css | 85 ++++++++++++++++++++---------- src/index.css | 66 +++-------------------- src/providers/DarkModeProvider.jsx | 5 +- src/views/Layout.css | 1 - src/views/Layout.jsx | 1 + 5 files changed, 71 insertions(+), 87 deletions(-) diff --git a/src/custom-styles.css b/src/custom-styles.css index 051ce29..09b1504 100644 --- a/src/custom-styles.css +++ b/src/custom-styles.css @@ -6,50 +6,81 @@ /* custom styles for Radix components go here*/ @media screen and (prefers-color-scheme: dark) { - :root { - --color-accent: var(--color-pastel-blue); - --color-bg: var(--color-black); - --color-border: hsla(220, 13%, 32%, 1); - --color-error: var(--color-red); - --color-text: var(--color-white); - } - .dark, .dark-theme { - background-color: var(--color-bg); + background-color: var(--color-bg-dark); + + button.custom-button { + background-color: var(--color-accent-bg-dark); + } + + button.custom-button:hover { + opacity: 0.85; + } + + .Nav { + background-color: var(--color-accent-bg-dark); + } + } + } + + @media screen and (prefers-color-scheme: light) { + .light, + .light-theme { + background-color: var(--color-bg-light); + + button.custom-button { + background-color: var(--color-accent-bg-light); + color: var(--color-text-light); + } + + button.custom-button:hover { + opacity: 0.85; + } + + .Nav { + background-color: var(--color-accent-bg-light); + } } } + /* manual theme toggle */ .dark, .dark-theme { - background-color: var(--color-black); - } + background-color: var(--color-bg-dark); - @media screen and (prefers-color-scheme: light) { - :root { - --color-accent: var(--color-cobalt-blue); - --color-bg: var(--color-white); - --color-border: hsla(220, 13%, 78%, 1); - --color-text: var(--color-black); + button.custom-button { + background-color: var(--color-accent-bg-dark); } - .light, - .light-theme { - background-color: var(--color-bg); + button.custom-button:hover { + opacity: 0.85; + } + + .Nav { + background-color: var(--color-accent-bg-dark); } } .light, .light-theme { - background-color: var(--color-white); - } + background-color: var(--color-bg-light); + + button.custom-button { + background-color: var(--color-accent-bg-light); + color: var(--color-text-light); + } - button.custom-button { - background-color: #87ceeb; - color: #212121; + button.custom-button:hover { + opacity: 0.85; + } + + .Nav { + background-color: var(--color-accent-bg-light); + } } - button.custom-button:hover { - background-color: #71b8d5; + button { + cursor: pointer; } } diff --git a/src/index.css b/src/index.css index 9394fb7..6703e94 100644 --- a/src/index.css +++ b/src/index.css @@ -2,34 +2,15 @@ --color-black: hsla(220, 13%, 18%, 1); --color-gray-dark: hsla(220, 13%, 25%, 1); --color-white: hsla(220, 13%, 98%, 1); - --color-gray-light: hsla(220, 13%, 94%, 1); - --color-emerald-green: hsla(168, 92%, 25%, 1); - --color-vermillion-green: hsla(168, 92%, 43%, 1); - --color-cobalt-blue: hsla(215, 100%, 34%, 1); - --color-pastel-blue: hsla(215, 100%, 73%, 1); - --color-red: hsl(0, 68%, 42%); + --color-dark-blue-two: #1c478b; + --color-powder-blue: #accbff; - /* --color-accent: var(--color-pastel-blue); - --color-bg: var(--color-black); - --color-border: hsla(220, 13%, 32%, 1); - --color-error: var(--color-red); - --color-text: var(--color-white); */ -} - -/* @media screen and (prefers-color-scheme: light) { - :root { - --color-accent: var(--color-cobalt-blue); - --color-bg: var(--color-white); - --color-border: hsla(220, 13%, 78%, 1); - --color-text: var(--color-black); - } -} */ - -:root.theme-light { - --color-accent: var(--color-cobalt-blue); - --color-bg: var(--color-white); - --color-border: hsla(220, 13%, 78%, 1); - --color-text: var(--color-black); + --color-bg-dark: var(--color-black); + --color-bg-light: var(--color-white); + --color-accent-bg-dark: var(--color-dark-blue-two); + --color-accent-bg-light: var(--color-powder-blue); + --color-text-dark: var(--color-white); + --color-text-light: var(--color-black); } *, @@ -55,8 +36,6 @@ html { } body { - background-color: var(--color-bg); - color: var(--color-text); font-family: -apple-system, BlinkMacSystemFont, @@ -77,32 +56,3 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } - -code { - --color-bg: var(--color-gray-dark); - --color-text: var(--color-accent); - - background-color: var(--color-bg); - border-radius: 4px; - color: var(--color-text); - display: inline-block; - font-family: - Menlo, - Consolas, - Monaco, - Liberation Mono, - Lucida Console, - monospace; - font-size: 0.9em; - padding: 0.15em 0.15em; -} - -@media screen and (prefers-color-scheme: light) { - code { - --color-bg: var(--color-gray-light); - } -} - -:root.theme-light code { - --color-bg: var(--color-gray-light); -} diff --git a/src/providers/DarkModeProvider.jsx b/src/providers/DarkModeProvider.jsx index 034f0d7..4481bb4 100644 --- a/src/providers/DarkModeProvider.jsx +++ b/src/providers/DarkModeProvider.jsx @@ -17,7 +17,10 @@ export function DarkModeProvider({ children }) { useEffect(() => { const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); - const handleChange = () => setIsDarkMode(mediaQuery.matches); + const handleChange = () => { + localStorage.removeItem('isDarkMode'); + setIsDarkMode(mediaQuery.matches); + }; //'change' event listens for any changes in the users system preference mediaQuery.addEventListener('change', handleChange); diff --git a/src/views/Layout.css b/src/views/Layout.css index b764c7b..a382a3b 100644 --- a/src/views/Layout.css +++ b/src/views/Layout.css @@ -36,7 +36,6 @@ } .Nav { - background-color: var(--color-bg); border-top: 1px solid var(--color-border); bottom: 0; display: flex; diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx index c25c17f..5616042 100644 --- a/src/views/Layout.jsx +++ b/src/views/Layout.jsx @@ -29,6 +29,7 @@ export function Layout() { onChange={toggleDarkMode} checked={isDarkMode} size={64} + speed={2} /> From d191187abdd8fae13c12a92b720470c6c8aef6ff Mon Sep 17 00:00:00 2001 From: Rachel Spencer Date: Mon, 1 Apr 2024 22:53:05 -0400 Subject: [PATCH 18/47] alter wording for p tag that instructs user to click link to add items, and tell user to log in to use list page is no user --- src/components/ListItem.css | 15 --------------- src/views/List.jsx | 10 +++++++++- 2 files changed, 9 insertions(+), 16 deletions(-) diff --git a/src/components/ListItem.css b/src/components/ListItem.css index 275e696..56448ca 100644 --- a/src/components/ListItem.css +++ b/src/components/ListItem.css @@ -30,17 +30,8 @@ .ListItem-label { margin-left: 0.2em; width: 100%; - display: flex; - justify-content: space-between; } -/* .ListItem-badge { - display: flex; - margin: 1em 0em; - align-items: center; - margin-left: auto; -} */ - .ListItem-badge { margin: 0; margin-bottom: 0.5em; @@ -71,9 +62,3 @@ align-items: center; width: 100%; } - -/* .item-delete-btn { - box-sizing: border-box; - background-color: white; - border: none; -} */ diff --git a/src/views/List.jsx b/src/views/List.jsx index 37329b7..025ce40 100644 --- a/src/views/List.jsx +++ b/src/views/List.jsx @@ -20,12 +20,20 @@ export function List({ listPath, data, listName, userIdFromPath }) { const sortedItems = filteredItems.sort(comparePurchaseUrgency); + if (!currentUserId) { + return ( +
          +

          Sign in to view your list items.

          +
          + ); + } + if (!data.length) { return (
          {currentUserId && listName &&

          List name: {listName}

          } From bd8ae0855a4c8844fbcfd1b3777c9af8f20d7e90 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CIryna?= <“maria14trush@gmail.com”> Date: Mon, 1 Apr 2024 21:47:37 -0700 Subject: [PATCH 19/47] add icons to the navbar, style icons, links and text --- src/index.jsx | 1 - src/views/Layout.css | 12 +++++++++--- src/views/Layout.jsx | 18 +++++++++++++++--- 3 files changed, 24 insertions(+), 7 deletions(-) diff --git a/src/index.jsx b/src/index.jsx index 54cddb2..54bde05 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -1,6 +1,5 @@ import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; -import { Theme } from '@radix-ui/themes'; import { App } from './App'; import { Theme } from '@radix-ui/themes'; diff --git a/src/views/Layout.css b/src/views/Layout.css index 9ca0775..997174f 100644 --- a/src/views/Layout.css +++ b/src/views/Layout.css @@ -96,7 +96,6 @@ path { .Nav-link { --color-text: var(--color-accent); - color: var(--color-text); font-size: 1.4em; flex: 0 1 auto; @@ -104,9 +103,16 @@ path { padding: 0.8rem; text-align: center; text-underline-offset: 0.1em; + text-decoration: none; } .Nav-link.active { - text-decoration-thickness: 0.22em; - text-underline-offset: 0.1em; + text-decoration: underline; + text-decoration-thickness: 0.2em; + text-underline-offset: 0.2em; +} + +.nav-icon { + font-size: 1.5em; + margin-bottom: 0.2em; } diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx index 4c2028f..8a74164 100644 --- a/src/views/Layout.jsx +++ b/src/views/Layout.jsx @@ -7,6 +7,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faSquareGithub } from '@fortawesome/free-brands-svg-icons'; import StackedLogo from '../assets/StackedLogo.jsx'; import CollabLabLogo from '../assets/CollabLabLogo.jsx'; +import { faHouse, faList, faUserPen } from '@fortawesome/free-solid-svg-icons'; export function Layout() { const { user } = useAuth(); @@ -44,13 +45,24 @@ export function Layout() { From 048105e944479d432f41ae29a6be97e10dda286d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CIryna?= <“maria14trush@gmail.com”> Date: Mon, 25 Mar 2024 22:38:20 -0700 Subject: [PATCH 20/47] add a delete button to the SingleList component --- src/components/ListItem.jsx | 2 +- src/components/SingleList.jsx | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx index eb1591d..29986e9 100644 --- a/src/components/ListItem.jsx +++ b/src/components/ListItem.jsx @@ -40,7 +40,7 @@ export function ListItem({ listPath, item, name }) { setIsChecked(!isExpired); } - }, [item]); + }, [item, listPath]); const getPurchaseUrgency = (item) => { const today = Timestamp.now(); diff --git a/src/components/SingleList.jsx b/src/components/SingleList.jsx index 2031e60..efc0a81 100644 --- a/src/components/SingleList.jsx +++ b/src/components/SingleList.jsx @@ -1,6 +1,8 @@ import { useNavigate } from 'react-router-dom'; import './SingleList.css'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faTrashCan } from '@fortawesome/free-regular-svg-icons'; export function SingleList({ name, path, setListPath }) { const navigate = useNavigate(); @@ -14,6 +16,9 @@ export function SingleList({ name, path, setListPath }) {
        • +
          • ); From c347406b12ef33d8990f72e31329e985031eb4a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CIryna?= <“maria14trush@gmail.com”> Date: Fri, 29 Mar 2024 23:28:17 -0700 Subject: [PATCH 21/47] add delete single list functionality to firebase file and singleList component --- src/api/firebase.js | 15 +++++++++++++++ src/components/SingleList.jsx | 22 ++++++++++++++++++++-- 2 files changed, 35 insertions(+), 2 deletions(-) diff --git a/src/api/firebase.js b/src/api/firebase.js index 5f3af3c..779d819 100644 --- a/src/api/firebase.js +++ b/src/api/firebase.js @@ -10,6 +10,7 @@ import { deleteDoc, Timestamp, increment, + arrayRemove, } from 'firebase/firestore'; import { useEffect, useState } from 'react'; import { db } from './config'; @@ -287,3 +288,17 @@ export async function getListOwnerDetails(userId, listName) { throw error; } } + +export async function deleteSingleList(userEmail, listPath) { + const userRef = doc(db, 'users', userEmail); + const listRef = doc(db, listPath); + try { + await deleteDoc(listRef); + updateDoc(userRef, { + sharedLists: arrayRemove(listRef), + }); + return { success: true, message: 'List successfully deleted' }; + } catch (error) { + throw new Error(`Could not delete currunt list. An error: ${error}`); + } +} diff --git a/src/components/SingleList.jsx b/src/components/SingleList.jsx index efc0a81..eea41a4 100644 --- a/src/components/SingleList.jsx +++ b/src/components/SingleList.jsx @@ -3,20 +3,38 @@ import { useNavigate } from 'react-router-dom'; import './SingleList.css'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faTrashCan } from '@fortawesome/free-regular-svg-icons'; +import { deleteSingleList } from '../api/firebase'; +import { useAuth } from '../api'; export function SingleList({ name, path, setListPath }) { + const { user } = useAuth(); + const navigate = useNavigate(); function handleClick() { setListPath(path); navigate('list'); } - + async function deleteSelectedList() { + if ( + window.confirm( + `Are you sure you want to delete the ${name} list? This action cannot be undone and all items in this list will be deleted.`, + ) + ) { + try { + const result = await deleteSingleList(user.email, path); + alert(result.message); + setListPath(null); + } catch (error) { + alert(`Failed to delete this list: ${error.message}`); + } + } + } return (
        • -
          • From a753c5a5b3e179be361e86c47c9c264469e93e29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CIryna?= <“maria14trush@gmail.com”> Date: Mon, 1 Apr 2024 22:18:30 -0700 Subject: [PATCH 22/47] fix eslint error with Theme --- src/index.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/index.jsx b/src/index.jsx index 54cddb2..0888be6 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -2,7 +2,6 @@ import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import { Theme } from '@radix-ui/themes'; import { App } from './App'; -import { Theme } from '@radix-ui/themes'; import '@radix-ui/themes/styles.css'; import './index.css'; From 79de3023ecb16512d8ead74c3e42b522748b5f2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CIryna?= <“maria14trush@gmail.com”> Date: Mon, 1 Apr 2024 22:32:45 -0700 Subject: [PATCH 23/47] add style to NotFoundPage component --- src/components/NotFoundPage.css | 31 +++++++++++++++++++++++++++++++ src/components/NotFoundPage.jsx | 18 ++++++++++++++---- 2 files changed, 45 insertions(+), 4 deletions(-) create mode 100644 src/components/NotFoundPage.css diff --git a/src/components/NotFoundPage.css b/src/components/NotFoundPage.css new file mode 100644 index 0000000..466fe60 --- /dev/null +++ b/src/components/NotFoundPage.css @@ -0,0 +1,31 @@ +.not-found-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; + width: 100%; +} + +.not-found-heading { + font-size: 4.5em; + margin-bottom: 0; +} + +.Nav-link { + --color-text: var(--color-cobalt-blue); + color: var(--color-text); + font-size: 1.4em; + flex: 0 1 auto; + line-height: 1; + padding: 0.8rem; + text-align: center; + text-underline-offset: 0.1em; + text-decoration: none; + opacity: 0.7; +} + +.Nav-link:hover { + opacity: 1; + text-decoration: underline; +} diff --git a/src/components/NotFoundPage.jsx b/src/components/NotFoundPage.jsx index 21d77f9..df86241 100644 --- a/src/components/NotFoundPage.jsx +++ b/src/components/NotFoundPage.jsx @@ -1,12 +1,22 @@ import React from 'react'; -import { Link } from 'react-router-dom'; +import { NavLink } from 'react-router-dom'; + +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faHouse } from '@fortawesome/free-solid-svg-icons'; + +import './NotFoundPage.css'; export default function NotFoundPage() { return ( -
          -

          404

          +
          +

          404

          Oops! The page you are looking for does not exist.

          - Go to Home Page + +
          + +
          Go to Home Page
          +
          +
          ); } From 982a9c857a8222ac48a67e05689fe265b3dced7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CIryna?= <“maria14trush@gmail.com”> Date: Mon, 1 Apr 2024 23:01:39 -0700 Subject: [PATCH 24/47] disable deleting a list for people who have access to the list but are not the owner --- src/api/firebase.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/api/firebase.js b/src/api/firebase.js index 779d819..4e83bc0 100644 --- a/src/api/firebase.js +++ b/src/api/firebase.js @@ -45,7 +45,10 @@ export function useShoppingLists(userId, userEmail) { const listRefs = docSnap.data().sharedLists; const newData = listRefs.map((listRef) => { // We keep the list's id and path so we can use them later. - return { name: listRef.id, path: listRef.path }; + return { + name: listRef.id, + path: listRef.path, + }; }); setData(newData); } @@ -292,6 +295,14 @@ export async function getListOwnerDetails(userId, listName) { export async function deleteSingleList(userEmail, listPath) { const userRef = doc(db, 'users', userEmail); const listRef = doc(db, listPath); + + const listDoc = await getDoc(listRef); + const userDoc = await getDoc(userRef); + + if (listDoc.data().ownerID !== userDoc.data().uid) { + throw new Error('You are not the owner of this list.'); + } + try { await deleteDoc(listRef); updateDoc(userRef, { From 9526b7dfcb970b12b675bb304ee931deb67f0893 Mon Sep 17 00:00:00 2001 From: Rachel Spencer Date: Tue, 2 Apr 2024 12:22:01 -0400 Subject: [PATCH 25/47] uncomment css variabled in index.css file --- src/index.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.css b/src/index.css index 4aff961..438017b 100644 --- a/src/index.css +++ b/src/index.css @@ -9,11 +9,11 @@ --color-pastel-blue: hsla(215, 100%, 73%, 1); --color-red: hsl(0, 68%, 42%); - /* --color-accent: var(--color-pastel-blue); + --color-accent: var(--color-pastel-blue); --color-bg: var(--color-black); --color-border: hsla(220, 13%, 32%, 1); --color-error: var(--color-red); - --color-text: var(--color-white); */ + --color-text: var(--color-white); } @media screen and (prefers-color-scheme: light) { From dfdf37138162ce927247ee443056aa95b57bbff7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CIryna?= <“maria14trush@gmail.com”> Date: Tue, 2 Apr 2024 10:18:19 -0700 Subject: [PATCH 26/47] remove text from the delete button --- src/components/SingleList.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SingleList.jsx b/src/components/SingleList.jsx index eea41a4..82cba4b 100644 --- a/src/components/SingleList.jsx +++ b/src/components/SingleList.jsx @@ -35,7 +35,7 @@ export function SingleList({ name, path, setListPath }) {
          • From c2570541fca0dbd15d8f4d48b1f3d4e5bf760b84 Mon Sep 17 00:00:00 2001 From: Rachel Spencer Date: Tue, 2 Apr 2024 13:37:35 -0400 Subject: [PATCH 27/47] style input and clear search button on List page using Radix library --- package-lock.json | 9 +++++++++ package.json | 1 + src/index.jsx | 1 - src/views/List.jsx | 46 +++++++++++++++++++++++++++++----------------- 4 files changed, 39 insertions(+), 18 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8aa8314..8bc5186 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@fortawesome/free-regular-svg-icons": "^6.5.1", "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/react-fontawesome": "^0.2.0", + "@radix-ui/react-icons": "^1.3.0", "@radix-ui/themes": "^3.0.1", "@the-collab-lab/shopping-list-utils": "^2.2.0", "firebase": "^10.1.0", @@ -4069,6 +4070,14 @@ } } }, + "node_modules/@radix-ui/react-icons": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz", + "integrity": "sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==", + "peerDependencies": { + "react": "^16.x || ^17.x || ^18.x" + } + }, "node_modules/@radix-ui/react-id": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz", diff --git a/package.json b/package.json index 0a2b25c..cf14105 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@fortawesome/free-regular-svg-icons": "^6.5.1", "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/react-fontawesome": "^0.2.0", + "@radix-ui/react-icons": "^1.3.0", "@radix-ui/themes": "^3.0.1", "@the-collab-lab/shopping-list-utils": "^2.2.0", "firebase": "^10.1.0", diff --git a/src/index.jsx b/src/index.jsx index 54cddb2..0888be6 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -2,7 +2,6 @@ import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import { Theme } from '@radix-ui/themes'; import { App } from './App'; -import { Theme } from '@radix-ui/themes'; import '@radix-ui/themes/styles.css'; import './index.css'; diff --git a/src/views/List.jsx b/src/views/List.jsx index 14ebd22..ddb7578 100644 --- a/src/views/List.jsx +++ b/src/views/List.jsx @@ -3,6 +3,8 @@ import { ListItem, ListOwnerMessage } from '../components'; import { Link } from 'react-router-dom'; import { comparePurchaseUrgency } from '../utils/comparePurchaseUrgency'; import { useAuth } from '../api'; +import { Flex, Box, TextField, IconButton } from '@radix-ui/themes'; +import { MagnifyingGlassIcon, Cross1Icon } from '@radix-ui/react-icons'; export function List({ listPath, data, listName, userIdFromPath }) { const [searchItem, setSearchItem] = useState(''); @@ -47,23 +49,33 @@ export function List({ listPath, data, listName, userIdFromPath }) {
          {currentUserId && listName &&

          List name: {listName}

          } - - {searchItem && ( - - )} + + + + + + + + + {searchItem && ( + setSearchItem('')} + > + + + )} + +

          Check off items as you shop, your list will reset after 24hrs.

          Only manually uncheck if you didn't make the purchase.

          <> From 3b8f2e98ef2b58968ab291352112e75cf2a8987f Mon Sep 17 00:00:00 2001 From: Rachel Spencer Date: Tue, 2 Apr 2024 13:48:51 -0400 Subject: [PATCH 28/47] correct typo in checked box instruction prompt --- src/views/List.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/List.jsx b/src/views/List.jsx index 025ce40..75f84d6 100644 --- a/src/views/List.jsx +++ b/src/views/List.jsx @@ -73,7 +73,7 @@ export function List({ listPath, data, listName, userIdFromPath }) { X )} -

          Check items will reset after 24hrs.

          +

          Checked items will reset after 24hrs.

          <>
            From 39698fae33a32cc0660ed8fae497f416f1598bbd Mon Sep 17 00:00:00 2001 From: Rachel Spencer Date: Tue, 2 Apr 2024 14:38:28 -0400 Subject: [PATCH 29/47] style create list input field on Home Page, fix search field length on List page --- src/views/Home.jsx | 17 +++++++++++++++-- src/views/List.jsx | 2 +- 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/views/Home.jsx b/src/views/Home.jsx index 686bb90..389699c 100644 --- a/src/views/Home.jsx +++ b/src/views/Home.jsx @@ -6,6 +6,7 @@ import { createList } from '../api/firebase.js'; import { Button } from '@radix-ui/themes'; import { SignInAlert } from '../components/SignInAlert.jsx'; import { useAuth } from '../api'; +import { Flex, Box, TextField } from '@radix-ui/themes'; export function Home({ data, setListPath, setListName }) { const { user } = useAuth(); @@ -43,14 +44,26 @@ export function Home({ data, setListPath, setListName }) {
            - + /> */} + + + + {user ? ( ) : ( - + )} {data.length ? ( From 6bf1d2c0cc3e04501116f148262b4a5ed47776be Mon Sep 17 00:00:00 2001 From: Christina Woodhams Date: Wed, 3 Apr 2024 14:11:26 -0400 Subject: [PATCH 37/47] remove second theme import --- src/index.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/index.jsx b/src/index.jsx index 54cddb2..0888be6 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -2,7 +2,6 @@ import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import { Theme } from '@radix-ui/themes'; import { App } from './App'; -import { Theme } from '@radix-ui/themes'; import '@radix-ui/themes/styles.css'; import './index.css'; From 1310fce9046a9222d3abfaa34e856d8caa65d856 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CIryna?= <“maria14trush@gmail.com”> Date: Wed, 3 Apr 2024 11:35:10 -0700 Subject: [PATCH 38/47] update home-link class in Layout css --- src/views/Layout.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/Layout.css b/src/views/Layout.css index 997174f..c5fdb21 100644 --- a/src/views/Layout.css +++ b/src/views/Layout.css @@ -41,7 +41,7 @@ align-items: center; justify-content: flex-end; position: fixed; - bottom: 6.18rem; + bottom: 8.18em; left: 0; padding: 0.4em 0.4em; } From dd981c0449a48817d8802d59fc21cd1b756fadf4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CIryna?= <“maria14trush@gmail.com”> Date: Wed, 3 Apr 2024 14:25:44 -0700 Subject: [PATCH 39/47] update message to the user --- src/api/firebase.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/api/firebase.js b/src/api/firebase.js index 4e83bc0..c57123f 100644 --- a/src/api/firebase.js +++ b/src/api/firebase.js @@ -300,7 +300,7 @@ export async function deleteSingleList(userEmail, listPath) { const userDoc = await getDoc(userRef); if (listDoc.data().ownerID !== userDoc.data().uid) { - throw new Error('You are not the owner of this list.'); + throw new Error("You can't delete this list because you are not the owner"); } try { @@ -310,6 +310,6 @@ export async function deleteSingleList(userEmail, listPath) { }); return { success: true, message: 'List successfully deleted' }; } catch (error) { - throw new Error(`Could not delete currunt list. An error: ${error}`); + throw new Error(`Could not delete current list. An error: ${error}`); } } From 28b29adced77f4e69969d45a5db4e015cdc6206d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CIryna?= <“maria14trush@gmail.com”> Date: Wed, 3 Apr 2024 14:43:58 -0700 Subject: [PATCH 40/47] change the font-size for the navbar --- src/components/NotFoundPage.css | 4 ++-- src/components/NotFoundPage.jsx | 2 +- src/views/Layout.css | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/NotFoundPage.css b/src/components/NotFoundPage.css index 466fe60..4cb3a78 100644 --- a/src/components/NotFoundPage.css +++ b/src/components/NotFoundPage.css @@ -12,7 +12,7 @@ margin-bottom: 0; } -.Nav-link { +.not-found-page-nav-link { --color-text: var(--color-cobalt-blue); color: var(--color-text); font-size: 1.4em; @@ -25,7 +25,7 @@ opacity: 0.7; } -.Nav-link:hover { +.not-found-page-nav-link:hover { opacity: 1; text-decoration: underline; } diff --git a/src/components/NotFoundPage.jsx b/src/components/NotFoundPage.jsx index df86241..a1a4ded 100644 --- a/src/components/NotFoundPage.jsx +++ b/src/components/NotFoundPage.jsx @@ -11,7 +11,7 @@ export default function NotFoundPage() {

            404

            Oops! The page you are looking for does not exist.

            - +
            Go to Home Page
            diff --git a/src/views/Layout.css b/src/views/Layout.css index c5fdb21..0f190f7 100644 --- a/src/views/Layout.css +++ b/src/views/Layout.css @@ -97,7 +97,7 @@ path { .Nav-link { --color-text: var(--color-accent); color: var(--color-text); - font-size: 1.4em; + font-size: 0.85em; flex: 0 1 auto; line-height: 1; padding: 0.8rem; From 9a62ae59ac4047ae78117f7823e5c069d9a73106 Mon Sep 17 00:00:00 2001 From: Rachel Spencer Date: Thu, 4 Apr 2024 11:14:20 -0400 Subject: [PATCH 41/47] resolve merge conflicts from local branch rs-style-list-component to local main --- package-lock.json | 9 +++++++ package.json | 1 + src/components/AddItem.jsx | 11 ++++++++- src/components/ShareList.jsx | 12 ++++++++-- src/components/SingleList.css | 9 ++++--- src/components/SingleList.jsx | 9 ++++--- src/custom-styles.css | 5 ++++ src/views/Home.css | 8 +++++++ src/views/Home.jsx | 24 +++++++++++-------- src/views/List.jsx | 45 ++++++++++++++++++++++------------- 10 files changed, 93 insertions(+), 40 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8aa8314..8bc5186 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@fortawesome/free-regular-svg-icons": "^6.5.1", "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/react-fontawesome": "^0.2.0", + "@radix-ui/react-icons": "^1.3.0", "@radix-ui/themes": "^3.0.1", "@the-collab-lab/shopping-list-utils": "^2.2.0", "firebase": "^10.1.0", @@ -4069,6 +4070,14 @@ } } }, + "node_modules/@radix-ui/react-icons": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz", + "integrity": "sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==", + "peerDependencies": { + "react": "^16.x || ^17.x || ^18.x" + } + }, "node_modules/@radix-ui/react-id": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz", diff --git a/package.json b/package.json index 0a2b25c..cf14105 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@fortawesome/free-regular-svg-icons": "^6.5.1", "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/react-fontawesome": "^0.2.0", + "@radix-ui/react-icons": "^1.3.0", "@radix-ui/themes": "^3.0.1", "@the-collab-lab/shopping-list-utils": "^2.2.0", "firebase": "^10.1.0", diff --git a/src/components/AddItem.jsx b/src/components/AddItem.jsx index 098d3b5..222d58a 100644 --- a/src/components/AddItem.jsx +++ b/src/components/AddItem.jsx @@ -5,6 +5,7 @@ import { SignInAlert } from './SignInAlert.jsx'; import { useAuth } from '../api/useAuth.jsx'; import '../custom-styles.css'; import { Button } from '@radix-ui/themes'; +import { Box, TextField } from '@radix-ui/themes'; export function AddItem({ listPath, data }) { const formRef = useRef(null); @@ -48,7 +49,15 @@ export function AddItem({ listPath, data }) {
            - + + +
            diff --git a/src/components/ShareList.jsx b/src/components/ShareList.jsx index 5ed234f..7c88e93 100644 --- a/src/components/ShareList.jsx +++ b/src/components/ShareList.jsx @@ -4,6 +4,7 @@ import { useAuth } from '../api'; import { validateEmail } from '../utils/emailValidator.js'; import { Button } from '@radix-ui/themes'; import { SignInAlert } from './SignInAlert.jsx'; +import { Box, TextField } from '@radix-ui/themes'; export function ShareList({ listPath }) { const [recipientEmail, setRecipientEmail] = useState(''); @@ -53,12 +54,19 @@ export function ShareList({ listPath }) {

            You can share this shopping list with existing users!

            - + /> */} + + + +

            {emailValidator}

            {user ? ( diff --git a/src/components/SingleList.css b/src/components/SingleList.css index da876f4..a72b04b 100644 --- a/src/components/SingleList.css +++ b/src/components/SingleList.css @@ -28,11 +28,10 @@ } } -.SingleList > Link { - margin-left: 0.2em; - width: 100%; - display: flex; - justify-content: space-between; +.list-link { + margin-left: 1em; + color: var(--color-text); + text-decoration: none; } .list-title { diff --git a/src/components/SingleList.jsx b/src/components/SingleList.jsx index 2031e60..9dbfff4 100644 --- a/src/components/SingleList.jsx +++ b/src/components/SingleList.jsx @@ -1,19 +1,18 @@ -import { useNavigate } from 'react-router-dom'; +import { Link } from 'react-router-dom'; import './SingleList.css'; export function SingleList({ name, path, setListPath }) { - const navigate = useNavigate(); - function handleClick() { setListPath(path); - navigate('list'); } return (
          • - + + {name} +
            • ); diff --git a/src/custom-styles.css b/src/custom-styles.css index bc2316a..0ac63a3 100644 --- a/src/custom-styles.css +++ b/src/custom-styles.css @@ -10,4 +10,9 @@ button.custom-button:hover { background-color: #71b8d5; } + + .icon-styles { + height: 1.2em; + width: 1.2em; + } } diff --git a/src/views/Home.css b/src/views/Home.css index e69de29..1b2c952 100644 --- a/src/views/Home.css +++ b/src/views/Home.css @@ -0,0 +1,8 @@ +ul { + margin: 1em; + padding: 0 1.25em; +} + +.list-title { + text-decoration: none; +} diff --git a/src/views/Home.jsx b/src/views/Home.jsx index 686bb90..ac7bd2f 100644 --- a/src/views/Home.jsx +++ b/src/views/Home.jsx @@ -6,6 +6,7 @@ import { createList } from '../api/firebase.js'; import { Button } from '@radix-ui/themes'; import { SignInAlert } from '../components/SignInAlert.jsx'; import { useAuth } from '../api'; +import { Box, TextField } from '@radix-ui/themes'; export function Home({ data, setListPath, setListName }) { const { user } = useAuth(); @@ -43,20 +44,23 @@ export function Home({ data, setListPath, setListName }) {
            - + + + {user ? ( ) : ( - + )} {data.length ? ( diff --git a/src/views/List.jsx b/src/views/List.jsx index 75f84d6..2d93dc3 100644 --- a/src/views/List.jsx +++ b/src/views/List.jsx @@ -4,6 +4,8 @@ import { Link } from 'react-router-dom'; import { comparePurchaseUrgency } from '../utils/comparePurchaseUrgency'; import { useAuth } from '../api'; import './List.css'; +import { Flex, Box, TextField, IconButton } from '@radix-ui/themes'; +import { MagnifyingGlassIcon, Cross1Icon } from '@radix-ui/react-icons'; export function List({ listPath, data, listName, userIdFromPath }) { const [searchItem, setSearchItem] = useState(''); @@ -56,23 +58,32 @@ export function List({ listPath, data, listName, userIdFromPath }) {
            {currentUserId && listName &&

            List name: {listName}

            } - - {searchItem && ( - - )} + + + + + + + + + {searchItem && ( + setSearchItem('')} + > + + + )} +

            Checked items will reset after 24hrs.

            <>
              From 35607bf2a7c155dccb74d900bc037219a9a35daa Mon Sep 17 00:00:00 2001 From: Paige Date: Thu, 4 Apr 2024 10:45:09 -0500 Subject: [PATCH 42/47] added radix theme button to sign in/out button for consistent styling --- src/api/useAuth.jsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/api/useAuth.jsx b/src/api/useAuth.jsx index aa6cb8d..02a4308 100644 --- a/src/api/useAuth.jsx +++ b/src/api/useAuth.jsx @@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'; import { auth } from './config.js'; import { GoogleAuthProvider, signInWithRedirect } from 'firebase/auth'; import { addUserToDatabase } from './firebase.js'; +import { Button } from '@radix-ui/themes'; /** * A button that signs the user in using Google OAuth. When clicked, @@ -9,22 +10,22 @@ import { addUserToDatabase } from './firebase.js'; * After the user signs in, they are redirected back to the app. */ export const SignInButton = () => ( - + ); /** * A button that signs the user out of the app using Firebase Auth. */ export const SignOutButton = () => ( - + ); /** From f642d52eb0902c8ba33653e632e79f8701f5ce02 Mon Sep 17 00:00:00 2001 From: jaguilar89 Date: Thu, 4 Apr 2024 12:13:49 -0400 Subject: [PATCH 43/47] adjusted bg color opacity for dark mode to fix issue with opaque background when viewing a modal alert --- src/index.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/index.css b/src/index.css index 6703e94..dc38141 100644 --- a/src/index.css +++ b/src/index.css @@ -4,9 +4,11 @@ --color-white: hsla(220, 13%, 98%, 1); --color-dark-blue-two: #1c478b; --color-powder-blue: #accbff; + --color-dark: hsla(222, 13%, 100%, 0.1); + --color-light: hsla(220, 13%, 98%, 0); - --color-bg-dark: var(--color-black); - --color-bg-light: var(--color-white); + --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-text-dark: var(--color-white); From 62786f838e5f302038870d313a8c16a8298360e8 Mon Sep 17 00:00:00 2001 From: jaguilar89 Date: Thu, 4 Apr 2024 12:57:46 -0400 Subject: [PATCH 44/47] added sign in/out icons to buttons --- src/api/useAuth.jsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/api/useAuth.jsx b/src/api/useAuth.jsx index 4eb7813..380f604 100644 --- a/src/api/useAuth.jsx +++ b/src/api/useAuth.jsx @@ -3,6 +3,8 @@ import { auth } from './config.js'; import { GoogleAuthProvider, signInWithRedirect } from 'firebase/auth'; import { addUserToDatabase } from './firebase.js'; import { Button } from '@radix-ui/themes'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faSignIn, faSignOut } from '@fortawesome/free-solid-svg-icons'; /** * A button that signs the user in using Google OAuth. When clicked, * the button redirects the user to the Google OAuth sign-in page. @@ -15,6 +17,7 @@ export const SignInButton = () => ( className="custom-button" onClick={() => signInWithRedirect(auth, new GoogleAuthProvider())} > + Sign In ); @@ -29,6 +32,7 @@ export const SignOutButton = () => ( className="custom-button" onClick={() => auth.signOut()} > + Sign Out ); From 3b297daeb6b6c541612832e0795e2c0e79ab34b1 Mon Sep 17 00:00:00 2001 From: Christina Woodhams Date: Thu, 4 Apr 2024 13:04:10 -0400 Subject: [PATCH 45/47] added Theme import that was accidentally removed --- src/index.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.jsx b/src/index.jsx index 7e235c1..6624bbd 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -5,6 +5,7 @@ import { App } from './App'; import '@radix-ui/themes/styles.css'; import './index.css'; import './custom-styles.css'; +import { Theme } from '@radix-ui/themes'; const root = createRoot(document.getElementById('root')); root.render( From 60652c6564aaccad70e7369fd24b1179348abe46 Mon Sep 17 00:00:00 2001 From: jaguilar89 Date: Thu, 4 Apr 2024 15:12:17 -0400 Subject: [PATCH 46/47] installed react-dark-mode-toggle v2 --- package-lock.json | 23 +++++++++++------------ package.json | 2 +- src/views/Layout.jsx | 4 ++-- 3 files changed, 14 insertions(+), 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index d5f6b7d..0479b39 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,7 @@ "@the-collab-lab/shopping-list-utils": "^2.2.0", "firebase": "^10.1.0", "react": "^18.2.0", - "react-dark-mode-toggle": "^0.2.0", + "react-dark-mode-toggle-2": "^2.0.9", "react-dom": "^18.2.0", "react-router-dom": "^6.14.2" }, @@ -10732,11 +10732,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/parse-unit": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/parse-unit/-/parse-unit-1.0.1.tgz", - "integrity": "sha512-hrqldJHokR3Qj88EIlV/kAyAi/G5R2+R56TBANxNMy0uPlYcttx0jnMW6Yx5KsKPSbC3KddM/7qQm3+0wEXKxg==" - }, "node_modules/parse5": { "version": "7.1.2", "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz", @@ -11036,13 +11031,17 @@ "node": ">=0.10.0" } }, - "node_modules/react-dark-mode-toggle": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/react-dark-mode-toggle/-/react-dark-mode-toggle-0.2.0.tgz", - "integrity": "sha512-YGN6EKU54TaEIQ2G5veB+XVRXSsbyrW9+rop/1Ap06A0z1j6QBVuMIZjhQpwYLKVhSPIxoe7zsWj0cZaEf7cQA==", + "node_modules/react-dark-mode-toggle-2": { + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/react-dark-mode-toggle-2/-/react-dark-mode-toggle-2-2.0.9.tgz", + "integrity": "sha512-bW++7scae/03CYEawI4RW9aeikNWadJ9vwZTa9i6dbiloJnLPRxAsg8BH9zbtVf4SbalqPHoRycKw2rO1KHPig==", "dependencies": { - "parse-unit": "^1.0.1", - "react-lottie-player": "^1.1.1" + "classnames": "^2.3.2", + "react-lottie-player": "^1.4.3" + }, + "peerDependencies": { + "react": "^16.14.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0" } }, "node_modules/react-dom": { diff --git a/package.json b/package.json index 1e460a8..050ccd4 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "@the-collab-lab/shopping-list-utils": "^2.2.0", "firebase": "^10.1.0", "react": "^18.2.0", - "react-dark-mode-toggle": "^0.2.0", + "react-dark-mode-toggle-2": "^2.0.9", "react-dom": "^18.2.0", "react-router-dom": "^6.14.2" }, diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx index 5616042..94e3bb9 100644 --- a/src/views/Layout.jsx +++ b/src/views/Layout.jsx @@ -4,7 +4,7 @@ import { SignInButton, SignOutButton, useAuth } from '../api/useAuth.jsx'; import { Flex } from '@radix-ui/themes'; import { useContext } from 'react'; import { DarkModeContext } from '../providers/DarkModeProvider.jsx'; -import DarkModeToggle from 'react-dark-mode-toggle'; +import { DarkModeToggle } from 'react-dark-mode-toggle-2'; /** * TODO: The links defined in this file don't work! @@ -27,7 +27,7 @@ export function Layout() { From c2f2a95f2c6cb32d20a8d87b7845f1b62f9db2f6 Mon Sep 17 00:00:00 2001 From: jaguilar89 Date: Thu, 4 Apr 2024 16:07:28 -0400 Subject: [PATCH 47/47] removed path class rule from Layout.css --- src/views/Layout.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/views/Layout.css b/src/views/Layout.css index 4cf9163..dd278fa 100644 --- a/src/views/Layout.css +++ b/src/views/Layout.css @@ -70,10 +70,6 @@ margin: 0.2em; } -path { - fill: var(--color-text); -} - .Nav { border-top: 1px solid var(--color-border); bottom: 0;