fix dark mode in roles modal and send modal

add BaseModalFooter
add dark mode in base modal
2025-12-15 01:42:54 -05:00 · 2023-03-28 12:43:41 +05:30 · 2023-03-27 11:19:07 +05:30 · 2023-03-23 11:10:46 +05:30
39 changed files with 141 additions and 239 deletions
--- a/resources/scripts/admin/components/currency-exchange-rate/ExchangeRateBulkUpdate.vue
+++ b/resources/scripts/admin/components/currency-exchange-rate/ExchangeRateBulkUpdate.vue
@@ -50,21 +50,11 @@
          </BaseInputGroup>
        </template>
      </ValidateEach>
-      <div
-        slot="footer"
-        class="
-          z-0
-          flex
-          justify-end
-          mt-4
-          pt-4
-          border-t border-gray-200 border-solid border-modal-bg
-        "
-      >
+      <BaseModalFooter>
        <BaseButton :loading="isSaving" variant="primary" type="submit">
          {{ $t('general.save') }}
        </BaseButton>
-      </div>
+      </BaseModalFooter>
    </form>
  </BaseCard>
 </template>
--- a/resources/scripts/admin/components/modal-components/BackupModal.vue
+++ b/resources/scripts/admin/components/modal-components/BackupModal.vue
@@ -57,9 +57,7 @@
          </BaseInputGroup>
        </BaseInputGrid>
      </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
        <BaseButton
          class="mr-3"
          variant="primary-outline"
@@ -84,7 +82,7 @@
          </template>
          {{ $t('general.create') }}
        </BaseButton>
-      </div>
+      </BaseModalFooter>
    </form>
  </BaseModal>
 </template>
--- a/resources/scripts/admin/components/modal-components/CategoryModal.vue
+++ b/resources/scripts/admin/components/modal-components/CategoryModal.vue
@@ -47,15 +47,7 @@
        </BaseInputGrid>
      </div>

-      <div
-        class="
-          z-0
-          flex
-          justify-end
-          p-4
-          border-t border-gray-200 border-solid border-modal-bg
-        "
-      >
+      <BaseModalFooter>
        <BaseButton
          type="button"
          variant="primary-outline"
@@ -80,7 +72,7 @@
          </template>
          {{ categoryStore.isEdit ? $t('general.update') : $t('general.save') }}
        </BaseButton>
-      </div>
+      </BaseModalFooter>
    </form>
  </BaseModal>
 </template>
--- a/resources/scripts/admin/components/modal-components/CompanyModal.vue
+++ b/resources/scripts/admin/components/modal-components/CompanyModal.vue
@@ -116,7 +116,7 @@
        </BaseInputGrid>
      </div>

-      <div class="z-0 flex justify-end p-4 bg-gray-50 border-modal-bg">
+       <BaseModalFooter>
        <BaseButton
          class="mr-3 text-sm"
          variant="primary-outline"
@@ -141,7 +141,7 @@
          </template>
          {{ $t('general.save') }}
        </BaseButton>
-      </div>
+      </BaseModalFooter>
    </form>
  </BaseModal>
 </template>
--- a/resources/scripts/admin/components/modal-components/CustomerModal.vue
+++ b/resources/scripts/admin/components/modal-components/CustomerModal.vue
@@ -425,9 +425,7 @@
        </BaseTabGroup>
      </div>

-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
        <BaseButton
          class="mr-3 text-sm"
          type="button"
@@ -447,7 +445,7 @@
          </template>
          {{ $t('general.save') }}
        </BaseButton>
-      </div>
+      </BaseModalFooter>
    </form>
  </BaseModal>
 </template>
--- a/resources/scripts/admin/components/modal-components/DeleteCompanyModal.vue
+++ b/resources/scripts/admin/components/modal-components/DeleteCompanyModal.vue
@@ -38,7 +38,7 @@
        </BaseInputGroup>
      </div>

-      <div class="z-0 flex justify-end p-4 bg-gray-50 border-modal-bg">
+      <BaseModalFooter>
        <BaseButton
          class="mr-3 text-sm"
          variant="primary-outline"
@@ -63,7 +63,7 @@
          </template>
          {{ $t('general.delete') }}
        </BaseButton>
-      </div>
+      </BaseModalFooter>
    </form>
  </BaseModal>
 </template>
