FB

src/client/styles/scss/_navbar.scss

@@ -7,6 +7,11 @@
     padding: 0 1rem;
   }
 
+  .personal-dropdown > .dropdown-toggle::after {
+    // hide caret
+    content: none;
+  }
+
   .nav-link {
     &:hover {
       background: rgba(0, 0, 0, 0.1);

src/client/styles/scss/_override-bootstrap.scss

@@ -46,18 +46,6 @@ h5 {
   }
 }
 
-.navbar {
-  .nav-item > .nav-link {
-    color: white;
-    span {
-      margin-left: 0.5em;
-    }
-  }
-  .nav-item .dropdown-toggle::after {
-    content: none;
-  }
-}
-
 // card (substitute panel of bootstrap3)
 .card {
   margin-bottom: 20px;

src/client/styles/scss/theme/_apply-colors.scss

@@ -3,27 +3,23 @@
 //
 @import '~bootstrap/scss/bootstrap-reboot';
 
-@each $color,
-  $value in $theme-colors {
+@each $color, $value in $theme-colors {
   @include bg-variant('.bg-#{$color}', $value);
 }
 
-@each $color,
-  $value in $theme-colors {
+@each $color, $value in $theme-colors {
   .btn-#{$color} {
     @include button-variant($value, $value);
   }
 }
 
-@each $color,
-  $value in $theme-colors {
+@each $color, $value in $theme-colors {
   .btn-outline-#{$color} {
     @include button-outline-variant($value);
   }
 }
 
-@each $theme-color,
-  $color in $theme-colors {
+@each $theme-color, $color in $theme-colors {
   .alert.alert-#{$theme-color} {
     color: white;
     background: $color;
@@ -56,7 +52,6 @@
 
 // Dropdown
 .dropdown-item {
-
   &.active,
   &:active {
     @include gradient-bg($dropdown-link-active-bg);
@@ -89,7 +84,6 @@ body {
 }
 
 .logo {
-
   // set transition for fill
   svg * {
     transition: fill 0.8s ease-out;
@@ -116,6 +110,9 @@ body {
 
 .grw-navbar {
   background: $bgcolor-navbar;
+  .nav-item > .nav-link {
+    color: white;
+  }
 }
 
 .grw-title-bar {

src/server/views/layout/layout.html

@@ -148,10 +148,10 @@
       </li>
       <li class="nav-item">
         <a class="nav-link" href="https://docs.growi.org/" target="_blank">
-          <i class="icon-question"></i><span class="d-none d-md-inline-block">{{ t('Help') }}</span><span class="text-muted small"><i class="icon-share-alt"></i></span>
+          <i class="icon-question mr-2"></i><span class="d-none d-md-inline-block mr-2">{{ t('Help') }}</span><span class="text-muted small"><i class="icon-share-alt"></i></span>
         </a>
       </li>
-      <li class="nav-item dropdown">
+      <li class="nav-item dropdown personal-dropdown">
         <a class="btn nav-link dropdown-toggle waves-effect waves-light" data-toggle="dropdown">
           <img src="{{ user|picture }}" class="picture rounded-circle" width="25" />
           <span class="user-name text-wrap ml-2">{{ user.name }}</span>