Fixed UI

Removed calls to custom primary color
Fixed screenreader text on all templates

Author: rappasoft

CHANGELOG.md

@@ -8,6 +8,10 @@ All notable changes to `laravel-livewire-tables` will be documented in this file
 
 - Added Bootstrap 5 theme
 
+### Changed
+
+- Removed calls to custom primary color with indigo
+
 ## [1.0.2] - 2021-04-17
 
 ### Changed

resources/views/bootstrap-4/includes/filter-pills.blade.php

@@ -15,7 +15,7 @@ class="badge badge-pill badge-info d-inline-flex align-items-center"
                         wire:click.prevent="removeFilter('{{ $key }}')"
                         class="text-white ml-2"
                     >
-                        <span class="sr-only">@lang('Remove sort option')</span>
+                        <span class="sr-only">@lang('Remove filter option')</span>
                         <svg style="width:.5em;height:.5em" stroke="currentColor" fill="none" viewBox="0 0 8 8">
                             <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
                         </svg>

resources/views/bootstrap-5/includes/filter-pills.blade.php

@@ -15,7 +15,7 @@ class="badge rounded-pill bg-info d-inline-flex align-items-center"
                         wire:click.prevent="removeFilter('{{ $key }}')"
                         class="text-white ms-2"
                     >
-                        <span class="sr-only">@lang('Remove sort option')</span>
+                        <span class="visually-hidden">@lang('Remove filter option')</span>
                         <svg style="width:.5em;height:.5em" stroke="currentColor" fill="none" viewBox="0 0 8 8">
                             <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
                         </svg>
@@ -27,7 +27,7 @@ class="text-white ms-2"
         <a
             href="#"
             wire:click.prevent="resetFilters"
-            class="badge rounded-pill bg-light"
+            class="badge rounded-pill bg-light text-dark text-decoration-none"
         >
             @lang('Clear')
         </a>

resources/views/bootstrap-5/includes/search.blade.php

@@ -8,13 +8,11 @@ class="form-control"
         >
 
         @if (isset($filters['search']) && strlen($filters['search']))
-            <div class="input-group-append">
-                <button wire:click="$set('filters.search', null)" class="btn btn-outline-secondary" type="button">
-                    <svg style="width:.75em;height:.75em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                    </svg>
-                </button>
-            </div>
+            <button wire:click="$set('filters.search', null)" class="btn btn-outline-secondary" type="button">
+                <svg style="width:.75em;height:.75em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+            </button>
         @endif
     </div>
 @endif

resources/views/bootstrap-5/includes/sorting-pills.blade.php

@@ -14,7 +14,7 @@ class="badge rounded-pill bg-info d-inline-flex align-items-center"
                     wire:click.prevent="removeSort('{{ $col }}')"
                     class="text-white ms-2"
                 >
-                    <span class="sr-only">@lang('Remove sort option')</span>
+                    <span class="visually-hidden">@lang('Remove sort option')</span>
                     <svg style="width:.5em;height:.5em" stroke="currentColor" fill="none" viewBox="0 0 8 8">
                         <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
                     </svg>
@@ -25,7 +25,7 @@ class="text-white ms-2"
         <a
             href="#"
             wire:click.prevent="resetSorts"
-            class="badge rounded-pill bg-light"
+            class="badge rounded-pill bg-light text-dark text-decoration-none"
         >
             @lang('Clear')
         </a>

resources/views/tailwind/includes/bulk-actions.blade.php

@@ -11,7 +11,7 @@ class="relative inline-block text-left z-10 w-full md:w-auto"
                     <button
                         @click="open = !open"
                         type="button"
-                        class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-primary-300 focus:shadow-outline-primary active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
+                        class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-indigo-300 focus:shadow-outline-indigo active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
                         id="options-menu"
                         aria-haspopup="true"
                         x-bind:aria-expanded="open"

resources/views/tailwind/includes/filter-pills.blade.php

@@ -6,16 +6,16 @@
             @if ($key !== 'search' && strlen($value))
                 <span
                     wire:key="filter-{{ $key }}"
-                    class="inline-flex items-center py-0.5 pl-2 pr-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-700"
+                    class="inline-flex items-center py-0.5 pl-2 pr-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-700"
                 >
                     {{ $filterNames[$key] ?? ucwords(strtr($key, ['_' => ' ', '-' => ' '])) }}: {{ ucwords(strtr($value, ['_' => ' ', '-' => ' '])) }}
 
                     <button
                         wire:click="removeFilter('{{ $key }}')"
                         type="button"
-                        class="flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-primary-400 hover:bg-primary-200 hover:text-primary-500 focus:outline-none focus:bg-primary-500 focus:text-white"
+                        class="flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:outline-none focus:bg-indigo-500 focus:text-white"
                     >
-                        <span class="sr-only">@lang('Remove sort option')</span>
+                        <span class="sr-only">@lang('Remove filter option')</span>
                         <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
                             <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
                         </svg>

resources/views/tailwind/includes/sorting-pills.blade.php

@@ -5,14 +5,14 @@
         @foreach($sorts as $col => $dir)
             <span
                 wire:key="sort-{{ $col }}"
-                class="inline-flex items-center py-0.5 pl-2 pr-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-700"
+                class="inline-flex items-center py-0.5 pl-2 pr-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-700"
             >
                 {{ $sortNames[$col] ?? ucwords(strtr($col, ['_' => ' ', '-' => ' '])) }}: {{ $dir === 'asc' ? 'A-Z' : 'Z-A' }}
 
                 <button
                     wire:click="removeSort('{{ $col }}')"
                     type="button"
-                    class="flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-primary-400 hover:bg-primary-200 hover:text-primary-500 focus:outline-none focus:bg-primary-500 focus:text-white"
+                    class="flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:outline-none focus:bg-indigo-500 focus:text-white"
                 >
                     <span class="sr-only">@lang('Remove sort option')</span>
                     <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">

resources/views/tailwind/includes/table.blade.php

@@ -29,7 +29,7 @@ class="rounded-md shadow-sm border-cool-gray-300 block transition duration-150 e
 
     <x-slot name="body">
         @if (count($bulkActions) && $selectPage && $rows->total() > $rows->count())
-            <x-livewire-tables::table.row wire:key="row-message" class="bg-primary-50">
+            <x-livewire-tables::table.row wire:key="row-message" class="bg-indigo-50">
                 <x-livewire-tables::table.cell :colspan="count($bulkActions) ? count($columns) + 1 : count($columns)">
                     @unless ($selectAll)
                         <div>