From 9f1791daab9b7a50c0a12ef8498f9eef8ce4d635 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Sat, 7 Oct 2023 18:08:14 +0530
Subject: [PATCH] fix(nc-gui): Fixed styling issues with token and user list

---
 packages/nc-gui/components/account/Token.vue  | 189 ++++++++++--------
 .../nc-gui/components/account/UserList.vue    |  32 +--
 2 files changed, 119 insertions(+), 102 deletions(-)

diff --git a/packages/nc-gui/components/account/Token.vue b/packages/nc-gui/components/account/Token.vue
index 9be51ad5e0..f9378b5052 100644
--- a/packages/nc-gui/components/account/Token.vue
+++ b/packages/nc-gui/components/account/Token.vue
@@ -162,8 +162,8 @@ const handleCancel = () => {
 <template>
   <div class="h-full pt-2">
     <div class="max-w-202 mx-auto px-4 h-full" data-testid="nc-token-list">
-      <div class="py-2 flex gap-4 items-center justify-between">
-        <h6 class="text-2xl my-4 text-left font-bold">{{ $t('title.apiTokens') }}</h6>
+      <div class="py-2 flex gap-4 items-baseline justify-between">
+        <h6 class="text-2xl text-left font-bold">{{ $t('title.apiTokens') }}</h6>
         <NcTooltip :disabled="!(isEeUI && tokens.length)">
           <template #title>{{ $t('labels.tokenLimit') }}</template>
           <NcButton
@@ -185,98 +185,113 @@ const handleCancel = () => {
         </NcTooltip>
       </div>
       <span>{{ $t('msg.apiTokenCreate') }}</span>
-      <div class="w-full mt-5 !overflow-hidden rounded-md h-[calc(100%-17.5rem)]">
-        <div class="flex w-full pl-5 bg-gray-50 border-1 border-b-0">
-          <span class="py-3.5 text-gray-500 font-medium text-3.5 w-2/9">{{ $t('title.tokenName') }}</span>
-          <span class="py-3.5 text-gray-500 font-medium text-3.5 w-2/9 text-start">{{ $t('title.creator') }}</span>
-          <span class="py-3.5 text-gray-500 font-medium text-3.5 w-3/9 text-start">{{ $t('labels.token') }}</span>
-          <span class="py-3.5 pl-19 text-gray-500 font-medium text-3.5 w-2/9 text-start">{{ $t('labels.actions') }}</span>
-        </div>
-        <div class="nc-scrollbar-md !overflow-y-auto h-[calc(100%-3rem)] border-b-1">
-          <div v-if="showNewTokenModal">
+      <div class="mt-5 h-[calc(100%-13rem)]">
+        <div class="h-full w-full !overflow-hidden rounded-md">
+          <div class="flex w-full pl-5 bg-gray-50 border-1 rounded-t-md">
+            <span class="py-3.5 text-gray-500 font-medium text-3.5 w-2/9">{{ $t('title.tokenName') }}</span>
+            <span class="py-3.5 text-gray-500 font-medium text-3.5 w-2/9 text-start">{{ $t('title.creator') }}</span>
+            <span class="py-3.5 text-gray-500 font-medium text-3.5 w-3/9 text-start">{{ $t('labels.token') }}</span>
+            <span class="py-3.5 pl-19 text-gray-500 font-medium text-3.5 w-2/9 text-start">{{ $t('labels.actions') }}</span>
+          </div>
+          <div class="nc-scrollbar-md !overflow-y-auto flex flex-col h-[calc(100%-5rem)]">
+            <div v-if="showNewTokenModal">
+              <div
+                class="flex gap-5 px-3 py-2.5 text-gray-500 font-medium text-3.5 w-full nc-token-generate border-b-1 border-l-1 border-r-1"
+                :class="{
+                  'rounded-b-md': !tokens.length,
+                }"
+              >
+                <div class="flex w-full">
+                  <a-input
+                    :ref="selectInputOnMount"
+                    v-model:value="selectedTokenData.description"
+                    :default-value="defaultTokenName"
+                    type="text"
+                    class="!rounded-lg !py-1"
+                    placeholder="Token Name"
+                    data-testid="nc-token-input"
+                    @press-enter="generateToken"
+                  />
+                  <span v-if="!isValidTokenName" class="text-red-500 text-xs font-light mt-1.5 ml-1">{{ errorMessage }} </span>
+                </div>
+                <div class="flex gap-2 justify-start">
+                  <NcButton v-if="!isLoading" type="secondary" size="small" @click="handleCancel">
+                    {{ $t('general.cancel') }}
+                  </NcButton>
+                  <NcButton
+                    type="primary"
+                    size="sm"
+                    :is-loading="isLoading"
+                    data-testid="nc-token-save-btn"
+                    @click="generateToken"
+                  >
+                    {{ $t('general.save') }}
+                  </NcButton>
+                </div>
+              </div>
+            </div>
             <div
-              class="flex gap-5 px-3 py-3.5 text-gray-500 font-medium text-3.5 w-full nc-token-generate border-1"
-              :class="{
-                'border-b-1': !tokens.length,
-                'border-b-0': tokens.length,
-              }"
+              v-if="!tokens.length && !showNewTokenModal"
+              class="border-l-1 border-r-1 border-b-1 rounded-b-md justify-center flex items-center"
             >
