Skip to content

Commit

Permalink
Basic conditional styling for logged out users (#66)
Browse files Browse the repository at this point in the history 
* Conditional styling to home page when logged out.

* Conditional styling for List and ManageList when logged out, padding adjustment to ListHeader component
  • Loading branch information
@andiedoescode
andiedoescode authored Apr 9, 2024
1 parent b414b29 commit e9c1afa
Show file tree
Hide file tree
Showing 4 changed files with 181 additions and 132 deletions.
2 changes: 1 addition & 1 deletion src/components/ListHeader.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export function ListHeader({ text }) {
return (
<h2 className="mt-4 flex-1 bg-sage min-h-24 text-center content-center font-bold text-4xl mb-12 text-off-black">
<h2 className="mt-4 flex-1 bg-sage min-h-24 text-center content-center font-bold text-4xl mb-12 text-off-black px-4">
{text}
</h2>
);
Expand Down
88 changes: 57 additions & 31 deletions src/views/Home.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { SingleList } from '../components/SingleList.jsx';
import { useState } from 'react';
import { createList } from '../api/firebase.js';
import { useNavigate } from 'react-router-dom';
import { auth } from '../api/config.js';
import { IoBulbOutline } from 'react-icons/io5';

export function Home({ data, userId, userEmail, setListPath }) {
const [newListName, setNewListName] = useState('');
Expand Down Expand Up @@ -49,38 +51,62 @@ export function Home({ data, userId, userEmail, setListPath }) {
};

return (
<div className="Home mt-8 font-Rubik mx-8 md:mx-24">
<form
onSubmit={handleSubmit}
className="flex rounded-lg items-center gap-x-6"
>
<label htmlFor="listName" className="text-off-black">
New list:
</label>
<input
type="text"
id="listName"
name="listName"
value={newListName}
onChange={handleChange}
className="border-2 border-sage rounded-lg min-h-14 bg-white grow text-xl xs:text-2xl text-off-black"
/>
<button className="bg-pale-green rounded-lg px-3 py-1 border-2 border-sage text-off-black">
Create
</button>
</form>
<ul className="flex flex-col my-8 items-center text-2xl">
{data.map((item, index) => {
return (
<SingleList
key={index}
name={item.name}
path={item.path}
setListPath={setListPath}
<div className="Home mt-8 font-Rubik mx-8 md:mx-24 h-min-content">
{!auth.currentUser ? (
<>
<section className="border border-dark-green py-8 px-12 text-off-black text-center tiny:mt-6 xs:mt-24 sm:mt-32 items-center justify-center bg-sage/75 rounded-2xl">
<h1 className="text-4xl xs:text-5xl font-semibold">
Welcome to Basket Buddy!
</h1>
<h2 className="italic">We're nacho average shopping list. </h2>
</section>
<section className="border border-dark-green py-8 px-12 text-off-black tiny:mt-14 items-center justify-center bg-sage/50 rounded-2xl">
<p className="font-semibold">
<IoBulbOutline className="inline h-8 text-4xl -mt-2" /> Get
Started :
</p>
<p>
Create your account by clicking the{' '}
<span className="font-medium">sign in</span> button above. You'll
be making and sharing lists in no time!
</p>
</section>
</>
) : (
<>
<form
onSubmit={handleSubmit}
className="flex rounded-lg items-center gap-x-6"
>
<label htmlFor="listName" className="text-off-black">
New list:
</label>
<input
type="text"
id="listName"
name="listName"
value={newListName}
onChange={handleChange}
className="border-2 border-sage rounded-lg min-h-14 bg-white grow text-xl xs:text-2xl text-off-black"
/>
);
})}
</ul>
<button className="bg-pale-green rounded-lg px-3 py-1 border-2 border-sage text-off-black">
Create
</button>
</form>
<ul className="flex flex-col my-8 items-center text-2xl">
{data.map((item, index) => {
return (
<SingleList
key={index}
name={item.name}
path={item.path}
setListPath={setListPath}
/>
);
})}
</ul>
</>
)}
</div>
);
}
117 changes: 64 additions & 53 deletions src/views/List.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
import { comparePurchaseUrgency } from '../api/firebase';
import { AddItem, ListItem } from '../components';
import { ListHeader } from '../components/ListHeader.jsx';
import { auth } from '../api/config.js';

export function List({ data, listPath }) {
const [searchTerm, setSearchTerm] = useState('');
Expand Down Expand Up @@ -32,64 +33,74 @@ export function List({ data, listPath }) {

return (
<>
{listPath ? <ListHeader text={listName} /> : null}
{!listPath ? (
{!auth.currentUser ? (
<div className="border border-dark-green py-8 px-12 mx-8 md:mx-24 text-off-black text-center tiny:mt-18 xs:mt-32 sm:mt-40 items-center justify-center bg-sage/75 rounded-2xl font-medium">
Sign in to see your lists.
</div>
) : (
<>
<ListHeader text="You haven't selected a list yet. Click below to select a list." />
<div className="flex justify-center">
<button
onClick={() => handleClick('/')}
className="border border-dark-green rounded-xl px-4 py-2 hover:bg-pale-green text-off-black"
>
Select a list
</button>
</div>
</>
) : null}

<section className="mx-8 md:mx-24 flex flex-col">
{listPath ? <AddItem data={data} listPath={listPath} /> : null}
{data.length > 0 ? (
<section className="mt-8 mb-4">
<form className="flex flex-wrap items-center gap-x-6">
<label htmlFor="itemFilter" className="text-off-black">
Filter:
</label>
<input
type="text"
id="itemFilter"
name="itemFilter"
value={searchTerm}
onChange={handleChange}
className="bg-white border-solid border-2 rounded-xl border-sage pl-2 min-h-14 grow max-w-full mt-2 text-xl xs:text-2xl text-off-black"
/>
{searchTerm ? (
{listPath ? <ListHeader text={listName} /> : null}
{!listPath ? (
<>
<ListHeader text="You haven't selected a list yet. Click below to select a list." />
<div className="flex justify-center">
<button
onClick={reset}
className="bg-red-400 rounded-xl px-3 py-1 grow min-h-14 xs:max-w-28 mt-2 text-off-black"
onClick={() => handleClick('/')}
className="border border-dark-green rounded-xl px-4 py-2 hover:bg-pale-green text-off-black"
>
Reset
Select a list
</button>
) : null}
</form>
</section>
) : null}
{listPath && data.length === 0 ? (
<div className="bg-pale-green border border-dark-green rounded-xl py-8 mt-8">
<h3 className="text-center font-semibold text-off-black">
This list is currently empty!
</h3>
</div>
) : null}
</div>
</>
) : null}

<section>
<ul>
{filteredData.map((item) => {
return <ListItem key={item.id} item={item} listPath={listPath} />;
})}
</ul>
</section>
</section>
<section className="mx-8 md:mx-24 flex flex-col">
{listPath ? <AddItem data={data} listPath={listPath} /> : null}
{data.length > 0 ? (
<section className="mt-8 mb-4">
<form className="flex flex-wrap items-center gap-x-6">
<label htmlFor="itemFilter" className="text-off-black">
Filter:
</label>
<input
type="text"
id="itemFilter"
name="itemFilter"
value={searchTerm}
onChange={handleChange}
className="bg-white border-solid border-2 rounded-xl border-sage pl-2 min-h-14 grow max-w-full mt-2 text-xl xs:text-2xl text-off-black"
/>
{searchTerm ? (
<button
onClick={reset}
className="bg-red-400 rounded-xl px-3 py-1 grow min-h-14 xs:max-w-28 mt-2 text-off-black"
>
Reset
</button>
) : null}
</form>
</section>
) : null}
{listPath && data.length === 0 ? (
<div className="bg-pale-green border border-dark-green rounded-xl py-8 mt-8">
<h3 className="text-center font-semibold text-off-black">
This list is currently empty!
</h3>
</div>
) : null}

<section>
<ul>
{filteredData.map((item) => {
return (
<ListItem key={item.id} item={item} listPath={listPath} />
);
})}
</ul>
</section>
</section>
</>
)}
</>
);
}
106 changes: 59 additions & 47 deletions src/views/ManageList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { deleteList, shareList } from '../api/firebase.js';
import { ListHeader } from '../components/ListHeader.jsx';
import { auth } from '../api/config.js';

export function ManageList({ setListPath, listPath, userEmail, userId }) {
const navigate = useNavigate();
Expand Down Expand Up @@ -59,59 +60,70 @@ export function ManageList({ setListPath, listPath, userEmail, userId }) {

return (
<>
{listPath ? (
{!auth.currentUser ? (
<div className="border border-dark-green py-8 px-12 mx-8 md:mx-24 text-off-black text-center tiny:mt-18 xs:mt-32 sm:mt-40 items-center justify-center bg-sage/75 rounded-2xl font-medium">
Sign in to manage lists.
</div>
) : (
<>
<ListHeader text={listName} />
<section className="mx-8 md:mx-24">
<form onSubmit={handleShareSubmit} className="w-full">
<div>
<label htmlFor="shareEmail" className="text-4xl text-off-black">
Share List
</label>
</div>
<div className="flex flex-wrap xs:flex-nowrap gap-x-6">
<input
id="shareEmail"
name="shareEmail"
type="email"
value={shareEmail}
placeholder="Enter Recipient Email"
onChange={handleShareChange}
className="bg-white border-solid border-2 rounded-xl border-sage pl-2 min-h-14 md:w-8/12 grow mt-4 text-xl xs:text-2xl text-off-black"
></input>
{listPath ? (
<>
<ListHeader text={listName} />
<section className="mx-8 md:mx-24">
<form onSubmit={handleShareSubmit} className="w-full">
<div>
<label
htmlFor="shareEmail"
className="text-4xl text-off-black"
>
Share List
</label>
</div>
<div className="flex flex-wrap xs:flex-nowrap gap-x-6">
<input
id="shareEmail"
name="shareEmail"
type="email"
value={shareEmail}
placeholder="Enter Recipient Email"
onChange={handleShareChange}
className="bg-white border-solid border-2 rounded-xl border-sage pl-2 min-h-14 md:w-8/12 grow mt-4 text-xl xs:text-2xl text-off-black"
></input>
<button
type="submit"
className="bg-sage p-2 px-4 rounded-xl text-3xl min-h-14 mt-4 grow xs:grow-0 text-off-black"
>
Send invite!
</button>
</div>
</form>
</section>
<section className="mx-8 md:mx-24 mt-24">
<h3 className="text-4xl text-off-black">List Options</h3>
<button
onClick={handleDelete}
className="mt-4 bg-red-400/80 min-h-14 px-24 rounded-xl text-3xl w-full text-off-black"
>
Delete List
</button>
</section>
</>
) : null}
{!listPath ? (
<>
<ListHeader text="You haven't selected a list yet. Click below to select a list." />
<div className="flex justify-center">
<button
type="submit"
className="bg-sage p-2 px-4 rounded-xl text-3xl min-h-14 mt-4 grow xs:grow-0 text-off-black"
onClick={() => handleClick('/')}
className="border border-dark-green rounded-xl px-4 py-2 hover:bg-pale-green text-off-black"
>
Send invite!
Select a list
</button>
</div>
</form>
</section>
<section className="mx-8 md:mx-24 mt-24">
<h3 className="text-4xl text-off-black">List Options</h3>
<button
onClick={handleDelete}
className="mt-4 bg-red-400/80 min-h-14 px-24 rounded-xl text-3xl w-full text-off-black"
>
Delete List
</button>
</section>
</>
) : null}
{!listPath ? (
<>
<ListHeader text="You haven't selected a list yet. Click below to select a list." />
<div className="flex justify-center">
<button
onClick={() => handleClick('/')}
className="border border-dark-green rounded-xl px-4 py-2 hover:bg-pale-green text-off-black"
>
Select a list
</button>
</div>
</>
) : null}
</>
) : null}
)}
</>
);
}

0 comments on commit e9c1afa

Please sign in to comment.