--- a/resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue
+++ b/resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue
@@ -150,9 +150,7 @@
          @Remove="removeUsedSelectedCurrencies"
        />
      </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
        <BaseButton
          class="mr-3"
          variant="primary-outline"
@@ -179,7 +177,7 @@
            exchangeRateStore.isEdit ? $t('general.update') : $t('general.save')
          }}
        </BaseButton>
-      </div>
+      </BaseModalFooter>
    </form>
  </BaseModal>
 </template>
--- a/resources/scripts/admin/components/modal-components/FileDiskModal.vue
+++ b/resources/scripts/admin/components/modal-components/FileDiskModal.vue
@@ -20,15 +20,7 @@
        @submit="createNewDisk"
      >
        <template #default="slotProps">
-          <div
-            class="
-              z-0
-              flex
-              justify-end
-              p-4
-              border-t border-solid border-gray-light
-            "
-          >
+          <BaseModalFooter>
            <BaseButton
              class="mr-3 text-sm"
              variant="primary-outline"
@@ -52,7 +44,7 @@

              {{ $t('general.save') }}
            </BaseButton>
-          </div>
+          </BaseModalFooter>
        </template>
      </component>
    </div>
--- a/resources/scripts/admin/components/modal-components/ItemModal.vue
+++ b/resources/scripts/admin/components/modal-components/ItemModal.vue
@@ -89,9 +89,7 @@
            </BaseInputGroup>
          </BaseInputGrid>
        </div>
-        <div
-          class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-        >
+        <BaseModalFooter>
          <BaseButton
            class="mr-3"
            variant="primary-outline"
@@ -111,7 +109,7 @@
            </template>
            {{ itemStore.isEdit ? $t('general.update') : $t('general.save') }}
          </BaseButton>
-        </div>
+        </BaseModalFooter>
      </form>
    </div>
  </BaseModal>
--- a/resources/scripts/admin/components/modal-components/ItemUnitModal.vue
+++ b/resources/scripts/admin/components/modal-components/ItemUnitModal.vue
@@ -31,15 +31,7 @@
        </BaseInputGroup>
      </div>

-      <div
-        class="
-          z-0
-          flex
-          justify-end
-          p-4
-          border-t border-gray-200 border-solid border-modal-bg
-        "
-      >
+      <BaseModalFooter>
        <BaseButton
          type="button"
          variant="primary-outline"
@@ -66,7 +58,7 @@
            itemStore.isItemUnitEdit ? $t('general.update') : $t('general.save')
          }}
        </BaseButton>
-      </div>
+      </BaseModalFooter>
    </form>
  </BaseModal>
 </template>
--- a/resources/scripts/admin/components/modal-components/MailTestModal.vue
+++ b/resources/scripts/admin/components/modal-components/MailTestModal.vue
@@ -62,9 +62,7 @@
          </BaseInputGroup>
        </BaseInputGrid>
      </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+     <BaseModalFooter>
        <BaseButton
          variant="primary-outline"
          type="button"
@@ -84,7 +82,7 @@
          </template>
          {{ $t('general.send') }}
        </BaseButton>
-      </div>
+      </BaseModalFooter>
    </form>
  </BaseModal>
 </template>
--- a/resources/scripts/admin/components/modal-components/NoteModal.vue
+++ b/resources/scripts/admin/components/modal-components/NoteModal.vue
@@ -63,16 +63,7 @@
          </BaseInputGroup>
        </BaseInputGrid>
      </div>
-      <div
-        class="
-          z-0
-          flex
-          justify-end
-          px-4
-          py-4
-          border-t border-solid border-gray-light
-        "
-      >
+     <BaseModalFooter>
        <BaseButton
          class="mr-2"
          variant="primary-outline"
@@ -93,7 +84,7 @@
          </template>
          {{ noteStore.isEdit ? $t('general.update') : $t('general.save') }}
        </BaseButton>
-      </div>
+      </BaseModalFooter>
    </form>
  </BaseModal>
 </template>
--- a/resources/scripts/admin/components/modal-components/PaymentModeModal.vue
+++ b/resources/scripts/admin/components/modal-components/PaymentModeModal.vue
@@ -29,9 +29,7 @@
        </BaseInputGroup>
      </div>

-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
        <BaseButton
          variant="primary-outline"
          class="mr-3"
