fix(ui): match top menu bar between eventyay talk and eventyay tickets components (#1259)

* fix(ui): match top menu bar between Eventyay Talk and Tickets components

* update font weight

---------

Co-authored-by: Mario Behling <[email protected]>

Author: prayag78

app/eventyay/eventyay_common/templates/eventyay_common/base.html

@@ -168,12 +168,6 @@
                             <i class="fa fa-solid fa-caret-down"></i>
                         </a>
                     </li>
-                    <li>
-                        <a href="{% url 'common:auth.logout' %}" title="{% trans "Log out" %}">
-                            <i class="fa fa-sign-out"></i>
-                            <span class="visible-xs-inline">{% trans "Log out" %}</span>
-                        </a>
-                    </li>
                 </ul>
                 <div class="navbar-default sidebar" role="navigation">
                     <div class="sidebar-nav navbar-nav-collapse navbar-collapse">

app/eventyay/orga/templates/orga/base.html

@@ -148,15 +148,6 @@
                     {# The menu built by Vue 3 app will be mounted here. The ID must match. #}
                     <div id='global-nav-menu' class='d-inline-block' />
                 </li>
-                <li class="nav-item">
-                    <form action="{% url "eventyay_common:auth.logout" %}" method="post">
-                        {% csrf_token %}
-                        <button class="nav-link active font-text ml-1" type="submit">
-                            <i class="fa fa-sign-out"></i>
-                            <span>{% trans "Log out" %}</span>
-                        </button>
-                    </form>
-                </li>
             </ul>
         </nav>
         {% staff_need_to_explain request.user as staff_need_to_explain %}

app/eventyay/static/orga/css/_layout.css

@@ -438,8 +438,38 @@ aside.sidebar {
 }
 
 /* top navbar, /orga only */
+
+.navbar #global-nav-menu {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  margin-left: 4px;
+  margin-right: 10px;
+  font-weight: 500;
+}
+
+.navbar #global-nav-menu button {
+  padding: 0;
+  line-height: 1;
+}
+
+.navbar #global-nav-menu button > div {
+  width: 0.70rem;
+  height: 0.70rem;
+  margin-left: 6px;
+}
+
+.navbar .nav-link .fa-user {
+  margin-right: 5px;
+}
+
+.navbar .navbar-nav .nav-item.d-none.d-md-block {
+  margin-bottom: 0;
+}
+
 nav.navbar,
 .navbar {
+  font-weight: 500;
   display: flex;
   align-items: center;
   flex-flow: row nowrap;
@@ -455,15 +485,14 @@ nav.navbar,
   background-color: var(--color-primary);
   border: 1px solid transparent;
   border-color: var(--color-border-navbar);
-  padding: 0.25rem;
-  z-index: 200;
+  padding: .375rem;
+  padding-right: 1.1rem;
 
   .navbar-brand {
     padding-top: 0.3125rem;
-    font-weight: 600;
     padding-bottom: 0.3125rem;
     margin-right: 1rem;
-    font-size: 1.25rem;
+    font-size: 20px;
     line-height: inherit;
     white-space: nowrap;
     font-family: var(--font-family-title);
@@ -473,7 +502,6 @@ nav.navbar,
       vertical-align: middle;
       height: 30px;
       width: auto;
-      margin: auto;
     }
   }
 
@@ -485,6 +513,14 @@ nav.navbar,
     margin-top: 0;
     list-style: none;
     align-items: center;
