💄 (leaderboard): Ability to replay a game or change game settings

src/components/Leaderboard/styles.scss

@@ -1,72 +1,111 @@
-.boardContainer {
+.title {
+	margin-bottom: 40px;
+	font-size: 2rem;
+	font-weight: 600;
+	color: #ffffff;
+}
+
+.board {
 	display: flex;
 	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	height: 100vh;
-    width: 100vw;
+	width: 95svw;
+	max-width: 450px;
+	border-radius: 5px;
+	background-color: #fff;
+	overflow: hidden;
+
+	& > .header {
+		display: grid;
+		grid-template-columns: 1em repeat(2, 1fr);
+		gap: 30px;
+		padding: 15px 20px;
+		background-color: #333;
+
+		& > * {
+			display: flex;
+			flex-wrap: nowrap;
+			align-items: center;
+			gap: 10px;
+			font-size: 1.3em;
+			font-weight: 400;
+			color: #fff;
+
+			& > svg {
+				height: 1.3em;
+			}
+
+			&:last-child {
+				justify-content: flex-end;
+			}
+		}
+	}
+
+	& > .scoresContainer {
+		height: 100%;
+		max-height: 400px;
+		overflow-y: auto;
+
+		& > .score {
+			display: grid;
+			grid-template-columns: 1em repeat(2, 1fr);
+			gap: 30px;
+			padding: 10px 20px;
+			background-color: #e1e1e1;
+			color: #333;
+
+			& > * {
+				&:first-child {
+					opacity: 0.5;
+				}
+
+				&:last-child {
+					justify-self: end;
+					font-weight: 600;
+				}
+			}
+
+			&:nth-child(2n) {
+				background-color: #ffffff;
+			}
+		}
+	}
 }
 
-.titleBoard {
-	font-size: 1.5rem;
-	margin-bottom: 1rem;
-	font-weight: bold;
-}
+.controls {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 100px;
+	width: 100%;
 
-.completeBoard {
-	display: flex;
-	flex-direction: column;
-	gap: 1em;
-	border: 2px solid #fff;
-    border-radius: 5px;
-    padding: 15px;
-    background-color: #fff;
-    width: 100%;
-    max-width: 400px;
-    
-}
+	& > .controlButton {
+		display: flex;
+		flex-wrap: nowrap;
+		justify-content: center;
+		align-items: center;
+		gap: 10px;
+		padding: 10px 20px;
+		border: none;
+		border-radius: 5px;
+		font-size: 16px;
+		font-weight: 600;
+		transition: filter 0.3s ease;
+		color: #fff;
+		cursor: pointer;
 
-.containerLittle {
-    overflow: scroll;
-    height: 100%;
-    max-height: 350px;
-    gap: 1em;
-}
+		&:hover {
+			filter: brightness(1.1);
+		}
 
-.lineInfo {
-    display: grid;
-	grid-template-columns: 1fr 1fr;
-	gap: 10px;
-    border: 1.5px solid #fff;
-    border-radius: 3px;
-    padding: 10px;
-    background-color: #333;
-    color: #fff;
-    font-weight: 400;
-}
+		&.home {
+			background-color: #ca5940;
+		}
 
-.infoDate {
-    margin-left: 10px;
-}
+		&.replay {
+			background-color: #f39440;
+		}
 
-.infoScore {
-    text-align: right;
-    margin-right: 10px;
-}
-
-.lineBoard {
-    display: grid;
-	grid-template-columns: 1fr 1fr;
-	gap: 10px;
-    border: 1.5px solid #fff;
-    margin-bottom: 10px;
-    border-radius: 3px;
-    padding: 5px;
-    background-color: #e1e1e1;
-    color: #333;
-    font-weight: 400;
-}
-
-.blockScore {
-    text-align: right;
+		& > svg {
+			width: 20px;
+		}
+	}
 }