From 8a9f98c49e47157697296e18174b139ea40c1541 Mon Sep 17 00:00:00 2001
From: "Kent C. Dodds" <me+github@kentcdodds.com>
Date: Fri, 28 Jun 2024 14:58:50 -0600
Subject: [PATCH] more style fixes

---
 .../01.problem.initial-state/index.css         | 18 ++++++++++++++++++
 .../01.solution.initial-state/index.css        | 18 ++++++++++++++++++
 .../02.problem.update-state/index.css          | 18 ++++++++++++++++++
 .../02.solution.update-state/index.css         | 18 ++++++++++++++++++
 .../03.problem.re-render/index.css             | 18 ++++++++++++++++++
 .../03.solution.re-render/index.css            | 18 ++++++++++++++++++
 .../04.problem.preserve-state/index.css        | 18 ++++++++++++++++++
 .../04.solution.preserve-state/index.css       | 18 ++++++++++++++++++
 .../01.problem.phase/index.css                 | 18 ++++++++++++++++++
 .../01.solution.phase/index.css                | 18 ++++++++++++++++++
 .../02.problem.hook-id/index.css               | 18 ++++++++++++++++++
 .../02.solution.hook-id/index.css              | 18 ++++++++++++++++++
 .../01.problem.callback/index.css              | 18 ++++++++++++++++++
 .../01.solution.callback/index.css             | 18 ++++++++++++++++++
 .../02.problem.dependencies/index.css          | 18 ++++++++++++++++++
 .../02.solution.dependencies/index.css         | 18 ++++++++++++++++++
 16 files changed, 288 insertions(+)

