Home Page Styling (#61)

* added bg to all pages, styled new list form

* styled list name buttons, added color to tailwind file

* styled sign-in and sign-out buttons

* styling: changed bg and text colors for form

* styling: made all lists the same width

* extend li element to full width, center list on desktop view

* added logo

* reverted previous commit

* Revert "added logo"

This reverts commit 6b38a92.

* re-adding list styling rather than button, centering

---------

Co-authored-by: Shane Misra <[email protected]>

src/api/useAuth.jsx

@@ -10,6 +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"
  type="button"
  onClick={() => signInWithPopup(auth, new GoogleAuthProvider())}
  >
@@ -21,7 +22,11 @@ export const SignInButton = () => (
  * A button that signs the user out of the app using Firebase Auth.
  */
 export const SignOutButton = () => (
- <button type="button" onClick={() => auth.signOut()}>
+ <button
+ className="bg-pale-green rounded-lg px-3 py-1 text-eggshell border-2 border-sage text-off-black"
+ type="button"
+ onClick={() => auth.signOut()}
+ >
  Sign Out
  </button>
 );

src/components/SingleList.jsx

@@ -10,8 +10,13 @@ export function SingleList({ name, path, setListPath }) {
  }
 
  return (
- <li className="SingleList">
- <button onClick={handleClick}>{name}</button>
+ <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"
+ onClick={handleClick}
+ >
+ {name}
+ </button>
  </li>
  );
 }

src/index.css

@@ -31,7 +31,7 @@
 
 :root.theme-light {
  --color-accent: var(--color-cobalt-blue);
- --color-bg: var(--color-white);
+ --color-bg: #fdfdf2;
  --color-border: hsla(220, 13%, 78%, 1);
  --color-text: var(--color-black);
 }
@@ -59,7 +59,7 @@ html {
 }
 
 body {
- background-color: var(--color-bg);
+ background-color: #fdfdf2;
  color: var(--color-text);
  font-family:
  -apple-system,

src/views/Home.jsx

@@ -49,24 +49,27 @@ export function Home({ data, userId, userEmail, setListPath }) {
  };
 
  return (
- <div className="Home">
- <p>
- Hello from the home (<code>/</code>) page!
- </p>
- <form onSubmit={handleSubmit}>
- <label htmlFor="listName">
- New list name:
+ <div className="Home mt-8 font-Rubik">
+ <form
+ onSubmit={handleSubmit}
+  className="flex justify-between rounded-lg items-center"
+ >
+ <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>Create</button>
+ <button className="bg-pale-green rounded-lg px-3 py-1 text-eggshell border-2 border-sage text-off-black">
+ Create
+ </button>
  </form>
- <ul>
+ <ul className="flex flex-col my-8 items-center text-2xl">
  {data.map((item, index) => {
  return (
  <SingleList

src/views/Layout.jsx

@@ -9,12 +9,14 @@ export function Layout() {
  return (
  <>
  <div className="Layout">
- <header className="Layout-header">
+ <header className="Layout-header font-Rubik flex flex-col">
  <h1>Smart shopping list</h1>
  {!!user ? (
  <div>
- <span>Signed in as {auth.currentUser.displayName}</span> (
- <SignOutButton />)
+ <span className="mx-3">
+ Signed in as {auth.currentUser.displayName}
+ </span>
+ <SignOutButton />
  </div>
  ) : (
  <SignInButton />

tailwind.config.js

@@ -12,6 +12,7 @@ export default {
  yellow: '#FEFAE0',
  vanilla: '#FAEDCD',
  'pale-green': '#E9EDC9',
+ 'off-black': '#353839',
  },
  extend: {
  fontFamily: {