@@ -56,7 +54,7 @@
              : $t('general.save')
          }}
        </BaseButton>
-      </div>
+      </BaseModalFooter>
    </form>
  </BaseModal>
 </template>
--- a/resources/scripts/admin/components/modal-components/RolesModal.vue
+++ b/resources/scripts/admin/components/modal-components/RolesModal.vue
@@ -72,7 +72,7 @@
        </div>
      </div>

-      <div class="border-t border-gray-200 py-3">
+      <div class="border-t border-gray-200 dark:border-gray-600 py-3">
        <div
          class="
            grid grid-cols-1
@@ -89,7 +89,7 @@
            :key="gIndex"
            class="flex flex-col space-y-1"
          >
-            <p class="text-sm text-gray-500 border-b border-gray-200 pb-1 mb-2">
+            <p class="text-sm text-gray-500 dark:text-gray-200 border-b dark:border-gray-600 pb-1 mb-2">
              {{ gIndex }}
            </p>
            <div
@@ -116,15 +116,7 @@
          </span>
        </div>
      </div>
-      <div
-        class="
-          z-0
-          flex
-          justify-end
-          p-4
-          border-t border-solid border--200 border-modal-bg
-        "
-      >
+      <BaseModalFooter>
        <BaseButton
          class="mr-3 text-sm"
          variant="primary-outline"
@@ -144,7 +136,7 @@
          </template>
          {{ !roleStore.isEdit ? $t('general.save') : $t('general.update') }}
        </BaseButton>
-      </div>
+      </BaseModalFooter>
    </form>
  </BaseModal>
 </template>
--- a/resources/scripts/admin/components/modal-components/SelectTemplateModal.vue
+++ b/resources/scripts/admin/components/modal-components/SelectTemplateModal.vue
@@ -70,7 +70,7 @@
      </div>
    </div>

-    <div class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid">
+    <BaseModalFooter>
      <BaseButton class="mr-3" variant="primary-outline" @click="closeModal">
        {{ $t('general.cancel') }}
      </BaseButton>
@@ -80,7 +80,7 @@
        </template>
        {{ $t('general.choose') }}
      </BaseButton>
-    </div>
+    </BaseModalFooter>
  </BaseModal>
 </template>

--- a/resources/scripts/admin/components/modal-components/SendEstimateModal.vue
+++ b/resources/scripts/admin/components/modal-components/SendEstimateModal.vue
@@ -62,9 +62,7 @@
          </BaseInputGroup>
        </BaseInputGrid>
      </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
        <BaseButton
          class="mr-3"
          variant="primary-outline"
@@ -85,7 +83,7 @@
          <BaseIcon v-if="!isLoading" name="PhotographIcon" class="h-5 mr-2" />
          {{ $t('general.preview') }}
        </BaseButton>
-      </div>
+      </BaseModalFooter>
    </form>
    <div v-else>
      <div class="my-6 mx-4 border border-gray-200 relative">
@@ -106,9 +104,7 @@
        ></iframe>
      </div>

-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
        <BaseButton
          class="mr-3"
          variant="primary-outline"
@@ -127,7 +123,7 @@
          <BaseIcon v-if="!isLoading" name="PaperAirplaneIcon" class="mr-2" />
          {{ $t('general.send') }}
        </BaseButton>
-      </div>
+      </BaseModalFooter>
    </div>
  </BaseModal>
 </template>
--- a/resources/scripts/admin/components/modal-components/SendInvoiceModal.vue
+++ b/resources/scripts/admin/components/modal-components/SendInvoiceModal.vue
@@ -65,9 +65,7 @@
          </BaseInputGroup>
        </BaseInputGrid>
      </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
        <BaseButton
          class="mr-3"
          variant="primary-outline"
@@ -93,7 +91,7 @@
          </template>
          {{ $t('general.preview') }}
        </BaseButton>
-      </div>
+      </BaseModalFooter>
    </form>
    <div v-else>
      <div class="my-6 mx-4 border border-gray-200 relative">
@@ -114,9 +112,7 @@
          style="min-height: 500px"
        ></iframe>
      </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
        <BaseButton
          class="mr-3"
          variant="primary-outline"
@@ -140,7 +136,7 @@
          />
          {{ $t('general.send') }}
        </BaseButton>
