Colors moved to template files, and namespace cleanups

app/resources/views/logs/show.blade.php

@@ -12,14 +12,52 @@
 @push('page_styles')
     <style>
         body {overflow-y:scroll;}
-        @foreach ($levels as $level => $colors)
+        {{--@foreach ($levels as $level => $colors)
             .{{$level}} {background-color: {{$colors->background}}; color: {{$colors->text}};}
-        @endforeach
+        @endforeach--}}
     </style>
 @endpush
 
 @push('page_scripts')
     <script type="text/javascript">
+        const colors = {
+            debug: {
+                color: '#000',
+                background: '#fff'
+            },
+            info: {
+                color: '#fff',
+                background: '#2727e8'
+            },
+            notice: {
+                color: '#fff',
+                background: '#55f'
+            },
+            warning: {
+                color: '#000',
+                background: '#f5f580'
+            },
+            error: {
+                color: '#fff',
+                background: '#464646'
+            },
+            critical: {
+                color: '#fff',
+                background: '#cb0000'
+            },
+            alert: {
+                color: '#fff',
+                background: '#ec6060'
+            },
+            emergency: {
+                color: '#fff',
+                background: '#b95757'
+            },
+            deprecated: {
+                color: '#fff',
+                background: '#ce4000'
+            }
+        }
         const icons = {
             debug: 'bug',
             info: 'search',
@@ -159,7 +197,18 @@
                 ob.observe(watch)
             }
         }
+
+        function buildColors() {
+            const styleDOM = document.createElement('style')
+            const styles = []
+            Object.keys(colors).forEach(level => {
+                styles.push('.' + level + ' {color: ' + colors[level].color + '; background-color: ' + colors[level].background + '}')
+            })
+            styleDOM.innerHTML = styles.join("\n")
+            document.getElementsByTagName('head')[0].appendChild(styleDOM)
+        }
         $(document).ready(() => {
+            buildColors()
             logs.setup('logs')
         })
     </script>