Fix accessibility of federation menu privacy buttons

Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>

1 files changed, 24 insertions, 9 deletions

diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss
index e5d9071d5e9..88c5e4dbcf9 100644
--- a/apps/settings/css/settings.scss
+++ b/apps/settings/css/settings.scss
@@ -121,9 +121,19 @@ input {
 	width: 100%;
 }
 
-.personal-settings-setting-box input {
-	&[type='text'], &[type='email'], &[type='tel'], &[type='url'] {
-		width: 100%;
+.personal-settings-setting-box {
+	.section {
+		padding: 10px 30px;
+
+		h3 {
+			margin-bottom: 0;
+		}
+
+		input {
+			&[type='text'], &[type='email'], &[type='tel'], &[type='url'] {
+				width: 100%;
+			}
+		}
 	}
 }
 
@@ -364,11 +374,20 @@ select {
 .federation-menu {
 	position: relative;
 	cursor: pointer;
-	margin-left: 10px;
+	width: 44px;
+	height: 44px;
+	padding: 10px;
+	margin: -12px 0 0 8px;
+	background: none;
+	border: none;
 
+	&:hover,
 	&:focus {
+		background-color: var(--color-background-hover);
+		border-radius: var(--border-radius-pill);
+
 		.icon-federation-menu {
-			opacity: 0.7;
+			opacity: 0.8;
 		}
 	}
 
@@ -931,10 +950,6 @@ span.version {
 	}
 }
 
-.personal-settings-setting-box .section {
-	padding: 10px 30px;
-}
-
 .followupsection {
 	display: block;
 	padding: 0 30px 30px 30px;