-      </div>
+      </BaseModalFooter>
    </div>
  </BaseModal>
 </template>
--- a/resources/scripts/admin/components/modal-components/SendPaymentModal.vue
+++ b/resources/scripts/admin/components/modal-components/SendPaymentModal.vue
@@ -65,9 +65,7 @@
          </BaseInputGroup>
        </BaseInputGrid>
      </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
        <BaseButton
          class="mr-3"
          variant="primary-outline"
@@ -93,7 +91,7 @@
          </template>
          {{ $t('general.preview') }}
        </BaseButton>
-      </div>
+      </BaseModalFooter>
    </form>
    <div v-else>
      <div class="my-6 mx-4 border border-gray-200 relative">
@@ -114,9 +112,7 @@
          style="min-height: 500px"
        ></iframe>
      </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
        <BaseButton
          class="mr-3"
          variant="primary-outline"
@@ -140,7 +136,7 @@
          />
          {{ $t('general.send') }}
        </BaseButton>
-      </div>
+      </BaseModalFooter>
    </div>
  </BaseModal>
 </template>
--- a/resources/scripts/admin/components/modal-components/TaxTypeModal.vue
+++ b/resources/scripts/admin/components/modal-components/TaxTypeModal.vue
@@ -90,15 +90,7 @@
          </BaseInputGroup>
        </BaseInputGrid>
      </div>
-      <div
-        class="
-          z-0
-          flex
-          justify-end
-          p-4
-          border-t border-solid border--200 border-modal-bg
-        "
-      >
+      <BaseModalFooter>
        <BaseButton
          class="mr-3 text-sm"
          variant="primary-outline"
@@ -122,7 +114,7 @@
          </template>
          {{ taxTypeStore.isEdit ? $t('general.update') : $t('general.save') }}
        </BaseButton>
-      </div>
+      </BaseModalFooter>
    </form>
  </BaseModal>
 </template>
--- a/resources/scripts/admin/components/modal-components/TaxationAddressModal.vue
+++ b/resources/scripts/admin/components/modal-components/TaxationAddressModal.vue
@@ -87,9 +87,7 @@
        </BaseInputGrid>
      </div>

-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
        <BaseButton
          class="mr-3 text-sm"
          type="button"
@@ -109,7 +107,7 @@
          </template>
          {{ $t('general.save') }}
        </BaseButton>
-      </div>
+      </BaseModalFooter>
    </form>
  </BaseModal>
 </template>
--- a/resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue
+++ b/resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue
@@ -172,15 +172,7 @@
        </div>
      </div>

-      <div
-        class="
-          z-0
-          flex
-          justify-end
-          p-4
-          border-t border-solid border-gray-light border-modal-bg
-        "
-      >
+      <BaseModalFooter>
        <BaseButton
          class="mr-3"
          type="button"
@@ -207,7 +199,7 @@
            !customFieldStore.isEdit ? $t('general.save') : $t('general.update')
          }}
        </BaseButton>
-      </div>
+      </BaseModalFooter>
    </form>
  </BaseModal>
 </template>
--- a/resources/scripts/admin/components/modal-components/disks/DoSpacesDisk.vue
+++ b/resources/scripts/admin/components/modal-components/disks/DoSpacesDisk.vue
@@ -153,7 +153,7 @@
          <BaseSwitch v-model="set_as_default" class="flex" />
        </div>
        <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-black dark:text-white box-title">
            {{ $t('settings.disk.is_default') }}
          </p>
        </div>
--- a/resources/scripts/admin/components/modal-components/disks/DropboxDisk.vue
+++ b/resources/scripts/admin/components/modal-components/disks/DropboxDisk.vue
@@ -132,7 +132,7 @@
          <BaseSwitch v-model="set_as_default" class="flex" />
        </div>
        <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-black dark:text-white box-title">
            {{ $t('settings.disk.is_default') }}
          </p>
        </div>
--- a/resources/scripts/admin/components/modal-components/disks/LocalDisk.vue
+++ b/resources/scripts/admin/components/modal-components/disks/LocalDisk.vue
@@ -63,7 +63,7 @@
        </div>

        <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-black dark:text-white box-title">
            {{ $t('settings.disk.is_default') }}
          </p>
        </div>
