Corrects some styling in Dialog for application of global colors

the-collab-lab · Apr 3, 2024 · 27d69d8 · 27d69d8
1 parent 0293e7c
commit 27d69d8
Showing 1 changed file with 14 additions and 6 deletions.
diff --git a/src/components/Dialog.css b/src/components/Dialog.css
@@ -1,7 +1,7 @@
 .Dialog {
 	--button-alignment: 'center';
 
-	border-radius: 20px;
+	border-radius: 15px;
 	max-width: min(68ch, 95vw);
 	padding: 0;
 	animation:
@@ -39,29 +39,37 @@
 	}
 }
 
-.Dialog .c-button {
+.Dialog button {
 	min-width: 25ch;
 	min-height: 5ch;
 	cursor: pointer;
 	font-size: 1em;
 	font-weight: 500;
 	border-radius: 8px;
-	border: 1px solid #aaa;
 	padding: 0.8em 1.6em;
 }
 
+.Dialog--button-group :first-child {
+	background-color: #cdcdcd;
+}
+
+.Dialog--button-group :first-child:hover {
+	background-color: #989797;
+}
+
 c-button-cancel:hover {
 	background-color: #918f8f;
 }
 
 .c-button-confirm {
-	background-color: #4caf50;
+	background-color: var(--color-branding);
 	border-radius: 8px;
 	border: 1px solid #0f0f0f;
+	color: white;
 }
 
 .c-button-confirm:hover {
-	background-color: rgb(69, 167, 72);
+	background-color: var(--btn-confirm-hover);
 }
 
 .Dialog--button-group > * {
@@ -70,7 +78,7 @@ c-button-cancel:hover {
 
 @keyframes slideInFromRight {
 	from {
-		transform: translateX(100%);
+		transform: translateX(200%);
 	}
 	to {
 		transform: translateX(0);