From c893bdd56dab377f02e5a7825a71a8373d9c412e Mon Sep 17 00:00:00 2001
From: Dessalines <tyhou13@gmx.com>
Date: Tue, 4 Aug 2020 12:10:29 -0400
Subject: [PATCH] Some navbar fixes.

---
 ui/src/components/navbar.tsx | 40 ++++++++++++++++++------------------
 ui/src/components/user.tsx   |  7 ++-----
 2 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx
index c954913e0..5584b3b64 100644
--- a/ui/src/components/navbar.tsx
+++ b/ui/src/components/navbar.tsx
@@ -184,7 +184,7 @@ export class Navbar extends Component<any, NavbarState> {
           {!this.state.siteLoading ? (
             <Link
               title={this.state.siteRes.version}
-              class="navbar-brand"
+              class="d-flex align-items-center navbar-brand mr-1"
               to="/"
             >
               {this.state.siteRes.site.icon && showAvatars() && (
@@ -214,14 +214,14 @@ export class Navbar extends Component<any, NavbarState> {
                 <use xlinkHref="#icon-bell"></use>
               </svg>
               {this.state.unreadCount > 0 && (
-                <span class="ml-1 badge badge-light">
+                <span class="mx-1 badge badge-light">
                   {this.state.unreadCount}
                 </span>
               )}
             </Link>
           )}
           <button
-            class="navbar-toggler border-0"
+            class="navbar-toggler border-0 p-1"
             type="button"
             aria-label="menu"
             onClick={linkEvent(this, this.expandNavbar)}
@@ -235,7 +235,7 @@ export class Navbar extends Component<any, NavbarState> {
                 !this.state.expanded && 'collapse'
               } navbar-collapse`}
             >
-              <ul class="navbar-nav my-2 mr-auto">
+              <ul class="ml-3 navbar-nav my-2 mr-auto">
                 <li class="nav-item">
                   <Link
                     class="nav-link"
@@ -278,6 +278,21 @@ export class Navbar extends Component<any, NavbarState> {
                   </Link>
                 </li>
               </ul>
+              <ul class="navbar-nav my-2">
+                {this.canAdmin && (
+                  <li className="nav-item">
+                    <Link
+                      class="nav-link"
+                      to={`/admin`}
+                      title={i18n.t('admin_settings')}
+                    >
+                      <svg class="icon">
+                        <use xlinkHref="#icon-settings"></use>
+                      </svg>
+                    </Link>
+                  </li>
+                )}
+              </ul>
               {!this.context.router.history.location.pathname.match(
                 /^\/search/
               ) && (
@@ -299,7 +314,7 @@ export class Navbar extends Component<any, NavbarState> {
                   <button
                     name="search-btn"
                     onClick={linkEvent(this, this.handleSearchBtn)}
-                    class="btn btn-link"
+                    class="px-1 btn btn-link"
                     style="color: var(--gray)"
                   >
                     <svg class="icon">
@@ -308,21 +323,6 @@ export class Navbar extends Component<any, NavbarState> {
                   </button>
                 </form>
               )}
-              <ul class="navbar-nav my-2">
-                {this.canAdmin && (
-                  <li className="nav-item">
-                    <Link
-                      class="nav-link"
-                      to={`/admin`}
-                      title={i18n.t('admin_settings')}
-                    >
-                      <svg class="icon">
-                        <use xlinkHref="#icon-settings"></use>
-                      </svg>
-                    </Link>
-                  </li>
-                )}
-              </ul>
               {this.state.isLoggedIn ? (
                 <>
                   <ul class="navbar-nav my-2">
diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx
index 24fec1bef..9f2521af1 100644
--- a/ui/src/components/user.tsx
+++ b/ui/src/components/user.tsx
@@ -455,13 +455,10 @@ export class User extends Component<any, UserState> {
             )}
             <div>
               <ul class="list-inline mb-2">
-                <li className="list-inline-item">
+                <li className="list-inline-item badge badge-light">
                   {i18n.t('number_of_posts', { count: user.number_of_posts })}
                 </li>
-                <li className="list-inline-item">
-                  <span>•</span>
-                </li>
-                <li className="list-inline-item">
+                <li className="list-inline-item badge badge-light">
                   {i18n.t('number_of_comments', {
                     count: user.number_of_comments,
                   })}