From d29a9492cc89d9201ed97fd28ab5c49ed8df3727 Mon Sep 17 00:00:00 2001
From: Yiran Duan <yiran.duan@tum.de>
Date: Mon, 20 Nov 2023 17:49:03 +0100
Subject: [PATCH] Align buttons on watch page and user context dropdown on
 homepage (#1240)

- Alignment of "Select Theme" button on the watch page
- Alignment of elements in "User Context" on the home page
---
 web/template/home.gohtml                   | 24 ++++++++++++++++------
 web/template/partial/info-dropdown.gohtml  |  2 +-
 web/template/partial/theme-selector.gohtml |  5 +++--
 3 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/web/template/home.gohtml b/web/template/home.gohtml
index f1b1c3ec4..1666ca832 100644
--- a/web/template/home.gohtml
+++ b/web/template/home.gohtml
@@ -84,7 +84,9 @@
                             {{if or (eq $user.Role 1) (eq $user.Role 2) }}
                                 <a href="/admin"
                                    class="tum-live-menu-item">
-                                    <i class="fa-solid fa-hammer mr-4"></i>
+                                    <div style="width: 30px; display: flex; justify-content: center; align-items: center;">
+                                        <i class="fa-solid fa-hammer mr-3"></i>
+                                    </div>
                                     <p>Admin</p>
                                 </a>
                                 <div class="border-b dark:border-gray-800"></div>
@@ -93,7 +95,9 @@
                                 <button type="button"
                                         class="tum-live-menu-item"
                                         @click="userContext.getChild('themePicker').toggle()">
-                                    <i class="fa-regular fa-moon mr-4"></i>
+                                    <div style="width: 30px; display: flex; justify-content: center; align-items: center;">
+                                        <i class="fa-regular fa-moon mr-3"></i>
+                                    </div>
                                     <span>Theme</span>
                                     <i class="fa-solid ml-auto"
                                        :class="userContext.getChild('themePicker').value ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
@@ -112,26 +116,34 @@
                             </div>
                             <a href="/settings"
                                class="tum-live-menu-item">
-                                <i class="fa-solid fa-gear mr-4"></i>
+                                <div style="width: 30px; display: flex; justify-content: center; align-items: center;">
+                                    <i class="fa-solid fa-gear mr-3"></i>
+                                </div>
                                 <p>Settings</p>
                             </a>
                             <div class="border-b dark:border-gray-800"></div>
                             <a href="https://github.com/TUM-Dev/gocast"
                                target="_blank"
                                class="tum-live-menu-item">
-                                <i class="fa-regular fa-comment mr-4"></i>
+                                <div style="width: 30px; display: flex; justify-content: center; align-items: center;">
+                                    <i class="fa-regular fa-comment mr-3"></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">
-                                <i class="fa-brands fa-github mr-4"></i>
+                                <div style="width: 30px; display: flex; justify-content: center; align-items: center;">
+                                    <i class="fa-brands fa-github mr-3"></i>
+                                </div>
                                 <p>Report problem</p>
                             </a>
                             <div class="border-b dark:border-gray-800"></div>
                             <a href="/logout"
                                class="tum-live-menu-item">
-                                <i class="fa-solid fa-sign-out mr-4"></i>
+                                <div style="width: 30px; display: flex; justify-content: center; align-items: center;">
+                                    <i class="fa-solid fa-sign-out mr-3"></i>
+                                </div>
                                 <p>Logout</p>
                             </a>
                         </nav>
diff --git a/web/template/partial/info-dropdown.gohtml b/web/template/partial/info-dropdown.gohtml
index 8d6abb94b..4a4361a6a 100644
--- a/web/template/partial/info-dropdown.gohtml
+++ b/web/template/partial/info-dropdown.gohtml
@@ -1,5 +1,5 @@
 {{define "info-dropdown"}}
-    <div x-cloak x-data="{showInfoDropdown: false, show: false, mobile: false}" class="relative text-right md:mt-px">
+    <div x-cloak x-data="{showInfoDropdown: false, show: false, mobile: false}" class="relative text-right md:mt">
         <button title="Toggle Menu" @click="showInfoDropdown=true;"
                 class="transition-colors duration-200 hover:text-gray-600 dark:hover:text-white text-gray-400">
             <i class="fa fa-bars text-xl md:text-normal"></i>
diff --git a/web/template/partial/theme-selector.gohtml b/web/template/partial/theme-selector.gohtml
index 50303030b..2c789bc5f 100644
--- a/web/template/partial/theme-selector.gohtml
+++ b/web/template/partial/theme-selector.gohtml
@@ -9,7 +9,7 @@
                  type="button"
                  @click="$store.theme.setMode(modeId); show=false;">
                 <div class="flex items-center" :class="mobile ? 'flex-row-reverse' : ''">
-                    <i class="fa-solid" :class="['fa-' + mode.faIconId, mobile ? 'ml-8' : 'mr-2']"></i>
+                    <i class="fa-solid w-4" :class="['fa-' + mode.faIconId, mobile ? 'ml-8' : 'mr-2']"></i>
                     <p x-text="mode.name" :class="mobile ? 'mr-2' : ''"></p>
                 </div>
             </button>
@@ -23,7 +23,8 @@
 
 {{define "theme-selector"}}
     <div class="relative" x-data="{ show: false, mobile: false }">
-        <button title="Select Theme" class="transition-colors duration-200 hover:text-gray-600
+        <button title="Select Theme" class="absolute top-1/2 transform -translate-y-1/2
+                        transition-colors duration-200 hover:text-gray-600
                        dark:hover:text-white text-gray-400 mr-6 relative w-4"
                 type="button" @click="show=!show">
             {{template "theme-switcher-icon"}}