diff --git a/src/api/useAuth.jsx b/src/api/useAuth.jsx index 8277581..75ac595 100644 --- a/src/api/useAuth.jsx +++ b/src/api/useAuth.jsx @@ -8,11 +8,11 @@ import { addUserToDatabase } from './firebase.js'; * 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 = () => ( +export const SignInButton = ({ styles }) => ( @@ -25,7 +25,7 @@ export const SignOutButton = () => ( diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx index 6d53826..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/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/index.css b/src/index.css index 9f6f530..08cc422 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 border-none hover:bg-neutral; } /*temporary for the 'Hello from the [/list] Page' titles */ p { @@ -37,7 +37,7 @@ } input[type='text'], select { - @apply input input-bordered mx-3; + @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 6b62c06..2e74f52 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'; @@ -76,69 +82,94 @@ export function Home({ data, setListPath, setAllLists }) { console.log(error); } }; - return ( -
    - - - - setListName(e.target.value)} - /> - - -

    {error}

    - -
    + + + + + ) : ( +
    +

    + {' '} + Welcome to SnapShop! +

    + +
    + )} + ); } diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx index 47cf6de..6a3e9f4 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 @@ -154,3 +154,4 @@ export function Layout() { ); } +// style={{background:'#969877'}} diff --git a/src/views/List.jsx b/src/views/List.jsx index 259bf51..196102b 100644 --- a/src/views/List.jsx +++ b/src/views/List.jsx @@ -1,21 +1,25 @@ 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'; 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 = { header: 'Tip:', promptMSG: 'Your shopping list is empty. Start adding items!', btnText: 'Add Items', + route: '/manage-list', }; useEffect(() => { @@ -26,6 +30,17 @@ export function List({ data, userId, path }) { } }, []); + useEffect(() => { + if (text) { + setFilterVal((prev) => prev + ' ' + text); + } + }, [text]); + + function handleChange(e) { + e.preventDefault(); + setFilterVal(e.target.value); + } + const clearInput = (e) => { e.preventDefault(); setFilterVal(''); @@ -65,12 +80,16 @@ export function List({ data, userId, path }) { )} - -
    + @@ -79,26 +98,38 @@ 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" + className="placeholder-zinc-600" /> + {filterVal && } - -
      - {filteredObject && - Object.entries(filteredObject).map(([timeBucket, list]) => ( - -
      -

      {labels[timeBucket]}

      +
      +
        + {filteredObject && + Object.entries(filteredObject).map(([timeBucket, list]) => ( +
        +
        +

        {labels[timeBucket]}

        +
        + {list.map((item) => ( + + ))}
        - {list.map((item) => ( - - ))} - - ))} -
      + ))} +
    +
    ); } diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx index 1652624..21ccc8d 100644 --- a/src/views/ManageList.jsx +++ b/src/views/ManageList.jsx @@ -104,9 +104,11 @@ export function ManageList({ list }) { return ( <> -
    +
    - + -

    -
    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} diff --git a/src/views/ShareList.jsx b/src/views/ShareList.jsx index f1a5eee..1392654 100644 --- a/src/views/ShareList.jsx +++ b/src/views/ShareList.jsx @@ -26,9 +26,11 @@ export function ShareList({ userId }) { return ( <> -
    +
    - + - +
    diff --git a/tailwind.config.js b/tailwind.config.js index 00c04c6..07c4dba 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -9,11 +9,27 @@ export default { archivo: ['Archivo Narrow', 'sans-serif'], bowlby: ['BowlbyOne Regular', 'Archivo Narrow', 'sans-serif'], }, + colors: { + third: '#bdc100', // This adds it to the Tailwind color palette as wel + }, }, }, plugins: [require('daisyui')], daisyui: { - themes: ['lemonade', 'coffee'], + themes: [ + { + lemonade: { + ...require('daisyui/src/theming/themes')['lemonade'], + primary: '#004F2D', + + secondary: '#676D16', + // accent:"#bec000", + third: '#bdc100', + }, + }, + , + 'coffee', + ], base: true, }, };