fix: update modal styles

packages/nc-gui/components/dlg/ExpandTable.vue

@@ -35,20 +35,19 @@ const close = () => {
     v-model:visible="dialogShow"
     :show-separator="false"
     :header="$t('activity.createTable')"
-    size="medium"
+    size="small"
     @keydown.esc="dialogShow = false"
   >
-    <template #header>
-      <div class="flex justify-between w-full items-center">
-        <div class="flex flex-row items-center gap-x-2 text-base font-semibold text-gray-800">
-          Do you want to expand this table?
-        </div>
+    <div class="flex justify-between w-full text-base font-semibold mb-2 text-nc-content-gray-emphasis items-center">
+      Do you want to expand this table?
+    </div>
+    <div data-testid="nc-expand-table-modal" class="flex flex-col">
+      <div v-if="(rows ?? 0) > 0" class="mb-4 nc-content-gray">
+        To accommodate your pasted data, we need to insert {{ rows }} additional records
       </div>
-    </template>
-    <div data-testid="nc-expand-table-modal" class="flex flex-col mt-1">
-      <div v-if="(rows ?? 0) > 0" class="mb-4">
-        To fit your pasted data into the table, we need to add
-        <span class="font-semibold text-gray-800"> {{ rows }} more records. </span>
+
+      <div v-if="(affectedRows ?? 0) < 0" class="mb-2 nc-content-gray">
+        The data you pasted will update {{ affectedRows }} records in subsequent pages.
       </div>
 
       <a-radio-group v-if="(rows ?? 0) > 0" v-model:value="expand">
@@ -61,38 +60,36 @@ const close = () => {
           }"
           :value="true"
         >
-          <div class="text-gray-700">
-            <span class="text-gray-800 font-semibold"> Expand the table </span>
-
-            so that all of the pasted cells will fit.
+          <div class="nc-content-gray">
+            <span class="font-semibold"> Expand </span>
+            table to accommodate all pasted cells
           </div>
         </a-radio>
         <a-radio
           data-testid="nc-table-expand-no"
           :style="{
             display: 'flex',
-            height: '30px',
             lineHeight: '30px',
           }"
           :value="false"
         >
-          <span class="text-gray-800 font-semibold"> Don’t expand the table. </span>
-
-          Values outside of the table will not be pasted.
+          <div class="nc-content-gray leading-5">
+            <span class="font-semibold"> Don't expand </span>
+            the table. Values beyond the table's current size will be skipped.
+          </div>
         </a-radio>
       </a-radio-group>
-
-      <div class="flex flex-row justify-end gap-x-2">
-        <div class="flex gap-2 items-center">
-          <NcButton data-testid="nc-table-expand-cancel" type="secondary" size="small" @click="close">
-            {{ $t('labels.cancel') }}
-          </NcButton>
-        </div>
-        <div class="flex gap-2 items-center">
-          <NcButton data-testid="nc-table-expand" type="primary" size="small" @click="updateExpand">
-            {{ $t('labels.continue') }}
-          </NcButton>
-        </div>
+    </div>
+    <div class="flex flex-row mt-5 justify-end gap-x-2">
+      <div class="flex gap-2 items-center">
+        <NcButton data-testid="nc-table-expand-cancel" type="secondary" size="small" @click="close">
+          {{ $t('labels.cancel') }}
+        </NcButton>
+      </div>
+      <div class="flex gap-2 items-center">
+        <NcButton data-testid="nc-table-expand" type="primary" size="small" @click="updateExpand">
+          {{ $t('labels.continue') }}
+        </NcButton>
       </div>
     </div>
   </NcModal>