From c60e16f6fe3bc31bc84cb5fc36058201e55b848c Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 13 Sep 2022 20:27:00 +0530
Subject: [PATCH] change(ui) - admin badge

---
 .../Client/PreferencesMenu/PreferencesMenu.js          | 10 +++++-----
 .../Client/PreferencesMenu/preferencesMenu.module.css  |  2 +-
 frontend/app/components/Client/client.module.css       |  2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/app/components/Client/PreferencesMenu/PreferencesMenu.js b/frontend/app/components/Client/PreferencesMenu/PreferencesMenu.js
index 9acc45ff9..498631ad1 100644
--- a/frontend/app/components/Client/PreferencesMenu/PreferencesMenu.js
+++ b/frontend/app/components/Client/PreferencesMenu/PreferencesMenu.js
@@ -74,8 +74,8 @@ function PreferencesMenu({ account, activeTab, history, isEnterprise }) {
             title="Roles & Access"
             iconName="diagram-3"
             onClick={() => setTab(CLIENT_TABS.MANAGE_ROLES)}
+            leading={<AdminOnlyBadge />}
           />
-          <AdminOnlyBadge />
         </div>
       )}
 
@@ -86,8 +86,8 @@ function PreferencesMenu({ account, activeTab, history, isEnterprise }) {
             title="Audit"
             iconName="list-ul"
             onClick={() => setTab(CLIENT_TABS.AUDIT)}
+            leading={<AdminOnlyBadge />}
           />
-          <AdminOnlyBadge />
         </div>
       )}
 
@@ -98,8 +98,8 @@ function PreferencesMenu({ account, activeTab, history, isEnterprise }) {
             title="Team"
             iconName="users"
             onClick={() => setTab(CLIENT_TABS.MANAGE_USERS)}
+            leading={<AdminOnlyBadge />}
           />
-          <AdminOnlyBadge />
         </div>
       )}
 
@@ -123,8 +123,8 @@ export default connect((state) => ({
 function AdminOnlyBadge() {
   return (
     <div
-      className="absolute right-0 top-0 bottom-0 m-auto rounded-full bg-gray-light text-xs flex items-center px-2 color-gray-medium"
-      style={{ marginTop: '8px', height: '24px' }}
+      className="ml-1 rounded-full bg-gray-light text-xs flex items-center px-2 color-gray-medium"
+      style={{ marginTop: '', height: '20px', whiteSpace: 'nowrap' }}
     >
       Admin Only
     </div>
diff --git a/frontend/app/components/Client/PreferencesMenu/preferencesMenu.module.css b/frontend/app/components/Client/PreferencesMenu/preferencesMenu.module.css
index 818008fb8..c129c5cb8 100644
--- a/frontend/app/components/Client/PreferencesMenu/preferencesMenu.module.css
+++ b/frontend/app/components/Client/PreferencesMenu/preferencesMenu.module.css
@@ -1,7 +1,7 @@
 .wrapper {
   position: fixed;
   top: 81px;
-  width: 200px;
+  width: 210px;
 }
 
 .header {
diff --git a/frontend/app/components/Client/client.module.css b/frontend/app/components/Client/client.module.css
index 43d311b31..815b7e8d6 100644
--- a/frontend/app/components/Client/client.module.css
+++ b/frontend/app/components/Client/client.module.css
@@ -10,7 +10,7 @@
   /* min-height: calc(100vh - 81px); */
 
   & .tabMenu {
-    width: 240px;
+    width: 250px;
     margin: 0;
     background-color: $gray-lightest;    
   }