Merge pull request #119 from the-collab-lab/feature/button-hover

Feature/button hover
the-collab-lab · Apr 5, 2024 · dd1ebfd · dd1ebfd
2 parents 0cfdd5a + cf96138
commit dd1ebfd
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 30 deletions.
diff --git a/src/components/AddItemForm.jsx b/src/components/AddItemForm.jsx
@@ -66,12 +66,15 @@ export default function AddItemForm({ listPath, data }) {
 	return (
 		<section className="addItemSection">
 			<header className="addItemHeader">
-				<button
-					className={(addItemToggle, 'addItemButton')}
-					onClick={(e) => handleAddItemToggle(e)}
-				>
-					{addItemToggle}
-				</button>
+				<div className="squareButtonContainer">
+					<div className="buttonBackSquare"></div>
+					<button
+						className={(addItemToggle, 'addItemButton, buttonSquare')}
+						onClick={(e) => handleAddItemToggle(e)}
+					>
+						{addItemToggle}
+					</button>
+				</div>
 
 				<h2 data-testid="addItemForm-header" id="addItemH2">
 					Add Item

diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
@@ -107,14 +107,16 @@ export function ListItem({ item, listPath }) {
 				<p className="listItemName">{name}</p>
 				<p className="listItemUrgency">{urgency}</p>
 			</div>
-
-			<div className="listDelete">
-				<Button
-					className="square"
-					fn={handleDeleteItem}
-					text="X"
-					color="#89D2FF"
-				></Button>
+			<div className="squareButtonContainer">
+				<div className="buttonBackSquare"></div>
+				<button
+					className="buttonSquare buttonDelete"
+					onClick={() => {
+						handleDeleteItem();
+					}}
+				>
+					<p>+</p>
+				</button>
 			</div>
 			{deleteError && <p>Error deleting item</p>}
 			{deleteIsLoading && <p>Deleting item...</p>}

diff --git a/src/index.css b/src/index.css
@@ -65,7 +65,8 @@ input,
 select,
 option,
 label,
-small {
+small,
+button {
 	font-family: 'Work Sans';
 	margin: 0px;
 }
@@ -112,21 +113,51 @@ form {
 	flex-direction: column;
 	width: 70%;
 }
+
+.buttonContainer,
+.squareButtonContainer {
+	display: grid;
+	justify-content: center;
+}
+
+.buttonContainer > *,
+.squareButtonContainer > * {
+	grid-column-start: 1;
+	grid-row-start: 1;
+}
+
 button {
 	width: 150px;
 	height: 55px;
 	font-size: 20px;
-	border: 1px solid black;
-	box-shadow: 3px 3px 0px 3px rgba(0, 0, 0, 1);
+	border: 2px solid black;
+}
+.buttonBack {
+	width: 158px;
+	height: 63px;
+	background-color: black;
+}
+
+button:hover {
+	transform: translate(8px, 8px);
 }
 
-button.square {
+.buttonSquare {
 	height: 55px;
 	width: 55px;
+	background-color: var(--blue);
+	color: white;
+	font-size: 40px;
 }
 
-button:hover {
-	box-shadow: -3px -3px 0px 3px rgba(0, 0, 0, 1);
+.buttonBackSquare {
+	width: 63px;
+	height: 63px;
+	background-color: black;
+}
+
+.bottonSquare:hover {
+	transform: translate(2px, 2px);
 }
 
 input {

diff --git a/src/views/List.css b/src/views/List.css
@@ -55,11 +55,6 @@ section {
 	animation-timing-function: linear;
 }
 
-.addItemButton {
-	width: 30px;
-	height: 30px;
-}
-
 .addItemHeader {
 	display: flex;
 	flex-direction: row;
@@ -130,11 +125,8 @@ input[type='checkbox'] {
 	border-top: 3px solid black;
 }
 
-.listDelete {
-	padding-left: 2px;
-	padding-top: 2px;
-	padding-right: 5px;
-	background-color: black;
+.buttonSquare p {
+	transform: rotate(45deg);
 }
 
 /* Log Out */