Skip to content

Commit 70dfa10

Browse files
andrasbacsaiandrasbacsai
committed
refactor: Improve label positioning in input and checkbox components
1 parent d6b4e33 commit 70dfa10

File tree

3 files changed

+38
-38
lines changed

3 files changed

+38
-38
lines changed

‎resources/views/components/forms/checkbox.blade.php

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,20 @@
88
'hideLabel' => false,
99
])
1010

11-
<div class="flex flex-row items-center gap-4 px-2 py-1 form-control min-w-fit dark:hover:bg-coolgray-100">
12-
@if(!$hideLabel)
13-
<label class="flex gap-4 px-0 min-w-fit label">
14-
<span class="flex gap-2">
15-
@if ($label)
16-
{!! $label !!}
17-
@else
18-
{{ $id }}
19-
@endif
20-
@if ($helper)
21-
<x-helper :helper="$helper" />
22-
@endif
23-
</span>
24-
</label>
11+
<div class="flex flex-row items-center py-1 form-control min-w-fit dark:hover:bg-coolgray-100">
12+
@if (!$hideLabel)
13+
<label class="flex gap-4 px-0 min-w-fit label">
14+
<span class="flex gap-2">
15+
@if ($label)
16+
{!! $label !!}
17+
@else
18+
{{ $id }}
19+
@endif
20+
@if ($helper)
21+
<x-helper :helper="$helper" />
22+
@endif
23+
</span>
24+
</label>
2525
@endif
2626
<span class="flex-grow"></span>
2727
<input @disabled($disabled) type="checkbox" {{ $attributes->merge(['class' => $defaultClass]) }}

‎resources/views/components/forms/input.blade.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
'w-full' => !$isMultiline,
44
])>
55
@if ($label)
6-
<label class="flex items-center gap-1 mb-1 text-sm font-medium">{{ $label }}
6+
<label class="flex gap-1 items-center mb-1 text-sm font-medium">{{ $label }}
77
@if ($required)
88
<x-highlighted text="*" />
99
@endif
@@ -16,7 +16,7 @@
1616
<div class="relative" x-data="{ type: 'password' }">
1717
@if ($allowToPeak)
1818
<div x-on:click="changePasswordFieldType"
19-
class="absolute inset-y-0 right-0 flex items-center pr-2 cursor-pointer hover:dark:text-white">
19+
class="flex absolute inset-y-0 right-0 items-center pr-2 cursor-pointer hover:dark:text-white">
2020
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
2121
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
2222
<path stroke="none" d="M0 0h24v24H0z" fill="none" />

‎resources/views/components/modal-confirmation.blade.php

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ class="relative w-auto h-auto">
139139
@endif
140140
@else
141141
@if ($buttonFullWidth)
142-
<x-forms.button @click="modalOpen=true" class="flex w-full gap-2" wire:target>
142+
<x-forms.button @click="modalOpen=true" class="flex gap-2 w-full" wire:target>
143143
{{ $buttonTitle }}
144144
</x-forms.button>
145145
@else
@@ -162,27 +162,27 @@ class="absolute inset-0 w-full h-full bg-black bg-opacity-20 backdrop-blur-sm"><
162162
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
163163
x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
164164
class="relative w-full py-6 border rounded min-w-full lg:min-w-[36rem] max-w-[48rem] bg-neutral-100 border-neutral-400 dark:bg-base px-7 dark:border-coolgray-300">
165-
<div class="flex items-center justify-between pb-3">
166-
<h3 class="text-2xl font-bold pr-8">{{ $title }}</h3>
165+
<div class="flex justify-between items-center pb-3">
166+
<h3 class="pr-8 text-2xl font-bold">{{ $title }}</h3>
167167
<button @click="modalOpen = false; resetModal()"
168-
class="absolute top-2 right-2 flex items-center justify-center w-8 h-8 rounded-full dark:text-white hover:bg-coolgray-300">
168+
class="flex absolute top-2 right-2 justify-center items-center w-8 h-8 rounded-full dark:text-white hover:bg-coolgray-300">
169169
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
170170
stroke-width="1.5" stroke="currentColor">
171171
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
172172
</svg>
173173
</button>
174174
</div>
175-
<div class="relative w-auto pb-8">
175+
<div class="relative pb-8 w-auto">
176176
@if (!empty($checkboxes))
177177
<!-- Step 1: Select actions -->
178178
<div x-show="step === 1">
179179
<div class="flex justify-between items-center">
180180
<h4>Actions</h4>
181181
</div>
182182
@foreach ($checkboxes as $index => $checkbox)
183-
<div class="flex items-center justify-between mb-2">
183+
<div class="flex justify-between items-center mb-2">
184184
<label for="{{ $checkbox['id'] }}"
185-
class="text-sm leading-5 text-gray-700 dark:text-gray-300 flex-grow pr-4">
185+
class="flex-grow pr-4 text-sm leading-5 text-gray-700 dark:text-gray-300">
186186
{{ $checkbox['label'] }}
187187
</label>
188188
<x-forms.checkbox :id="$checkbox['id']" :wire:model="$checkbox['id']"
@@ -196,7 +196,7 @@ class="flex-shrink-0" :hideLabel="true" />
196196

