Merge pull request #67 from the-collab-lab/ce-buttons-managelist

Add grid to buttons on manage list page
the-collab-lab · Apr 4, 2024 · 347b83a · 347b83a
2 parents 6e610ee + 825d44a
commit 347b83a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/src/views/Home.jsx b/src/views/Home.jsx
@@ -16,7 +16,7 @@ export function Home({ data, setListPath, userId, userEmail }) {
  </p>
 
  {data[0] && (
- <section className="mb-20">
+ <section className="mb-8">
  <h2 className="text-lg sm:text-xl text-left text-darkPurple border-solid border-darkPurple border-b pb-2 mb-8">
  SELECT A LIST
  </h2>
@@ -35,7 +35,7 @@ export function Home({ data, setListPath, userId, userEmail }) {
  </section>
  )}
 
- <section>
+ <section className="mb-8">
  <h2 className="text-lg sm:text-xl text-left text-darkPurple border-solid border-darkPurple border-b pb-2 mb-8 ">
  CREATE A NEW LIST
  </h2>

diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx
@@ -108,7 +108,7 @@ export function ManageList({ data, listPath, userId, userEmail }) {
  Add new items and share your list with other users
  </p>
  </div>
- <section className="flex flex-col w-full">
+ <section className="flex flex-col w-full mb-8">
  <div className="flex flex-col">
  <form
  method="post"
@@ -127,12 +127,12 @@ export function ManageList({ data, listPath, userId, userEmail }) {
  className="grow shrink bg-lightGrey border border-darkPurple rounded-md shadow-lg px-4 py-2 placeholder:text-darkPurple mb-5"
  onChange={() => setAddItemErrMessage('')}
  ></input>
- <div className="flex flex-col sm:flex-row gap-4 text-base sm:text-2xl">
+ <div className="grid sm:grid-cols-3 grid-cols-1 grid-rows-2 sm:grid-rows-1 gap-y-4 sm:gap-x-2 text-base sm:text-lg">
  <select
  name="time"
  id="time-select "
  aria-label="When do you need this item?"
- className="grow shrink  bg-lightGrey text-base sm:text-lg border border-darkPurple rounded-md shadow-lg px-4 py-2 placeholder:text-darkPurple"
+ className="col-span-3 sm:col-span-2 bg-lightGrey text-base sm:text-lg border border-darkPurple rounded-md shadow-lg px-4 py-2 placeholder:text-darkPurple"
  >
  <option value="none" selected disabled hidden>
  Choose item's likely need date
@@ -144,7 +144,7 @@ export function ManageList({ data, listPath, userId, userEmail }) {
  </select>
  <button
  type="submit"
- className="flex items-center text-base sm:text-lg justify-center shrink-0 gap-6 shadow-lg rounded-md bg-lightPurple hover:bg-hoverPurple text-offWhite transition ease-in-out px-4 py-2"
+ className=" col-span-3 sm:col-span-1 gap-6 flex items-center text-base sm:text-lg justify-center shadow-lg rounded-md bg-lightPurple hover:bg-hoverPurple text-offWhite transition ease-in-out px-4 py-2"
  >
  <span>
  <i className="fa-solid fa-plus"></i>
@@ -158,7 +158,7 @@ export function ManageList({ data, listPath, userId, userEmail }) {
  )}
  </div>
  </section>
- <section className="flex flex-col w-full my-20">
+ <section className="flex flex-col w-full my-8">
  <form
  method="post"
  onSubmit={sendInvite}
@@ -167,19 +167,19 @@ export function ManageList({ data, listPath, userId, userEmail }) {
  <h2 className="text-lg sm:text-xl text-left text-darkPurple border-solid border-darkPurple border-b pb-2 mb-8">
  SHARE THE LIST
  </h2>
- <div className="flex flex-col sm:flex-row gap-4">
+ <div className="grid sm:grid-cols-3 grid-cols-1 grid-rows-2 sm:grid-rows-1 gap-y-4 sm:gap-x-2 text-base sm:text-lg">
  <input
  aria-label="Share the list"
  type="email"
  name="email"
  id="email"
  placeholder="Share this list with another user"
- className="grow shrink bg-lightGrey border border-darkPurple rounded-md shadow-lg px-4 py-2 placeholder:text-darkPurple"
+ className="col-span-3 sm:col-span-2 bg-lightGrey border border-darkPurple rounded-md shadow-lg px-4 py-2 placeholder:text-darkPurple"
  onChange={() => setShareListErrMessage('')}
  ></input>
  <button
  type="submit"
- className="bg-lightGrey text-darkPurple border border-darkPurple flex justify-center items-center shadow-lg rounded-md transition ease-in-out hover:bg-darkPurple px-4 py-2 gap-6 shrink-0"
+ className=" col-span-3 sm:col-span-1 flex bg-lightGrey text-darkPurple border border-darkPurple justify-center items-center shadow-lg rounded-md transition ease-in-out hover:bg-darkPurple px-4 py-2 gap-6 shrink-0"
  >
  <span>
  <i className="fa-solid fa-share-nodes"></i>