From 22b851f4982d469544935fe729c1f29684c18eb5 Mon Sep 17 00:00:00 2001
From: Thomas Rittson <trittson@bitwarden.com>
Date: Wed, 13 Apr 2022 11:59:06 +1000
Subject: [PATCH] Fix styling, replace CSS with TW

---
 src/app/layouts/navbar.component.html | 76 +++++++++++++++------------
 src/scss/navigation.scss              | 24 ---------
 2 files changed, 42 insertions(+), 58 deletions(-)

diff --git a/src/app/layouts/navbar.component.html b/src/app/layouts/navbar.component.html
index 128f18b0..fd9c2a69 100644
--- a/src/app/layouts/navbar.component.html
+++ b/src/app/layouts/navbar.component.html
@@ -42,42 +42,50 @@
         >
           <i class="bwi bwi-user-circle bwi-lg" aria-hidden="true"></i>
         </button>
-        <bit-menu #accountMenu>
-          <div class="dropdown-item-text d-flex align-items-center" *ngIf="name" appStopProp>
-            <app-avatar
-              [data]="name"
-              [email]="email"
-              size="25"
-              fontSize="14"
-              [circle]="true"
-            ></app-avatar>
-            <div class="ml-2 overflow-hidden">
-              <span>{{ "loggedInAs" | i18n }}</span>
-              <small class="tw-text-muted">{{ name }}</small>
+        <bit-menu class="dropdown-menu" #accountMenu>
+          <div class="tw-max-w-[300px] tw-min-w-[200px]">
+            <div
+              class="tw-flex tw-items-center tw-leading-tight tw-text-info tw-py-1 tw-px-4"
+              *ngIf="name"
+              appStopProp
+            >
+              <app-avatar
+                [data]="name"
+                [email]="email"
+                size="25"
+                fontSize="14"
+                [circle]="true"
+              ></app-avatar>
+              <div class="ml-2 overflow-hidden tw-block tw-overflow-hidden tw-whitespace-nowrap">
+                <span>{{ "loggedInAs" | i18n }}</span>
+                <small class="tw-text-muted tw-block tw-overflow-hidden tw-whitespace-nowrap">{{
+                  name
+                }}</small>
+              </div>
             </div>
+            <bit-menu-divider></bit-menu-divider>
+            <a bit-menu-item routerLink="/settings/account">
+              <i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
+              {{ "myAccount" | i18n }}
+            </a>
+            <a bit-menu-item href="https://bitwarden.com/help/" target="_blank" rel="noopener">
+              <i class="bwi bwi-fw bwi-question-circle" aria-hidden="true"></i>
+              {{ "getHelp" | i18n }}
+            </a>
+            <a bit-menu-item href="https://bitwarden.com/download/" target="_blank" rel="noopener">
+              <i class="bwi bwi-fw bwi-download" aria-hidden="true"></i>
+              {{ "getApps" | i18n }}
+            </a>
+            <bit-menu-divider></bit-menu-divider>
+            <button bit-menu-item type="button" (click)="lock()">
+              <i class="bwi bwi-fw bwi-lock" aria-hidden="true"></i>
+              {{ "lockNow" | i18n }}
+            </button>
+            <button bit-menu-item type="button" (click)="logOut()">
+              <i class="bwi bwi-fw bwi-sign-out" aria-hidden="true"></i>
+              {{ "logOut" | i18n }}
+            </button>
           </div>
-          <bit-menu-divider></bit-menu-divider>
-          <a bit-menu-item routerLink="/settings/account">
-            <i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
-            {{ "myAccount" | i18n }}
-          </a>
-          <a bit-menu-item href="https://bitwarden.com/help/" target="_blank" rel="noopener">
-            <i class="bwi bwi-fw bwi-question-circle" aria-hidden="true"></i>
-            {{ "getHelp" | i18n }}
-          </a>
-          <a bit-menu-item href="https://bitwarden.com/download/" target="_blank" rel="noopener">
-            <i class="bwi bwi-fw bwi-download" aria-hidden="true"></i>
-            {{ "getApps" | i18n }}
-          </a>
-          <bit-menu-divider></bit-menu-divider>
-          <button bit-menu-item type="button" (click)="lock()">
-            <i class="bwi bwi-fw bwi-lock" aria-hidden="true"></i>
-            {{ "lockNow" | i18n }}
-          </button>
-          <button bit-menu-item type="button" (click)="logOut()">
-            <i class="bwi bwi-fw bwi-sign-out" aria-hidden="true"></i>
-            {{ "logOut" | i18n }}
-          </button>
         </bit-menu>
       </li>
     </ul>
diff --git a/src/scss/navigation.scss b/src/scss/navigation.scss
index 1449a38a..8c76ebba 100644
--- a/src/scss/navigation.scss
+++ b/src/scss/navigation.scss
@@ -11,30 +11,6 @@
     }
   }
 
-  .dropdown-menu {
-    max-width: 300px;
-    min-width: 200px;
-
-    .dropdown-item-text {
-      line-height: 1.3;
-      @include themify($themes) {
-        color: themed("dropdownTextColor");
-      }
-
-      span,
-      small {
-        display: block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        &.text-muted {
-          @include themify($themes) {
-            color: themed("dropdownTextMuted") !important;
-          }
-        }
-      }
-    }
-  }
   .nav-item {
     > .nav-link {
       @include themify($themes) {