Merge branch 'dark-mode' of https://github.com/crater-invoice/crater into dark-card

add dark base card and darkHighlight component
add dark theme in blade file
2025-10-28 04:01:10 -04:00 · 2023-03-20 17:20:03 +05:30 · 2023-03-20 16:31:56 +05:30 · 2023-03-20 11:45:14 +05:30 · 2023-03-17 18:25:17 +05:30
30 changed files with 177 additions and 91 deletions
--- a/resources/scripts/admin/components/currency-exchange-rate/ExchangeRateBulkUpdate.vue
+++ b/resources/scripts/admin/components/currency-exchange-rate/ExchangeRateBulkUpdate.vue
@ -50,11 +50,21 @@
          </BaseInputGroup>
        </template>
      </ValidateEach>
-      <BaseModalFooter>
+      <div
+        slot="footer"
+        class="
+          z-0
+          flex
+          justify-end
+          mt-4
+          pt-4
+          border-t border-gray-200 border-solid border-modal-bg
+        "
+      >
        <BaseButton :loading="isSaving" variant="primary" type="submit">
          {{ $t('general.save') }}
        </BaseButton>
-      </BaseModalFooter>
+      </div>
    </form>
  </BaseCard>
 </template>
--- a/resources/scripts/admin/components/modal-components/BackupModal.vue
+++ b/resources/scripts/admin/components/modal-components/BackupModal.vue
@ -57,7 +57,9 @@
          </BaseInputGroup>
        </BaseInputGrid>
      </div>
-      <BaseModalFooter>
+      <div
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+      >
        <BaseButton
          class="mr-3"
          variant="primary-outline"
@ -82,7 +84,7 @@
          </template>
          {{ $t('general.create') }}
        </BaseButton>
-      </BaseModalFooter>
+      </div>
    </form>
  </BaseModal>
 </template>
--- a/resources/scripts/admin/components/modal-components/CategoryModal.vue
+++ b/resources/scripts/admin/components/modal-components/CategoryModal.vue
@ -47,7 +47,15 @@
        </BaseInputGrid>
      </div>

-      <BaseModalFooter>
+      <div
+        class="
+          z-0
+          flex
+          justify-end
+          p-4
+          border-t border-gray-200 border-solid border-modal-bg
+        "
+      >
        <BaseButton
          type="button"
          variant="primary-outline"
@ -72,7 +80,7 @@
          </template>
          {{ categoryStore.isEdit ? $t('general.update') : $t('general.save') }}
        </BaseButton>
-      </BaseModalFooter>
+      </div>
    </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>

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

-      <BaseModalFooter>
+      <div
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+      >
        <BaseButton
          class="mr-3 text-sm"
          type="button"
@ -445,7 +447,7 @@
          </template>
          {{ $t('general.save') }}
        </BaseButton>
-      </BaseModalFooter>
+      </div>
    </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>

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

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

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

-      <BaseModalFooter>
+      <div
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+      >
        <BaseButton
          variant="primary-outline"
          class="mr-3"
@ -54,7 +56,7 @@
              : $t('general.save')
          }}
        </BaseButton>
-      </BaseModalFooter>
+      </div>
    </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 dark:border-gray-600 py-3">
+      <div class="border-t border-gray-200 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 dark:text-gray-200 border-b dark:border-gray-600 pb-1 mb-2">
+            <p class="text-sm text-gray-500 border-b border-gray-200 pb-1 mb-2">
              {{ gIndex }}
            </p>
            <div
@ -116,7 +116,15 @@
          </span>
        </div>
      </div>
-      <BaseModalFooter>
+      <div
+        class="
+          z-0
+          flex
+          justify-end
+          p-4
+          border-t border-solid border--200 border-modal-bg
+        "
+      >
        <BaseButton
          class="mr-3 text-sm"
          variant="primary-outline"
@ -136,7 +144,7 @@
          </template>
          {{ !roleStore.isEdit ? $t('general.save') : $t('general.update') }}
        </BaseButton>
