From 9a46c24e57256728710ef465aa314f5a1f3206f9 Mon Sep 17 00:00:00 2001 From: aberger3647 <112574259+aberger3647@users.noreply.github.com> Date: Fri, 5 Apr 2024 16:51:36 -0500 Subject: [PATCH 1/4] change all buttons to component Button --- src/components/AddItemForm.jsx | 69 +++++++++++++++++------------- src/components/AddListForm.jsx | 8 +++- src/components/Button.jsx | 27 +++++++----- src/components/ListItem.jsx | 7 +-- src/components/ListSearchItems.jsx | 8 +++- src/components/SelectListForm.jsx | 2 + src/components/ShareForm.jsx | 2 + src/index.css | 13 ++---- src/views/Layout.jsx | 8 +++- src/views/List.css | 15 ++++++- 10 files changed, 103 insertions(+), 56 deletions(-) diff --git a/src/components/AddItemForm.jsx b/src/components/AddItemForm.jsx index 01c5625..1d65e45 100644 --- a/src/components/AddItemForm.jsx +++ b/src/components/AddItemForm.jsx @@ -66,15 +66,14 @@ export default function AddItemForm({ listPath, data }) { return (
-
-
- -
+ - - + text="30 Days" + shadowAndContainerWidth="110px" + buttonWidth="102px" + />
-
{message}
diff --git a/src/components/AddListForm.jsx b/src/components/AddListForm.jsx index 7b88e61..6d3adb6 100644 --- a/src/components/AddListForm.jsx +++ b/src/components/AddListForm.jsx @@ -51,7 +51,13 @@ export default function AddListForm({ setListPath }) { List Name -
diff --git a/src/components/Button.jsx b/src/components/Button.jsx index 77088cf..6475924 100644 --- a/src/components/Button.jsx +++ b/src/components/Button.jsx @@ -7,17 +7,24 @@ export default function Button({ fn, testId, buttonWidth, + shadowAndContainerWidth, }) { return ( - +
+ + +
); } diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx index 871149c..f6689ae 100644 --- a/src/components/ListItem.jsx +++ b/src/components/ListItem.jsx @@ -94,7 +94,7 @@ export function ListItem({ item, listPath }) { return (
-
+ -
+

{name}

{urgency}

+
)} diff --git a/src/components/SelectListForm.jsx b/src/components/SelectListForm.jsx index 1044d10..70627d3 100644 --- a/src/components/SelectListForm.jsx +++ b/src/components/SelectListForm.jsx @@ -40,6 +40,8 @@ export default function SelectListForm({ text="View List" fn={() => navigate('/list')} color="#DCFF4B" + shadowAndContainerWidth="163px" + buttonWidth="155px" />
)} diff --git a/src/components/ShareForm.jsx b/src/components/ShareForm.jsx index deeae87..2252b90 100644 --- a/src/components/ShareForm.jsx +++ b/src/components/ShareForm.jsx @@ -57,6 +57,8 @@ const ShareForm = ({ listPath }) => { text="Send List" color="#89D2FF" testId="shareForm-submit-button" + shadowAndContainerWidth="163px" + buttonWidth="155px" />
{message}
diff --git a/src/index.css b/src/index.css index ced7e81..d29b627 100644 --- a/src/index.css +++ b/src/index.css @@ -117,7 +117,6 @@ form { .buttonContainer, .squareButtonContainer { display: grid; - justify-content: center; } .buttonContainer > *, @@ -127,10 +126,12 @@ form { } button { - width: 150px; + /* width: 150px; */ height: 55px; + /* padding: 0px 30px 0px 30px; */ font-size: 20px; border: 2px solid black; + white-space: nowrap; } .buttonBack { width: 158px; @@ -142,14 +143,6 @@ button:hover { transform: translate(8px, 8px); } -.buttonSquare { - height: 55px; - width: 55px; - background-color: var(--blue); - color: white; - font-size: 40px; -} - .buttonBackSquare { width: 63px; height: 63px; diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx index 6d3bb73..dc26683 100644 --- a/src/views/Layout.jsx +++ b/src/views/Layout.jsx @@ -46,6 +46,8 @@ export function Layout() { color={'yellow'} className={'logOut'} text={'Log Out'} + buttonWidth={'155px'} + shadowAndContainerWidth={'163px'} /> )} @@ -59,7 +61,8 @@ export function Layout() { color={'yellow'} className={'logOut'} text={'Log Out'} - buttonWidth={'100%'} + buttonWidth={'98%'} + shadowAndContainerWidth={'100%'} /> )} @@ -73,6 +76,8 @@ export function Layout() { color={'yellow'} className={'logIn'} text={'Log In'} + buttonWidth={'155px'} + shadowAndContainerWidth={'163px'} /> )}
@@ -84,6 +89,7 @@ export function Layout() { className={'logIn'} text={'Log In'} buttonWidth={'98%'} + shadowAndContainerWidth={'100%'} /> )} diff --git a/src/views/List.css b/src/views/List.css index 90afb71..e876ff6 100644 --- a/src/views/List.css +++ b/src/views/List.css @@ -62,6 +62,11 @@ section { gap: 1em; } +.addItemHeader button { + color: white; + font-size: 40px; +} + .addItemForm span { margin-bottom: 1em; } @@ -125,7 +130,15 @@ input[type='checkbox'] { border-top: 3px solid black; } -.buttonSquare p { +.buttonDelete { + height: 55px; + width: 55px; + background-color: var(--blue); + color: white; + font-size: 40px; +} + +.buttonDelete p { transform: rotate(45deg); } From 679e356cccd8bea5ca6c383d4ec8c7cad326226f Mon Sep 17 00:00:00 2001 From: aberger3647 <112574259+aberger3647@users.noreply.github.com> Date: Fri, 5 Apr 2024 16:59:16 -0500 Subject: [PATCH 2/4] all buttons are Button component --- src/components/ListItem.jsx | 3 +-- src/index.css | 5 +++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx index f6689ae..824b5fc 100644 --- a/src/components/ListItem.jsx +++ b/src/components/ListItem.jsx @@ -1,7 +1,6 @@ import React, { useState } from 'react'; import { updateItem } from '../api/firebase'; import { useMutation } from 'react-query'; -import Button from './Button'; import { getNextPurchasedDate } from '../utils'; import { deleteItem } from '../api/firebase'; import { compareIfDateIsLessThan24Hours, getDaysBetweenDates } from '../utils'; @@ -107,7 +106,7 @@ export function ListItem({ item, listPath }) {

{name}

{urgency}

-
+
-
+
{message}
diff --git a/src/components/SelectListForm.jsx b/src/components/SelectListForm.jsx index 70627d3..6556b06 100644 --- a/src/components/SelectListForm.jsx +++ b/src/components/SelectListForm.jsx @@ -36,13 +36,15 @@ export default function SelectListForm({ ); })} -
)}
diff --git a/src/components/ShareForm.jsx b/src/components/ShareForm.jsx index 2252b90..c90740d 100644 --- a/src/components/ShareForm.jsx +++ b/src/components/ShareForm.jsx @@ -53,13 +53,15 @@ const ShareForm = ({ listPath }) => {
-
{message}
{isSuccess && ( diff --git a/src/index.css b/src/index.css index 4569ee7..db252c4 100644 --- a/src/index.css +++ b/src/index.css @@ -66,7 +66,8 @@ select, option, label, small, -button { +button, +p { font-family: 'Work Sans'; margin: 0px; } @@ -114,10 +115,15 @@ form { width: 70%; } +.formButtonContainer { + display: flex; + justify-content: center; + width: 100%; +} + .buttonContainer, .deleteButtonContainer { display: grid; - justify-content: center; } .buttonContainer > *, @@ -156,12 +162,18 @@ button:hover { input { border: solid 2px black; + width: 100%; + padding: 15px; } input:focus { outline: var(--black); } +#itemName { + width: clamp(200px, 80%, 600px); +} + .logIn, .logOut { font-size: 18px; From c3562a09815733e204f50878528352e8facda2fa Mon Sep 17 00:00:00 2001 From: aberger3647 <112574259+aberger3647@users.noreply.github.com> Date: Fri, 5 Apr 2024 17:33:49 -0500 Subject: [PATCH 4/4] fix inputs --- src/index.css | 12 ++++++------ src/views/Home.css | 4 ++++ 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/index.css b/src/index.css index b91d348..b3a6ea9 100644 --- a/src/index.css +++ b/src/index.css @@ -114,7 +114,11 @@ form { display: flex; flex-direction: column; justify-content: center; - width: 100%; + width: 90%; +} +.form { + display: flex; + justify-content: center; } .formButtonContainer { @@ -191,11 +195,7 @@ input:focus { } form > * { - margin: 10px; -} - -.sideBySide-section { - border: 1px solid black; + margin: 10px 0px 10px 0px; } @media screen and (min-width: 780px) { diff --git a/src/views/Home.css b/src/views/Home.css index e69de29..c431545 100644 --- a/src/views/Home.css +++ b/src/views/Home.css @@ -0,0 +1,4 @@ +h4, +label { + text-align: center; +}