web/css: add shared class for primary color buttons

tulir · Nov 17, 2024 · 4ee46c8 · 4ee46c8
1 parent 9e795ed
commit 4ee46c8
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 25 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>
 }