From 4ca72f3fdf9b05cc95d23152d1d11a6f2b62ed1c Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <rpm@fthiessen.de>
Date: Thu, 15 Dec 2022 11:08:36 +0100
Subject: [PATCH] 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>
---
 src/components/Editor/SessionList.vue | 12 +++++++++---
 src/components/Editor/Status.vue      | 16 ++++++----------
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/components/Editor/SessionList.vue b/src/components/Editor/SessionList.vue
index ee14b80139b..a5c1f01c2a5 100644
--- 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
index d38806865b4..31ec0627984 100644
--- 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)
 		}
 	}