From e9e41088f7aeaa0fd4271aa7ae2347daba3d9b41 Mon Sep 17 00:00:00 2001
From: Yiran Duan <yiran.duan@tum.de>
Date: Tue, 23 Jan 2024 20:36:11 +0100
Subject: [PATCH] 1306 usercontext menu inconsistent padding (#1309)

* Align padding of header and items in tum-live-menu (fix #1306)

* Minor changes to tum-live-menu ui

* menu item: Reduce margin-right, so that the icons don't extend beyond the left boundary of the region

* Revert "menu item: Reduce margin-right, so that the icons don't extend beyond the left boundary of the region"

This reverts commit 94fe9f01a7d3973a3d391ce8327b8b7a785dcabf.

* menu item: Reduce margin-right, so that the icons don't extend beyond the left boundary of the region

* menu item: Make the icons vertically aligned in the center
---
 web/assets/css/home.css  |  9 ++++++++-
 web/template/home.gohtml | 26 +++++++++++++-------------
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/web/assets/css/home.css b/web/assets/css/home.css
index 057a8f7b4..4a490579d 100644
--- a/web/assets/css/home.css
+++ b/web/assets/css/home.css
@@ -218,13 +218,20 @@
 }
 
 .tum-live-menu .tum-live-menu-item {
-    @apply flex items-center p-2 hover:bg-gray-100 dark:hover:bg-gray-800 my-2 w-full
+    @apply flex items-center py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-800 my-2 w-full
 }
 
 .tum-live-menu .tum-live-menu-item.active {
     @apply bg-gray-100 dark:bg-gray-800
 }
 
+.tum-live-menu .tum-live-menu-item .icon-wrapper {
+    width: 18px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 
 .tum-live-course-list > header {
     @apply flex items-center justify-between mb-8
diff --git a/web/template/home.gohtml b/web/template/home.gohtml
index 9a8d3ad5d..5498eac7f 100644
--- a/web/template/home.gohtml
+++ b/web/template/home.gohtml
@@ -84,8 +84,8 @@
                             {{if or (eq $user.Role 1) (eq $user.Role 2) }}
                                 <a href="/admin"
                                    class="tum-live-menu-item">
-                                    <div style="width: 30px; display: flex; justify-content: center; align-items: center;">
-                                        <i class="fa-solid fa-hammer mr-3"></i>
+                                    <div class="icon-wrapper mr-2">
+                                        <i class="fa-solid fa-hammer"></i>
                                     </div>
                                     <p>Admin</p>
                                 </a>
@@ -95,8 +95,8 @@
                                 <button type="button"
                                         class="tum-live-menu-item"
                                         @click="userContext.getChild('themePicker').toggle()">
-                                    <div style="width: 30px; display: flex; justify-content: center; align-items: center;">
-                                        <i class="fa-regular fa-moon mr-3"></i>
+                                    <div class="icon-wrapper mr-2">
+                                        <i class="fa-regular fa-moon"></i>
                                     </div>
                                     <span>Theme</span>
                                     <i class="fa-solid ml-auto"
@@ -106,7 +106,7 @@
                                     <template x-for="[modeId, mode] of Object.entries($store.theme.modes)"
                                               :key="modeId">
                                         <button type="button" tabindex="0"
-                                                class="text-left hover:bg-gray-100 dark:hover:bg-gray-800 py-2 px-4"
+                                                class="text-left hover:bg-gray-100 dark:hover:bg-gray-800 py-1 px-10"
                                                 :class="{'bg-gray-100 dark:bg-gray-800': modeId === $store.theme.activeTheme}"
                                                 @click="$store.theme.setTheme(modeId)"
                                                 x-text="mode.name">
@@ -116,8 +116,8 @@
                             </div>
                             <a href="/settings"
                                class="tum-live-menu-item">
-                                <div style="width: 30px; display: flex; justify-content: center; align-items: center;">
-                                    <i class="fa-solid fa-gear mr-3"></i>
+                                <div class="icon-wrapper mr-2">
+                                    <i class="fa-solid fa-gear"></i>
                                 </div>
                                 <p>Settings</p>
                             </a>
@@ -125,24 +125,24 @@
                             <a href="https://github.com/TUM-Dev/gocast"
                                target="_blank"
                                class="tum-live-menu-item">
-                                <div style="width: 30px; display: flex; justify-content: center; align-items: center;">
-                                    <i class="fa-regular fa-comment mr-3"></i>
+                                <div class="icon-wrapper mr-2">
+                                    <i class="fa-regular fa-comment"></i>
                                 </div>
                                 <p>Send Feedback</p>
                             </a>
                             <a href="https://github.com/TUM-Dev/gocast/issues/new?assignees=&labels=&template=bug_report.md&title="
                                class="tum-live-menu-item"
                                target="_blank">
-                                <div style="width: 30px; display: flex; justify-content: center; align-items: center;">
-                                    <i class="fa-brands fa-github mr-3"></i>
+                                <div class="icon-wrapper mr-2">
+                                    <i class="fa-brands fa-github"></i>
                                 </div>
                                 <p>Report problem</p>
                             </a>
                             <div class="border-b dark:border-gray-800"></div>
                             <a href="/logout"
                                class="tum-live-menu-item">
-                                <div style="width: 30px; display: flex; justify-content: center; align-items: center;">
-                                    <i class="fa-solid fa-sign-out mr-3"></i>
+                                <div class="icon-wrapper mr-2">
+                                    <i class="fa-solid fa-sign-out"></i>
                                 </div>
                                 <p>Logout</p>
                             </a>