197197
<!-- Step 2: Confirm deletion -->
198198
<div x-show="step === 2">
199-
<div class="bg-error border-l-4 border-red-500 text-white p-4 mb-4" role="alert">
199+
<div class="p-4 mb-4 text-white border-l-4 border-red-500 bg-error" role="alert">
200200
<p class="font-bold">Warning</p>
201201
<p>This operation is permanent and cannot be undone. Please think again before proceeding!
202202
</p>
@@ -205,7 +205,7 @@ class="flex-shrink-0" :hideLabel="true" />
205205
<ul class="mb-4 space-y-2">
206206
@foreach ($actions as $action)
207207
<li class="flex items-center text-red-500">
208-
<svg class="w-5 h-5 mr-2 flex-shrink-0" fill="none" stroke="currentColor"
208+
<svg class="flex-shrink-0 mr-2 w-5 h-5" fill="none" stroke="currentColor"
209209
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
210210
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
211211
d="M6 18L18 6M6 6l12 12"></path>
@@ -216,7 +216,7 @@ class="flex-shrink-0" :hideLabel="true" />
216216
@foreach ($checkboxes as $checkbox)
217217
<template x-if="selectedActions.includes('{{ $checkbox['id'] }}')">
218218
<li class="flex items-center text-red-500">
219-
<svg class="w-5 h-5 mr-2 flex-shrink-0" fill="none" stroke="currentColor"
219+
<svg class="flex-shrink-0 mr-2 w-5 h-5" fill="none" stroke="currentColor"
220220
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
221221
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
222222
d="M6 18L18 6M6 6l12 12"></path>
@@ -228,24 +228,24 @@ class="flex-shrink-0" :hideLabel="true" />
228228
</ul>
229229
@if ($confirmWithText)
230230
<div class="mb-4">
231-
<h4 class="text-lg font-semibold mb-2">Confirm Actions</h4>
232-
<p class="text-sm mb-2">{{ $confirmationLabel }}</p>
231+
<h4 class="mb-2 text-lg font-semibold">Confirm Actions</h4>
232+
<p class="mb-2 text-sm">{{ $confirmationLabel }}</p>
233233
<div class="relative mb-2">
234234
<input type="text" x-model="confirmationText"
235-
class="w-full p-2 pr-10 rounded text-black input cursor-text" readonly>
235+
class="p-2 pr-10 w-full text-black rounded cursor-text input" readonly>
236236
<button @click="copyConfirmationText()"
237-
class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
237+
class="absolute right-2 top-1/2 text-gray-500 transform -translate-y-1/2 hover:text-gray-700"
238238
title="Copy confirmation text" x-ref="copyButton">
239239
<template x-if="!copied">
240-
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20"
240+
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20"
241241
fill="currentColor">
242242
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" />
243243
<path
244244
d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z" />
245245
</svg>
246246
</template>
247247
<template x-if="copied">
248-
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500"
248+
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-green-500"
249249
viewBox="0 0 20 20" fill="currentColor">
250250
<path fill-rule="evenodd"
251251
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
@@ -256,18 +256,18 @@ class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 hover:t
256256
</div>
257257

258258
<label for="userConfirmationText"
259-
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mt-4">
259+
class="block mt-4 text-sm font-medium text-gray-700 dark:text-gray-300">
260260
{{ $shortConfirmationLabel }}
261261
</label>
262262
<input type="text" x-model="userConfirmationText"
263-
class="w-full p-2 rounded text-black input mt-1">
263+
class="p-2 mt-1 w-full text-black rounded input">
264264
</div>
265265
@endif
266266
</div>
267267

268268
<!-- Step 3: Password confirmation -->
269269
<div x-show="step === 3 && confirmWithPassword">
270-
<div class="bg-error border-l-4 border-red-500 text-white p-4 mb-4" role="alert">
270+
<div class="p-4 mb-4 text-white border-l-4 border-red-500 bg-error" role="alert">
271271
<p class="font-bold">Final Confirmation</p>
272272
<p>Please enter your password to confirm this destructive action.</p>
273273
</div>
@@ -276,11 +276,11 @@ class="w-full p-2 rounded text-black input mt-1">
276276
class="block text-sm font-medium text-gray-700 dark:text-gray-300">
277277
Your Password
278278
</label>
279-
<input type="password" id="password-confirm" x-model="password" class="input w-full"
279+
<input type="password" id="password-confirm" x-model="password" class="w-full input"
280280
placeholder="Enter your password">
281-
<p x-show="passwordError" x-text="passwordError" class="text-red-500 text-sm mt-1"></p>
281+
<p x-show="passwordError" x-text="passwordError" class="mt-1 text-sm text-red-500"></p>
282282
@error('password')
283-
<p class="text-red-500 text-sm mt-1">{{ $message }}</p>
283+
<p class="mt-1 text-sm text-red-500">{{ $message }}</p>
284284
@enderror
285285
</div>
286286
</div>

0 commit comments

Comments
 (0)