General UI cleanup to match base dark theme colour bg-dark-700

mkocansey · Jun 17, 2024 · fd72ae0 · fd72ae0
1 parent ed04ad7
commit fd72ae0
Show file tree

Hide file tree

Showing 12 changed files with 20 additions and 1,660 deletions.
diff --git a/public/css/bladewind-ui.min.css b/public/css/bladewind-ui.min.css
diff --git a/resources/assets/css/app.css b/resources/assets/css/app.css
@@ -1,10 +1,10 @@
 @import './button.css';
-@import './dropdown.css';
 @import './input.css';
-@import './popup.min.css';
-@import './side-nav.css';
 @import './table.css';
 @import './tabs.css';
+@import './dropdown.css';
+@import './popup.min.css';
+@import './side-nav.css';
 
 @import "tailwindcss/base";
 @import "tailwindcss/components";

diff --git a/resources/assets/css/input.css b/resources/assets/css/input.css
@@ -67,7 +67,7 @@
     }
 
     .ql-toolbar.ql-snow {
-        @apply dark:!bg-dark-700 !rounded-t-lg !border-2 !border-slate-300/50 dark:!border-dark-600 dark:!bg-transparent
+        @apply !rounded-t-lg !border-2 !border-slate-300/50 dark:!border-dark-600 dark:!bg-transparent
     }
 
     .ql-toolbar.ql-snow .ql-stroke, .ql-stroke.ql-thin {
@@ -79,10 +79,11 @@
     }
 
     .ql-container.ql-snow {
-        @apply dark:!bg-dark-700 !rounded-b-lg !border-2 !border-slate-300/50 dark:!border-dark-600 dark:!bg-transparent
+        @apply !rounded-b-lg !border-2 !border-slate-300/50 dark:!border-dark-600 dark:!bg-transparent
     }
 
     .ql-editor.ql-blank::before {
-        @apply dark:!text-dark-400/60 !not-italic
+        @apply !text-slate-300 dark:!text-dark-400/60 !not-italic
     }
+
 }