--- a/resources/scripts/admin/components/modal-components/disks/S3Disk.vue
+++ b/resources/scripts/admin/components/modal-components/disks/S3Disk.vue
@@ -134,7 +134,7 @@
          <BaseSwitch v-model="set_as_default" class="flex" />
        </div>
        <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-black dark:text-white box-title">
            {{ $t('settings.disk.is_default') }}
          </p>
        </div>
--- a/resources/scripts/admin/views/settings/CompanyInfoSettings.vue
+++ b/resources/scripts/admin/views/settings/CompanyInfoSettings.vue
@@ -113,10 +113,10 @@

      <div v-if="companyStore.companies.length !== 1" class="py-5">
        <BaseDivider class="my-4" />
-        <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
+        <h3 class="text-lg leading-6 font-medium text-gray-900">
          {{ $tc('settings.company_info.delete_company') }}
        </h3>
-        <div class="mt-2 max-w-xl text-sm text-gray-500 dark:text-gray-400">
+        <div class="mt-2 max-w-xl text-sm text-gray-500">
          <p>
            {{ $tc('settings.company_info.delete_company_description') }}
          </p>
--- a/resources/scripts/admin/views/settings/ExchangeRateProviderSetting.vue
+++ b/resources/scripts/admin/views/settings/ExchangeRateProviderSetting.vue
@@ -7,7 +7,7 @@
          {{ $t('settings.menu_title.exchange_rate') }}
        </h6>
        <p
-          class="mt-2 text-sm leading-snug text-left text-gray-500 dark:text-gray-400"
+          class="mt-2 text-sm leading-snug text-left text-gray-500"
          style="max-width: 680px"
        >
          {{ $t('settings.exchange_rate.providers_description') }}
--- a/resources/scripts/admin/views/settings/customization/NumberCustomizer.vue
+++ b/resources/scripts/admin/views/settings/customization/NumberCustomizer.vue
@@ -1,12 +1,12 @@
 <template>
-  <BaseHeading
-    type="heading-title"
-    :subtitle="
-      $t(`settings.customization.${type}s.${type}_number_format_description`)
-    "
-  >
+  <h6 class="text-gray-900 text-lg font-medium">
    {{ $t(`settings.customization.${type}s.${type}_number_format`) }}
-  </BaseHeading>
+  </h6>
+  <p class="mt-1 text-sm text-gray-500">
+    {{
+      $t(`settings.customization.${type}s.${type}_number_format_description`)
+    }}
+  </p>

  <div class="overflow-x-auto">
    <table class="w-full mt-6 table-fixed">
@@ -29,7 +29,6 @@
              leading-5
              text-left text-gray-700
              border-t border-b border-gray-200 border-solid
-              dark:border-gray-600
            "
          ></th>
          <th
@@ -42,7 +41,6 @@
              leading-5
              text-left text-gray-700
              border-t border-b border-gray-200 border-solid
-              dark:text-gray-300 dark:border-gray-600
            "
          >
            Component
@@ -57,7 +55,6 @@
              leading-5
              text-left text-gray-700
              border-t border-b border-gray-200 border-solid
-              dark:text-gray-300 dark:border-gray-600
            "
          >
            Parameter
@@ -72,14 +69,13 @@
              leading-5
              text-left text-gray-700
              border-t border-b border-gray-200 border-solid
-              dark:border-gray-600
            "
          ></th>
        </tr>
      </thead>
      <draggable
        v-model="selectedFields"
-        class="divide-y divide-gray-200 dark:divide-gray-600"
+        class="divide-y divide-gray-200"
        item-key="id"
        tag="tbody"
        handle=".handle"
@@ -101,13 +97,12 @@
                  whitespace-nowrap
                  mr-2
                  min-w-[200px]
-                  dark:text-primary-400
                "
              >
                {{ element.label }}
              </label>

-              <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+              <p class="text-xs text-gray-500 mt-1">
                {{ element.description }}
              </p>
            </td>
--- a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabConvertEstimate.vue
+++ b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabConvertEstimate.vue
@@ -1,12 +1,10 @@
 <template>
-  <BaseHeading
-    type="heading-title"
-    :subtitle="
-      $t('settings.customization.estimates.convert_estimate_description')
-    "
-    >
+  <h6 class="text-gray-900 text-lg font-medium">
    {{ $tc('settings.customization.estimates.convert_estimate_options') }}
