💄 Refresh new UI

shopperlabs · Jul 13, 2023 · 1c70932 · 1c70932
1 parent 5040f83
commit 1c70932
Show file tree

Hide file tree

Showing 34 changed files with 950 additions and 1,071 deletions.
diff --git a/packages/admin/config/settings.php b/packages/admin/config/settings.php
@@ -43,41 +43,20 @@
             'route' => null,
             'permission' => null,
         ],
-        [
-            'name' => 'Integrations',
-            'description' => 'Connect with third-party tools that you’re already using.',
-            'icon' => 'heroicon-o-clipboard-list',
-            'route' => null,
-            'permission' => null,
-        ],
         [
             'name' => 'Analytics',
             'description' => 'Get a better understanding of where your traffic is coming from.',
             'icon' => 'heroicon-o-chart-bar',
             'route' => 'shopper.settings.analytics',
             'permission' => null,
         ],
-        [
-            'name' => 'Taxes',
-            'description' => 'Manage how your store charges taxes.',
-            'icon' => 'heroicon-o-receipt-tax',
-            'route' => null,
-            'permission' => null,
-        ],
         [
             'name' => 'Payment methods',
             'description' => 'Add different payment methods for your customers.',
             'icon' => 'heroicon-o-credit-card',
             'route' => 'shopper.settings.payments',
             'permission' => null,
         ],
-        [
-            'name' => 'Files',
-            'description' => 'Manage store assets (images, videos and documents).',
-            'icon' => 'heroicon-o-paper-clip',
-            'route' => null,
-            'permission' => null,
-        ],
         [
             'name' => 'Legal',
             'description' => 'Manage your store\'s legal pages such as privacy, terms.',

diff --git a/packages/admin/public/css/shopper.css b/packages/admin/public/css/shopper.css
@@ -5137,6 +5137,11 @@ html {
   margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(2rem * var(--tw-space-y-reverse));
 }
+.space-y-12 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
+}
 .space-x-reverse > :not([hidden]) ~ :not([hidden]){
   --tw-space-x-reverse: 1;
 }
@@ -5171,6 +5176,10 @@ html {
   --tw-divide-opacity: 1;
   border-color: rgb(226 232 240 / var(--tw-divide-opacity));
 }
+.divide-primary-500 > :not([hidden]) ~ :not([hidden]){
+  --tw-divide-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-divide-opacity));
+}
 .self-start{
   align-self: flex-start;
 }
@@ -5554,6 +5563,10 @@ html {
   --tw-border-opacity: 1;
   border-color: rgb(113 113 122 / var(--tw-border-opacity));
 }
+.border-green-600{
+  --tw-border-opacity: 1;
+  border-color: rgb(22 163 74 / var(--tw-border-opacity));
+}
 .border-opacity-75{
   --tw-border-opacity: 0.75;
 }