diff --git a/resources/assets/css/tabs.css b/resources/assets/css/tabs.css
@@ -89,7 +89,7 @@
     }
 
     .bw-tab.system .atab span.is-active {
-        @apply !border-b-2 !border-b-white dark:!border-b-dark-800 mb-[-2px]
+        @apply !border-b-2 !border-b-white dark:!border-b-dark-700 mb-[-2px]
     }
 
     .bw-tab.system.primary {
@@ -121,7 +121,7 @@
     }
 
     .bw-tab.system.gray {
-        @apply border-b border-gray-500 dark:border-gray-700
+        @apply border-b border-gray-500 dark:border-gray-600
     }
 
     .bw-tab.system.pink {

diff --git a/resources/views/components/card.blade.php b/resources/views/components/card.blade.php
@@ -44,7 +44,7 @@
     $has_border_css =   ($has_border) ? 'border border-slate-200 dark:border-dark-600/60 focus:outline-none' : '';
     $header_compact_css =   (!$header && ! $compact) ? 'p-8' : (($compact) ? 'p-4' : '');
     $shadow_css =   ($has_shadow) ? 'shadow-sm shadow-slate-200/50 dark:shadow-dark-800/70' : '';
-    $hover_css =  ($hover_effect) ? 'hover:shadow-sm hover:dark:shadow-dark-900 cursor-pointer' : '';
+    $hover_css =  ($hover_effect) ? 'hover:shadow-slate-400 hover:dark:shadow-dark-900 cursor-pointer' : '';
 @endphp
 <div {{ $attributes->merge([ 'class' => "$class $contact_card_css $has_border_css $header_compact_css $shadow_css $hover_css"]) }}>
     @if($header)

diff --git a/resources/views/components/code.blade.php b/resources/views/components/code.blade.php
@@ -38,7 +38,7 @@
     $name = preg_replace('/[\s-]/', '_', $name);
     $mask = filter_var($mask, FILTER_VALIDATE_BOOLEAN);
 
-    $input_css = ($size !== 'big') ? " w-14 text-xl" : "w-[83px] text-5xl";
+    $input_css = ($size !== 'big') ? " w-14 text-xl" : "w-[75px] text-5xl";
     $cloak_size = ($size == 'big') ? " h-24" : "h-16";
 @endphp
 

diff --git a/resources/views/components/filepicker.blade.php b/resources/views/components/filepicker.blade.php
@@ -40,8 +40,8 @@
     $image_file_types = [ "png", "jpg", "jpeg", "gif", "svg" ];
 @endphp
 <div class="border-gray-500"></div>
-<div class="relative px-2 py-3 border-2 border-dashed border-gray-300 dark:text-dark-300 dark:border-dark-600
-    dark:bg-dark-800 hover:dark:border-dark-700 text-center cursor-pointer rounded-md bw-fp-{{ $name }} @if($add_clearing) mb-3 @endif">
+<div class="relative px-2 py-3 border-2 border-dotted border-gray-300 hover:border-gray-400 dark:text-dark-300 dark:border-dark-600
+    dark:bg-transparent hover:dark:border-dark-500 text-center cursor-pointer rounded-md bw-fp-{{ $name }} @if($add_clearing) mb-3 @endif">
     <x-bladewind::icon name="document-text"
                        class="h-6 w-6 absolute z-20 left-4 rtl:!right-4 rtl:!left-[unset] text-gray-300 dark:text-dark-500"/>
     <x-bladewind::icon name="x-circle"

diff --git a/resources/views/components/list-view.blade.php b/resources/views/components/list-view.blade.php
@@ -8,6 +8,6 @@
     $compact = filter_var($compact, FILTER_VALIDATE_BOOLEAN);
 @endphp
 <ul role="list"
-    class="@if(!$transparent)bg-white dark:bg-slate-800/80 @endif divide-y divide-slate-100 dark:divide-slate-700/50 rounded-tl-lg rounded-tr-lg rounded-br-lg rounded-bl-lg {{$class}}">
+    class="@if(!$transparent)bg-white dark:bg-transparent @endif divide-y divide-slate-100 dark:divide-dark-600/50 rounded-tl-lg rounded-tr-lg rounded-br-lg rounded-bl-lg {{$class}}">
     {{ $slot }}
 </ul>
diff --git a/resources/views/components/progress-bar.blade.php b/resources/views/components/progress-bar.blade.php
@@ -59,7 +59,7 @@
                     class="opacity-{{$percentage_label_opacity}}">{{ $percentage}}%</span> {{$percentage_suffix}}
         </div>
     @endif
-    <div class="@if(!$transparent) bg-slate-200/70 dark:bg-dark-800 w-full @endif mt-1 my-2 rounded-full">
+    <div class="@if(!$transparent) bg-slate-200/70 dark:bg-dark-800/70 w-full @endif mt-1 my-2 rounded-full">
         <div style="width: {{$percentage}}%"
              class="text-center py-1 {{$bar_color}} {{$css_override}} rounded-full bar-width animate__animated animate__fadeIn {{$bar_class}}">
             @if($show_percentage_label && $show_percentage_label_inline)

diff --git a/resources/views/components/select.blade.php b/resources/views/components/select.blade.php
@@ -194,9 +194,9 @@ class="hidden reset size-6 text-white fill-gray-400/70 hover:fill-gray-400 dark:
         </div>
     </div>
     <div class="w-full absolute z-30 rounded-br-lg rounded-bl-lg bg-white shadow-sm shadow-slate-400 border-2 
-        border-blue-400 dark:text-slate-300 dark:border-slate-700 dark:bg-dark-700 border-t-0 -mt-1.5
+        border-blue-400 dark:text-slate-300 dark:border-dark-600 dark:bg-dark-700 border-t-0 -mt-1.5
         hidden bw-select-items-container overflow-scroll max-h-64 animate__animated animate__fadeIn animate__faster">
-        <div class="sticky top-0 min-w-full bg-slate-100 dark:bg-slate-700 py-1 pr-0 -pl-1 @if(!$searchable) hidden @endif">
+        <div class="sticky top-0 min-w-full bg-slate-100 dark:bg-transparent py-1 pr-0 -pl-1 @if(!$searchable) hidden @endif">
             <x-bladewind::input
                     class="!border-0 !border-b !rounded-none focus:!border-slate-300 dark:focus:!border-slate-600 !w-full !text-sm bw_search"
                     add_clearing="false"

diff --git a/resources/views/components/statistic.blade.php b/resources/views/components/statistic.blade.php
@@ -29,7 +29,7 @@
     if (!$hasShadow) $has_shadow = $hasShadow;
 @endphp
 
-<div class="bw-statistic bg-white dark:bg-slate-800 dark:border dark:border-slate-700/50 p-6 rounded-md relative @if($has_shadow)shadow shadow-gray-200/40 dark:shadow-slate-900 @endif {{$class}}">
+<div class="bw-statistic bg-white dark:bg-dark-800/30 border border-gray-100/80 dark:border-dark-600/60 focus:outline-none p-6 rounded-md relative @if($has_shadow) drop-shadow-sm shadow-sm shadow-slate-200 dark:shadow-dark-800/70 @endif {{$class}}">
     <div class="flex space-x-4">
         @if($icon !== '' && $icon_position=='left')
             <div class="grow-0 icon">{!! $icon !!}</div>

diff --git a/resources/views/components/textarea.blade.php b/resources/views/components/textarea.blade.php
@@ -75,6 +75,7 @@
 </div>
 @if($toolbar)
     @once
+        {{--        <span class="hidden ql-toolbar ql-snow ql-stroke ql-thin ql-container ql-editor ql-blank"></span>--}}
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.js"></script>
         <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css" rel="stylesheet"/>
         <script>