-  </BaseHeading>
+  </h6>
+  <p class="mt-1 text-sm text-gray-500">
+    {{ $t('settings.customization.estimates.convert_estimate_description') }}
+  </p>

  <BaseInputGroup required>
    <BaseRadio
--- a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabDefaultFormats.vue
+++ b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabDefaultFormats.vue
@@ -1,13 +1,11 @@
 <template>
  <form @submit.prevent="submitForm">
-    <BaseHeading
-      type="heading-title"
-      :subtitle="
-        $t('settings.customization.estimates.default_formats_description')
-      "
-    >
+    <h6 class="text-gray-900 text-lg font-medium">
      {{ $t('settings.customization.estimates.default_formats') }}
-    </BaseHeading>
+    </h6>
+    <p class="mt-1 text-sm text-gray-500 mb-2">
+      {{ $t('settings.customization.estimates.default_formats_description') }}
+    </p>

    <BaseInputGroup
      :label="
--- a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabExpiryDate.vue
+++ b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabExpiryDate.vue
@@ -1,13 +1,11 @@
 <template>
  <form @submit.prevent="submitForm">
-    <BaseHeading
-      type="heading-title"
-      :subtitle="
-        $t('settings.customization.estimates.expiry_date_description')
-      "
-    >
+    <h6 class="text-gray-900 text-lg font-medium">
      {{ $t('settings.customization.estimates.expiry_date') }}
-    </BaseHeading>
+    </h6>
+    <p class="mt-1 text-sm text-gray-500 mb-2">
+      {{ $t('settings.customization.estimates.expiry_date_description') }}
+    </p>

    <BaseSwitchSection
      v-model="expiryDateAutoField"
--- a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDefaultFormats.vue
+++ b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDefaultFormats.vue
@@ -1,13 +1,11 @@
 <template>
  <form @submit.prevent="submitForm">
-    <BaseHeading
-      type="heading-title"
-      :subtitle="
-        $t('settings.customization.invoices.default_formats_description')
-      "
-    >
+    <h6 class="text-gray-900 text-lg font-medium">
      {{ $t('settings.customization.invoices.default_formats') }}
-    </BaseHeading>
+    </h6>
+    <p class="mt-1 text-sm text-gray-500 mb-2">
+      {{ $t('settings.customization.invoices.default_formats_description') }}
+    </p>

    <BaseInputGroup
      :label="$t('settings.customization.invoices.default_invoice_email_body')"
--- a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDueDate.vue
+++ b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDueDate.vue
@@ -1,13 +1,11 @@
 <template>
  <form @submit.prevent="submitForm">
-    <BaseHeading
-    type="heading-title"
-    :subtitle="
-      $t('settings.customization.invoices.due_date_description')
-    "
-  >
-    {{ $t('settings.customization.invoices.due_date') }}
-  </BaseHeading>
+    <h6 class="text-gray-900 text-lg font-medium">
+      {{ $t('settings.customization.invoices.due_date') }}
+    </h6>
+    <p class="mt-1 text-sm text-gray-500 mb-2">
+      {{ $t('settings.customization.invoices.due_date_description') }}
+    </p>

    <BaseSwitchSection
      v-model="dueDateAutoField"
--- a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabRetrospective.vue
+++ b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabRetrospective.vue
@@ -1,12 +1,10 @@
 <template>
-  <BaseHeading
-    type="heading-title"
-    :subtitle="
-      $t('settings.customization.invoices.retrospective_edits_description')
-    "
-  >
+  <h6 class="text-gray-900 text-lg font-medium">
    {{ $tc('settings.customization.invoices.retrospective_edits') }}
-  </BaseHeading>
+  </h6>
+  <p class="mt-1 text-sm text-gray-500">
+    {{ $t('settings.customization.invoices.retrospective_edits_description') }}
+  </p>

  <BaseInputGroup required>
    <BaseRadio
--- a/resources/scripts/admin/views/settings/customization/payments/PaymentsTabDefaultFormats.vue
+++ b/resources/scripts/admin/views/settings/customization/payments/PaymentsTabDefaultFormats.vue
@@ -1,13 +1,11 @@
 <template>
  <form @submit.prevent="submitForm">
