Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Styling fixes and standardization #65

Merged
merged 9 commits into from
Apr 7, 2024
Merged

Styling fixes and standardization #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
8f2ccc5
Home page side margins, input background color, changed logo source
andiedoescode Apr 7, 2024
dc4a318
New list input fixed, list name hover color change, standardized gene…
andiedoescode Apr 7, 2024
9fc3e6a
Standardized button radius, font color, increased header top margin
andiedoescode Apr 7, 2024
df0fd3c
Changed nesting for header display
andiedoescode Apr 7, 2024
b0e42b0
Standardized input text size
andiedoescode Apr 7, 2024
3107a9b
Adjusted margin
andiedoescode Apr 7, 2024
bb7d2f0
Missing text color
andiedoescode Apr 7, 2024
d0e2cdb
Default text color in inputs
andiedoescode Apr 7, 2024
01edd8c
Hover color to sign in and sign out buttons
andiedoescode Apr 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/api/useAuth.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { addUserToDatabase } from './firebase.js';
*/
export const SignInButton = () => (
<button
className="bg-pale-green rounded-lg px-3 py-1 text-eggshell border-2 border-sage text-off-black"
className="bg-pale-green rounded-lg px-3 py-1 text-eggshell border-2 border-sage text-off-black hover:bg-green-hover"
type="button"
onClick={() => signInWithPopup(auth, new GoogleAuthProvider())}
>
Expand All @@ -23,7 +23,7 @@ export const SignInButton = () => (
*/
export const SignOutButton = () => (
<button
className=" bg-pale-green rounded-lg px-3 py-1 border-2 border-sage text-off-black"
className=" bg-pale-green rounded-lg px-3 py-1 border-2 border-sage text-off-black hover:bg-green-hover"
type="button"
onClick={() => auth.signOut()}
>
Expand Down
13 changes: 8 additions & 5 deletions src/components/AddItem.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export function AddItem({ data, listPath }) {
onSubmit={handleItemSubmit}
className="grid xs:grid-cols-addItem grid-cols-gridTiny grid-rows-2 items-center"
>
<label htmlFor="itemName" className="col-span-1">
<label htmlFor="itemName" className="col-span-1 text-off-black">
New Item:
</label>
<input
Expand All @@ -62,15 +62,18 @@ export function AddItem({ data, listPath }) {
type="text"
value={newItem.itemName}
onChange={handleItemChange}
className="bg-white border-solid border-2 rounded-xl border-sage pl-2 min-h-14 mx-4 max-w-full mt-2 text-2xl col-span-1 shrink"
className="bg-white border-solid border-2 rounded-xl border-sage pl-2 min-h-14 mx-4 max-w-full mt-2 col-span-1 shrink 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 md:m-w-2xl order-last xs:order-none col-span-2 xs:col-span-1"
className="bg-sage p-2 px-3 rounded-xl text-3xl min-h-14 mt-4 md:m-w-2xl order-last xs:order-none col-span-2 xs:col-span-1"
>
Add
</button>
<label htmlFor="daysUntilNextPurchase" className="col-span-1">
<label
htmlFor="daysUntilNextPurchase"
className="col-span-1 text-off-black"
>
Urgency:
</label>
<select
Expand All @@ -79,7 +82,7 @@ export function AddItem({ data, listPath }) {
value={newItem.daysUntilNextPurchase}
onChange={handleItemChange}
required
className="bg-white border-solid border-2 rounded-xl border-sage pl-2 min-h-14 mx-4 max-w-full grow mt-2 text-xl xs:text-2xl"
className="bg-white border-solid border-2 rounded-xl border-sage pl-2 min-h-14 mx-4 max-w-full grow mt-2 text-xl xs:text-2xl text-off-black"
>
<option value="">Select Urgency</option>
<option value={7}>Soon</option>
Expand Down
2 changes: 1 addition & 1 deletion src/components/ListHeader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export function ListHeader({ text }) {
return (
<h2 className="flex-1 bg-sage min-h-24 text-center content-center font-bold text-4xl mb-12">
<h2 className="mt-4 flex-1 bg-sage min-h-24 text-center content-center font-bold text-4xl mb-12 text-off-black">
{text}
</h2>
);
Expand Down
4 changes: 2 additions & 2 deletions src/components/ListItem.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,14 +49,14 @@ export function ListItem({ listPath, item }) {
};

return (
<li className="ListItem bg-pale-green hover:bg-green-hover border border-dark-green min-h-14 rounded-xl text-3xl mb-2 items-center grid grid-cols-gridTiny xs:grid-cols-listItem">
<li className="ListItem bg-pale-green hover:bg-green-hover border border-dark-green min-h-14 rounded-xl text-3xl mb-2 items-center grid grid-cols-gridTiny xs:grid-cols-listItem text-off-black">
<input
type="checkbox"
id={item.name}
name="purchased"
onChange={changeHandler}
checked={isChecked}
className="rounded-full border-dark-green w-8 h-8 mx-4 hover:bg-slate-100 row-span-2 xs:row-span-1"
className="rounded-full border-dark-green w-8 h-8 mx-4 hover:bg-slate-100 row-span-2 xs:row-span-1 "
/>
<label htmlFor={item.name}>
<RiShoppingCart2Fill className="inline" /> {item.name}
Expand Down
2 changes: 1 addition & 1 deletion src/components/SingleList.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export function SingleList({ name, path, setListPath }) {
return (
<li className="SingleList flex flex-col items-center w-full">
<button
className="border-2 border-sage rounded-lg bg-pale-green my-2 px-3 py-2 text-off-black w-full md:w-1/2"
className="border-2 border-sage rounded-xl bg-pale-green m-2 px-3 py-2 text-3xl min-h-14 text-off-black w-full md:w-1/2 hover:bg-green-hover"
onClick={handleClick}
>
{name}
Expand Down
2 changes: 1 addition & 1 deletion src/components/UrgencyLabel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export function UrgencyLabel({ text }) {
return (
<span
className={
'ml-auto mr-4 rounded-lg px-2 py-1 text-center uppercase text-xl ' +
'ml-auto mr-4 rounded-lg px-2 py-1 text-center uppercase text-xl text-off-black ' +
labelColor
}
>
Expand Down
22 changes: 11 additions & 11 deletions src/views/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,23 +49,23 @@ export function Home({ data, userId, userEmail, setListPath }) {
};

return (
<div className="Home mt-8 font-Rubik">
<div className="Home mt-8 font-Rubik mx-8 md:mx-24">
<form
onSubmit={handleSubmit}
className="flex justify-between rounded-lg items-center"
className="flex rounded-lg items-center gap-x-6"
>
<label htmlFor="listName" className="text-off-black">
New list:
<input
type="text"
id="listName"
name="listName"
value={newListName}
onChange={handleChange}
className="w-2/3 ml-2 border-2 border-sage rounded-lg bg-eggshell"
/>
</label>
<button className="bg-pale-green rounded-lg px-3 py-1 text-eggshell border-2 border-sage text-off-black">
<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>
Expand Down
13 changes: 6 additions & 7 deletions src/views/Layout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { auth } from '../api/config.js';

import './Layout.css';
import { useAuth, SignInButton, SignOutButton } from '../api/useAuth.jsx';
import buddyLogo from '../../public/img/basket-buddy-logo.png';
import buddyLogo from '/img/basket-buddy-logo.png';

export function Layout() {
const { user } = useAuth();
Expand All @@ -14,15 +14,14 @@ export function Layout() {
'Nav-link text-eggshell border-2 rounded-full border-vanilla hover:text-sage hover:border-sage';
return (
<>
<div className="Layout bg-eggshell">
<header
className="Layout-header flex flex-col items-center bg-eggshell font-Rubik
text-off-black"
>
<div className="Layout">
<header className="Layout-header flex flex-col items-center bg-eggshell font-Rubik text-off-black">
<img className="md:w-1/3" src={buddyLogo} alt="Basket Buddy" />
{!!user ? (
<div>
<span>Signed in as {auth.currentUser.displayName}</span>
<span className="mx-3">
Signed in as {auth.currentUser.displayName}
</span>
<SignOutButton />
</div>
) : (
Expand Down
37 changes: 19 additions & 18 deletions src/views/List.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,12 +33,26 @@ export function List({ data, listPath }) {
return (
<>
{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={() => 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="">
<label htmlFor="itemFilter" className="text-off-black">
Filter:
</label>
<input
Expand All @@ -47,12 +61,12 @@ export function List({ data, listPath }) {
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-2xl"
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-2 py-1 grow min-h-14 xs:max-w-28 mt-2"
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>
Expand All @@ -61,25 +75,12 @@ export function List({ data, listPath }) {
</section>
) : null}
{listPath && data.length === 0 ? (
<div className="bg-pale-green border border-dark-green rounded-2xl py-8 mt-8">
<h3 className="text-center font-semibold">
<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}
{!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-2xl px-4 py-2 hover:bg-pale-green"
>
Select a list
</button>
</div>
</>
) : null}

<section>
<ul>
Expand Down
12 changes: 6 additions & 6 deletions src/views/ManageList.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export function ManageList({ setListPath, listPath, userEmail, userId }) {
<section className="mx-8 md:mx-24">
<form onSubmit={handleShareSubmit} className="w-full">
<div>
<label htmlFor="shareEmail" className="text-4xl">
<label htmlFor="shareEmail" className="text-4xl text-off-black">
Share List
</label>
</div>
Expand All @@ -77,22 +77,22 @@ export function ManageList({ setListPath, listPath, userEmail, userId }) {
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"
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"
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">List Options</h3>
<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"
className="mt-4 bg-red-400/80 min-h-14 px-24 rounded-xl text-3xl w-full text-off-black"
>
Delete List
</button>
Expand All @@ -105,7 +105,7 @@ export function ManageList({ setListPath, listPath, userEmail, userId }) {
<div className="flex justify-center">
<button
onClick={() => handleClick('/')}
className="border border-dark-green rounded-2xl px-4 py-2 hover:bg-pale-green"
className="border border-dark-green rounded-xl px-4 py-2 hover:bg-pale-green text-off-black"
>
Select a list
</button>
Expand Down
Loading