interim fix

This commit is contained in:
Mark Gregory
2026-07-07 10:12:32 +01:00
parent 346cd2af1e
commit fd63173736
3 changed files with 168 additions and 76 deletions
+21 -18
View File
@@ -1,6 +1,6 @@
@csrf @csrf
<div class="grid gap-5 md:grid-cols-2"> <div class="grid gap-6 md:grid-cols-2">
<div> <div>
<label for="name" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">Company name</label> <label for="name" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">Company name</label>
<input <input
@@ -47,30 +47,33 @@
@enderror @enderror
</div> </div>
<div class="wms-select2-field"> <div class="wms-form-field wms-select2-field">
<label for="country_id" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">Country</label> <label for="country_id" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">Country</label>
<select <div class="mt-2">
id="country_id" <select
name="country_id" id="country_id"
data-wms-select2 name="country_id"
data-placeholder="Search and select a country" data-wms-select2
class="mt-2 w-full rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white" data-placeholder="Search and select country"
> class="wms-country-select w-full"
<option value="">Search and select a country</option> >
@foreach ($countries as $country) <option value="">Search and select country</option>
<option value="{{ $country->id }}" @selected((int) old('country_id', $company->country_id ?? $company->address?->country_id) === $country->id)> @foreach ($countries as $country)
{{ $country->effective_name ?? $country->name }} <option value="{{ $country->id }}" @selected((int) old('country_id', $company->country_id ?? $company->address?->country_id) === $country->id)>
</option> {{ $country->effective_name ?? $country->name }}
@endforeach </option>
</select> @endforeach
</select>
</div>
<p class="mt-2 text-xs font-medium text-zinc-500 dark:text-zinc-400">Start typing to filter the country list.</p>
@error('country_id') @error('country_id')
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p> <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
@enderror @enderror
</div> </div>
</div> </div>
<div class="mt-6 flex flex-wrap items-center gap-3"> <div class="mt-8 flex flex-wrap items-center gap-3 border-t border-zinc-200 pt-6 dark:border-zinc-800">
<button class="rounded-xl bg-zinc-900 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-zinc-700 dark:bg-white dark:text-zinc-900"> <button class="inline-flex items-center justify-center rounded-xl bg-green-600 px-5 py-2.5 text-sm font-bold text-white shadow-sm shadow-green-600/20 transition hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:bg-green-500 dark:text-white dark:hover:bg-green-400 dark:focus:ring-offset-zinc-900">
Save company Save company
</button> </button>
+42 -30
View File
@@ -30,43 +30,55 @@
</a> </a>
</div> </div>
<form method="POST" action="{{ route('platform.companies.store') }}" class="mt-5 grid gap-4 md:grid-cols-5"> <form method="POST" action="{{ route('platform.companies.store') }}" class="mt-6 grid gap-5 lg:grid-cols-12 lg:items-end">
@csrf @csrf
<input <div class="lg:col-span-3">
name="name" <label for="quick_company_name" class="mb-2 block text-xs font-bold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">Company</label>
value="{{ old('name') }}" <input
placeholder="Company name" id="quick_company_name"
class="rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white" name="name"
required value="{{ old('name') }}"
> placeholder="Company name"
class="h-11 w-full rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"
required
>
</div>
<input <div class="lg:col-span-3">
name="billing_email" <label for="quick_billing_email" class="mb-2 block text-xs font-bold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">Billing email</label>
value="{{ old('billing_email') }}" <input
placeholder="billing@example.com" id="quick_billing_email"
type="email" name="billing_email"
class="rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white" value="{{ old('billing_email') }}"
> placeholder="billing@example.com"
type="email"
class="h-11 w-full rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"
>
</div>
<select name="status" class="rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white" required> <div class="lg:col-span-2">
<option value="active" @selected(old('status', 'active') === 'active')>Active</option> <label for="quick_status" class="mb-2 block text-xs font-bold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">Status</label>
<option value="suspended" @selected(old('status') === 'suspended')>Suspended</option> <select id="quick_status" name="status" class="h-11 w-full rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white" required>
<option value="inactive" @selected(old('status') === 'inactive')>Inactive</option> <option value="active" @selected(old('status', 'active') === 'active')>Active</option>
</select> <option value="suspended" @selected(old('status') === 'suspended')>Suspended</option>
<option value="inactive" @selected(old('status') === 'inactive')>Inactive</option>
<div class="wms-select2-field">
<select name="country_id" data-wms-select2 data-placeholder="Search country" class="rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white">
<option value="">Search country</option>
@foreach ($countries as $country)
<option value="{{ $country->id }}" @selected((int) old('country_id') === $country->id)>
{{ $country->effective_name ?? $country->name }}
</option>
@endforeach
</select> </select>
</div> </div>
<button class="rounded-xl bg-zinc-900 px-4 py-2 font-semibold text-white dark:bg-white dark:text-zinc-900"> <div class="wms-select2-field lg:col-span-3">
<label for="quick_country_id" class="mb-2 block text-xs font-bold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">Country</label>
<select id="quick_country_id" name="country_id" data-wms-select2 data-placeholder="Search country" class="wms-country-select w-full">
<option value="">Search country</option>
@foreach ($countries as $country)
<option value="{{ $country->id }}" @selected((int) old('country_id') === $country->id)>
{{ $country->effective_name ?? $country->name }}
</option>
@endforeach
</select>
</div>
<button class="inline-flex h-11 items-center justify-center rounded-xl bg-green-600 px-5 text-sm font-bold text-white shadow-sm shadow-green-600/20 transition hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:bg-green-500 dark:hover:bg-green-400 dark:focus:ring-offset-zinc-900 lg:col-span-1">
Create Create
</button> </button>
</form> </form>
+105 -28
View File
@@ -1414,90 +1414,142 @@ html[data-wms-sidebar="collapsed"] .wms-sidebar {
@layer components { @layer components {
.wms-select2-field .select2-container { .wms-select2-field .select2-container {
width: 100% !important; width: 100% !important;
display: block;
} }
.wms-select2-field .select2-container--default .select2-selection--single { .wms-select2-field .select2-container--default .select2-selection--single {
min-height: 2.875rem; position: relative;
border-radius: 0.75rem; min-height: 2.75rem;
border-color: rgb(212 212 216); border: 1px solid rgb(212 212 216);
background: white; border-radius: 0.85rem;
box-shadow: 0 1px 2px rgb(15 23 42 / 0.04); background: linear-gradient(180deg, rgb(255 255 255), rgb(250 250 250));
box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease; transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
} }
.wms-select2-field .select2-container--default .select2-selection--single .select2-selection__rendered { .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__rendered {
min-height: 2.75rem;
padding-left: 0.95rem; padding-left: 0.95rem;
padding-right: 2.75rem; padding-right: 3rem;
color: rgb(24 24 27); color: rgb(24 24 27);
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 650;
line-height: 2.875rem; line-height: 2.75rem;
} }
.wms-select2-field .select2-container--default .select2-selection--single .select2-selection__placeholder { .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__placeholder {
color: rgb(113 113 122); color: rgb(113 113 122);
font-weight: 500; font-weight: 550;
}
.wms-select2-field .select2-container--default .select2-selection--single .select2-selection__clear {
position: absolute;
right: 2.6rem;
top: 0.62rem;
z-index: 2;
width: 1.35rem;
height: 1.35rem;
border-radius: 999px;
color: rgb(113 113 122);
font-size: 1rem;
font-weight: 700;
line-height: 1.25rem;
text-align: center;
}
.wms-select2-field .select2-container--default .select2-selection--single .select2-selection__clear:hover {
background: rgb(244 244 245);
color: rgb(39 39 42);
} }
.wms-select2-field .select2-container--default .select2-selection--single .select2-selection__arrow { .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__arrow {
top: 0.45rem; top: 0.45rem;
right: 0.65rem; right: 0.55rem;
width: 1.75rem; width: 1.85rem;
height: 1.75rem; height: 1.85rem;
border-radius: 0.55rem; border-radius: 0.65rem;
background: rgb(244 244 245); background: rgb(244 244 245);
border: 1px solid rgb(228 228 231);
}
.wms-select2-field .select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: rgb(82 82 91) transparent transparent transparent;
border-width: 5px 4px 0 4px;
margin-left: -4px;
margin-top: -2px;
}
.wms-select2-field .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent rgb(82 82 91) transparent;
border-width: 0 4px 5px 4px;
} }
.wms-select2-field .select2-container--default.select2-container--focus .select2-selection--single, .wms-select2-field .select2-container--default.select2-container--focus .select2-selection--single,
.wms-select2-field .select2-container--default.select2-container--open .select2-selection--single { .wms-select2-field .select2-container--default.select2-container--open .select2-selection--single {
border-color: rgb(8 145 178); border-color: rgb(22 163 74);
box-shadow: 0 0 0 3px rgb(103 232 249 / 0.28); background: white;
box-shadow: 0 0 0 4px rgb(34 197 94 / 0.14), 0 10px 24px rgb(15 23 42 / 0.08);
} }
.select2-container--default .select2-dropdown { .select2-container--default .select2-dropdown {
overflow: hidden; overflow: hidden;
margin-top: 0.35rem;
border: 1px solid rgb(212 212 216);
border-radius: 1rem; border-radius: 1rem;
border-color: rgb(212 212 216);
background: white; background: white;
box-shadow: 0 24px 60px rgb(15 23 42 / 0.18); box-shadow: 0 24px 60px rgb(15 23 42 / 0.18);
} }
.select2-container--default .select2-search--dropdown { .select2-container--default .select2-search--dropdown {
padding: 0.75rem; padding: 0.75rem;
border-bottom: 1px solid rgb(244 244 245);
} }
.select2-container--default .select2-search--dropdown .select2-search__field { .select2-container--default .select2-search--dropdown .select2-search__field {
min-height: 2.5rem;
border: 1px solid rgb(212 212 216);
border-radius: 0.75rem; border-radius: 0.75rem;
border-color: rgb(212 212 216); padding: 0.55rem 0.8rem;
padding: 0.55rem 0.75rem; background: rgb(250 250 250);
color: rgb(24 24 27);
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600;
outline: none; outline: none;
} }
.select2-container--default .select2-search--dropdown .select2-search__field:focus { .select2-container--default .select2-search--dropdown .select2-search__field:focus {
border-color: rgb(8 145 178); border-color: rgb(22 163 74);
box-shadow: 0 0 0 3px rgb(103 232 249 / 0.28); background: white;
box-shadow: 0 0 0 4px rgb(34 197 94 / 0.14);
}
.select2-container--default .select2-results > .select2-results__options {
max-height: 16rem;
padding: 0.35rem;
} }
.select2-container--default .select2-results__option { .select2-container--default .select2-results__option {
padding: 0.65rem 0.85rem; margin: 0.1rem 0;
border-radius: 0.65rem;
padding: 0.65rem 0.8rem;
color: rgb(39 39 42);
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 650;
} }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
background: rgb(8 145 178); background: rgb(22 163 74);
color: white; color: white;
} }
.select2-container--default .select2-results__option--selected { .select2-container--default .select2-results__option--selected {
background: rgb(236 254 255); background: rgb(240 253 244);
color: rgb(14 116 144); color: rgb(21 128 61);
} }
.dark .wms-select2-field .select2-container--default .select2-selection--single { .dark .wms-select2-field .select2-container--default .select2-selection--single {
border-color: rgb(63 63 70); border-color: rgb(63 63 70);
background: rgb(9 9 11); background: linear-gradient(180deg, rgb(24 24 27), rgb(9 9 11));
} }
.dark .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__rendered { .dark .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__rendered {
@@ -1509,13 +1561,34 @@ html[data-wms-sidebar="collapsed"] .wms-sidebar {
} }
.dark .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__arrow { .dark .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__arrow {
border-color: rgb(63 63 70);
background: rgb(39 39 42); background: rgb(39 39 42);
} }
.dark .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: rgb(212 212 216) transparent transparent transparent;
}
.dark .wms-select2-field .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent rgb(212 212 216) transparent;
}
.dark .wms-select2-field .select2-container--default.select2-container--focus .select2-selection--single,
.dark .wms-select2-field .select2-container--default.select2-container--open .select2-selection--single {
border-color: rgb(34 197 94);
background: rgb(9 9 11);
box-shadow: 0 0 0 4px rgb(34 197 94 / 0.16);
}
.dark .select2-container--default .select2-dropdown { .dark .select2-container--default .select2-dropdown {
border-color: rgb(63 63 70); border-color: rgb(63 63 70);
background: rgb(24 24 27); background: rgb(24 24 27);
color: rgb(244 244 245); color: rgb(244 244 245);
box-shadow: 0 24px 60px rgb(0 0 0 / 0.35);
}
.dark .select2-container--default .select2-search--dropdown {
border-bottom-color: rgb(39 39 42);
} }
.dark .select2-container--default .select2-search--dropdown .select2-search__field { .dark .select2-container--default .select2-search--dropdown .select2-search__field {
@@ -1524,8 +1597,12 @@ html[data-wms-sidebar="collapsed"] .wms-sidebar {
color: white; color: white;
} }
.dark .select2-container--default .select2-results__option {
color: rgb(244 244 245);
}
.dark .select2-container--default .select2-results__option--selected { .dark .select2-container--default .select2-results__option--selected {
background: rgb(8 47 73); background: rgb(20 83 45);
color: rgb(165 243 252); color: rgb(220 252 231);
} }
} }