Unify status icon and session list with menu bar icons

* Set same size as menu bar entries: 44px * Align icons vertically with menu bar * Remove background and add background when hovering like menu bar Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>
nextcloud · Dec 15, 2022 · 4ca72f3 · 4ca72f3
1 parent 3011d24
commit 4ca72f3
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 13 deletions.
diff --git a/src/components/Editor/SessionList.vue b/src/components/Editor/SessionList.vue
@@ -146,6 +146,9 @@ export default {
 </script>
 
 <style scoped lang="scss">
+	.session-list {
+		height: 44px;
+	}
 	.avatar-list {
 		border: none;
 		background-color: var(--color-main-background);
@@ -166,10 +169,13 @@ export default {
 		}
 
 		.icon-more, .icon-group, .icon-settings-dark {
-			background-color: var(--color-background-dark);
-			width: 40px;
-			height: 40px;
+			width: 44px;
+			height: 44px;
 			margin: 0 6px 0 0;
+
+			&:hover {
+				background-color: var(--color-background-hover);
+			}
 		}
 	}
 

diff --git a/src/components/Editor/Status.vue b/src/components/Editor/Status.vue
@@ -135,7 +135,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-
 	.text-editor__session-list {
 		display: flex;
 
@@ -146,23 +145,20 @@ export default {
 	}
 
 	.save-status {
-		background-color: var(--color-background-dark);
 		border-radius: 50%;
 		color: var(--color-text-lighter);
 		display: inline-flex;
 		justify-content: center;
 		padding: 0;
-		height: 40px;
-		width: 40px;
+		height: 44px;
+		width: 44px;
 
-		&.error {
-			border: 2px solid var(--color-error);
-			width: 36px;
-			height: 36px;
+		&:hover {
+			background-color: var(--color-background-hover);
 		}
 
-		&.saved {
-			color: var(--color-success)
+		&.error {
+			color: var(--color-error)
 		}
 	}