diff --git a/exercises/01.use-state/01.problem.initial-state/index.css b/exercises/01.use-state/01.problem.initial-state/index.css
index fe2f648..977a550 100644
--- a/exercises/01.use-state/01.problem.initial-state/index.css
+++ b/exercises/01.use-state/01.problem.initial-state/index.css
@@ -16,6 +16,8 @@ div:has(.counter) {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	gap: 8px;
+	min-width: 100%;
 	padding: 20px;
 	height: 100%;
 
@@ -29,6 +31,18 @@ div:has(.counter) {
 		border-radius: 3px;
 		cursor: pointer;
 
+		/* matches the enable/disable button when that one shows up in the exercises */
+		&:first-of-type {
+			flex: 1;
+			max-width: 100px;
+		}
+
+		/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
+		&:last-of-type {
+			flex: unset;
+			max-width: unset;
+		}
+
 		&:hover,
 		&:focus {
 			background-color: lch(40% 100 220);
@@ -38,5 +52,9 @@ div:has(.counter) {
 			background-color: lch(50% 100 220);
 			border-color: lch(30% 100 220);
 		}
+		&:disabled {
+			background-color: lch(30% 20 220);
+			border-color: lch(10% 20 200);
+		}
 	}
 }
diff --git a/exercises/01.use-state/01.solution.initial-state/index.css b/exercises/01.use-state/01.solution.initial-state/index.css
index fe2f648..977a550 100644
--- a/exercises/01.use-state/01.solution.initial-state/index.css
+++ b/exercises/01.use-state/01.solution.initial-state/index.css
@@ -16,6 +16,8 @@ div:has(.counter) {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	gap: 8px;
+	min-width: 100%;
 	padding: 20px;
 	height: 100%;
 
@@ -29,6 +31,18 @@ div:has(.counter) {
 		border-radius: 3px;
 		cursor: pointer;
 
+		/* matches the enable/disable button when that one shows up in the exercises */
+		&:first-of-type {
+			flex: 1;
+			max-width: 100px;
+		}
+
+		/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
+		&:last-of-type {
+			flex: unset;
+			max-width: unset;
+		}
+
 		&:hover,
 		&:focus {
 			background-color: lch(40% 100 220);
@@ -38,5 +52,9 @@ div:has(.counter) {
 			background-color: lch(50% 100 220);
 			border-color: lch(30% 100 220);
 		}
+		&:disabled {
+			background-color: lch(30% 20 220);
+			border-color: lch(10% 20 200);
+		}
 	}
 }
diff --git a/exercises/01.use-state/02.problem.update-state/index.css b/exercises/01.use-state/02.problem.update-state/index.css
index fe2f648..977a550 100644
--- a/exercises/01.use-state/02.problem.update-state/index.css
+++ b/exercises/01.use-state/02.problem.update-state/index.css
@@ -16,6 +16,8 @@ div:has(.counter) {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	gap: 8px;
+	min-width: 100%;
 	padding: 20px;
 	height: 100%;
 
@@ -29,6 +31,18 @@ div:has(.counter) {
 		border-radius: 3px;
 		cursor: pointer;
 
+		/* matches the enable/disable button when that one shows up in the exercises */
+		&:first-of-type {
+			flex: 1;
+			max-width: 100px;
+		}
+
+		/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
+		&:last-of-type {
+			flex: unset;
+			max-width: unset;
+		}
+
 		&:hover,
 		&:focus {
 			background-color: lch(40% 100 220);
@@ -38,5 +52,9 @@ div:has(.counter) {
 			background-color: lch(50% 100 220);
 			border-color: lch(30% 100 220);
 		}
+		&:disabled {
+			background-color: lch(30% 20 220);
+			border-color: lch(10% 20 200);
+		}
 	}
 }
diff --git a/exercises/01.use-state/02.solution.update-state/index.css b/exercises/01.use-state/02.solution.update-state/index.css
index fe2f648..977a550 100644
--- a/exercises/01.use-state/02.solution.update-state/index.css
+++ b/exercises/01.use-state/02.solution.update-state/index.css
@@ -16,6 +16,8 @@ div:has(.counter) {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	gap: 8px;
+	min-width: 100%;
 	padding: 20px;
 	height: 100%;
 
@@ -29,6 +31,18 @@ div:has(.counter) {
 		border-radius: 3px;
 		cursor: pointer;
 
+		/* matches the enable/disable button when that one shows up in the exercises */
+		&:first-of-type {
+			flex: 1;
+			max-width: 100px;
+		}
+
+		/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
+		&:last-of-type {
+			flex: unset;
+			max-width: unset;
+		}
+
 		&:hover,
 		&:focus {
 			background-color: lch(40% 100 220);
@@ -38,5 +52,9 @@ div:has(.counter) {
 			background-color: lch(50% 100 220);
 			border-color: lch(30% 100 220);
 		}
+		&:disabled {
+			background-color: lch(30% 20 220);
+			border-color: lch(10% 20 200);
+		}
 	}
 }
diff --git a/exercises/01.use-state/03.problem.re-render/index.css b/exercises/01.use-state/03.problem.re-render/index.css
index fe2f648..977a550 100644
--- a/exercises/01.use-state/03.problem.re-render/index.css
+++ b/exercises/01.use-state/03.problem.re-render/index.css
@@ -16,6 +16,8 @@ div:has(.counter) {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	gap: 8px;
+	min-width: 100%;
 	padding: 20px;
 	height: 100%;
 
@@ -29,6 +31,18 @@ div:has(.counter) {
 		border-radius: 3px;
 		cursor: pointer;
 
+		/* matches the enable/disable button when that one shows up in the exercises */
+		&:first-of-type {
+			flex: 1;
+			max-width: 100px;
+		}
+
+		/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
+		&:last-of-type {
+			flex: unset;
+			max-width: unset;
+		}
+
 		&:hover,
 		&:focus {
 			background-color: lch(40% 100 220);
@@ -38,5 +52,9 @@ div:has(.counter) {
 			background-color: lch(50% 100 220);
 			border-color: lch(30% 100 220);
 		}
+		&:disabled {
+			background-color: lch(30% 20 220);
+			border-color: lch(10% 20 200);
+		}
 	}
 }
diff --git a/exercises/01.use-state/03.solution.re-render/index.css b/exercises/01.use-state/03.solution.re-render/index.css
index fe2f648..977a550 100644
--- a/exercises/01.use-state/03.solution.re-render/index.css
+++ b/exercises/01.use-state/03.solution.re-render/index.css
@@ -16,6 +16,8 @@ div:has(.counter) {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	gap: 8px;
+	min-width: 100%;
 	padding: 20px;
 	height: 100%;
 
@@ -29,6 +31,18 @@ div:has(.counter) {
 		border-radius: 3px;
 		cursor: pointer;
 
+		/* matches the enable/disable button when that one shows up in the exercises */
+		&:first-of-type {
+			flex: 1;
+			max-width: 100px;
+		}
+
+		/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
+		&:last-of-type {
+			flex: unset;
+			max-width: unset;
+		}
+
 		&:hover,
 		&:focus {
 			background-color: lch(40% 100 220);
@@ -38,5 +52,9 @@ div:has(.counter) {
 			background-color: lch(50% 100 220);
 			border-color: lch(30% 100 220);
 		}
+		&:disabled {
+			background-color: lch(30% 20 220);
+			border-color: lch(10% 20 200);
+		}
 	}
 }
diff --git a/exercises/01.use-state/04.problem.preserve-state/index.css b/exercises/01.use-state/04.problem.preserve-state/index.css
index fe2f648..977a550 100644
--- a/exercises/01.use-state/04.problem.preserve-state/index.css
+++ b/exercises/01.use-state/04.problem.preserve-state/index.css
@@ -16,6 +16,8 @@ div:has(.counter) {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	gap: 8px;
+	min-width: 100%;
 	padding: 20px;
 	height: 100%;
 
@@ -29,6 +31,18 @@ div:has(.counter) {
 		border-radius: 3px;
 		cursor: pointer;
 
+		/* matches the enable/disable button when that one shows up in the exercises */
+		&:first-of-type {
+			flex: 1;
+			max-width: 100px;
+		}
+
+		/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
+		&:last-of-type {
+			flex: unset;
+			max-width: unset;
+		}
+
 		&:hover,
 		&:focus {
 			background-color: lch(40% 100 220);
@@ -38,5 +52,9 @@ div:has(.counter) {
 			background-color: lch(50% 100 220);
 			border-color: lch(30% 100 220);
 		}
+		&:disabled {
+			background-color: lch(30% 20 220);
+			border-color: lch(10% 20 200);
+		}
 	}
 }
diff --git a/exercises/01.use-state/04.solution.preserve-state/index.css b/exercises/01.use-state/04.solution.preserve-state/index.css
index fe2f648..977a550 100644
--- a/exercises/01.use-state/04.solution.preserve-state/index.css
+++ b/exercises/01.use-state/04.solution.preserve-state/index.css
@@ -16,6 +16,8 @@ div:has(.counter) {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	gap: 8px;
+	min-width: 100%;
 	padding: 20px;
 	height: 100%;
 
@@ -29,6 +31,18 @@ div:has(.counter) {
 		border-radius: 3px;
 		cursor: pointer;
 
+		/* matches the enable/disable button when that one shows up in the exercises */
+		&:first-of-type {
+			flex: 1;
+			max-width: 100px;
+		}
+
+		/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
+		&:last-of-type {
+			flex: unset;
+			max-width: unset;
+		}
+
 		&:hover,
 		&:focus {
 			background-color: lch(40% 100 220);
@@ -38,5 +52,9 @@ div:has(.counter) {
 			background-color: lch(50% 100 220);
 			border-color: lch(30% 100 220);
 		}
+		&:disabled {
+			background-color: lch(30% 20 220);
+			border-color: lch(10% 20 200);
+		}
 	}
 }
diff --git a/exercises/02.multiple-hooks/01.problem.phase/index.css b/exercises/02.multiple-hooks/01.problem.phase/index.css
index fe2f648..977a550 100644
--- a/exercises/02.multiple-hooks/01.problem.phase/index.css
+++ b/exercises/02.multiple-hooks/01.problem.phase/index.css
@@ -16,6 +16,8 @@ div:has(.counter) {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	gap: 8px;
+	min-width: 100%;
 	padding: 20px;
 	height: 100%;
 
@@ -29,6 +31,18 @@ div:has(.counter) {
 		border-radius: 3px;
 		cursor: pointer;
 
+		/* matches the enable/disable button when that one shows up in the exercises */
+		&:first-of-type {
+			flex: 1;
+			max-width: 100px;
+		}
+
+		/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
+		&:last-of-type {
+			flex: unset;
+			max-width: unset;
+		}
+
 		&:hover,
 		&:focus {
 			background-color: lch(40% 100 220);
@@ -38,5 +52,9 @@ div:has(.counter) {
 			background-color: lch(50% 100 220);
 			border-color: lch(30% 100 220);
 		}
+		&:disabled {
+			background-color: lch(30% 20 220);
+			border-color: lch(10% 20 200);
+		}
 	}
 }
diff --git a/exercises/02.multiple-hooks/01.solution.phase/index.css b/exercises/02.multiple-hooks/01.solution.phase/index.css
index fe2f648..977a550 100644
--- a/exercises/02.multiple-hooks/01.solution.phase/index.css
+++ b/exercises/02.multiple-hooks/01.solution.phase/index.css
@@ -16,6 +16,8 @@ div:has(.counter) {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	gap: 8px;
+	min-width: 100%;
 	padding: 20px;
 	height: 100%;
 
@@ -29,6 +31,18 @@ div:has(.counter) {
 		border-radius: 3px;
 		cursor: pointer;
 
+		/* matches the enable/disable button when that one shows up in the exercises */
+		&:first-of-type {
+			flex: 1;
+			max-width: 100px;
+		}
+
+		/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
+		&:last-of-type {
+			flex: unset;
+			max-width: unset;
+		}
+
 		&:hover,
 		&:focus {
 			background-color: lch(40% 100 220);
@@ -38,5 +52,9 @@ div:has(.counter) {
 			background-color: lch(50% 100 220);
 			border-color: lch(30% 100 220);
 		}
+		&:disabled {
+			background-color: lch(30% 20 220);
+			border-color: lch(10% 20 200);
+		}
 	}
 }
diff --git a/exercises/02.multiple-hooks/02.problem.hook-id/index.css b/exercises/02.multiple-hooks/02.problem.hook-id/index.css
index fe2f648..977a550 100644
--- a/exercises/02.multiple-hooks/02.problem.hook-id/index.css
+++ b/exercises/02.multiple-hooks/02.problem.hook-id/index.css
@@ -16,6 +16,8 @@ div:has(.counter) {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	gap: 8px;
+	min-width: 100%;
 	padding: 20px;
 	height: 100%;
 
@@ -29,6 +31,18 @@ div:has(.counter) {
 		border-radius: 3px;
 		cursor: pointer;
 
+		/* matches the enable/disable button when that one shows up in the exercises */
+		&:first-of-type {
+			flex: 1;
+			max-width: 100px;
+		}
+
+		/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
+		&:last-of-type {
+			flex: unset;
+			max-width: unset;
+		}
+
 		&:hover,
 		&:focus {
 			background-color: lch(40% 100 220);
@@ -38,5 +52,9 @@ div:has(.counter) {
 			background-color: lch(50% 100 220);
 			border-color: lch(30% 100 220);
 		}
+		&:disabled {
+			background-color: lch(30% 20 220);
+			border-color: lch(10% 20 200);
+		}
 	}
 }
diff --git a/exercises/02.multiple-hooks/02.solution.hook-id/index.css b/exercises/02.multiple-hooks/02.solution.hook-id/index.css
index fe2f648..977a550 100644
--- a/exercises/02.multiple-hooks/02.solution.hook-id/index.css
+++ b/exercises/02.multiple-hooks/02.solution.hook-id/index.css
@@ -16,6 +16,8 @@ div:has(.counter) {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	gap: 8px;
+	min-width: 100%;
 	padding: 20px;
 	height: 100%;
 
@@ -29,6 +31,18 @@ div:has(.counter) {
 		border-radius: 3px;
 		cursor: pointer;
 
+		/* matches the enable/disable button when that one shows up in the exercises */
+		&:first-of-type {
+			flex: 1;
+			max-width: 100px;
+		}
+
+		/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
+		&:last-of-type {
+			flex: unset;
+			max-width: unset;
+		}
+
 		&:hover,
 		&:focus {
 			background-color: lch(40% 100 220);
@@ -38,5 +52,9 @@ div:has(.counter) {
 			background-color: lch(50% 100 220);
 			border-color: lch(30% 100 220);
 		}
+		&:disabled {
+			background-color: lch(30% 20 220);
+			border-color: lch(10% 20 200);
+		}
 	}
 }
diff --git a/exercises/03.use-effect/01.problem.callback/index.css b/exercises/03.use-effect/01.problem.callback/index.css
index fe2f648..977a550 100644
--- a/exercises/03.use-effect/01.problem.callback/index.css
+++ b/exercises/03.use-effect/01.problem.callback/index.css
@@ -16,6 +16,8 @@ div:has(.counter) {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	gap: 8px;
+	min-width: 100%;
 	padding: 20px;
 	height: 100%;
 
@@ -29,6 +31,18 @@ div:has(.counter) {
 		border-radius: 3px;
 		cursor: pointer;
 
+		/* matches the enable/disable button when that one shows up in the exercises */
+		&:first-of-type {
+			flex: 1;
+			max-width: 100px;
+		}
+
+		/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
+		&:last-of-type {
+			flex: unset;
+			max-width: unset;
+		}
+
 		&:hover,
 		&:focus {
 			background-color: lch(40% 100 220);
@@ -38,5 +52,9 @@ div:has(.counter) {
 			background-color: lch(50% 100 220);
 			border-color: lch(30% 100 220);
 		}
+		&:disabled {
+			background-color: lch(30% 20 220);
+			border-color: lch(10% 20 200);
+		}
 	}
 }
diff --git a/exercises/03.use-effect/01.solution.callback/index.css b/exercises/03.use-effect/01.solution.callback/index.css
index fe2f648..977a550 100644
--- a/exercises/03.use-effect/01.solution.callback/index.css
+++ b/exercises/03.use-effect/01.solution.callback/index.css
@@ -16,6 +16,8 @@ div:has(.counter) {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	gap: 8px;
+	min-width: 100%;
 	padding: 20px;
 	height: 100%;
 
@@ -29,6 +31,18 @@ div:has(.counter) {
 		border-radius: 3px;
 		cursor: pointer;
 
+		/* matches the enable/disable button when that one shows up in the exercises */
+		&:first-of-type {
+			flex: 1;
+			max-width: 100px;
+		}
+
+		/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
+		&:last-of-type {
+			flex: unset;
+			max-width: unset;
+		}
+
 		&:hover,
 		&:focus {
 			background-color: lch(40% 100 220);
@@ -38,5 +52,9 @@ div:has(.counter) {
 			background-color: lch(50% 100 220);
 			border-color: lch(30% 100 220);
 		}
+		&:disabled {
+			background-color: lch(30% 20 220);
+			border-color: lch(10% 20 200);
+		}
 	}
 }
diff --git a/exercises/03.use-effect/02.problem.dependencies/index.css b/exercises/03.use-effect/02.problem.dependencies/index.css
index fe2f648..977a550 100644
--- a/exercises/03.use-effect/02.problem.dependencies/index.css
+++ b/exercises/03.use-effect/02.problem.dependencies/index.css
@@ -16,6 +16,8 @@ div:has(.counter) {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	gap: 8px;
+	min-width: 100%;
 	padding: 20px;
 	height: 100%;
 
@@ -29,6 +31,18 @@ div:has(.counter) {
 		border-radius: 3px;
 		cursor: pointer;
 
+		/* matches the enable/disable button when that one shows up in the exercises */
+		&:first-of-type {
+			flex: 1;
+			max-width: 100px;
+		}
+
+		/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
+		&:last-of-type {
+			flex: unset;
+			max-width: unset;
+		}
+
 		&:hover,
 		&:focus {
 			background-color: lch(40% 100 220);
@@ -38,5 +52,9 @@ div:has(.counter) {
 			background-color: lch(50% 100 220);
 			border-color: lch(30% 100 220);
 		}
+		&:disabled {
+			background-color: lch(30% 20 220);
+			border-color: lch(10% 20 200);
+		}
 	}
 }
diff --git a/exercises/03.use-effect/02.solution.dependencies/index.css b/exercises/03.use-effect/02.solution.dependencies/index.css
index fe2f648..977a550 100644
--- a/exercises/03.use-effect/02.solution.dependencies/index.css
+++ b/exercises/03.use-effect/02.solution.dependencies/index.css
@@ -16,6 +16,8 @@ div:has(.counter) {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	gap: 8px;
+	min-width: 100%;
 	padding: 20px;
 	height: 100%;
 
@@ -29,6 +31,18 @@ div:has(.counter) {
 		border-radius: 3px;
 		cursor: pointer;
 
+		/* matches the enable/disable button when that one shows up in the exercises */
+		&:first-of-type {
+			flex: 1;
+			max-width: 100px;
+		}
+
+		/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
+		&:last-of-type {
+			flex: unset;
+			max-width: unset;
+		}
+
 		&:hover,
 		&:focus {
 			background-color: lch(40% 100 220);
@@ -38,5 +52,9 @@ div:has(.counter) {
 			background-color: lch(50% 100 220);
 			border-color: lch(30% 100 220);
 		}
+		&:disabled {
+			background-color: lch(30% 20 220);
+			border-color: lch(10% 20 200);
+		}
 	}
 }