working ticket

Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php

@@ -12,66 +12,65 @@
             font-size: .875rem;
             line-height: 1.25rem;
             font-weight: 800;
-            color: #ffffff !important;
+            color: #fff !important;
             text-decoration: none !important;
             border: 1px solid rgba(255,255,255,.14);
             box-shadow: 0 12px 28px rgba(0,0,0,.22);
             transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
         }
+
         .hd-helpdesk-surface .hd-btn:hover,
         .hd-btn:hover {
             transform: translateY(-1px);
             box-shadow: 0 16px 34px rgba(0,0,0,.30);
         }
-        .hd-helpdesk-surface .hd-btn-sm,
+
         .hd-btn-sm {
             border-radius: .65rem;
             padding: .42rem .78rem;
             font-size: .8125rem;
         }
-        .hd-helpdesk-surface .hd-btn-blue,
+
         .hd-btn-blue { background: #2563eb !important; }
-        .hd-helpdesk-surface .hd-btn-blue:hover,
         .hd-btn-blue:hover { background: #1d4ed8 !important; }
-        .hd-helpdesk-surface .hd-btn-green,
+
         .hd-btn-green { background: #16a34a !important; }
-        .hd-helpdesk-surface .hd-btn-green:hover,
         .hd-btn-green:hover { background: #15803d !important; }
-        .hd-helpdesk-surface .hd-btn-amber,
+
         .hd-btn-amber { background: #f59e0b !important; }
-        .hd-helpdesk-surface .hd-btn-amber:hover,
         .hd-btn-amber:hover { background: #d97706 !important; }
-        .hd-helpdesk-surface .hd-btn-red,
+
         .hd-btn-red { background: #dc2626 !important; }
-        .hd-helpdesk-surface .hd-btn-red:hover,
         .hd-btn-red:hover { background: #b91c1c !important; }
-        .hd-helpdesk-surface .hd-btn-violet,
+
         .hd-btn-violet { background: #7c3aed !important; }
-        .hd-helpdesk-surface .hd-btn-violet:hover,
         .hd-btn-violet:hover { background: #6d28d9 !important; }
 
         .hd-helpdesk-surface button[type="submit"],
         .hd-helpdesk-surface button[data-flux-button][type="submit"] {
             background: #16a34a !important;
-            color: #ffffff !important;
+            color: #fff !important;
             border-color: rgba(255,255,255,.14) !important;
         }
+
         .hd-helpdesk-surface button[wire\:click^="reset"],
         .hd-helpdesk-surface button[wire\:target^="reset"] {
             background: #f59e0b !important;
-            color: #ffffff !important;
+            color: #fff !important;
             border-color: rgba(255,255,255,.14) !important;
         }
+
         .hd-helpdesk-surface button[wire\:click^="edit"],
         .hd-helpdesk-surface button[wire\:target^="edit"] {
             background: #2563eb !important;
-            color: #ffffff !important;
+            color: #fff !important;
             border-color: rgba(255,255,255,.14) !important;
         }
+
         .hd-helpdesk-surface button[wire\:click^="delete"],
         .hd-helpdesk-surface button[wire\:target^="delete"] {
             background: #dc2626 !important;
-            color: #ffffff !important;
+            color: #fff !important;
             border-color: rgba(255,255,255,.14) !important;
         }
 
@@ -87,15 +86,24 @@
             outline: none;
             box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 26px rgba(0,0,0,.24);
         }
+
         .hd-select:focus {
             border-color: #60a5fa !important;
-            box-shadow: 0 0 0 3px rgba(96,165,250,.38), inset 0 1px 0 rgba(255,255,255,.05);
+            box-shadow:
+                0 0 0 3px rgba(96,165,250,.38),
+                inset 0 1px 0 rgba(255,255,255,.05);
+        }
+
+        .helpdesk-required-star {
+            color: #ef4444 !important;
+            font-weight: 800;
         }
 
         .helpdesk-ticket-form,
         .helpdesk-ticket-form * {
             -webkit-tap-highlight-color: transparent;
         }
+
         .helpdesk-ticket-form input,
         .helpdesk-ticket-form textarea,
         .helpdesk-ticket-form select,
@@ -104,24 +112,22 @@
         .helpdesk-ticket-form .select2-container--default .select2-selection__rendered,
         .helpdesk-ticket-form .select2-container--default .select2-selection__choice {
             background: #09090b !important;
-            background-color: #09090b !important;
             color: #f4f4f5 !important;
             border-color: #3f3f46 !important;
             caret-color: #f4f4f5 !important;
             opacity: 1 !important;
         }
+
         .helpdesk-ticket-form input:disabled,
         .helpdesk-ticket-form textarea:disabled,
         .helpdesk-ticket-form select:disabled,
         .helpdesk-ticket-form .select2-container--disabled .select2-selection--single,
-        .helpdesk-ticket-form .select2-container--disabled .select2-selection--multiple,
+        .helpdesk-ticket-form .select2-container--disabled .select2-selection--multiple {
-        .helpdesk-ticket-form [disabled],
-        .helpdesk-ticket-form [aria-disabled="true"] {
             background: #09090b !important;
-            background-color: #09090b !important;
             color: #a1a1aa !important;
             opacity: 1 !important;
         }
+
         .helpdesk-ticket-form input:-webkit-autofill,
         .helpdesk-ticket-form input:-webkit-autofill:hover,
         .helpdesk-ticket-form input:-webkit-autofill:focus,
@@ -135,12 +141,6 @@
             box-shadow: 0 0 0 1000px #09090b inset !important;
             transition: background-color 9999s ease-in-out 0s;
         }
-    </style>
-    <style>
-        .helpdesk-required-star {
-            color: #ef4444 !important;
-            font-weight: 800;
-        }
 
         .select2-container--default .select2-selection--single {
             position: relative;
@@ -150,49 +150,11 @@
             position: absolute !important;
             top: 50% !important;
             right: 2.25rem !important;
-            left: auto !important;
-            float: none !important;
-            margin: 0 !important;
             transform: translateY(-50%);
             color: #f87171 !important;
             font-weight: 800 !important;
             z-index: 5;
         }
-
-        .helpdesk-ticket-form input,
-        .helpdesk-ticket-form textarea,
-        .helpdesk-ticket-form select {
-            background-color: #09090b !important;
-            color: #f4f4f5 !important;
-            caret-color: #f4f4f5;
-        }
-
-        .helpdesk-ticket-form input:focus,
-        .helpdesk-ticket-form textarea:focus,
-        .helpdesk-ticket-form select:focus {
-            background-color: #09090b !important;
-            color: #f4f4f5 !important;
-        }
-
-        .helpdesk-ticket-form input:-webkit-autofill,
-        .helpdesk-ticket-form input:-webkit-autofill:hover,
-        .helpdesk-ticket-form input:-webkit-autofill:focus,
-        .helpdesk-ticket-form textarea:-webkit-autofill,
-        .helpdesk-ticket-form textarea:-webkit-autofill:hover,
-        .helpdesk-ticket-form textarea:-webkit-autofill:focus,
-        .helpdesk-ticket-form select:-webkit-autofill,
-        .helpdesk-ticket-form select:-webkit-autofill:hover,
-        .helpdesk-ticket-form select:-webkit-autofill:focus {
-            -webkit-text-fill-color: #f4f4f5 !important;
-            box-shadow: 0 0 0 1000px #09090b inset !important;
-            transition: background-color 9999s ease-in-out 0s;
-        }
-
-        .helpdesk-ticket-form [wire\:loading],
-        .helpdesk-ticket-form [wire\:loading\.delay],
-        .helpdesk-ticket-form [wire\:loading\.remove] {
-            color: inherit;
-        }
     </style>
 
     @include('helpdesk::partials.page-header', [
@@ -406,5 +368,4 @@
         </div>
     </form>
 
-    @include('helpdesk::partials.select2-loader')
 </div>

Modules/Helpdesk/Resources/views/partials/select2-loader.blade.php

@@ -1,130 +0,0 @@
-{{--@once--}}
-{{--    <style>--}}
-{{--        .select2-container { width: 100% !important; }--}}
-{{--        .select2-container--default .select2-selection--single,--}}
-{{--        .select2-container--default .select2-selection--multiple {--}}
-{{--            min-height: 2.75rem;--}}
-{{--            border-radius: 0.75rem;--}}
-{{--            border-color: rgb(63 63 70);--}}
-{{--            background: rgb(9 9 11);--}}
-{{--            color: rgb(244 244 245);--}}
-{{--            display: flex;--}}
-{{--            align-items: center;--}}
-{{--        }--}}
-{{--        .select2-container--default .select2-selection--multiple {--}}
-{{--            align-items: flex-start;--}}
-{{--            padding: 0.25rem 0.5rem;--}}
-{{--        }--}}
-{{--        .select2-container--default .select2-selection--multiple .select2-selection__choice {--}}
-{{--            border-color: rgb(59 130 246);--}}
-{{--            background: rgb(30 64 175);--}}
-{{--            color: rgb(255 255 255);--}}
-{{--            border-radius: 9999px;--}}
-{{--            padding: 0.15rem 0.5rem;--}}
-{{--        }--}}
-{{--        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {--}}
-{{--            color: rgb(255 255 255);--}}
-{{--            margin-right: 0.35rem;--}}
-{{--        }--}}
-{{--        .select2-container--default .select2-selection--single .select2-selection__rendered {--}}
-{{--            color: rgb(244 244 245);--}}
-{{--            line-height: 2.75rem;--}}
-{{--            padding-left: 0.85rem;--}}
-{{--        }--}}
-{{--        .select2-container--default .select2-selection--single .select2-selection__arrow {--}}
-{{--            height: 2.75rem;--}}
-{{--        }--}}
-{{--        .select2-dropdown {--}}
-{{--            border-color: rgb(63 63 70);--}}
-{{--            background: rgb(24 24 27);--}}
-{{--            color: rgb(244 244 245);--}}
-{{--        }--}}
-{{--        .select2-container--default .select2-results__option--highlighted[aria-selected] {--}}
-{{--            background: rgb(37 99 235);--}}
-{{--            color: white;--}}
-{{--        }--}}
-{{--        .select2-container--default .select2-results__option[aria-selected=true] {--}}
-{{--            background: rgb(39 39 42);--}}
-{{--            color: white;--}}
-{{--        }--}}
-{{--        .select2-search__field {--}}
-{{--            background: rgb(9 9 11);--}}
-{{--            color: rgb(244 244 245);--}}
-{{--            border-color: rgb(63 63 70) !important;--}}
-{{--        }--}}
-{{--    </style>--}}
-{{--@endonce--}}
-
-{{--<script>--}}
-{{--    (function () {--}}
-{{--        function loadScript(src, callback) {--}}
-{{--            const existing = document.querySelector('script[src="' + src + '"]');--}}
-{{--            if (existing) {--}}
-{{--                existing.addEventListener('load', callback, { once: true });--}}
-{{--                if (existing.dataset.loaded === '1') callback();--}}
-{{--                return;--}}
-{{--            }--}}
-
-{{--            const script = document.createElement('script');--}}
-{{--            script.src = src;--}}
-{{--            script.onload = function () {--}}
-{{--                script.dataset.loaded = '1';--}}
-{{--                callback();--}}
-{{--            };--}}
-{{--            document.head.appendChild(script);--}}
-{{--        }--}}
-
-{{--        function loadStyle(href) {--}}
-{{--            if (document.querySelector('link[href="' + href + '"]')) return;--}}
-{{--            const link = document.createElement('link');--}}
-{{--            link.rel = 'stylesheet';--}}
-{{--            link.href = href;--}}
-{{--            document.head.appendChild(link);--}}
-{{--        }--}}
-
-{{--        function initialiseHelpdeskSelects() {--}}
-{{--            if (!window.jQuery || !window.jQuery.fn || !window.jQuery.fn.select2) return;--}}
-
-{{--            window.jQuery('[data-helpdesk-select2]').each(function () {--}}
-{{--                const select = window.jQuery(this);--}}
-
-{{--                if (select.data('select2')) {--}}
-{{--                    select.select2('destroy');--}}
-{{--                }--}}
-
-{{--                const isMultiple = this.hasAttribute('multiple');--}}
-
-{{--                select.select2({--}}
-{{--                    width: '100%',--}}
-{{--                    placeholder: this.querySelector('option[value=""]')?.textContent || (isMultiple ? 'Select options' : 'Select option'),--}}
-{{--                    allowClear: !isMultiple--}}
-{{--                });--}}
-
-{{--                select.off('change.helpdesk').on('change.helpdesk', function () {--}}
-{{--                    this.dispatchEvent(new Event('change', { bubbles: true }));--}}
-{{--                    this.dispatchEvent(new Event('input', { bubbles: true }));--}}
-{{--                });--}}
-{{--            });--}}
-{{--        }--}}
-
-{{--        function bootHelpdeskSelects()--}}
-{{--        {--}}
-{{--            const initialise = () => {--}}
-{{--                if (window.jQuery?.fn?.select2) {--}}
-{{--                    initialiseHelpdeskSelects();--}}
-{{--                }--}}
-{{--            };--}}
-
-{{--            if (document.readyState === 'loading') {--}}
-{{--                document.addEventListener('DOMContentLoaded', initialise);--}}
-{{--            } else {--}}
-{{--                initialise();--}}
-{{--            }--}}
-{{--        }--}}
-
-{{--        document.addEventListener('DOMContentLoaded', bootHelpdeskSelects);--}}
-{{--        document.addEventListener('livewire:navigated', bootHelpdeskSelects);--}}
-{{--        document.addEventListener('livewire:updated', bootHelpdeskSelects);--}}
-{{--        bootHelpdeskSelects();--}}
-{{--    })();--}}
-{{--</script>--}}