From 4ee46c8df5e74094714cda4dbcf82dbee31f6f6d Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Mon, 18 Nov 2024 00:30:29 +0200
Subject: [PATCH] web/css: add shared class for primary color buttons

---
 web/src/index.css                    |  9 +++++++++
 web/src/ui/login/LoginScreen.css     |  6 ------
 web/src/ui/login/LoginScreen.tsx     |  4 ++--
 web/src/ui/settings/SettingsView.css | 19 +++----------------
 web/src/ui/settings/SettingsView.tsx |  2 +-
 5 files changed, 15 insertions(+), 25 deletions(-)

diff --git a/web/src/index.css b/web/src/index.css
index 4d88270..d729b49 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -174,6 +174,15 @@ button, a.button, span.button {
 		color: var(--secondary-text-color);
 		background: none;
 	}
+
+	&.primary-color-button:not(:disabled) {
+		background-color: var(--primary-color);
+		color: var(--inverted-text-color);
+
+		&:hover, &:focus {
+			background-color: var(--primary-color-dark);
+		}
+	}
 }
 
 a {
diff --git a/web/src/ui/login/LoginScreen.css b/web/src/ui/login/LoginScreen.css
index 56ec324..2ea8b7d 100644
--- a/web/src/ui/login/LoginScreen.css
+++ b/web/src/ui/login/LoginScreen.css
@@ -55,13 +55,7 @@ main.matrix-login {
 	}
 
 	button {
-		background-color: var(--primary-color);
-		color: var(--inverted-text-color);
 		font-weight: bold;
-
-		&:hover, &:focus {
-			background-color: var(--primary-color-dark);
-		}
 	}
 
 	div.error {
diff --git a/web/src/ui/login/LoginScreen.tsx b/web/src/ui/login/LoginScreen.tsx
index bf7ee10..58a90f5 100644
--- a/web/src/ui/login/LoginScreen.tsx
+++ b/web/src/ui/login/LoginScreen.tsx
@@ -148,12 +148,12 @@ export const LoginScreen = ({ client }: LoginScreenProps) => {
 			/>}
 			<div className="buttons">
 				{supportsSSO && <button
-					className="mx-login-button"
+					className="mx-login-button primary-color-button"
 					type={supportsPassword ? "button" : "submit"}
 					onClick={supportsPassword ? loginSSO : undefined}
 				>Login with SSO</button>}
 				{supportsPassword && <button
-					className="mx-login-button"
+					className="mx-login-button primary-color-button"
 					type="submit"
 				>Login{supportsSSO || beeperDomain ? " with password" : ""}</button>}
 			</div>
diff --git a/web/src/ui/settings/SettingsView.css b/web/src/ui/settings/SettingsView.css
index b7a2ddd..93f7dde 100644
--- a/web/src/ui/settings/SettingsView.css
+++ b/web/src/ui/settings/SettingsView.css
@@ -48,24 +48,11 @@ div.settings-view {
 
 			> button {
 				padding: .5rem 1rem;
+				font-weight: bold;
 
-				&.save {
-					background-color: var(--primary-color);
+				&.delete:hover, &.delete:focus {
+					background-color: var(--error-color);
 					color: var(--inverted-text-color);
-					font-weight: bold;
-
-					&:hover, &:focus {
-						background-color: var(--primary-color-dark);
-					}
-				}
-
-				&.delete {
-					font-weight: bold;
-
-					&:hover, &:focus {
-						background-color: var(--error-color);
-						color: var(--inverted-text-color);
-					}
 				}
 			}
 		}
diff --git a/web/src/ui/settings/SettingsView.tsx b/web/src/ui/settings/SettingsView.tsx
index 073ca7e..05ef120 100644
--- a/web/src/ui/settings/SettingsView.tsx
+++ b/web/src/ui/settings/SettingsView.tsx
@@ -171,7 +171,7 @@ const CustomCSSInput = ({ setPref, room }: { setPref: SetPrefFunc, room: RoomSta
 		<textarea value={text} onChange={onChangeText}/>
 		<div className="buttons">
 			<button className="delete" onClick={onDelete}>Delete</button>
-			<button className="save" onClick={onSave}>Save</button>
+			<button className="save primary-color-button" onClick={onSave}>Save</button>
 		</div>
 	</div>
 }