-              <div class="flex flex-col w-full">
-                <a-input
-                  :ref="selectInputOnMount"
-                  v-model:value="selectedTokenData.description"
-                  :default-value="defaultTokenName"
-                  type="text"
-                  class="!rounded-lg !py-1"
-                  placeholder="Token Name"
-                  data-testid="nc-token-input"
-                  @press-enter="generateToken"
-                />
-                <span v-if="!isValidTokenName" class="text-red-500 text-xs font-light mt-1.5 ml-1">{{ errorMessage }} </span>
-              </div>
-              <div class="flex gap-2 justify-start">
-                <NcButton v-if="!isLoading" type="secondary" size="small" @click="handleCancel">
-                  {{ $t('general.cancel') }}
-                </NcButton>
-                <NcButton type="primary" size="sm" :is-loading="isLoading" data-testid="nc-token-save-btn" @click="generateToken">
-                  {{ $t('general.save') }}
-                </NcButton>
-              </div>
+              <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noToken')" />
             </div>
-          </div>
-          <div v-if="!tokens.length && !showNewTokenModal" class="justify-center flex items-center border-1">
-            <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noToken')" />
-          </div>
 
-          <div
-            v-for="el of tokens"
-            :key="el.id"
-            data-testid="nc-token-list"
-            class="flex border-1 pl-5 py-3 justify-between token"
-          >
-            <span class="text-black font-bold text-3.5 text-start w-2/9">
-              <GeneralTruncateText placement="top" length="20">
-                {{ el.description }}
-              </GeneralTruncateText>
-            </span>
-            <span class="text-gray-500 font-medium text-3.5 text-start w-2/9">
-              <GeneralTruncateText placement="top" length="20">
-                {{ el.created_by }}
-              </GeneralTruncateText>
-            </span>
-            <span class="text-gray-500 font-medium text-3.5 text-start w-3/9">
-              <GeneralTruncateText v-if="el.token === selectedToken.id && selectedToken.isShow" placement="top" length="29">
-                {{ el.token }}
-              </GeneralTruncateText>
-              <span v-else>************************************</span>
-            </span>
-            <!-- ACTIONS -->
-            <div class="flex justify-end items-center gap-3 pr-5 text-gray-500 font-medium text-3.5 w-2/9">
-              <NcTooltip placement="top">
-                <template #title>{{ $t('labels.showOrHide') }}</template>
-                <component
-                  :is="iconMap.eye"
-                  class="nc-toggle-token-visibility hover::cursor-pointer w-h-4 mb-[1.8px]"
-                  @click="hideOrShowToken(el.token as string)"
-                />
-              </NcTooltip>
-              <NcTooltip placement="top" class="h-4">
-                <template #title>{{ $t('general.copy') }}</template>
-                <component :is="iconMap.copy" class="hover::cursor-pointer w-4 h-4" @click="copyToken(el.token)" />
-              </NcTooltip>
-              <NcTooltip placement="top" class="mb-0.5">
-                <template #title>{{ $t('general.delete') }}</template>
-                <component
-                  :is="iconMap.delete"
-                  data-testid="nc-token-row-action-icon"
-                  class="nc-delete-icon hover::cursor-pointer w-4 h-4"
-                  @click="triggerDeleteModal(el.token as string, el.description as string)"
-                />
-              </NcTooltip>
+            <div
+              v-for="el of tokens"
+              :key="el.id"
+              data-testid="nc-token-list"
+              class="flex pl-5 py-3 justify-between token items-center border-l-1 border-r-1 border-b-1"
+            >
+              <span class="text-black font-bold text-3.5 text-start w-2/9">
+                <GeneralTruncateText placement="top" length="20">
+                  {{ el.description }}
+                </GeneralTruncateText>
+              </span>
+              <span class="text-gray-500 font-medium text-3.5 text-start w-2/9">
+                <GeneralTruncateText placement="top" length="20">
+                  {{ el.created_by }}
+                </GeneralTruncateText>
+              </span>
+              <span class="text-gray-500 font-medium text-3.5 text-start w-3/9">
+                <GeneralTruncateText v-if="el.token === selectedToken.id && selectedToken.isShow" placement="top" length="29">
+                  {{ el.token }}
+                </GeneralTruncateText>
+                <span v-else>************************************</span>
+              </span>
+              <!-- ACTIONS -->
+              <div class="flex justify-end items-center gap-3 pr-5 text-gray-500 font-medium text-3.5 w-2/9">
+                <NcTooltip placement="top">
+                  <template #title>{{ $t('labels.showOrHide') }}</template>
+                  <component
+                    :is="iconMap.eye"
+                    class="nc-toggle-token-visibility hover::cursor-pointer w-h-4 mb-[1.8px]"
+                    @click="hideOrShowToken(el.token as string)"
+                  />
+                </NcTooltip>
+                <NcTooltip placement="top" class="h-4">
+                  <template #title>{{ $t('general.copy') }}</template>
+                  <component
+                    :is="iconMap.copy"
+                    class="hover::cursor-pointer w-4 h-4 text-gray-600 mt-0.25"
+                    @click="copyToken(el.token)"
+                  />
+                </NcTooltip>
+                <NcTooltip placement="top" class="mb-0.5">
+                  <template #title>{{ $t('general.delete') }}</template>
+                  <component
+                    :is="iconMap.delete"
+                    data-testid="nc-token-row-action-icon"
+                    class="nc-delete-icon hover::cursor-pointer w-4 h-4"
+                    @click="triggerDeleteModal(el.token as string, el.description as string)"
+                  />
+                </NcTooltip>
+              </div>
             </div>
           </div>
         </div>
       </div>