@@ -6280,6 +6293,9 @@ html {
 .pt-8{
   padding-top: 2rem;
 }
+.pr-5{
+  padding-right: 1.25rem;
+}
 .text-left{
   text-align: left;
 }

diff --git a/packages/admin/public/mix-manifest.json b/packages/admin/public/mix-manifest.json
@@ -1,4 +1,4 @@
 {
     "/js/shopper.js": "/js/shopper.js?id=1b7bc571c5c58c741e3e45427e23dac5",
-    "/css/shopper.css": "/css/shopper.css?id=087f670f7701187e8a1f4aabe1daccae"
+    "/css/shopper.css": "/css/shopper.css?id=aa3691f84740bb3829659e4c86e003ee"
 }
diff --git a/packages/admin/resources/lang/en/words.php b/packages/admin/resources/lang/en/words.php
@@ -43,7 +43,7 @@
     'results' => 'results',
     'media' => 'Media',
     'hide' => 'Hide',
-    'show' => 'show',
+    'show' => 'Show',
 
     'pricing' => 'Pricing',
     'price' => 'Price',

diff --git a/packages/admin/resources/views/components/icons/facebook.blade.php b/packages/admin/resources/views/components/icons/facebook.blade.php
@@ -0,0 +1,3 @@
+<svg {{ $attributes  }} fill="currentColor" viewBox="0 0 20 20">
+    <path fill-rule="evenodd" d="M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V10h2.54V7.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V10h2.773l-.443 2.89h-2.33v6.988C16.343 19.128 20 14.991 20 10z" clip-rule="evenodd" />
+</svg>
diff --git a/packages/admin/resources/views/components/icons/instagram.blade.php b/packages/admin/resources/views/components/icons/instagram.blade.php
@@ -0,0 +1,3 @@
+<svg {{ $attributes }} fill="currentColor" viewBox="0 0 24 24">
+    <path d="M17.34 5.46a1.2 1.2 0 1 0 1.2 1.2 1.2 1.2 0 0 0-1.2-1.2zm4.6 2.42a7.59 7.59 0 0 0-.46-2.43 4.94 4.94 0 0 0-1.16-1.77 4.7 4.7 0 0 0-1.77-1.15 7.3 7.3 0 0 0-2.43-.47C15.06 2 14.72 2 12 2s-3.06 0-4.12.06a7.3 7.3 0 0 0-2.43.47 4.78 4.78 0 0 0-1.77 1.15 4.7 4.7 0 0 0-1.15 1.77 7.3 7.3 0 0 0-.47 2.43C2 8.94 2 9.28 2 12s0 3.06.06 4.12a7.3 7.3 0 0 0 .47 2.43 4.7 4.7 0 0 0 1.15 1.77 4.78 4.78 0 0 0 1.77 1.15 7.3 7.3 0 0 0 2.43.47C8.94 22 9.28 22 12 22s3.06 0 4.12-.06a7.3 7.3 0 0 0 2.43-.47 4.7 4.7 0 0 0 1.77-1.15 4.85 4.85 0 0 0 1.16-1.77 7.59 7.59 0 0 0 .46-2.43c0-1.06.06-1.4.06-4.12s0-3.06-.06-4.12zM20.14 16a5.61 5.61 0 0 1-.34 1.86 3.06 3.06 0 0 1-.75 1.15 3.19 3.19 0 0 1-1.15.75 5.61 5.61 0 0 1-1.86.34c-1 .05-1.37.06-4 .06s-3 0-4-.06a5.73 5.73 0 0 1-1.94-.3 3.27 3.27 0 0 1-1.1-.75 3 3 0 0 1-.74-1.15 5.54 5.54 0 0 1-.4-1.9c0-1-.06-1.37-.06-4s0-3 .06-4a5.54 5.54 0 0 1 .35-1.9A3 3 0 0 1 5 5a3.14 3.14 0 0 1 1.1-.8A5.73 5.73 0 0 1 8 3.86c1 0 1.37-.06 4-.06s3 0 4 .06a5.61 5.61 0 0 1 1.86.34 3.06 3.06 0 0 1 1.19.8 3.06 3.06 0 0 1 .75 1.1 5.61 5.61 0 0 1 .34 1.9c.05 1 .06 1.37.06 4s-.01 3-.06 4zM12 6.87A5.13 5.13 0 1 0 17.14 12 5.12 5.12 0 0 0 12 6.87zm0 8.46A3.33 3.33 0 1 1 15.33 12 3.33 3.33 0 0 1 12 15.33z" />
+</svg>
diff --git a/packages/admin/resources/views/components/icons/twitter.blade.php b/packages/admin/resources/views/components/icons/twitter.blade.php
@@ -0,0 +1,3 @@
+<svg {{ $attributes }} fill="currentColor" viewBox="0 0 20 20">
+    <path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" />
+</svg>
diff --git a/packages/admin/resources/views/components/layouts/app/sidebar/content.blade.php b/packages/admin/resources/views/components/layouts/app/sidebar/content.blade.php
@@ -41,7 +41,9 @@
                     target="_blank"
                     class="flex items-center p-2 text-sm leading-5 font-medium rounded-md text-secondary-500 hover:bg-secondary-100 hover:text-secondary-700 dark:text-secondary-400 dark:hover:bg-secondary-700 dark:hover:text-white transition ease-in-out duration-150"
                 >
-                    <x-heroicon-o-code class="w-6 h-6 mr-2 text-blue-500" />
+                    <svg class="w-6 h-6 mr-2 text-blue-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M22 9H2m12 8.5 2.5-2.5-2.5-2.5m-4 0L7.5 15l2.5 2.5M2 7.8v8.4c0 1.68 0 2.52.327 3.162a3 3 0 0 0 1.311 1.311C4.28 21 5.12 21 6.8 21h10.4c1.68 0 2.52 0 3.162-.327a3 3 0 0 0 1.311-1.311C22 18.72 22 17.88 22 16.2V7.8c0-1.68 0-2.52-.327-3.162a3 3 0 0 0-1.311-1.311C19.72 3 18.88 3 17.2 3H6.8c-1.68 0-2.52 0-3.162.327a3 3 0 0 0-1.311 1.311C2 5.28 2 6.12 2 7.8Z"/>
+                    </svg>
                     {{ __('shopper::messages.dashboard.cards.doc_title') }}
                 </a>
 

diff --git a/packages/admin/resources/views/livewire/attributes/create.blade.php b/packages/admin/resources/views/livewire/attributes/create.blade.php
@@ -12,7 +12,7 @@
 
     <div class="mt-8 grid sm:grid-cols-6 gap-4 sm:gap-6">
         <div class="sm:col-span-4">
-            <div class="bg-white rounded-lg shadow ring-1 ring-secondary-200 dark:ring-secondary-700 p-4 sm:p-5 grid gap-4 sm:grid-cols-2 sm:gap-6 dark:bg-secondary-800">
+            <x-shopper::card class="p-4 sm:p-5 grid gap-4 sm:grid-cols-2 sm:gap-6">
                 <x-shopper::forms.group :label="__('shopper::layout.forms.label.name')" for="name" class="sm:col-span-1" :error="$errors->first('name')" isRequired>
                     <x-shopper::forms.input wire:model="name" id="name" type="text" autocomplete="off" />
                 </x-shopper::forms.group>
@@ -58,11 +58,11 @@
                         </div>
                     </div>
                 </div>
-            </div>
+            </x-shopper::card>
         </div>
         <div class="sm:col-span-2">
             <aside class="sticky top-6 space-y-5">
-                <div class="bg-white rounded-lg shadow ring-1 ring-secondary-200 dark:ring-secondary-700 overflow-hidden divide-y divide-secondary-200 dark:bg-secondary-800 dark:divide-secondary-700">
+                <x-shopper::card class="overflow-hidden divide-y divide-secondary-200 dark:divide-secondary-700">
                     <x-shopper::forms.group :label="__('shopper::layout.forms.label.slug')" for="slug" class="p-4 sm:p-5" :error="$errors->first('slug')" isRequired>
                         <x-shopper::forms.input wire:model="slug" id="slug" type="text" autocomplete="off" />
                     </x-shopper::forms.group>
@@ -82,7 +82,7 @@
                             </div>
                         </div>
                     </div>
-                </div>
+                </x-shopper::card>
             </aside>
         </div>
     </div>

diff --git a/packages/admin/resources/views/livewire/attributes/edit.blade.php b/packages/admin/resources/views/livewire/attributes/edit.blade.php
@@ -46,10 +46,10 @@ class="rounded-md border border-red-200 bg-red-50 px-3 py-2"
             </x-slot>
         </x-shopper::heading>
 
-        <div class="mt-8 space-y-5">
+        <div class="mt-8">
             <div class="grid sm:grid-cols-6 gap-4 sm:gap-6">
                 <div class="sm:col-span-4">
-                    <div class="bg-white rounded-lg shadow ring-1 ring-secondary-200 dark:ring-secondary-700 p-4 sm:p-5 grid gap-4 sm:grid-cols-2 sm:gap-6 dark:bg-secondary-800">
+                    <x-shopper::card class="p-4 sm:p-5 grid gap-4 sm:grid-cols-2 sm:gap-6">
                         <x-shopper::forms.group :label="__('shopper::layout.forms.label.name')" for="name" class="sm:col-span-1" :error="$errors->first('name')" isRequired>
                             <x-shopper::forms.input wire:model="name" id="name" type="text" autocomplete="off" />
                         </x-shopper::forms.group>
@@ -95,31 +95,31 @@ class="rounded-md border border-red-200 bg-red-50 px-3 py-2"
                                 </div>
                             </div>
                         </div>
-                    </div>
+                    </x-shopper::card>
                 </div>
                 <div class="sm:col-span-2">
                     <aside class="sticky top-6 space-y-5">
-                        <div class="bg-white rounded-lg shadow ring-1 ring-secondary-200 dark:ring-secondary-700 overflow-hidden divide-y divide-secondary-200 dark:bg-secondary-800 dark:divide-secondary-700">
+                        <x-shopper::card class="overflow-hidden divide-y divide-secondary-200 dark:divide-secondary-700">
                             <x-shopper::forms.group :label="__('shopper::layout.forms.label.slug')" for="slug" class="p-4 sm:p-5" :error="$errors->first('slug')" isRequired>
                                 <x-shopper::forms.input wire:model="slug" id="slug" type="text" autocomplete="off" />
                             </x-shopper::forms.group>
                             <div class="p-4 sm:p-5">
                                 <div class="relative flex items-start">
                                     <div class="flex items-center h-5">
-                                    <span wire:model="isEnabled" role="checkbox" tabindex="0" x-on:click="$dispatch('input', !on); on = !on" @keydown.space.prevent="on = !on" :aria-checked="on.toString()" aria-checked="false" x-bind:class="{ 'bg-secondary-200 dark:bg-secondary-700': !on, 'bg-primary-600': on }" class="bg-secondary-200 relative inline-flex shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:shadow-outline-brand">
-                                        <input type="hidden" x-ref="input" aria-label="Visible" x-model="on" />
-                                        <span aria-hidden="true" x-bind:class="{ 'translate-x-5': on, 'translate-x-0': !on }" class="translate-x-0 inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-200"></span>
-                                    </span>
+                                        <span wire:model="isEnabled" role="checkbox" tabindex="0" x-on:click="$dispatch('input', !on); on = !on" @keydown.space.prevent="on = !on" :aria-checked="on.toString()" aria-checked="false" x-bind:class="{ 'bg-secondary-200 dark:bg-secondary-700': !on, 'bg-primary-600': on }" class="bg-secondary-200 relative inline-flex shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:shadow-outline-brand">
+                                            <input type="hidden" x-ref="input" aria-label="Visible" x-model="on" />
+                                            <span aria-hidden="true" x-bind:class="{ 'translate-x-5': on, 'translate-x-0': !on }" class="translate-x-0 inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-200"></span>
+                                        </span>
                                     </div>
                                     <div class="ml-3 text-sm leading-5">
-                                        <x-shopper::label for="online" :value="__('shopper::layout.forms.actions.enabled')"></x-shopper::label>
+                                        <x-shopper::label for="online" :value="__('shopper::layout.forms.actions.enabled')" />
                                         <p class="text-sm text-secondary-500 dark:text-secondary-400">
                                             {{ __('shopper::pages/attributes.attribute_visibility') }}
                                         </p>
                                     </div>
                                 </div>
                             </div>
-                        </div>
+                        </x-shopper::card>
                     </aside>
                 </div>
             </div>