[7.x] Dark Mode Support (#1077)

* Shop icon should use `currentColor` * Make the widget icons work with dark mode * Make the product variants fieldtype dark mode compatible * Remove unnecessary background from product variant select * Make the status log compatible with dark mode * Fix tax icon * Fix border on tax navigation * Fix icon
duncanmcclean · May 21, 2024 · 5ba61ef · 5ba61ef
1 parent 3d77417
commit 5ba61ef
Show file tree

Hide file tree

Showing 11 changed files with 33 additions and 25 deletions.
diff --git a/resources/js/components/Fieldtypes/ProductVariantFieldtype.vue b/resources/js/components/Fieldtypes/ProductVariantFieldtype.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="bg-white">
+    <div>
         <div
             v-if="initializing"
             class="flex flex-col items-center justify-center text-center p-1"

diff --git a/resources/js/components/Fieldtypes/ProductVariants/ProductVariantsFieldtype.vue b/resources/js/components/Fieldtypes/ProductVariants/ProductVariantsFieldtype.vue
@@ -6,18 +6,22 @@
                 <div
                     v-for="(variant, variantIndex) in variants"
                     :key="variantIndex"
-                    class="bg-grey-10 shadow-sm mb-4 rounded border variants-sortable-item"
+                    class="replicator-set shadow-sm mb-4 rounded border dark:border-dark-900 testing-sortable-item variants-sortable-item"
                 >
-                    <div class="grid-item-header rounded-t">
-                        {{ variant.name || 'Variant' }}
-                        <button
-                            v-if="variants.length > 1"
-                            class="icon icon-cross cursor-pointer"
-                            @click="deleteVariant(variantIndex)"
-                            :aria-label="__('Delete Variant')"
-                        >
-                            <svg-icon name="micro/trash" class="w-4 h-4 text-gray-600 group-hover:text-gray-900" />
-                        </button>
+                    <div class="replicator-set-header">
+                        <div class="py-2 rtl:pr-2 ltr:pl-2 replicator-set-header-inner flex justify-between items-end w-full">
+                            <label class="text-xs whitespace-nowrap rtl:ml-2 ltr:mr-2 cursor-pointer">
+                                {{ variant.name || 'Variant' }}
+                            </label>
+                            <button
+                                v-if="variants.length > 1"
+                                class="icon icon-cross cursor-pointer"
+                                @click="deleteVariant(variantIndex)"
+                                :aria-label="__('Delete Variant')"
+                            >
+                                <svg-icon name="micro/trash" class="w-4 h-4 text-gray-600 group-hover:text-gray-900" />
+                            </button>
+                        </div>
                     </div>
                     <publish-fields-container>
                         <publish-field

diff --git a/resources/js/components/Fieldtypes/ProductVariants/VariantOptionRow.vue b/resources/js/components/Fieldtypes/ProductVariants/VariantOptionRow.vue
@@ -1,7 +1,11 @@
 <template>
-    <div class="bg-grey-10 shadow-sm mb-4 rounded border variants-sortable-item">
-        <div class="grid-item-header rounded-t">
-            {{ option.variant || __('Variants') }}
+    <div class="replicator-set shadow-sm mb-4 rounded border dark:border-dark-900 testing-sortable-item variants-sortable-item">
+        <div class="replicator-set-header">
+            <div class="py-2 rtl:pr-2 ltr:pl-2 replicator-set-header-inner flex justify-between items-end w-full">
+                <label class="text-xs whitespace-nowrap rtl:ml-2 ltr:mr-2 cursor-pointer">
+                    {{ option.variant || __('Variants') }}
+                </label>
+            </div>
         </div>
 
         <publish-fields-container>

diff --git a/resources/js/components/StatusLog/StatusLog.vue b/resources/js/components/StatusLog/StatusLog.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="bg-white h-full flex flex-col">
-        <div class="bg-gray-200 px-4 py-2 border-b border-gray-300 text-lg font-medium flex items-center justify-between">
+    <div class="bg-white dark:bg-dark-800 h-full flex flex-col">
+        <div class="bg-gray-200 dark:bg-dark-600 px-4 py-2 border-b border-gray-300 dark:border-dark-900 text-lg font-medium flex items-center justify-between">
             {{ __('Status Log') }}
             <button
                 type="button"
@@ -14,7 +14,7 @@
                 <loading-graphic />
             </div>
 
-            <div v-if="!loading && statusLog.length === 0" class="p-4 text-gray text-sm">
+            <div v-if="!loading && statusLog.length === 0" class="p-4 text-gray dark:text-dark-150 text-sm">
                 {{ __('No status log events.') }}
             </div>
 

diff --git a/resources/svg/money-cash-file-dollar.svg b/resources/svg/money-cash-file-dollar.svg
diff --git a/resources/svg/shop.svg b/resources/svg/shop.svg
diff --git a/resources/views/cp/partials/tax-navigation.blade.php b/resources/views/cp/partials/tax-navigation.blade.php
@@ -1,4 +1,4 @@
-<div class="border-b px-2 text-sm flex">
+<div class="border-b dark:border-dark-300 px-2 text-sm flex">
     <a class="block data-list-filter-link @if(str_contains(Route::currentRouteName(), 'simple-commerce.tax-rates.index')) active @endif" href="{{ cp_route('simple-commerce.tax-rates.index') }}">
         {{ __('Tax Rates') }}
     </a>

diff --git a/resources/views/cp/tax-rates/index.blade.php b/resources/views/cp/tax-rates/index.blade.php
@@ -11,7 +11,7 @@
                 <template v-slot:trigger>
                     <button class="button btn-primary flex items-center pr-2">
                         {{ __('Create Tax Rate') }}
-                        <svg-icon name="chevron-down-xs" class="w-2 ml-1" />
+                        <svg-icon name="micro/chevron-down-xs" class="w-2 ml-1" />
                     </button>
                 </template>
 

diff --git a/resources/views/cp/widgets/low-stock-products.blade.php b/resources/views/cp/widgets/low-stock-products.blade.php
@@ -2,7 +2,7 @@
     <div class="flex justify-between items-center p-4">
         <h2>
             <a class="flex items-center" href="{{ $url }}">
-                <div class="h-6 w-6 mr-2 text-gray-800">
+                <div class="h-6 w-6 mr-2 text-gray-800 dark:text-dark-100">
                     @cp_svg('icons/light/entries')
                 </div>
                 <span>{{ __('Low Stock Products') }}</span>

diff --git a/resources/views/cp/widgets/recent-orders.blade.php b/resources/views/cp/widgets/recent-orders.blade.php
@@ -2,7 +2,7 @@
     <div class="flex justify-between items-center p-4">
         <h2>
             <a class="flex items-center" href="{{ $url }}">
-                <div class="h-6 w-6 mr-2 text-gray-800">
+                <div class="h-6 w-6 mr-2 text-gray-800 dark:text-dark-100">
                     {!! \DuncanMcClean\SimpleCommerce\SimpleCommerce::svg('shop') !!}
                 </div>
                 <span>{{ __('Recent Orders') }}</span>

diff --git a/resources/views/cp/widgets/top-customers.blade.php b/resources/views/cp/widgets/top-customers.blade.php
@@ -2,7 +2,7 @@
     <div class="flex justify-between items-center p-4">
         <h2>
             <a class="flex items-center" href="{{ $url }}">
-                <div class="h-6 w-6 mr-2 text-gray-800">
+                <div class="h-6 w-6 mr-2 text-gray-800 dark:text-dark-100">
                     @cp_svg('icons/light/user')
                 </div>
                 <span>{{ __('Top Customers') }}</span>