-      </BaseModalFooter>
+      </div>
    </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>

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

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

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

-      <BaseModalFooter>
+      <div
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+      >
        <BaseButton
          class="mr-3 text-sm"
          type="button"
@ -107,7 +109,7 @@
          </template>
          {{ $t('general.save') }}
        </BaseButton>
-      </BaseModalFooter>
+      </div>
    </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,7 +172,15 @@
        </div>
      </div>

-      <BaseModalFooter>
+      <div
+        class="
+          z-0
+          flex
+          justify-end
+          p-4
+          border-t border-solid border-gray-light border-modal-bg
+        "
+      >
        <BaseButton
          class="mr-3"
          type="button"
@ -199,7 +207,7 @@
            !customFieldStore.isEdit ? $t('general.save') : $t('general.update')
          }}
        </BaseButton>
-      </BaseModalFooter>
+      </div>
    </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 dark:text-white box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-black 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 dark:text-white box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-black 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 dark:text-white box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-black 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 dark:text-white box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
            {{ $t('settings.disk.is_default') }}
          </p>
        </div>
--- a/resources/scripts/components/base/BaseCard.vue
+++ b/resources/scripts/components/base/BaseCard.vue
@ -1,5 +1,9 @@
 <template>
-  <div class="bg-white rounded-lg shadow">
+  <div
+    class="bg-white rounded-lg shadow dark:bg-gray-800 dark:text-white dark:shadow-glass dark:border dark:border-white/10 dark:bg-gray-800/70 relative"
+  >
+    <BaseDarkHighlight class="z-[-1] mt-10" />
+
    <div
      v-if="hasHeaderSlot"
      class="px-5 py-4 text-black border-b border-gray-100 border-solid"
--- a/resources/scripts/components/base/BaseDarkHighlight.vue
+++ b/resources/scripts/components/base/BaseDarkHighlight.vue
@ -0,0 +1,21 @@
+<template>
+  <div
+    class="
+      hidden
+      top-0
+      w-full
+      absolute
+      ml-auto
+      mr-auto
+      left-0
+      right-0
+      text-center
+      h-full
+      rounded-full
+      bg-highlight/[.10]
+      blur-2xl
+      dark:block
+      z-[-1]
+    "
+  />
+</template>
--- a/resources/scripts/components/base/BaseModal.vue
+++ b/resources/scripts/components/base/BaseModal.vue
@ -29,21 +29,8 @@
            leave-to="opacity-0"
          >
            <DialogOverlay
-              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>
+              class="fixed inset-0 transition-opacity bg-gray-700 bg-opacity-25"
+            />
          </TransitionChild>

          <!-- This element is to trick the browser into centering the modal contents. -->
@ -74,11 +61,7 @@
              my-4
              ${modalSize}
              sm:w-full
-              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`"
+              border-t-8 border-solid rounded shadow-xl  border-primary-500`"
            >
              <div
                v-if="hasHeaderSlot"
@ -91,8 +74,6 @@
                  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
@ -1,14 +0,0 @@
-<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/tailwind.config.js
+++ b/tailwind.config.js
@ -36,6 +36,7 @@ module.exports = {
          900: withOpacityValue('--color-primary-900'),
        },
        black: '#040405',
+        highlight: 'rgb(56, 189, 248)',
        red: colors.red,
        teal: colors.teal,
        gray: colors.slate,
Author	SHA1	Message	Date
yashkanakiya	18b5705372	Merge branch 'dark-mode' of https://github.com/crater-invoice/crater into dark-card	2023-03-20 17:20:03 +05:30
yashkanakiya	c61fbad5ce	add dark base card and darkHighlight component	2023-03-20 16:31:56 +05:30
yashkanakiya	2e93082282	add dark theme in blade file	2023-03-20 11:45:14 +05:30
yashkanakiya	ca55221c4f	add dark mode in sidebar and header	2023-03-17 18:25:17 +05:30