From 239e28630f9490661af7957f2c8be1cec0b3e3a9 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Thu, 6 Nov 2025 08:43:43 +0100
Subject: [PATCH] style: update background colors to use gray-50 for
 consistency in auth views

---
 resources/css/app.css                         |   2 +-
 resources/views/auth/login.blade.php          |   4 +-
 resources/views/auth/register.blade.php       |  19 +-
 resources/views/auth/reset-password.blade.php |  20 +-
 .../views/auth/two-factor-challenge.blade.php |   2 +-
 resources/views/layouts/base.blade.php        | 426 +++++++++---------
 6 files changed, 241 insertions(+), 232 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index fa1e61cb2..70759e542 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -82,7 +82,7 @@ @keyframes lds-heart {
 */
 html,
 body {
-    @apply w-full min-h-full bg-neutral-50 dark:bg-base dark:text-neutral-400;
+    @apply w-full min-h-full bg-gray-50 dark:bg-base dark:text-neutral-400;
 }
 
 body {
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index f85dc268e..ede49117a 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -61,7 +61,7 @@ class="text-sm dark:text-neutral-400 hover:text-coollabs dark:hover:text-warning
                                 <div class="w-full border-t border-neutral-300 dark:border-coolgray-400"></div>
                             </div>
                             <div class="relative flex justify-center text-sm">
-                                <span class="px-2 dark:bg-base text-neutral-500 dark:text-neutral-400">
+                                <span class="px-2 bg-gray-50 dark:bg-base text-neutral-500 dark:text-neutral-400 ">
                                     Don't have an account?
                                 </span>
                             </div>
@@ -82,7 +82,7 @@ class="block w-full text-center py-3 px-4 rounded-lg border border-neutral-300 d
                                 <div class="w-full border-t border-neutral-300 dark:border-coolgray-400"></div>
                             </div>
                             <div class="relative flex justify-center text-sm">
-                                <span class="px-2 dark:bg-base text-neutral-500 dark:text-neutral-400">or
+                                <span class="px-2 bg-gray-50 dark:bg-base text-neutral-500 dark:text-neutral-400">or
                                     continue with</span>
                             </div>
                         </div>
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
index 3db943726..cdfa52a98 100644
--- a/resources/views/auth/register.blade.php
+++ b/resources/views/auth/register.blade.php
@@ -33,7 +33,8 @@ function getOldOrLocal($key, $localValue)
                                 </svg>
                                 <div>
                                     <p class="font-bold text-warning">Root User Setup</p>
-                                    <p class="text-sm dark:text-white text-black">This user will be the root user with full admin access.</p>
+                                    <p class="text-sm dark:text-white text-black">This user will be the root user with full
+                                        admin access.</p>
                                 </div>
                             </div>
                         </div>
@@ -58,13 +59,16 @@ function getOldOrLocal($key, $localValue)
                         <x-forms.input id="password_confirmation" required type="password" name="password_confirmation"
                             label="{{ __('input.password.again') }}" />
 
-                        <div class="p-4 bg-neutral-50 dark:bg-coolgray-200 rounded-lg border border-neutral-200 dark:border-coolgray-400">
+                        <div
+                            class="p-4 bg-neutral-50 dark:bg-coolgray-200 rounded-lg border border-neutral-200 dark:border-coolgray-400">
                             <p class="text-xs dark:text-neutral-400">
-                                Your password should be min 8 characters long and contain at least one uppercase letter, one lowercase letter, one number, and one symbol.
+                                Your password should be min 8 characters long and contain at least one uppercase letter,
+                                one lowercase letter, one number, and one symbol.
                             </p>
                         </div>
 
-                        <x-forms.button class="w-full justify-center py-3 box-boarding mt-2" type="submit" isHighlighted>
+                        <x-forms.button class="w-full justify-center py-3 box-boarding mt-2" type="submit"
+                            isHighlighted>
                             Create Account
                         </x-forms.button>
                     </form>
@@ -74,17 +78,18 @@ function getOldOrLocal($key, $localValue)
                             <div class="w-full border-t border-neutral-300 dark:border-coolgray-400"></div>
                         </div>
                         <div class="relative flex justify-center text-sm">
-                            <span class="px-2 dark:bg-base text-neutral-500 dark:text-neutral-400">
+                            <span class="px-2 bg-gray-50 dark:bg-base text-neutral-500 dark:text-neutral-400">
                                 Already have an account?
                             </span>
                         </div>
                     </div>
 
-                    <a href="/login" class="block w-full text-center py-3 px-4 rounded-lg border border-neutral-300 dark:border-coolgray-400 font-medium hover:border-coollabs dark:hover:border-warning transition-colors">
+                    <a href="/login"
+                        class="block w-full text-center py-3 px-4 rounded-lg border border-neutral-300 dark:border-coolgray-400 font-medium hover:border-coollabs dark:hover:border-warning transition-colors">
                         {{ __('auth.already_registered') }}
                     </a>
                 </div>
             </div>
         </div>
     </section>
-</x-layout-simple>
+</x-layout-simple>
\ No newline at end of file
diff --git a/resources/views/auth/reset-password.blade.php b/resources/views/auth/reset-password.blade.php
index a4a07ebd6..3e0c237b4 100644
--- a/resources/views/auth/reset-password.blade.php
+++ b/resources/views/auth/reset-password.blade.php
@@ -47,16 +47,19 @@
                             label="{{ __('input.email') }}" />
                         <x-forms.input required type="password" id="password" name="password"
                             label="{{ __('input.password') }}" />
-                        <x-forms.input required type="password" id="password_confirmation"
-                            name="password_confirmation" label="{{ __('input.password.again') }}" />
+                        <x-forms.input required type="password" id="password_confirmation" name="password_confirmation"
+                            label="{{ __('input.password.again') }}" />
 
-                        <div class="p-4 bg-neutral-50 dark:bg-coolgray-200 rounded-lg border border-neutral-200 dark:border-coolgray-400">
+                        <div
+                            class="p-4 bg-neutral-50 dark:bg-coolgray-200 rounded-lg border border-neutral-200 dark:border-coolgray-400">
                             <p class="text-xs dark:text-neutral-400">
-                                Your password should be min 8 characters long and contain at least one uppercase letter, one lowercase letter, one number, and one symbol.
+                                Your password should be min 8 characters long and contain at least one uppercase letter,
+                                one lowercase letter, one number, and one symbol.
                             </p>
                         </div>
 
-                        <x-forms.button class="w-full justify-center py-3 box-boarding mt-2" type="submit" isHighlighted>
+                        <x-forms.button class="w-full justify-center py-3 box-boarding mt-2" type="submit"
+                            isHighlighted>
                             {{ __('auth.reset_password') }}
                         </x-forms.button>
                     </form>
@@ -66,17 +69,18 @@
                             <div class="w-full border-t border-neutral-300 dark:border-coolgray-400"></div>
                         </div>
                         <div class="relative flex justify-center text-sm">
-                            <span class="px-2 dark:bg-base text-neutral-500 dark:text-neutral-400">
+                            <span class="px-2 bg-gray-50 dark:bg-base text-neutral-500 dark:text-neutral-400">
                                 Remember your password?
                             </span>
                         </div>
                     </div>
 
-                    <a href="/login" class="block w-full text-center py-3 px-4 rounded-lg border border-neutral-300 dark:border-coolgray-400 font-medium hover:border-coollabs dark:hover:border-warning transition-colors">
+                    <a href="/login"
+                        class="block w-full text-center py-3 px-4 rounded-lg border border-neutral-300 dark:border-coolgray-400 font-medium hover:border-coollabs dark:hover:border-warning transition-colors">
                         Back to Login
                     </a>
                 </div>
             </div>
         </div>
     </section>
-</x-layout-simple>
+</x-layout-simple>
\ No newline at end of file
diff --git a/resources/views/auth/two-factor-challenge.blade.php b/resources/views/auth/two-factor-challenge.blade.php
index d4531cbe8..05dbcc90c 100644
--- a/resources/views/auth/two-factor-challenge.blade.php
+++ b/resources/views/auth/two-factor-challenge.blade.php
@@ -120,7 +120,7 @@ class="mt-2 text-sm dark:text-neutral-400 hover:text-black dark:hover:text-white
                             <div class="w-full border-t border-neutral-300 dark:border-coolgray-400"></div>
                         </div>
                         <div class="relative flex justify-center text-sm">
-                            <span class="px-2 dark:bg-base text-neutral-500 dark:text-neutral-400">
+                            <span class="px-2 bg-gray-50 dark:bg-base text-neutral-500 dark:text-neutral-400">
                                 Need help?
                             </span>
                         </div>
diff --git a/resources/views/layouts/base.blade.php b/resources/views/layouts/base.blade.php
index c577f7248..7bb366cd4 100644
--- a/resources/views/layouts/base.blade.php
+++ b/resources/views/layouts/base.blade.php
@@ -2,7 +2,7 @@
 <html data-theme="dark" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 <script>
     // Immediate theme application - runs before any rendering
-    (function() {
+    (function () {
         const t = localStorage.theme || 'dark';
         const d = t === 'dark' || (t === 'system' && matchMedia('(prefers-color-scheme: dark)').matches);
         document.documentElement.classList[d ? 'add' : 'remove']('dark');
@@ -75,102 +75,102 @@
 </head>
 @section('body')
 
-    <body>
-        <x-toast />
-        <script data-navigate-once>
-            // Global HTML sanitization function using DOMPurify
-            window.sanitizeHTML = function(html) {
-                if (!html) return '';
-                const URL_RE = /^(https?:|mailto:)/i;
-                const config = {
-                    ALLOWED_TAGS: ['a', 'b', 'br', 'code', 'del', 'div', 'em', 'i', 'p', 'pre', 's', 'span', 'strong',
-                        'u'
-                    ],
-                    ALLOWED_ATTR: ['class', 'href', 'target', 'title', 'rel'],
-                    ALLOW_DATA_ATTR: false,
-                    FORBID_TAGS: ['script', 'object', 'embed', 'applet', 'iframe', 'form', 'input', 'button', 'select',
-                        'textarea', 'details', 'summary', 'dialog', 'style'
-                    ],
-                    FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover', 'onfocus', 'onblur', 'onchange',
-                        'onsubmit', 'ontoggle', 'style'
-                    ],
-                    KEEP_CONTENT: true,
-                    RETURN_DOM: false,
-                    RETURN_DOM_FRAGMENT: false,
-                    SANITIZE_DOM: true,
-                    SANITIZE_NAMED_PROPS: true,
-                    SAFE_FOR_TEMPLATES: true,
-                    ALLOWED_URI_REGEXP: URL_RE
-                };
-
-                // One-time hook registration (idempotent pattern)
-                if (!window.__dpLinkHook) {
-                    DOMPurify.addHook('afterSanitizeAttributes', node => {
-                        // Remove Alpine.js directives to prevent XSS
-                        if (node.hasAttributes && node.hasAttributes()) {
-                            const attrs = Array.from(node.attributes);
-                            attrs.forEach(attr => {
-                                // Remove x-* attributes (Alpine directives)
-                                if (attr.name.startsWith('x-')) {
-                                    node.removeAttribute(attr.name);
-                                }
-                                // Remove @* attributes (Alpine event shorthand)
-                                if (attr.name.startsWith('@')) {
-                                    node.removeAttribute(attr.name);
-                                }
-                                // Remove :* attributes (Alpine binding shorthand)
-                                if (attr.name.startsWith(':')) {
-                                    node.removeAttribute(attr.name);
-                                }
-                            });
-                        }
-
-                        // Existing link sanitization
-                        if (node.nodeName === 'A' && node.hasAttribute('href')) {
-                            const href = node.getAttribute('href') || '';
-                            if (!URL_RE.test(href)) node.removeAttribute('href');
-                            if (node.getAttribute('target') === '_blank') {
-                                node.setAttribute('rel', 'noopener noreferrer');
-                            }
-                        }
-                    });
-                    window.__dpLinkHook = true;
-                }
-                return DOMPurify.sanitize(html, config);
+<body class="dark:text-inherit text-black">
+    <x-toast />
+    <script data-navigate-once>
+        // Global HTML sanitization function using DOMPurify
+        window.sanitizeHTML = function (html) {
+            if (!html) return '';
+            const URL_RE = /^(https?:|mailto:)/i;
+            const config = {
+                ALLOWED_TAGS: ['a', 'b', 'br', 'code', 'del', 'div', 'em', 'i', 'p', 'pre', 's', 'span', 'strong',
+                    'u'
+                ],
+                ALLOWED_ATTR: ['class', 'href', 'target', 'title', 'rel'],
+                ALLOW_DATA_ATTR: false,
+                FORBID_TAGS: ['script', 'object', 'embed', 'applet', 'iframe', 'form', 'input', 'button', 'select',
+                    'textarea', 'details', 'summary', 'dialog', 'style'
+                ],
+                FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover', 'onfocus', 'onblur', 'onchange',
+                    'onsubmit', 'ontoggle', 'style'
+                ],
+                KEEP_CONTENT: true,
+                RETURN_DOM: false,
+                RETURN_DOM_FRAGMENT: false,
+                SANITIZE_DOM: true,
+                SANITIZE_NAMED_PROPS: true,
+                SAFE_FOR_TEMPLATES: true,
+                ALLOWED_URI_REGEXP: URL_RE
             };
 
-            // Initialize theme if not set
-            if (!('theme' in localStorage)) {
-                localStorage.theme = 'dark';
-            }
+            // One-time hook registration (idempotent pattern)
+            if (!window.__dpLinkHook) {
+                DOMPurify.addHook('afterSanitizeAttributes', node => {
+                    // Remove Alpine.js directives to prevent XSS
+                    if (node.hasAttributes && node.hasAttributes()) {
+                        const attrs = Array.from(node.attributes);
+                        attrs.forEach(attr => {
+                            // Remove x-* attributes (Alpine directives)
+                            if (attr.name.startsWith('x-')) {
+                                node.removeAttribute(attr.name);
+                            }
+                            // Remove @* attributes (Alpine event shorthand)
+                            if (attr.name.startsWith('@')) {
+                                node.removeAttribute(attr.name);
+                            }
+                            // Remove :* attributes (Alpine binding shorthand)
+                            if (attr.name.startsWith(':')) {
+                                node.removeAttribute(attr.name);
+                            }
+                        });
+                    }
 
-            let theme = localStorage.theme
-            let cpuColor = '#1e90ff'
-            let ramColor = '#00ced1'
-            let textColor = '#ffffff'
-            let editorBackground = '#181818'
-            let editorTheme = 'blackboard'
-
-            function checkTheme() {
-                theme = localStorage.theme
-                if (theme == 'system') {
-                    theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-                }
-                if (theme == 'dark') {
-                    cpuColor = '#1e90ff'
-                    ramColor = '#00ced1'
-                    textColor = '#ffffff'
-                    editorBackground = '#181818'
-                    editorTheme = 'blackboard'
-                } else {
-                    cpuColor = '#1e90ff'
-                    ramColor = '#00ced1'
-                    textColor = '#000000'
-                    editorBackground = '#ffffff'
-                    editorTheme = null
-                }
+                    // Existing link sanitization
+                    if (node.nodeName === 'A' && node.hasAttribute('href')) {
+                        const href = node.getAttribute('href') || '';
+                        if (!URL_RE.test(href)) node.removeAttribute('href');
+                        if (node.getAttribute('target') === '_blank') {
+                            node.setAttribute('rel', 'noopener noreferrer');
+                        }
+                    }
+                });
+                window.__dpLinkHook = true;
             }
-            @auth
+            return DOMPurify.sanitize(html, config);
+        };
+
+        // Initialize theme if not set
+        if (!('theme' in localStorage)) {
+            localStorage.theme = 'dark';
+        }
+
+        let theme = localStorage.theme
+        let cpuColor = '#1e90ff'
+        let ramColor = '#00ced1'
+        let textColor = '#ffffff'
+        let editorBackground = '#181818'
+        let editorTheme = 'blackboard'
+
+        function checkTheme() {
+            theme = localStorage.theme
+            if (theme == 'system') {
+                theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+            }
+            if (theme == 'dark') {
+                cpuColor = '#1e90ff'
+                ramColor = '#00ced1'
+                textColor = '#ffffff'
+                editorBackground = '#181818'
+                editorTheme = 'blackboard'
+            } else {
+                cpuColor = '#1e90ff'
+                ramColor = '#00ced1'
+                textColor = '#000000'
+                editorBackground = '#ffffff'
+                editorTheme = null
+            }
+        }
+        @auth
             window.Pusher = Pusher;
             window.Echo = new Echo({
                 broadcaster: 'pusher',
@@ -199,131 +199,131 @@ function checkTheme() {
                 // Maximum number of reconnection attempts
                 maxAttempts: 15
             });
-            @endauth
-            let checkHealthInterval = null;
-            let checkIfIamDeadInterval = null;
+        @endauth
+        let checkHealthInterval = null;
+        let checkIfIamDeadInterval = null;
 
-            function changePasswordFieldType(event) {
-                let element = event.target
-                for (let i = 0; i < 10; i++) {
-                    if (element.className === "relative") {
-                        break;
-                    }
-                    element = element.parentElement;
+        function changePasswordFieldType(event) {
+            let element = event.target
+            for (let i = 0; i < 10; i++) {
+                if (element.className === "relative") {
+                    break;
                 }
-                element = element.children[1];
-                if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
-                    if (element.type === 'password') {
-                        element.type = 'text';
-                        if (element.disabled) return;
-                        element.classList.add('truncate');
-                        this.type = 'text';
-                    } else {
-                        element.type = 'password';
-                        if (element.disabled) return;
-                        element.classList.remove('truncate');
-                        this.type = 'password';
-                    }
+                element = element.parentElement;
+            }
+            element = element.children[1];
+            if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
+                if (element.type === 'password') {
+                    element.type = 'text';
+                    if (element.disabled) return;
+                    element.classList.add('truncate');
+                    this.type = 'text';
+                } else {
+                    element.type = 'password';
+                    if (element.disabled) return;
+                    element.classList.remove('truncate');
+                    this.type = 'password';
                 }
             }
+        }
 
-            function copyToClipboard(text) {
-                navigator?.clipboard?.writeText(text) && window.Livewire.dispatch('success', 'Copied to clipboard.');
-            }
-            document.addEventListener('livewire:init', () => {
-                window.Livewire.on('reloadWindow', (timeout) => {
-                    if (timeout) {
-                        setTimeout(() => {
-                            window.location.reload();
-                        }, timeout);
-                        return;
-                    } else {
+        function copyToClipboard(text) {
+            navigator?.clipboard?.writeText(text) && window.Livewire.dispatch('success', 'Copied to clipboard.');
+        }
+        document.addEventListener('livewire:init', () => {
+            window.Livewire.on('reloadWindow', (timeout) => {
+                if (timeout) {
+                    setTimeout(() => {
                         window.location.reload();
-                    }
-                })
-                window.Livewire.on('info', (message) => {
-                    if (typeof message === 'string') {
-                        window.toast('Info', {
-                            type: 'info',
-                            description: message,
-                        })
-                        return;
-                    }
-                    if (message.length == 1) {
-                        window.toast('Info', {
-                            type: 'info',
-                            description: message[0],
-                        })
-                    } else if (message.length == 2) {
-                        window.toast(message[0], {
-                            type: 'info',
-                            description: message[1],
-                        })
-                    }
-                })
-                window.Livewire.on('error', (message) => {
-                    if (typeof message === 'string') {
-                        window.toast('Error', {
-                            type: 'danger',
-                            description: message,
-                        })
-                        return;
-                    }
-                    if (message.length == 1) {
-                        window.toast('Error', {
-                            type: 'danger',
-                            description: message[0],
-                        })
-                    } else if (message.length == 2) {
-                        window.toast(message[0], {
-                            type: 'danger',
-                            description: message[1],
-                        })
-                    }
-                })
-                window.Livewire.on('warning', (message) => {
-                    if (typeof message === 'string') {
-                        window.toast('Warning', {
-                            type: 'warning',
-                            description: message,
-                        })
-                        return;
-                    }
-                    if (message.length == 1) {
-                        window.toast('Warning', {
-                            type: 'warning',
-                            description: message[0],
-                        })
-                    } else if (message.length == 2) {
-                        window.toast(message[0], {
-                            type: 'warning',
-                            description: message[1],
-                        })
-                    }
-                })
-                window.Livewire.on('success', (message) => {
-                    if (typeof message === 'string') {
-                        window.toast('Success', {
-                            type: 'success',
-                            description: message,
-                        })
-                        return;
-                    }
-                    if (message.length == 1) {
-                        window.toast('Success', {
-                            type: 'success',
-                            description: message[0],
-                        })
-                    } else if (message.length == 2) {
-                        window.toast(message[0], {
-                            type: 'success',
-                            description: message[1],
-                        })
-                    }
-                })
-            });
-        </script>
-    </body>
+                    }, timeout);
+                    return;
+                } else {
+                    window.location.reload();
+                }
+            })
+            window.Livewire.on('info', (message) => {
+                if (typeof message === 'string') {
+                    window.toast('Info', {
+                        type: 'info',
+                        description: message,
+                    })
+                    return;
+                }
+                if (message.length == 1) {
+                    window.toast('Info', {
+                        type: 'info',
+                        description: message[0],
+                    })
+                } else if (message.length == 2) {
+                    window.toast(message[0], {
+                        type: 'info',
+                        description: message[1],
+                    })
+                }
+            })
+            window.Livewire.on('error', (message) => {
+                if (typeof message === 'string') {
+                    window.toast('Error', {
+                        type: 'danger',
+                        description: message,
+                    })
+                    return;
+                }
+                if (message.length == 1) {
+                    window.toast('Error', {
+                        type: 'danger',
+                        description: message[0],
+                    })
+                } else if (message.length == 2) {
+                    window.toast(message[0], {
+                        type: 'danger',
+                        description: message[1],
+                    })
+                }
+            })
+            window.Livewire.on('warning', (message) => {
+                if (typeof message === 'string') {
+                    window.toast('Warning', {
+                        type: 'warning',
+                        description: message,
+                    })
+                    return;
+                }
+                if (message.length == 1) {
+                    window.toast('Warning', {
+                        type: 'warning',
+                        description: message[0],
+                    })
+                } else if (message.length == 2) {
+                    window.toast(message[0], {
+                        type: 'warning',
+                        description: message[1],
+                    })
+                }
+            })
+            window.Livewire.on('success', (message) => {
+                if (typeof message === 'string') {
+                    window.toast('Success', {
+                        type: 'success',
+                        description: message,
+                    })
+                    return;
+                }
+                if (message.length == 1) {
+                    window.toast('Success', {
+                        type: 'success',
+                        description: message[0],
+                    })
+                } else if (message.length == 2) {
+                    window.toast(message[0], {
+                        type: 'success',
+                        description: message[1],
+                    })
+                }
+            })
+        });
+    </script>
+</body>
 @show
 
-</html>
+</html>
\ No newline at end of file