adjust severity colours in light mode to make it more readable

arukompas · arukompas · commit 586c4fa3b15b · 2022-08-25T16:59:45.000+03:00
diff --git a/public/app.css b/public/app.css
diff --git a/resources/css/app.scss b/resources/css/app.scss
@@ -11,10 +11,10 @@
             @apply bg-emerald-50 dark:bg-emerald-800 dark:bg-opacity-40;
         }
         .log-level-indicator {
-            @apply bg-emerald-600 dark:bg-emerald-500;
+            @apply bg-emerald-700 dark:bg-emerald-500;
         }
         .log-level {
-            @apply text-emerald-600 dark:text-emerald-500;
+            @apply text-emerald-700 dark:text-emerald-500;
         }
     }
 
@@ -23,10 +23,10 @@
             @apply bg-sky-50 dark:bg-sky-800 dark:bg-opacity-40;
         }
         .log-level-indicator {
-            @apply bg-sky-600 dark:bg-sky-500;
+            @apply bg-sky-700 dark:bg-sky-500;
         }
         .log-level {
-            @apply text-sky-600 dark:text-sky-500;
+            @apply text-sky-700 dark:text-sky-500;
         }
     }
 
@@ -35,10 +35,10 @@
             @apply bg-amber-50 dark:bg-amber-800 dark:bg-opacity-40;
         }
         .log-level-indicator {
-            @apply bg-amber-600 dark:bg-amber-400;
+            @apply bg-amber-700 dark:bg-amber-400;
         }
         .log-level {
-            @apply text-amber-600 dark:text-amber-400;
+            @apply text-amber-700 dark:text-amber-400;
         }
     }
 
@@ -47,10 +47,10 @@
             @apply bg-rose-50 dark:bg-rose-800 dark:bg-opacity-40;
         }
         .log-level-indicator {
-            @apply bg-rose-600 dark:bg-rose-400;
+            @apply bg-rose-700 dark:bg-rose-400;
         }
         .log-level {
-            @apply text-rose-600 dark:text-rose-400;
+            @apply text-rose-700 dark:text-rose-400;
         }
     }
 
@@ -59,10 +59,10 @@
             @apply bg-gray-50 dark:bg-gray-800 dark:bg-opacity-40;
         }
         .log-level-indicator {
-            @apply bg-gray-600 dark:bg-gray-400;
+            @apply bg-gray-700 dark:bg-gray-400;
         }
         .log-level {
-            @apply text-gray-600 dark:text-gray-400;
+            @apply text-gray-700 dark:text-gray-400;
         }
     }
 }
