style: center view list button

src/components/forms/ShareListForm.tsx

@@ -52,7 +52,7 @@ const ShareListForm = ({ listPath }: Props) => {
 				className="h3 Share-ListForm text-center "
 				htmlFor="recipient-email"
 			>
-				Invite friends and family to view your list!
+				Invite others to view your list!
 			</Form.Label>
 			<InputGroup>
 				<Form.Control
@@ -67,10 +67,13 @@ const ShareListForm = ({ listPath }: Props) => {
 					aria-required
 				/>
 
-				<Button className="custom-button" type="submit" aria-label="submits form to share shopping list">
+				<Button
+					className="custom-button"
+					type="submit"
+					aria-label="submits form to share shopping list"
+				>
 					<FaRegShareSquare />
 					<span>Share</span>
-
 				</Button>
 			</InputGroup>
 		</Form>

src/views/authenticated/List.scss

@@ -23,28 +23,3 @@
 	background-color: rgb(241, 230, 204);
 	z-index: 1020;
 }
-
-//.Share-ListForm {
-//flex-basis: 50%;
-//}
-
-//.Add-ItemForm {
-//flex-basis: 80%;
-//}
-
-//.ListItemSection {
-
-//flex-grow: 1; /* Both sections will take up equal width */
-//flex-shrink: 1;
-//flex-wrap: column;
-
-//}
-
-/*@media (max-width: 1000px) {
-	.ListItemSection,
-	.Add-ShareList {
-		//flex-basis: 50%;
-		//margin: auto;
-		//align-items: flex-end;
-	}
-} */

src/views/authenticated/List.tsx

@@ -103,13 +103,16 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 				</section>
 			</div>
 
-			<ShareListForm listPath={listPath} />
-			<Button
-				className="d-md-none mt-3 custom-button align-self-center"
-				onClick={scrollToViewList}
-			>
-				{"View List"}
-			</Button>
+			<div className="d-flex justify-content center flex-column ">
+				<Button
+					className="d-md-none mt-3 custom-button justify-content-center"
+					onClick={scrollToViewList}
+				>
+					{"View List"}
+				</Button>
+
+				<ShareListForm listPath={listPath} />
+			</div>
 		</Container>
 	);
 }