Merge pull request #34 from mkocansey/development

Fixed dark mode label for component/textarea and notification
mkocansey · Jun 8, 2022 · 2b5b09e · 2b5b09e
2 parents 43055fd + d1d8ed8
commit 2b5b09e
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 9 deletions.
diff --git a/src/resources/assets/compiled/css/bladewind-ui.min.css b/src/resources/assets/compiled/css/bladewind-ui.min.css
@@ -488,8 +488,12 @@ table.with-hover-effect tr:nth-child(even):hover>td:last-child{--tw-border-opaci
 .right-4{right:1rem}
 .top-10{top:2.5rem}
 .bottom-10{bottom:2.5rem}
-.right-0{right:0px}
+.-right-1{right:-0.25rem}
+.-top-1{top:-0.25rem}
 .left-1\/2{left:50%}
+.right-1{right:0.25rem}
+.top-1{top:0.25rem}
+.right-0{right:0px}
 .z-40{z-index:40}
 .z-30{z-index:30}
 .z-50{z-index:50}
@@ -810,8 +814,6 @@ to{transform:rotate(360deg)}}
 .bg-purple-200\/80{background-color:rgb(233 213 255 / 0.8)}
 .bg-orange-200\/80{background-color:rgb(254 215 170 / 0.8)}
 .bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219 / var(--tw-bg-opacity))}
-.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235 / var(--tw-bg-opacity))}
-.bg-orange-400{--tw-bg-opacity:1;background-color:rgb(251 146 60 / var(--tw-bg-opacity))}
 .object-cover{-o-object-fit:cover;object-fit:cover}
 .object-top{-o-object-position:top;object-position:top}
 .p-3{padding:0.75rem}
@@ -895,9 +897,9 @@ to{transform:rotate(360deg)}}
 .text-gray-600\/80{color:rgb(75 85 99 / 0.8)}
 .text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219 / var(--tw-text-opacity))}
 .text-gray-400\/80{color:rgb(156 163 175 / 0.8)}
+.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68 / var(--tw-text-opacity))}
 .text-blue-900\/40{color:rgb(30 58 138 / 0.4)}
 .text-green-500{--tw-text-opacity:1;color:rgb(34 197 94 / var(--tw-text-opacity))}
-.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68 / var(--tw-text-opacity))}
 .text-yellow-500{--tw-text-opacity:1;color:rgb(234 179 8 / var(--tw-text-opacity))}
 .text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}
 .text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity))}
@@ -976,6 +978,7 @@ to{transform:rotate(360deg)}}
 .hover\:bg-black:hover{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}
 .hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}
 .hover\:bg-blue-200:hover{--tw-bg-opacity:1;background-color:rgb(191 219 254 / var(--tw-bg-opacity))}
+.hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}
 .hover\:bg-opacity-75:hover{--tw-bg-opacity:0.75}
 .hover\:\!text-gray-300:hover{--tw-text-opacity:1 !important;color:rgb(209 213 219 / var(--tw-text-opacity)) !important}
 .hover\:text-gray-600:hover{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}
@@ -1020,17 +1023,25 @@ to{transform:rotate(360deg)}}
 .dark\:border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81 / var(--tw-border-opacity))}
 .dark\:bg-slate-600{--tw-bg-opacity:1;background-color:rgb(71 85 105 / var(--tw-bg-opacity))}
 .dark\:bg-slate-700{--tw-bg-opacity:1;background-color:rgb(51 65 85 / var(--tw-bg-opacity))}
+.dark\:bg-slate-500{--tw-bg-opacity:1;background-color:rgb(100 116 139 / var(--tw-bg-opacity))}
 .dark\:bg-gray-600{--tw-bg-opacity:1;background-color:rgb(75 85 99 / var(--tw-bg-opacity))}
 .dark\:px-2{padding-left:0.5rem;padding-right:0.5rem}
 .dark\:text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))}
 .dark\:text-gray-100{--tw-text-opacity:1;color:rgb(243 244 246 / var(--tw-text-opacity))}
 .dark\:text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}
 .dark\:text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219 / var(--tw-text-opacity))}
+.dark\:\!text-slate-800{--tw-text-opacity:1 !important;color:rgb(30 41 59 / var(--tw-text-opacity)) !important}
 .dark\:ring-slate-600{--tw-ring-opacity:1;--tw-ring-color:rgb(71 85 105 / var(--tw-ring-opacity))}
 .hover\:dark\:bg-slate-500:hover{--tw-bg-opacity:1;background-color:rgb(100 116 139 / var(--tw-bg-opacity))}