+
       <div v-if="pagination.total > 10" class="flex items-center justify-center mt-5">
         <a-pagination
           v-model:current="currentPage"
@@ -311,6 +326,6 @@ const handleCancel = () => {
 
 <style>
 .token:last-child {
-  @apply rounded-b-md;
+  @apply border-b-1 rounded-b-md;
 }
 </style>
diff --git a/packages/nc-gui/components/account/UserList.vue b/packages/nc-gui/components/account/UserList.vue
index b9082d5b8e..e7323f8fc8 100644
--- a/packages/nc-gui/components/account/UserList.vue
+++ b/packages/nc-gui/components/account/UserList.vue
@@ -155,7 +155,7 @@ const openDeleteModal = (user: UserType) => {
 <template>
   <div data-testid="nc-super-user-list" class="h-full">
     <div class="max-w-195 mx-auto h-full">
-      <div class="text-2xl text-left font-weight-bold">{{ $t('title.userManagement') }}</div>
+      <div class="text-2xl text-left font-weight-bold mb-4">{{ $t('title.userManagement') }}</div>
       <div class="py-2 flex gap-4 items-center justify-between">
         <a-input v-model:value="searchText" class="!max-w-90 !rounded-md" placeholder="Search members" @change="loadUsers()">
           <template #prefix>
@@ -172,11 +172,13 @@ const openDeleteModal = (user: UserType) => {
           </NcButton>
         </div>
       </div>
-      <div class="w-full rounded-md max-w-250 h-[calc(100%-12rem)] rounded-md overflow-hidden mt-5 border-1">
-        <div class="flex w-full bg-gray-50 border-b-1">
-          <span class="py-3.5 text-gray-500 font-medium text-3.5 w-1/3 text-start pl-10">{{ $t('labels.email') }}</span>
-          <span class="py-3.5 text-gray-500 font-medium text-3.5 w-1/3 text-start pl-20">{{ $t('objects.role') }}</span>
-          <span class="py-3.5 text-gray-500 font-medium text-3.5 w-1/3 text-end pl-42">{{ $t('labels.action') }}</span>
+      <div class="w-full rounded-md max-w-250 h-[calc(100%-12rem)] rounded-md overflow-hidden mt-5">
+        <div class="flex w-full bg-gray-50 border-1 rounded-t-md">
+          <div class="py-3.5 text-gray-500 font-medium text-3.5 w-2/3 text-start pl-6">{{ $t('labels.email') }}</div>
+          <div class="py-3.5 text-gray-500 font-medium text-3.5 w-1/3 text-start">{{ $t('objects.role') }}</div>
+          <div class="flex py-3.5 text-gray-500 font-medium text-3.5 w-28 justify-end mr-4">
+            {{ $t('labels.action') }}
+          </div>
         </div>
         <div v-if="isLoading" class="flex items-center justify-center text-center h-[513px]">
           <GeneralLoader size="xlarge" />
@@ -185,22 +187,22 @@ const openDeleteModal = (user: UserType) => {
         <div v-else-if="!users.length" class="flex items-center justify-center text-center h-full">
           <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
         </div>
-        <section v-else class="tbody h-[calc(100%-3rem)] nc-scrollbar-md border-t-0 !overflow-auto">
+        <section v-else class="tbody h-[calc(100%-4rem)] nc-scrollbar-md border-t-0 !overflow-auto">
           <div
             v-for="el of users"
             :key="el.id"
             data-testid="nc-token-list"
-            class="flex py-3 justify-around px-5 border-b-1"
+            class="user flex py-3 justify-around px-1 border-b-1 border-l-1 border-r-1"
             :class="{
               'py-4': el.roles?.includes('super'),
             }"
           >
-            <span class="text-3.5 text-start w-1/3 pl-5 flex items-center">
+            <div class="text-3.5 text-start w-2/3 pl-5 flex items-center">
               <GeneralTruncateText length="29">
                 {{ el.email }}
               </GeneralTruncateText>
-            </span>
-            <span class="text-3.5 text-start w-1/3 pl-18">
+            </div>
+            <div class="text-3.5 text-start w-1/3">
               <div v-if="el?.roles?.includes('super')" class="font-weight-bold">{{ $t('labels.superAdmin') }}</div>
               <NcSelect
                 v-else
@@ -231,8 +233,8 @@ const openDeleteModal = (user: UserType) => {
                   </span>
                 </a-select-option>
               </NcSelect>
-            </span>
-            <span class="w-1/3 pl-43 flex items-center">
+            </div>
+            <span class="w-26 flex items-center justify-end mr-4">
               <div
                 class="flex items-center gap-2"
                 :class="{
@@ -306,7 +308,7 @@ const openDeleteModal = (user: UserType) => {
 </template>
 
 <style scoped>
-.tbody div:nth-child(10) {
-  border-bottom: none;
+.user:last-child {
+  @apply rounded-b-md;
 }
 </style>