From 37f00d2fdc47f696584a2070008f32a2a76e828a Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 6 Sep 2023 15:36:05 +0300
Subject: [PATCH] fix: small issue with header

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../smartsheet/expanded-form/Header.vue       | 26 ++++++++++++++-----
 .../pages/Dashboard/ExpandedForm/index.ts     |  2 +-
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
index 83046ec0c5..991daa19e2 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
@@ -127,12 +127,18 @@ const onConfirmDeleteRowClick = async () => {
       />
     </a-tooltip>
 
-    <a-button class="nc-expand-form-save-btn !rounded-md" type="primary" :disabled="!isUIAllowed('tableRowUpdate')" @click="save">
+    <NcButton
+      class="nc-expand-form-save-btn !w-[60px]"
+      type="primary"
+      size="small"
+      :disabled="!isUIAllowed('tableRowUpdate')"
+      @click="save"
+    >
       {{ $t('general.save') }}
-    </a-button>
+    </NcButton>
 
     <a-dropdown>
-      <component :is="iconMap.threeDotVertical" class="nc-icon-transition nc-expand-form-more-actions" />
+      <component :is="iconMap.threeDotVertical" class="nc-icon-transition nc-expand-form-more-actions hover:cursor-pointer" />
       <template #overlay>
         <a-menu>
           <a-menu-item v-if="!isNew" @click="loadRow()">
@@ -174,9 +180,17 @@ const onConfirmDeleteRowClick = async () => {
         </a-menu>
       </template>
     </a-dropdown>
-    <a-modal v-model:visible="showDeleteRowModal" title="Delete row?" @ok="onConfirmDeleteRowClick">
-      <p>Are you sure you want to delete this row?</p>
-    </a-modal>
+    <GeneralModal v-model:visible="showDeleteRowModal" class="!w-[25rem]">
+      <div class="p-4">
+        <div class="prose-xl font-bold self-center">Delete row ?</div>
+
+        <div class="mt-4">Are you sure you want to delete this row?</div>
+      </div>
+      <div class="flex flex-row gap-x-2 mt-1 pt-1.5 justify-end p-4">
+        <NcButton type="secondary" @click="showDeleteRowModal = false">{{ $t('general.cancel') }}</NcButton>
+        <NcButton @click="onConfirmDeleteRowClick">{{ $t('general.confirm') }} </NcButton>
+      </div>
+    </GeneralModal>
   </div>
 </template>
 
diff --git a/tests/playwright/pages/Dashboard/ExpandedForm/index.ts b/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
index 50d93d846b..2d159e6bb8 100644
--- a/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
+++ b/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
@@ -51,7 +51,7 @@ export class ExpandedFormPage extends BasePage {
 
   async clickDeleteRow() {
     await this.click3DotsMenu('Delete Row');
-    await this.rootPage.locator('.ant-btn-primary:has-text("OK")').click();
+    await this.rootPage.locator('.ant-btn-primary:has-text("Confirm")').click();
   }
 
   async isDisabledDuplicateRow() {