+.dark\:hover\:bg-slate-700:hover{--tw-bg-opacity:1;background-color:rgb(51 65 85 / var(--tw-bg-opacity))}
 .dark\:focus\:border-slate-900:focus{--tw-border-opacity:1;border-color:rgb(15 23 42 / var(--tw-border-opacity))}
 .peer:focus ~ .dark\:peer-focus\:pt-1{padding-top:0.25rem}}
 @media (min-width: 640px){
+.sm\:w-1\/3{width:33.333333%}
 .sm\:w-1\/4{width:25%}}
 @media (min-width: 768px){
-.md\:w-full{width:100%}}
+.md\:w-1\/4{width:25%}
+.md\:w-full{width:100%}
+.md\:w-1\/6{width:16.666667%}
+.md\:w-1\/12{width:8.333333%}
+.md\:w-2\/6{width:33.333333%}}
diff --git a/src/resources/assets/compiled/js/dropdown.js b/src/resources/assets/compiled/js/dropdown.js
@@ -15,7 +15,6 @@ dom_els(`.${el_name} .dropdown-items>div.dd-item`).forEach((el) => {
         let user_function = el.getAttribute('data-user-function');
         if(parent_tag != null) {
             dom_el(`.bw-${parent_tag}`).value = value;
-            console.log(el.innerHTML);
             dom_el(`.${parent_tag}>button>label`).innerHTML = `<div class="flex items-center">${el.innerHTML}</div>`;
             el.parentElement.parentElement.classList.toggle('hidden');
 

diff --git a/src/resources/views/components/notification.blade.php b/src/resources/views/components/notification.blade.php
@@ -18,7 +18,7 @@
         'center_bottom' => 'bottom-10',
     ]
 ])
-<div class="fixed {{ $position_css[str_replace(' ', '_', $position)] }} z-50 hidden border-2 bw-notification bg-white shadow-lg p-4 rounded-lg w-[84%] sm:w-1/3 md:w-1/4">
+<div class="fixed {{ $position_css[str_replace(' ', '_', $position)] }} z-50 hidden border-2 bw-notification bg-white shadow-lg p-4 rounded-lg w-[84%] sm:w-1/4 md:w-2/6">
     <div class="flex">
         <div class="flex-none pr-4">
             <x-bladewind::modal-icon />

diff --git a/src/resources/views/components/textarea.blade.php b/src/resources/views/components/textarea.blade.php
@@ -38,7 +38,7 @@
     $placeholder_color = ($label !== '') ? 'placeholder-transparent' : '';
 @endphp
 <div class="relative w-full @if($add_clearing == 'true') mb-2 @endif">
-    <textarea {{ $attributes->merge(['class' => "bw-input w-full border border-slate-300/50 dark:text-white dark:border-slate-700 dark:bg-gray-600 dark:focus:border-slate-900 peer $is_required $name $placeholder_color"]) }} 
+    <textarea {{ $attributes->merge(['class' => "bw-input w-full border border-slate-300/50 dark:text-white dark:border-slate-700 dark:bg-slate-600 dark:focus:border-slate-900 peer $is_required $name $placeholder_color"]) }} 
         id="{{ $name }}" 
         name="{{ $name }}" 
     @if($error_message != '') 
@@ -49,7 +49,7 @@
         placeholder="{{ ($label !== '') ? $label : $placeholder }}{{$required_symbol}}">{{$selected_value}}</textarea>
     @if($error_message != '')<div class="text-red-500 text-xs p-1 {{ $name }}-inline-error hidden">{{$error_message}}</div>@endif
     @if($label !== '')
-        <label for="{{ $name }}" class="form-label bg-white text-blue-900/40 dark:bg-gray-600 dark:text-gray-400" onclick="dom_el('.{{$name}}').focus()">{{ $label }} 
+        <label for="{{ $name }}" class="form-label bg-white text-blue-900/40 dark:bg-slate-600 dark:text-gray-300 dark:rounded-sm dark:px-2 dark:peer-focus:pt-1" onclick="dom_el('.{{$name}}').focus()">{{ $label }} 
             @if($required == 'true') <span class="text-red-400/80" style="zoom:90%"><svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 inline-block -mt-1" viewBox="0 0 20 20" fill="currentColor">
   <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
 </svg></span>@endif