@@ -86,10 +86,10 @@
         }
 
         &.active {
-            @apply border-emerald-600 bg-emerald-500 text-white
+            @apply border-emerald-700 bg-emerald-600 text-white
               dark:border-emerald-600 dark:bg-emerald-700;
             &:hover {
-                @apply bg-emerald-600
+                @apply bg-emerald-500
                   dark:bg-emerald-800;
             }
             .checkmark {
@@ -118,11 +118,11 @@
         }
 
         &.active {
-            @apply border-sky-600 bg-sky-500 text-white
+            @apply border-sky-700 bg-sky-600 text-white
               dark:border-sky-600 dark:bg-sky-700;
 
             &:hover {
-                @apply bg-sky-600
+                @apply bg-sky-500
                   dark:bg-sky-800;
             }
             .checkmark {
@@ -151,11 +151,11 @@
         }
 
         &.active {
-            @apply border-amber-600 bg-amber-500 text-white
+            @apply border-amber-700 bg-amber-600 text-white
               dark:border-amber-600 dark:bg-amber-700;
 
             &:hover {
-                @apply bg-amber-600
+                @apply bg-amber-500
                   dark:bg-amber-800;
             }
             & .checkmark {
@@ -184,11 +184,11 @@
         }
 
         &.active {
-            @apply border-rose-600 bg-rose-500 text-white
+            @apply border-rose-700 bg-rose-600 text-white
               dark:border-rose-600 dark:bg-rose-700;
 
             &:hover {
-                @apply bg-rose-600
+                @apply bg-rose-500
                   dark:bg-rose-800;
             }
             & .checkmark {
@@ -217,11 +217,11 @@
         }
 
         &.active {
-            @apply border-gray-600 bg-gray-500 text-white
+            @apply border-gray-700 bg-gray-600 text-white
               dark:border-gray-600 dark:bg-gray-700;
 
             &:hover {
-                @apply bg-gray-600
+                @apply bg-gray-500
                   dark:bg-gray-800;
             }
             & .checkmark {
@@ -249,9 +249,16 @@
         }
 
         .log-item > td.log-level-icon {
-            @apply opacity-80 whitespace-nowrap border-t border-gray-200 dark:border-gray-700 py-2 pl-4 pr-2 sm:pl-6 lg:pl-8;
+            @apply whitespace-nowrap border-t border-gray-200 dark:border-gray-700 py-2 pl-4 pr-2 sm:pl-6 lg:pl-8;
             & > svg {
-                @apply h-5 w-5;
+                @apply opacity-75 h-5 w-5;
+            }
+        }
+
+        &.first {
+            .log-item > td,
+            .log-item > td.log-level-icon {
+                @apply border-t-transparent;
             }
         }
 
diff --git a/resources/views/livewire/log-list.blade.php b/resources/views/livewire/log-list.blade.php
@@ -10,7 +10,7 @@
                 <div>@include('log-viewer::partials.log-list-level-buttons')</div>
                 @endisset
             </div>
-            <div class="flex-1 flex items-center @empty($selectedFileName) justify-end @endempty">
+            <div class="flex-1 flex items-center @empty($selectedFileName) justify-end @endempty min-h-[38px]">
                 @isset($selectedFileName)
                 <div class="flex-1">@include('log-viewer::partials.search-input')</div>
                 <div class="ml-5">@include('log-viewer::partials.log-list-share-page-button')</div>
@@ -60,7 +60,7 @@ class="table-fixed min-w-full max-w-full border-separate"
 </thead>
 
 @forelse($logs as $index => $log)
-<tbody class="log-group" id="tbody-{{$index}}" data-index="{{ $index }}">
+<tbody class="log-group @if($index === 0) first @endif" id="tbody-{{$index}}" data-index="{{ $index }}">
     <tr class="log-item {{ $log->level->getClass() }}"
         x-on:click="$store.logViewer.toggle({{$index}})"
         x-bind:class="[$store.logViewer.isOpen({{$index}}) ? 'active' : '', $store.logViewer.shouldBeSticky({{$index}}) ? 'sticky z-2' : '']"
@@ -80,10 +80,10 @@ class="table-fixed min-w-full max-w-full border-separate"
     <tr x-show="$store.logViewer.isOpen({{$index}})"><td colspan="6"><pre class="log-stack">{{ $log->fullText }}</pre></td></tr>
 </tbody>
 @empty
-<tbody>
+<tbody class="log-group">
 <tr>
     <td colspan="6">
-        <div class="bg-white dark:bg-gray-800 dark:text-gray-200 rounded p-12">
+        <div class="bg-white text-gray-600 dark:bg-gray-800 dark:text-gray-200 p-12">
             <div class="text-center font-semibold">No results</div>
             @if(!empty($query))
             <div class="text-center mt-6">

Original file line number	Diff line number	Diff line change
`@@ -11,10 +11,10 @@`
`11`	`11`	`@apply bg-emerald-50 dark:bg-emerald-800 dark:bg-opacity-40;`
`12`	`12`	`}`
`13`	`13`	`.log-level-indicator {`
`14`		`- @apply bg-emerald-600 dark:bg-emerald-500;`
	`14`	`+ @apply bg-emerald-700 dark:bg-emerald-500;`
`15`	`15`	`}`
`16`	`16`	`.log-level {`
`17`		`- @apply text-emerald-600 dark:text-emerald-500;`
	`17`	`+ @apply text-emerald-700 dark:text-emerald-500;`
`18`	`18`	`}`
`19`	`19`	`}`
`20`	`20`
`@@ -23,10 +23,10 @@`
`23`	`23`	`@apply bg-sky-50 dark:bg-sky-800 dark:bg-opacity-40;`
`24`	`24`	`}`
`25`	`25`	`.log-level-indicator {`
`26`		`- @apply bg-sky-600 dark:bg-sky-500;`
	`26`	`+ @apply bg-sky-700 dark:bg-sky-500;`
`27`	`27`	`}`
`28`	`28`	`.log-level {`
`29`		`- @apply text-sky-600 dark:text-sky-500;`
	`29`	`+ @apply text-sky-700 dark:text-sky-500;`
`30`	`30`	`}`
`31`	`31`	`}`
`32`	`32`
`@@ -35,10 +35,10 @@`
`35`	`35`	`@apply bg-amber-50 dark:bg-amber-800 dark:bg-opacity-40;`
`36`	`36`	`}`
`37`	`37`	`.log-level-indicator {`
`38`		`- @apply bg-amber-600 dark:bg-amber-400;`
	`38`	`+ @apply bg-amber-700 dark:bg-amber-400;`
`39`	`39`	`}`
`40`	`40`	`.log-level {`
`41`		`- @apply text-amber-600 dark:text-amber-400;`
	`41`	`+ @apply text-amber-700 dark:text-amber-400;`
`42`	`42`	`}`
`43`	`43`	`}`
`44`	`44`
`@@ -47,10 +47,10 @@`
`47`	`47`	`@apply bg-rose-50 dark:bg-rose-800 dark:bg-opacity-40;`
`48`	`48`	`}`
`49`	`49`	`.log-level-indicator {`
`50`		`- @apply bg-rose-600 dark:bg-rose-400;`
	`50`	`+ @apply bg-rose-700 dark:bg-rose-400;`
`51`	`51`	`}`
`52`	`52`	`.log-level {`
`53`		`- @apply text-rose-600 dark:text-rose-400;`
	`53`	`+ @apply text-rose-700 dark:text-rose-400;`
`54`	`54`	`}`
`55`	`55`	`}`
`56`	`56`
`@@ -59,10 +59,10 @@`
`59`	`59`	`@apply bg-gray-50 dark:bg-gray-800 dark:bg-opacity-40;`
`60`	`60`	`}`
`61`	`61`	`.log-level-indicator {`
`62`		`- @apply bg-gray-600 dark:bg-gray-400;`
	`62`	`+ @apply bg-gray-700 dark:bg-gray-400;`
`63`	`63`	`}`
`64`	`64`	`.log-level {`
`65`		`- @apply text-gray-600 dark:text-gray-400;`
	`65`	`+ @apply text-gray-700 dark:text-gray-400;`
`66`	`66`	`}`
`67`	`67`	`}`
`68`	`68`	`}`
`@@ -86,10 +86,10 @@`
`86`	`86`	`}`
`87`	`87`
`88`	`88`	`&.active {`
`89`		`- @apply border-emerald-600 bg-emerald-500 text-white`
	`89`	`+ @apply border-emerald-700 bg-emerald-600 text-white`
`90`	`90`	`dark:border-emerald-600 dark:bg-emerald-700;`
`91`	`91`	`&:hover {`
`92`		`- @apply bg-emerald-600`
	`92`	`+ @apply bg-emerald-500`
`93`	`93`	`dark:bg-emerald-800;`
`94`	`94`	`}`
`95`	`95`	`.checkmark {`
`@@ -118,11 +118,11 @@`
`118`	`118`	`}`
`119`	`119`
`120`	`120`	`&.active {`
`121`		`- @apply border-sky-600 bg-sky-500 text-white`
	`121`	`+ @apply border-sky-700 bg-sky-600 text-white`
`122`	`122`	`dark:border-sky-600 dark:bg-sky-700;`
`123`	`123`
`124`	`124`	`&:hover {`
`125`		`- @apply bg-sky-600`
	`125`	`+ @apply bg-sky-500`
`126`	`126`	`dark:bg-sky-800;`
`127`	`127`	`}`
`128`	`128`	`.checkmark {`
`@@ -151,11 +151,11 @@`
`151`	`151`	`}`
`152`	`152`
`153`	`153`	`&.active {`
`154`		`- @apply border-amber-600 bg-amber-500 text-white`
	`154`	`+ @apply border-amber-700 bg-amber-600 text-white`
`155`	`155`	`dark:border-amber-600 dark:bg-amber-700;`
`156`	`156`
`157`	`157`	`&:hover {`
`158`		`- @apply bg-amber-600`
	`158`	`+ @apply bg-amber-500`
`159`	`159`	`dark:bg-amber-800;`
`160`	`160`	`}`
`161`	`161`	`& .checkmark {`
`@@ -184,11 +184,11 @@`
`184`	`184`	`}`
`185`	`185`
`186`	`186`	`&.active {`
`187`		`- @apply border-rose-600 bg-rose-500 text-white`
	`187`	`+ @apply border-rose-700 bg-rose-600 text-white`
`188`	`188`	`dark:border-rose-600 dark:bg-rose-700;`
`189`	`189`
`190`	`190`	`&:hover {`
`191`		`- @apply bg-rose-600`
	`191`	`+ @apply bg-rose-500`
`192`	`192`	`dark:bg-rose-800;`
`193`	`193`	`}`
`194`	`194`	`& .checkmark {`
`@@ -217,11 +217,11 @@`
`217`	`217`	`}`
`218`	`218`
`219`	`219`	`&.active {`
`220`		`- @apply border-gray-600 bg-gray-500 text-white`
	`220`	`+ @apply border-gray-700 bg-gray-600 text-white`
`221`	`221`	`dark:border-gray-600 dark:bg-gray-700;`
`222`	`222`
`223`	`223`	`&:hover {`
`224`		`- @apply bg-gray-600`
	`224`	`+ @apply bg-gray-500`
`225`	`225`	`dark:bg-gray-800;`
`226`	`226`	`}`
`227`	`227`	`& .checkmark {`
`@@ -249,9 +249,16 @@`
`249`	`249`	`}`
`250`	`250`
`251`	`251`	`.log-item > td.log-level-icon {`
`252`		`- @apply opacity-80 whitespace-nowrap border-t border-gray-200 dark:border-gray-700 py-2 pl-4 pr-2 sm:pl-6 lg:pl-8;`
	`252`	`+ @apply whitespace-nowrap border-t border-gray-200 dark:border-gray-700 py-2 pl-4 pr-2 sm:pl-6 lg:pl-8;`
`253`	`253`	`& > svg {`
`254`		`- @apply h-5 w-5;`
	`254`	`+ @apply opacity-75 h-5 w-5;`
	`255`	`+ }`
	`256`	`+ }`
	`257`	`+`
	`258`	`+ &.first {`
	`259`	`+ .log-item > td,`
	`260`	`+ .log-item > td.log-level-icon {`
	`261`	`+ @apply border-t-transparent;`
`255`	`262`	`}`
`256`	`263`	`}`
`257`	`264`