From 7a7ddeff3e12b9d17b88cfb892e7830b3982979d Mon Sep 17 00:00:00 2001 From: Sarah Meko Date: Thu, 17 Oct 2024 18:07:19 -0700 Subject: [PATCH 01/13] adjust colors for better contrast ratio and add more aria-labels --- src/api/useAuth.jsx | 4 ++-- src/components/ListItem.jsx | 4 ++-- src/components/ShareListComponent.jsx | 2 +- src/components/SingleList.jsx | 8 ++++++- src/views/Home.jsx | 31 +++++++++++++++++++-------- src/views/Layout.jsx | 5 +++-- src/views/List.jsx | 28 ++++++++++++++++++++++-- src/views/ManageList.jsx | 6 +++++- tailwind.config.js | 14 +++++++++++- 9 files changed, 81 insertions(+), 21 deletions(-) diff --git a/src/api/useAuth.jsx b/src/api/useAuth.jsx index 8277581..f6c539a 100644 --- a/src/api/useAuth.jsx +++ b/src/api/useAuth.jsx @@ -12,7 +12,7 @@ export const SignInButton = () => ( @@ -25,7 +25,7 @@ export const SignOutButton = () => ( diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx index 6d53826..7acd50b 100644 --- a/src/components/ListItem.jsx +++ b/src/components/ListItem.jsx @@ -54,7 +54,7 @@ export function ListItem({ item }) { }; return ( -
  • +
  • -
    +

    • Last Purchase:

      diff --git a/src/components/ShareListComponent.jsx b/src/components/ShareListComponent.jsx index eee587b..69f9829 100644 --- a/src/components/ShareListComponent.jsx +++ b/src/components/ShareListComponent.jsx @@ -12,7 +12,7 @@ export function ShareListComponent({ path, setListPath }) { return ( <> - diff --git a/src/components/SingleList.jsx b/src/components/SingleList.jsx index fe2e7f0..6c8acca 100644 --- a/src/components/SingleList.jsx +++ b/src/components/SingleList.jsx @@ -11,7 +11,13 @@ export function SingleList({ name, path, setListPath }) { return (
    • - +
      • ); } diff --git a/src/views/Home.jsx b/src/views/Home.jsx index 905b636..b4b24aa 100644 --- a/src/views/Home.jsx +++ b/src/views/Home.jsx @@ -76,26 +76,31 @@ export function Home({ data, setListPath, setAllLists }) { console.log(error); } }; - + // style={{background:'#676D16'} return ( -
      -
        +
        +
          {data && data.map((list) => { const uniqueId = crypto.randomUUID(); return ( -
          +
          + {/* style={{background:'black'}} */} -
          +
          {!list.isShared && ( @@ -106,6 +111,7 @@ export function Home({ data, setListPath, setAllLists }) { @@ -126,17 +132,24 @@ export function Home({ data, setListPath, setAllLists }) { onSubmit={handleSubmit} className="flex flex-col sm:flex-row items-center space-y-2 sm:space-y-0 sm:space-x-4 mt-4" > - + setListName(e.target.value)} /> - - +

          {error}

          diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx index 3e720b3..69bdea9 100644 --- a/src/views/Layout.jsx +++ b/src/views/Layout.jsx @@ -6,7 +6,7 @@ import { useAuth, SignInButton, SignOutButton } from '../api'; const handleActive = ({ isActive }) => { return { fontWeight: isActive ? '900' : '', - color: isActive ? '#E8C900' : 'rgb(247 253 235 / 68%)', + color: isActive ? 'rgb(237 208 0)' : 'white', }; }; @@ -28,7 +28,7 @@ export function Layout() {
          {/* Navbar on Desktop */} -
          +
          Home @@ -79,3 +79,4 @@ export function Layout() { ); } +// style={{background:'#969877'}} diff --git a/src/views/List.jsx b/src/views/List.jsx index 259bf51..390ffc2 100644 --- a/src/views/List.jsx +++ b/src/views/List.jsx @@ -2,14 +2,17 @@ import { ListItem } from '../components'; import { useState, useEffect, Fragment } from 'react'; import BasicModal from './Modal'; import { comparePurchaseUrgency } from '../api'; +import { useVoiceToText } from '../utils'; import SearchRoundedIcon from '@mui/icons-material/SearchRounded'; import AddBoxRoundedIcon from '@mui/icons-material/AddBoxRounded'; +import KeyboardVoiceIcon from '@mui/icons-material/KeyboardVoice'; export function List({ data, userId, path }) { const [filterVal, setFilterVal] = useState(''); const [filteredObject, setFilteredObject] = useState({}); const [sortedList, setSortedList] = useState([]); const [showModal, setShowModal] = useState(false); + const { text, isListening, startListening } = useVoiceToText(); const dataEmpty = userId && !data.length; const message = { @@ -26,6 +29,20 @@ export function List({ data, userId, path }) { } }, []); + useEffect(() => { + if (text) { + setFilterVal((prev) => ({ ...prev, name: text })); + } + }, [text]); + + function handleChange(e) { + e.preventDefault(); + setFilterVal((prev) => ({ + ...prev, + [e.target.name]: e.target.value, + })); + } + const clearInput = (e) => { e.preventDefault(); setFilterVal(''); @@ -65,7 +82,7 @@ export function List({ data, userId, path }) { )} - @@ -79,10 +96,17 @@ export function List({ data, userId, path }) { name="item-name" type="text" value={filterVal} - onChange={(e) => setFilterVal(e.target.value)} + onChange={handleChange} placeholder="e.g. Apple" /> + {filterVal && } diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx index 1652624..73a9fc3 100644 --- a/src/views/ManageList.jsx +++ b/src/views/ManageList.jsx @@ -118,7 +118,11 @@ export function ManageList({ list }) { >

          diff --git a/tailwind.config.js b/tailwind.config.js index 00c04c6..f04f5d2 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -13,7 +13,19 @@ export default { }, plugins: [require('daisyui')], daisyui: { - themes: ['lemonade', 'coffee'], + themes: [ + { + lemonade: { + ...require('daisyui/src/theming/themes')['lemonade'], + primary: '#004F2D', + + secondary: '#676D16', + // accent:"#bec000", + }, + }, + , + 'coffee', + ], base: true, }, }; From 1ce3d3a8b61e1b917fb6e644399aa260eb7c12da Mon Sep 17 00:00:00 2001 From: Sarah Meko Date: Thu, 17 Oct 2024 18:31:24 -0700 Subject: [PATCH 02/13] adjust colors on buttons, and input text size --- src/api/useAuth.jsx | 4 ++-- src/index.css | 5 ++++- src/views/Home.jsx | 8 +++++--- src/views/List.jsx | 2 +- 4 files changed, 12 insertions(+), 7 deletions(-) diff --git a/src/api/useAuth.jsx b/src/api/useAuth.jsx index f6c539a..6b86f40 100644 --- a/src/api/useAuth.jsx +++ b/src/api/useAuth.jsx @@ -12,7 +12,7 @@ export const SignInButton = () => ( @@ -25,7 +25,7 @@ export const SignOutButton = () => ( diff --git a/src/index.css b/src/index.css index 9f6f530..192665b 100644 --- a/src/index.css +++ b/src/index.css @@ -29,7 +29,7 @@ } button { @apply btn - text-2xl font-sans font-normal btn-secondary m-2; + text-2xl font-sans font-bold btn-secondary m-2 text-white; } /*temporary for the 'Hello from the [/list] Page' titles */ p { @@ -39,6 +39,9 @@ select { @apply input input-bordered mx-3; } + input[type='text'] { + @apply text-2xl; + } /* header { @apply navbar drop-shadow-lg diff --git a/src/views/Home.jsx b/src/views/Home.jsx index b4b24aa..94f5e7b 100644 --- a/src/views/Home.jsx +++ b/src/views/Home.jsx @@ -130,7 +130,7 @@ export function Home({ data, setListPath, setAllLists }) {
          diff --git a/src/views/List.jsx b/src/views/List.jsx index 390ffc2..6cb7501 100644 --- a/src/views/List.jsx +++ b/src/views/List.jsx @@ -84,7 +84,7 @@ export function List({ data, userId, path }) {
          From 7b3b7d8c3a25a06e3fe954342bd59b76220f2a9e Mon Sep 17 00:00:00 2001 From: Sarah Meko Date: Thu, 17 Oct 2024 20:34:46 -0700 Subject: [PATCH 03/13] transfer home styles to list page --- src/components/ListItem.jsx | 87 ++++++++++++++++++++----------------- src/views/Home.jsx | 4 +- src/views/List.jsx | 30 +++++++------ 3 files changed, 65 insertions(+), 56 deletions(-) diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx index 7acd50b..d6d55e9 100644 --- a/src/components/ListItem.jsx +++ b/src/components/ListItem.jsx @@ -54,49 +54,56 @@ export function ListItem({ item }) { }; return ( -
        • - -

          {name}

          +
        • +
          + +

          {name}

          +
          - -
          - -
          -
            -
          • -

            Last Purchase:

            - - {' '} - {dateLastPurchased - ? dateLastPurchased.toDate().toDateString() - : 'N/A'} - -
            • -
          • -

            Next Purchase:

            +
            +
            + +
            +
              +
            • +

              Last Purchase:

              + + {' '} + {dateLastPurchased + ? dateLastPurchased.toDate().toDateString() + : 'N/A'} + +
              • +
            • +

              Next Purchase:

              - {dateNextPurchased?.toDate().toDateString()} -
              • -
            • -

              Total Purchases:

              - {totalPurchases} -
              • -
            + {dateNextPurchased?.toDate().toDateString()} +
            • +
          • +

            Total Purchases:

            + {totalPurchases} +
            • +
          +
          +
          • ); diff --git a/src/views/Home.jsx b/src/views/Home.jsx index 94f5e7b..304a4f5 100644 --- a/src/views/Home.jsx +++ b/src/views/Home.jsx @@ -95,11 +95,10 @@ export function Home({ data, setListPath, setAllLists }) { setListPath={setListPath} path={list.path} /> -
          +
          {!list.isShared && ( {filterVal && } +
          +
            + {filteredObject && + Object.entries(filteredObject).map(([timeBucket, list]) => ( +
          • +
            +

            {labels[timeBucket]}

            +
            + {list.map((item) => ( + + ))} +
            • + // -
              - {filteredObject && - Object.entries(filteredObject).map(([timeBucket, list]) => ( - -
              -

              {labels[timeBucket]}

              -
              - {list.map((item) => ( - - ))} -               - ))} -
            + //             + ))} +
          +
          ); } From 10c28ff22604ca147d93eb38db458f0fbb7aca1d Mon Sep 17 00:00:00 2001 From: Sarah Meko Date: Thu, 17 Oct 2024 21:14:56 -0700 Subject: [PATCH 04/13] add functionality for resuable modals and home without sign in --- src/index.css | 5 +- src/views/Home.jsx | 163 ++++++++++++++++++++++++-------------------- src/views/List.jsx | 1 + src/views/Modal.jsx | 2 +- 4 files changed, 92 insertions(+), 79 deletions(-) diff --git a/src/index.css b/src/index.css index 192665b..25354f6 100644 --- a/src/index.css +++ b/src/index.css @@ -37,10 +37,7 @@ } input[type='text'], select { - @apply input input-bordered mx-3; - } - input[type='text'] { - @apply text-2xl; + @apply input input-bordered mx-3 text-2xl; } /* header { @apply navbar drop-shadow-lg diff --git a/src/views/Home.jsx b/src/views/Home.jsx index 304a4f5..8355d21 100644 --- a/src/views/Home.jsx +++ b/src/views/Home.jsx @@ -7,6 +7,7 @@ import { useVoiceToText } from '../utils'; import DeleteIcon from '@mui/icons-material/Delete'; import KeyboardVoiceIcon from '@mui/icons-material/KeyboardVoice'; import RemoveCircleIcon from '@mui/icons-material/RemoveCircle'; //remove shopping list that are being shared with +import BasicModal from './Modal'; export function Home({ data, setListPath, setAllLists }) { const [listName, setListName] = useState(''); @@ -16,6 +17,12 @@ export function Home({ data, setListPath, setAllLists }) { const userEmail = user?.email; const navigate = useNavigate(); const { text, isListening, startListening } = useVoiceToText(); + // const messageSignIn = { + // header: 'Warning:', + // promptMSG: 'You are not logged in. Please sign into your account', + // btnText: 'Go Back', + // route: '/', + // }; useEffect(() => { if (text) { @@ -78,80 +85,88 @@ export function Home({ data, setListPath, setAllLists }) { }; // style={{background:'#676D16'} return ( -
          -
            - {data && - data.map((list) => { - const uniqueId = crypto.randomUUID(); - return ( - -
            - {/* style={{background:'black'}} */} - -
            - {!list.isShared && ( - - )} + <> + {data.length ? ( +
            +
              + {data && + data.map((list) => { + const uniqueId = crypto.randomUUID(); + return ( + +
              + {/* style={{background:'black'}} */} + +
              + {!list.isShared && ( + + )} - {/* Remove button for shared lists */} - {list.isShared && ( - - )} - -
              -
              -               - ); - })} -
            -
            - - setListName(e.target.value)} - /> - - -

            {error}

            -
            -
            + {/* Remove button for shared lists */} + {list.isShared && ( + + )} + +
            +
            +             + ); + })} +
          +
          + +
          + setListName(e.target.value)} + /> + {error} +
          + + + +
          +
          + ) : ( +

          You have no lists to display

          + )} + ); } diff --git a/src/views/List.jsx b/src/views/List.jsx index 8832da1..006ff45 100644 --- a/src/views/List.jsx +++ b/src/views/List.jsx @@ -19,6 +19,7 @@ export function List({ data, userId, path }) { header: 'Tip:', promptMSG: 'Your shopping list is empty. Start adding items!', btnText: 'Add Items', + route: '/manage-list', }; useEffect(() => { diff --git a/src/views/Modal.jsx b/src/views/Modal.jsx index 90c36a6..0dc19ec 100644 --- a/src/views/Modal.jsx +++ b/src/views/Modal.jsx @@ -46,7 +46,7 @@ export default function BasicModal({ dataEmpty, message }) { color: theme.palette.primary.main, }} size="large" - onClick={() => navigate('/manage-list')} + onClick={() => navigate(message.route)} > {message.btnText} From 92e2c50e300ab093aee275816bd651ec332bdd35 Mon Sep 17 00:00:00 2001 From: Sarah Meko Date: Thu, 17 Oct 2024 23:17:47 -0700 Subject: [PATCH 05/13] adjust height of list container --- src/views/Home.jsx | 1 - src/views/List.jsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/views/Home.jsx b/src/views/Home.jsx index 8355d21..bc418a4 100644 --- a/src/views/Home.jsx +++ b/src/views/Home.jsx @@ -7,7 +7,6 @@ import { useVoiceToText } from '../utils'; import DeleteIcon from '@mui/icons-material/Delete'; import KeyboardVoiceIcon from '@mui/icons-material/KeyboardVoice'; import RemoveCircleIcon from '@mui/icons-material/RemoveCircle'; //remove shopping list that are being shared with -import BasicModal from './Modal'; export function Home({ data, setListPath, setAllLists }) { const [listName, setListName] = useState(''); diff --git a/src/views/List.jsx b/src/views/List.jsx index 006ff45..36f6157 100644 --- a/src/views/List.jsx +++ b/src/views/List.jsx @@ -110,7 +110,7 @@ export function List({ data, userId, path }) { {filterVal && } -
          +
            {filteredObject && Object.entries(filteredObject).map(([timeBucket, list]) => ( From c058c59a901dbe59b9ba2f9343f45eee3da9a01f Mon Sep 17 00:00:00 2001 From: Sarah Meko Date: Fri, 18 Oct 2024 00:15:59 -0700 Subject: [PATCH 06/13] adjust word to to text on list page --- src/components/ListItem.jsx | 2 +- src/views/List.jsx | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx index d6d55e9..2062919 100644 --- a/src/components/ListItem.jsx +++ b/src/components/ListItem.jsx @@ -1,4 +1,4 @@ -import { useState, useEffect } from 'react'; +import { useState, useEffect, Fragment } from 'react'; import './ListItem.css'; import { updateItem, deleteItem } from '../api'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; diff --git a/src/views/List.jsx b/src/views/List.jsx index 36f6157..bbf2dda 100644 --- a/src/views/List.jsx +++ b/src/views/List.jsx @@ -1,5 +1,5 @@ import { ListItem } from '../components'; -import { useState, useEffect, Fragment } from 'react'; +import { useState, useEffect } from 'react'; import BasicModal from './Modal'; import { comparePurchaseUrgency } from '../api'; import { useVoiceToText } from '../utils'; @@ -32,16 +32,13 @@ export function List({ data, userId, path }) { useEffect(() => { if (text) { - setFilterVal((prev) => ({ ...prev, name: text })); + setFilterVal((prev) => prev + ' ' + text); } }, [text]); function handleChange(e) { e.preventDefault(); - setFilterVal((prev) => ({ - ...prev, - [e.target.name]: e.target.value, - })); + setFilterVal(e.target.value); } const clearInput = (e) => { @@ -114,14 +111,17 @@ export function List({ data, userId, path }) {
              {filteredObject && Object.entries(filteredObject).map(([timeBucket, list]) => ( -
            • +

              {labels[timeBucket]}

              {list.map((item) => ( ))} -
              • +
          // // From cdfb3f29ea6ac5d98066b082a6cc5439fb8af776 Mon Sep 17 00:00:00 2001 From: Sarah Meko Date: Fri, 18 Oct 2024 12:12:06 -0700 Subject: [PATCH 07/13] style default home page and cleanup --- src/views/Home.jsx | 21 +++++++++++---------- src/views/List.jsx | 3 --- 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/src/views/Home.jsx b/src/views/Home.jsx index bc418a4..0435848 100644 --- a/src/views/Home.jsx +++ b/src/views/Home.jsx @@ -1,6 +1,12 @@ import './Home.css'; import { SingleList, ShareListComponent } from '../components'; -import { createList, useAuth, deleteList, unfollowList } from '../api'; +import { + createList, + useAuth, + deleteList, + unfollowList, + SignInButton, +} from '../api'; import { Fragment, useState, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import { useVoiceToText } from '../utils'; @@ -16,12 +22,6 @@ export function Home({ data, setListPath, setAllLists }) { const userEmail = user?.email; const navigate = useNavigate(); const { text, isListening, startListening } = useVoiceToText(); - // const messageSignIn = { - // header: 'Warning:', - // promptMSG: 'You are not logged in. Please sign into your account', - // btnText: 'Go Back', - // route: '/', - // }; useEffect(() => { if (text) { @@ -82,7 +82,6 @@ export function Home({ data, setListPath, setAllLists }) { console.log(error); } }; - // style={{background:'#676D16'} return ( <> {data.length ? ( @@ -97,7 +96,6 @@ export function Home({ data, setListPath, setAllLists }) { className="flex items-center justify-between p-4 rounded-3xl shadow-md border border-primary" style={{ background: '#f8fdef' }} > - {/* style={{background:'black'}} */}
          ) : ( -

          You have no lists to display

          +
          +

          Welcome to SnapShop!

          + +
          )} ); diff --git a/src/views/List.jsx b/src/views/List.jsx index bbf2dda..48c72a3 100644 --- a/src/views/List.jsx +++ b/src/views/List.jsx @@ -122,9 +122,6 @@ export function List({ data, userId, path }) { ))}
          - // - - // ))}
        From f3f35d51965ca34bf8a75d3bcee58fc78c6f8cd8 Mon Sep 17 00:00:00 2001 From: Sarah Meko Date: Fri, 18 Oct 2024 13:14:06 -0700 Subject: [PATCH 08/13] add more legible colors and center items, applying styling to managelist --- src/views/Home.jsx | 4 ++-- src/views/List.jsx | 2 +- src/views/ManageList.jsx | 10 +++++++--- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/views/Home.jsx b/src/views/Home.jsx index 0435848..6eaa716 100644 --- a/src/views/Home.jsx +++ b/src/views/Home.jsx @@ -133,12 +133,12 @@ export function Home({ data, setListPath, setAllLists }) {
      -
      +
      - + diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx index 73a9fc3..e676b61 100644 --- a/src/views/ManageList.jsx +++ b/src/views/ManageList.jsx @@ -104,9 +104,11 @@ export function ManageList({ list }) { return ( <> -
      +
      - + @@ -127,7 +130,7 @@ export function ManageList({ list }) {

      -