Remove background image, and apply mobile and tablet breakpoints

Author: zahrafalak

public/img/background.jpg

@@ -1,13 +1,15 @@
+@use "../styles/mixins.scss" as *;
 @import "../views/unauthenticated/UnauthenticatedHome.scss";
 
 .SingleList {
 	@extend .custom-button-wrapper;
-	// @extend .button;
-	align-items: baseline;
-	font-size: 1.2em;
-	width: 120px;
+	list-style-type: none;
 }
 
-.SingleList-label {
-	margin-left: 0.2em;
+.SingleList button {
+	width: 100%;
+	margin: 5px;
+	@include tablet {
+		margin: 5px;
+	}
 }

src/components/SingleList.scss

@@ -0,0 +1,12 @@
+// ====== MEDIA ========
+@mixin tablet {
+	@media (min-width: 768px) {
+		@content;
+	}
+}
+
+@mixin mobile {
+	@media (min-width: 375px) {
+		@content;
+	}
+}

src/styles/_mixins.scss

@@ -6,6 +6,4 @@ body {
 	font-weight: 400;
 	font-style: normal;
 	background-color: $primary-beige;
-	background-image: url("/img/background.jpg");
-	background-size: cover;
 }

src/styles/global.scss

@@ -13,9 +13,9 @@
 	height: 100dvh;
 }
 
-.Layout > * {
-	padding-inline: min(5dvw, 3.2rem);
-}
+// .Layout > * {
+// 	padding-inline: min(5dvw, 3.2rem);
+// }
 
 .Layout-header {
 	background-color: var(--color-bg);

src/views/Layout.scss

@@ -1,7 +1,14 @@
+@use "../../styles/mixins.scss" as *;
+
 .lists {
+	display: block;
 	margin-top: 20px;
 	padding: 0;
-	display: flex;
-	justify-content: space-between;
-	flex-flow: wrap;
+
+	@include tablet {
+		padding: 0;
+		display: flex;
+		justify-content: space-between;
+		flex-flow: wrap;
+	}
 }

src/views/authenticated/AuthenticatedHome.scss

@@ -1,4 +1,4 @@
-import React from "react";
+// import React from "react";
 import { SingleList, CreateList } from "../../components";
 import { List, User } from "../../api";
 import "./AuthenticatedHome.scss";

src/views/authenticated/AuthenticatedHome.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+// import React from "react";
 import "./UnauthenticatedHome.scss";
 import { useNavigate } from "react-router-dom";
 import { SignInButton } from "../../api";