-
404
+
+
404
Oops! The page you are looking for does not exist.
-
Go to Home Page
+
+
+
);
}
diff --git a/src/components/ShareList.jsx b/src/components/ShareList.jsx
index e225d13..665eec2 100644
--- a/src/components/ShareList.jsx
+++ b/src/components/ShareList.jsx
@@ -2,7 +2,7 @@ import { shareList } from '../api/firebase';
import { useState } from 'react';
import { useAuth } from '../api';
import { validateEmail } from '../utils/emailValidator.js';
-import { Button, Badge, Text, Box } from '@radix-ui/themes';
+import { Button, Badge, Text, Box, TextField } from '@radix-ui/themes';
import { SignInAlert } from './ModalAlerts.jsx';
import { toast } from 'react-toastify';
@@ -53,12 +53,18 @@ export function ShareList({ listPath }) {
);
}
-
-// We want to further refactor our validators. Below is some code we would like to further refactor and impliment at a later date.
-// import { shareList } from '../api/firebase';
-// import { useState } from 'react';
-// import { useAuth } from '../api';
-// import { validateEmail } from '../utils/emailValidator.js';
-
-// export function ShareList({ listPath }) {
-// const [recipientEmail, setRecipientEmail] = useState('');
-// const [isValid, setIsValid] = useState(false);
-// const [emailValidationMessage, setEmailValidationMessage] = useState('');
-// const [hasSubmitted, setHasSubmitted] = useState(false);
-// const { user } = useAuth();
-// const currentUserId = user?.uid;
-
-// const handleChange = (e) => {
-// setRecipientEmail(e.target.value);
-
-// if (hasSubmitted) {
-// // user has submitted, so update validation on change
-// const isValidEmail = validateEmail(e.target.value);
-// setIsValid(isValidEmail);
-// setEmailValidationMessage(isValidEmail ? '' : 'Please enter a valid email');
-// }
-// };
-
-// const handleSubmit = async (e) => {
-// e.preventDefault();
-// setHasSubmitted(true);
-
-// const isValidEmail = validateEmail(recipientEmail);
-
-// // check for empty string
-// if (!recipientEmail) {
-// setIsValid(false);
-// setEmailValidationMessage('Please enter a valid email');
-// alert('Cannot submit without an email.');
-// setHasSubmitted(false);
-// return;
-// }
-// //check if email is not valid
-// if (!isValidEmail) {
-// setIsValid(false);
-// setEmailValidationMessage('Please enter a valid email');
-// alert('Cannot submit with an invalid email');
-// return;
-// }
-// try {
-// await shareList(listPath, currentUserId, recipientEmail);
-// alert('List was successfully shared!');
-// setRecipientEmail('');
-// setHasSubmitted(false);
-// } catch (error) {
-// alert(error);
-// }
-// };
-// return (
-//
-// );
-// }
diff --git a/src/components/SignInAlert.jsx b/src/components/SignInAlert.jsx
new file mode 100644
index 0000000..7188420
--- /dev/null
+++ b/src/components/SignInAlert.jsx
@@ -0,0 +1,30 @@
+import { AlertDialog, Button, Flex } from '@radix-ui/themes';
+import { SignInButton } from '../api/useAuth';
+import '../custom-styles.css';
+
+export function SignInAlert({ action }) {
+ return (
+
+
+
+
+
+ Sign In
+
+ In order to perform this action, you must sign in first.
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
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..e646e84 100644
--- a/src/components/SingleList.jsx
+++ b/src/components/SingleList.jsx
@@ -1,19 +1,42 @@
-import { useNavigate } from 'react-router-dom';
+import { Link } 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 navigate = useNavigate();
+ const { user } = useAuth();
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 (
-
+
+ {name}
+
+
);
diff --git a/src/custom-styles.css b/src/custom-styles.css
index bc2316a..9453e93 100644
--- a/src/custom-styles.css
+++ b/src/custom-styles.css
@@ -1,13 +1,91 @@
@layer radix_ui, index, utils;
@import '@radix-ui/themes/styles.css' layer(radix_ui);
+@import './index.css';
@layer utils {
/* custom styles for Radix components go here*/
- button.custom-button {
- background-color: #87ceeb;
+
+ @media screen and (prefers-color-scheme: dark) {
+ .dark,
+ .dark-theme {
+ 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-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);
+ }
+ }
+
+ .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);
+ }
+ }
+
+ button {
+ cursor: pointer;
}
- button.custom-button:hover {
- background-color: #71b8d5;
+ .icon-styles {
+ height: 1.2em;
+ width: 1.2em;
}
}
diff --git a/src/index.css b/src/index.css
index 28579f1..fc86a40 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,34 +2,17 @@
--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-dark: hsla(222, 13%, 100%, 0.1);
+ --color-light: hsla(220, 13%, 98%, 0);
- --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-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);
+ --color-text-light: var(--color-black);
}
*,
@@ -55,10 +38,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;
@@ -67,26 +59,17 @@ body {
-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;
+.delete-btn {
+ box-sizing: border-box;
+ background-color: unset;
+ border: none;
}
-@media screen and (prefers-color-scheme: light) {
- code {
- --color-bg: var(--color-gray-light);
- }
+.delete-icon {
+ height: 1.5em;
}
-:root.theme-light code {
- --color-bg: var(--color-gray-light);
+input[type='checkbox'] {
+ height: 1.4em;
+ width: 1.4em;
}
diff --git a/src/index.jsx b/src/index.jsx
index 494bf03..9b4357c 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,19 +1,30 @@
-import { StrictMode } from 'react';
+import { StrictMode, useContext } from 'react';
import { createRoot } from 'react-dom/client';
+import {
+ DarkModeContext,
+ DarkModeProvider,
+} from './providers/DarkModeProvider';
import { Theme } from '@radix-ui/themes';
import { App } from './App';
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
-
-import '@radix-ui/themes/styles.css';
-import './index.css';
import './custom-styles.css';
+function AppWithTheme() {
+ const { isDarkMode } = useContext(DarkModeContext);
+
+ return (
+
+
+
+ );
+}
+
const root = createRoot(document.getElementById('root'));
root.render(
-
-
+
+
-
+
,
);
diff --git a/src/providers/DarkModeProvider.jsx b/src/providers/DarkModeProvider.jsx
new file mode 100644
index 0000000..4481bb4
--- /dev/null
+++ b/src/providers/DarkModeProvider.jsx
@@ -0,0 +1,41 @@
+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)');
+
+ //return users manually chosen preference if it exists, otherwise return media query result
+ if (storedPreference) {
+ return JSON.parse(storedPreference);
+ }
+
+ return prefersDarkMode.matches;
+ });
+
+ useEffect(() => {
+ const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+ const handleChange = () => {
+ localStorage.removeItem('isDarkMode');
+ setIsDarkMode(mediaQuery.matches);
+ };
+ //'change' event listens for any changes in the users system preference
+ mediaQuery.addEventListener('change', handleChange);
+
+ return () => mediaQuery.removeEventListener('change', handleChange);
+ }, []);
+
+ const toggleDarkMode = () => {
+ const newMode = !isDarkMode;
+ setIsDarkMode(newMode);
+ localStorage.setItem('isDarkMode', JSON.stringify(newMode));
+ };
+
+ return (
+
+ {children}
+
+ );
+}
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 42bae68..c17211c 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/ModalAlerts.jsx';
import { useAuth } from '../api';
+import { Box, TextField } from '@radix-ui/themes';
import { toast } from 'react-toastify';
export function Home({ data, setListPath, setListName }) {
@@ -44,19 +45,23 @@ export function Home({ data, setListPath, setListName }) {
{data.length ? (
diff --git a/src/views/Layout.css b/src/views/Layout.css
index 9ca0775..a176c53 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 > * {
@@ -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;
@@ -41,14 +51,13 @@
align-items: center;
justify-content: flex-end;
position: fixed;
- bottom: 6.18rem;
+ bottom: 8.18em;
left: 0;
padding: 0.4em 0.4em;
}
@media screen and (min-width: 850px) {
.home-links {
- /* width: auto; */
flex-direction: row;
padding-left: 0.7em;
}
@@ -70,12 +79,7 @@
margin: 0.2em;
}
-path {
- fill: var(--color-text);
-}
-
.Nav {
- background-color: var(--color-bg);
border-top: 1px solid var(--color-border);
bottom: 0;
display: flex;
@@ -96,17 +100,23 @@ 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;
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..f488a2a 100644
--- a/src/views/Layout.jsx
+++ b/src/views/Layout.jsx
@@ -1,23 +1,36 @@
import { Outlet, NavLink, useLocation } 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 '../providers/DarkModeProvider.jsx';
+import { DarkModeToggle } from 'react-dark-mode-toggle-2';
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();
const location = useLocation();
+ const { isDarkMode, toggleDarkMode } = useContext(DarkModeContext);
return (
<>
+
+ {!!user ? : }
+
Smart shopping list
- {!!user ? : }
+
+
+
@@ -44,13 +57,24 @@ export function Layout() {
diff --git a/src/views/List.css b/src/views/List.css
new file mode 100644
index 0000000..00631be
--- /dev/null
+++ b/src/views/List.css
@@ -0,0 +1,3 @@
+.checkbox-prompt {
+ font-style: italic;
+}
diff --git a/src/views/List.jsx b/src/views/List.jsx
index 14ebd22..2d93dc3 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -3,6 +3,9 @@ import { ListItem, ListOwnerMessage } from '../components';
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('');
@@ -19,12 +22,20 @@ export function List({ listPath, data, listName, userIdFromPath }) {
const sortedItems = filteredItems.sort(comparePurchaseUrgency);
+ if (!currentUserId) {
+ return (
+
+
Sign in to view your list items.
+
{currentUserId && listName &&
List name: {listName}
}
@@ -47,30 +58,37 @@ export function List({ listPath, data, listName, userIdFromPath }) {
{currentUserId && listName &&
List name: {listName}
}
-
- {searchItem && (
-
- )}
-
Check off items as you shop, your list will reset after 24hrs.
-
Only manually uncheck if you didn't make the purchase.
+
+
+
+
+
+
+
+
+ {searchItem && (
+ setSearchItem('')}
+ >
+
+
+ )}
+
+
Checked items will reset after 24hrs.
<>
-
Item Name
-
Purchase Priority
+
Item Name & Priority