+
+    &.d-block {
+      margin-right: 0.5rem;
+    }
+
+    .nav-item.d-none.d-md-block {
+      margin-right: 16px;
+    }
   }
 
   .nav-link {
@@ -501,6 +537,7 @@ nav.navbar,
   a,
   button {
     color: var(--color-offwhite);
+    font-size: 14px;
 
     &:hover {
       text-decoration: none;
@@ -517,30 +554,8 @@ nav.navbar,
     font-weight: normal;
   }
 }
-
-/* Navigation button styling - sharp corners to match Tickets component */
-.header-nav.btn-outline-success,
-.header-nav .btn-outline-success,
-.header-nav.btn-success,
-.header-nav .btn-success {
-  border-radius: 0 !important;
-}
-
-/* Navigation button hover, focus, and active states */
-.header-nav.btn-outline-success:hover,
-.header-nav.btn-outline-success:focus,
-.header-nav.btn-outline-success:active,
-.header-nav.btn-outline-success.active {
-  background-color: var(--color-white);
-  border-color: var(--color-primary);
-  color: var(--color-primary);
-}
-
-/* Active button inset shadow */
-.header-nav.btn-outline-success.active,
-.header-nav.btn-success,
-.header-nav.btn-success.active {
-  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+.navbar .nav-item form button.nav-link.active {
+  margin: 0 4px;
 }
 
 .speaker-info {
@@ -1683,12 +1698,6 @@ h2 .user-name-display img {
 
     ul {
       flex-direction: row;
-
-      .fa.fa-sign-out {
-        padding-left: 12px;
-        padding-right: 12px;
-        margin-top: 0;
-      }
     }
   }
 

app/eventyay/static/pretixbase/scss/_variables.scss

@@ -41,6 +41,8 @@ $navbar-inverse-link-color: white;
 $navbar-inverse-link-hover-color: $gray-lighter;
 $navbar-inverse-brand-hover-color: $gray-lighter;
 $navbar-inverse-color: white;
+$navbar-link-color: #f8f9fa;
+$navbar-link-hover-color: #fff;
 
 $state-success-bg:               white !default;
 $state-success-border:           $brand-success;

app/eventyay/static/pretixcontrol/scss/_sb-admin-2.scss

@@ -50,6 +50,8 @@ body {
 .navbar-top-links li a {
     padding: 15px;
     min-height: 50px;
+    font-size: 14px;
+    font-weight: normal;
 }
 
 .navbar-top-links .dropdown-menu li {

app/eventyay/static/pretixcontrol/scss/_sidebar.scss

@@ -1,13 +1,14 @@
 .navbar-toggle-sidebar {
-  display: block;
+  display: flex;
+  align-items: baseline;
   float: left;
-  font-size: 16px;
+  font-size: 14px;
   margin-left: 10px;
   background-color: transparent !important;
   border: none;
   padding: 0.5rem;
   color: #fff;
-  margin-top: 8px;
+  margin-top: 12px;
   margin-right: 0;
   padding-right: 0;
   z-index: 1;

app/eventyay/static/pretixcontrol/scss/main.scss

@@ -39,16 +39,85 @@ nav.navbar {
     left: 0;
     right: 0;
     z-index: 1100;
+    font-weight: 500;
+    
+    &.navbar-inverse {
+        .navbar-top-links a,
+        .btn-link {
+            color: $navbar-link-color;
+            font-weight: 500;
+    
+            i {
+                color: $navbar-link-color;
+            }
+    
+            &:hover,
+            &:focus {
+                color: $navbar-link-hover-color;
+    
+                i {
+                    color: $navbar-link-hover-color;
+                }
+            }
+        }
+    }    
 }
 
 #wrapper {
     padding-top: var(--navbar-height, 50px);
 }
 
-.navbar-brand img {
-    height: 100%;
-    width: auto;
-    display: inline;
+.navbar-header {
+    margin-left: 0;
+    padding-left: 0;
+}
+
+nav.navbar.navbar-inverse #sidebar-toggle,
+.navbar-inverse #sidebar-toggle {
+    color: $navbar-link-color;
+    
+    i.fa-bars {
+        margin-top: 3px;
+        color: $navbar-link-color;
+    }
+    
+    &:hover,
+    &:focus {
+        color: $navbar-link-hover-color;
+        
+        i.fa-bars {
+            color: $navbar-link-hover-color;
+        }
+    }
+}
+
+nav.navbar.navbar-inverse .navbar-brand,
+.navbar-inverse .navbar-brand {
+    padding-top: 0.3125rem;
+    padding-bottom: 0.3125rem;
+    margin-right: 1rem;
+    margin-top: 0;
+    font-size: 20px;
+    line-height: inherit;
+    white-space: nowrap;
+    font-family: inherit;
+    display: flex;
+    align-items: center;
+    color: $navbar-link-color;
+    
+    img {
+        display: inline-block;
+        vertical-align: middle;
+        height: 30px;
+        width: auto;
+        margin-top: 2px;
+        margin-right: 0.5rem;
+    }
+    
+    &:hover,
+    &:focus {
+        color: $navbar-link-hover-color;
+    }
 }
 
 #side-menu img.fa-img {
@@ -58,6 +127,31 @@ nav.navbar {
 
 nav.navbar .danger, nav.navbar .danger:hover, nav.navbar .danger:active {
     background: $brand-danger !important;
+    font-size: 14px;
+}
+
+nav.navbar.navbar-inverse .header-nav,
+.navbar-inverse .header-nav {
+    font-size: 14px;
+    color: $navbar-link-color;
+    
+    .fa-caret-down {
+        margin-left: 14px;
+        margin-right: 10px;
+    }
+    
+    i {
+        color: $navbar-link-color;
+    }
+    
+    &:hover,
+    &:focus {
+        color: $navbar-link-hover-color;
+        
+        i {
+            color: $navbar-link-hover-color;
+        }
+    }
 }
 
 .navbar-header .navbar-events {
@@ -69,12 +163,29 @@ nav.navbar .danger, nav.navbar .danger:hover, nav.navbar .danger:active {
     margin-bottom: 10px;
 }
 
-#button-shop, #button-sudo {
+nav.navbar.navbar-inverse #button-shop,
+nav.navbar.navbar-inverse #button-sudo,
+.navbar-inverse #button-shop,
+.navbar-inverse #button-sudo {
     padding: 15px;
     min-height: 50px;
     border: none;
-    &:hover, &:active {
+    font-size: 14px;
+    color: $navbar-link-color;
+    
+    i {
+        color: $navbar-link-color;
+    }
+    
+    &:hover,
+    &:focus,
+    &:active {
         text-decoration: none;
+        color: $navbar-link-hover-color;
+        
+        i {
+            color: $navbar-link-hover-color;
+        }
     }
 }
 
@@ -423,11 +534,13 @@ body.loading #wrapper {
         background-image: none;
         border: 1px solid transparent;
         border-radius: 4px;
+        font-weight: normal;
     }
 }
 .mobile-navbar-view-link {
     padding: 6px 10px;
     color: white !important;
+    font-weight: normal;
 }
 
 @media (min-width: $screen-md-min) {
@@ -1001,3 +1114,4 @@ h1 .label {
         box-sizing: border-box;
     }
 }
+