-     <BaseHeading
-      type="heading-title"
-      :subtitle="
-        $t('settings.customization.payments.default_formats_description')
-      "
-    >
+    <h6 class="text-gray-900 text-lg font-medium">
      {{ $t('settings.customization.payments.default_formats') }}
-    </BaseHeading>
+    </h6>
+    <p class="mt-1 text-sm text-gray-500 mb-2">
+      {{ $t('settings.customization.payments.default_formats_description') }}
+    </p>

    <BaseInputGroup
      :label="$t('settings.customization.payments.default_payment_email_body')"
--- a/resources/scripts/components/base/BaseHeading.vue
+++ b/resources/scripts/components/base/BaseHeading.vue
@@ -2,21 +2,6 @@
  <h6 :class="typeClass">
    <slot />
  </h6>
-  
-  <p
-    v-if="subtitle"
-    class="
-      mt-2
-      text-sm
-      leading-snug
-      text-gray-500
-      dark:text-gray-400
-      max-w-[680px]
-    "
-  >
-    {{ subtitle }}
-  </p>
-
 </template>

 <script setup>
@@ -29,16 +14,12 @@ const props = defineProps({
      return ['section-title', 'heading-title'].indexOf(value) !== -1
    },
  },
-  subtitle: {
-    type: String,
-    default: '',
-  },
 })

 const typeClass = computed(() => {
  return {
-    'text-gray-900 text-lg font-medium dark:text-white': props.type === 'heading-title',
-    'text-gray-500 uppercase text-base dark:text-gray-300': props.type === 'section-title',
+    'text-gray-900 text-lg font-medium': props.type === 'heading-title',
+    'text-gray-500 uppercase text-base': props.type === 'section-title',
  }
 })
 </script>
--- a/resources/scripts/components/base/BaseModal.vue
+++ b/resources/scripts/components/base/BaseModal.vue
@@ -29,8 +29,21 @@
            leave-to="opacity-0"
          >
            <DialogOverlay
-              class="fixed inset-0 transition-opacity bg-gray-700 bg-opacity-25"
-            />
+              class="
+              fixed
+              inset-0
+              transition-opacity
+              bg-gray-700
+              bg-opacity-25
+              dark:backdrop-blur-sm
+              dark:bg-gray-900/80
+              "
+            >
+              <BaseDarkHighlight
+                class="!bg-highlight/[.17] !top-1/2 -translate-y-1/2 mt-5 h-96"
+                :class="modalSize"
+              />
+            </DialogOverlay>
          </TransitionChild>

          <!-- This element is to trick the browser into centering the modal contents. -->
@@ -61,7 +74,11 @@
              my-4
              ${modalSize}
              sm:w-full
-              border-t-8 border-solid rounded shadow-xl  border-primary-500`"
+              dark:shadow-glass
+              dark:border
+              dark:border-white/10
+              dark:bg-gray-800/90
+              border-t-8 border-solid rounded shadow-xl border-primary-500`"
            >
              <div
                v-if="hasHeaderSlot"
@@ -74,6 +91,8 @@
                  text-lg
                  font-medium
                  text-black
+                  dark:text-white
+                  dark:border-gray-600
                  border-b border-gray-200 border-solid
                "
              >
--- a/resources/scripts/components/base/BaseModalFooter.vue
+++ b/resources/scripts/components/base/BaseModalFooter.vue
@@ -0,0 +1,14 @@
+<template>
+  <div
+    class="
+      z-0
+      flex
+      justify-end
+      p-4
+      border-t border-gray-200 border-solid
+      dark:border-gray-600
+    "
+  >
+    <slot />
+  </div>
+</template>
--- a/resources/scripts/components/base/BaseSettingCard.vue
+++ b/resources/scripts/components/base/BaseSettingCard.vue
@@ -11,7 +11,7 @@
            mt-2
            text-sm
            leading-snug
-            text-left text-gray-500 dark:text-gray-400
+            text-left text-gray-500
            max-w-[680px]
          "
        >
Author	SHA1	Message	Date
yashkanakiya	3396a4a462	fix dark mode in roles modal and send modal	2023-03-28 12:43:41 +05:30
yashkanakiya	cf1f8571f8	add BaseModalFooter	2023-03-27 11:19:07 +05:30
yashkanakiya	6e70930e87	add dark mode in base modal	2023-03-23 11:10:46 +05:30