refactor: expand global border-radius CSS overrides and standardize custom-rounded usage in admin verification view
This commit is contained in:
Yoga Pangestu
parent
1cb716aea2
commit
f485b2cef3
@ -83,7 +83,7 @@ public function handle(Request $request, Closure $next): Response
|
|||||||
margin-right: auto !important;
|
margin-right: auto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Apply border radius to common elements */
|
/* Apply border radius to common elements and specific components */
|
||||||
.fi-section,
|
.fi-section,
|
||||||
.fi-section-header,
|
.fi-section-header,
|
||||||
.fi-section-content,
|
.fi-section-content,
|
||||||
@ -99,6 +99,9 @@ public function handle(Request $request, Closure $next): Response
|
|||||||
.fi-ta-row,
|
.fi-ta-row,
|
||||||
.fi-ta-ctn,
|
.fi-ta-ctn,
|
||||||
.fi-ta-content-grid-item,
|
.fi-ta-content-grid-item,
|
||||||
|
.fi-ta-filters,
|
||||||
|
.fi-ta-filters-dropdown,
|
||||||
|
.fi-ta-actions,
|
||||||
.fi-badge,
|
.fi-badge,
|
||||||
.fi-avatar,
|
.fi-avatar,
|
||||||
.fi-fo-wizard,
|
.fi-fo-wizard,
|
||||||
@ -111,17 +114,36 @@ public function handle(Request $request, Closure $next): Response
|
|||||||
.fi-in-section,
|
.fi-in-section,
|
||||||
.fi-in-grid,
|
.fi-in-grid,
|
||||||
.fi-ac-action,
|
.fi-ac-action,
|
||||||
|
.fi-ac-btn,
|
||||||
|
.fi-ac-user-menu,
|
||||||
|
.fi-ac-user-avatar,
|
||||||
.fi-no-notification,
|
.fi-no-notification,
|
||||||
.fi-no-notification-content,
|
.fi-no-notification-content,
|
||||||
|
.fi-empty-state,
|
||||||
|
.fi-fo-field-wrp,
|
||||||
|
.fi-fo-field-wrp-inner,
|
||||||
|
.fi-fo-fieldset,
|
||||||
.fi-fo-checkbox,
|
.fi-fo-checkbox,
|
||||||
.fi-fo-radio,
|
.fi-fo-radio,
|
||||||
.fi-fo-toggle,
|
.fi-fo-toggle,
|
||||||
.fi-fo-color-picker,
|
.fi-fo-color-picker,
|
||||||
.fi-fo-date-time-picker,
|
.fi-fo-date-time-picker,
|
||||||
|
.fi-fo-date-time-picker-popover,
|
||||||
.fi-fo-select-option,
|
.fi-fo-select-option,
|
||||||
.fi-main-aside,
|
.fi-main-aside,
|
||||||
.fi-sidebar-item,
|
.fi-sidebar-item,
|
||||||
.fi-sidebar-group {
|
.fi-sidebar-group,
|
||||||
|
.fi-tabs,
|
||||||
|
.fi-tabs-item,
|
||||||
|
.fi-tabs-item-active,
|
||||||
|
.fi-fo-spatie-media-library-file-upload,
|
||||||
|
.fi-fo-tags-input,
|
||||||
|
.fi-fo-select-tags,
|
||||||
|
.filepond--root,
|
||||||
|
.filepond--panel-root,
|
||||||
|
.filepond--item-panel,
|
||||||
|
.filepond--image-preview-wrapper,
|
||||||
|
.filepond--file-info-main {
|
||||||
border-radius: {$radius} !important;
|
border-radius: {$radius} !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -131,14 +153,28 @@ public function handle(Request $request, Closure $next): Response
|
|||||||
.fi-fo-select,
|
.fi-fo-select,
|
||||||
.fi-fo-textarea,
|
.fi-fo-textarea,
|
||||||
.fi-fo-file-upload,
|
.fi-fo-file-upload,
|
||||||
|
.fi-fo-file-upload-wrp,
|
||||||
|
.fi-fo-file-upload-item,
|
||||||
|
.fi-fo-file-upload-preview,
|
||||||
.fi-fo-rich-editor,
|
.fi-fo-rich-editor,
|
||||||
.fi-fo-markdown-editor,
|
.fi-fo-markdown-editor,
|
||||||
.fi-fo-key-value {
|
.fi-fo-key-value,
|
||||||
|
.fi-fo-spatie-media-library-file-upload-wrp,
|
||||||
|
.fi-fo-spatie-media-library-file-upload-item,
|
||||||
|
.fi-fo-spatie-media-library-file-upload-preview {
|
||||||
|
border-radius: {$radius} !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* TRULY PERVASIVE OVERRIDE: Any element with a rounded class should obey */
|
||||||
|
/* (Excluding rounded-full to preserve circles like avatars/toggles) */
|
||||||
|
[class*='rounded-']:not(.rounded-full):not([class*='rounded-full']) {
|
||||||
border-radius: {$radius} !important;
|
border-radius: {$radius} !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Custom helper for custom views & override standard Tailwind rounded classes */
|
/* Custom helper for custom views & override standard Tailwind rounded classes */
|
||||||
.custom-rounded,
|
.custom-rounded,
|
||||||
|
.rounded,
|
||||||
|
.rounded-md,
|
||||||
.rounded-lg,
|
.rounded-lg,
|
||||||
.rounded-xl,
|
.rounded-xl,
|
||||||
.rounded-2xl {
|
.rounded-2xl {
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
@foreach ($this->getFilters as $filter)
|
@foreach ($this->getFilters as $filter)
|
||||||
<button wire:click="setFilter('{{ $filter['id'] }}')"
|
<button wire:click="setFilter('{{ $filter['id'] }}')"
|
||||||
@class([
|
@class([
|
||||||
'group inline-flex items-center gap-2.5 px-5 py-2.5 text-sm font-bold rounded-[var(--c-border-radius)] transition-all duration-300 active:scale-95 shadow-sm hover:shadow-md',
|
'group inline-flex items-center gap-2.5 px-5 py-2.5 text-sm font-bold custom-rounded transition-all duration-300 active:scale-95 shadow-sm hover:shadow-md',
|
||||||
// Active Styles
|
// Active Styles
|
||||||
$filterStatus === $filter['id'] ? match($filter['color']) {
|
$filterStatus === $filter['id'] ? match($filter['color']) {
|
||||||
'primary' => 'bg-primary-500 text-white shadow-primary-500/30 ring-2 ring-primary-500/20',
|
'primary' => 'bg-primary-500 text-white shadow-primary-500/30 ring-2 ring-primary-500/20',
|
||||||
@ -71,7 +71,7 @@
|
|||||||
|
|
||||||
<div class="space-y-4">
|
<div class="space-y-4">
|
||||||
{{-- Submitter Info --}}
|
{{-- Submitter Info --}}
|
||||||
<div class="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-[var(--c-border-radius)]">
|
<div class="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800 custom-rounded">
|
||||||
<div class="shrink-0">
|
<div class="shrink-0">
|
||||||
<div
|
<div
|
||||||
class="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-500/20 flex items-center justify-center">
|
class="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-500/20 flex items-center justify-center">
|
||||||
@ -88,7 +88,7 @@ class="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-500/20 flex items-c
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{-- Data Summary --}}
|
{{-- Data Summary --}}
|
||||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-[var(--c-border-radius)]">
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 p-3 bg-gray-50 dark:bg-gray-800 custom-rounded">
|
||||||
{{-- Company Summary --}}
|
{{-- Company Summary --}}
|
||||||
<div>
|
<div>
|
||||||
<div class="flex items-center gap-2 mb-1">
|
<div class="flex items-center gap-2 mb-1">
|
||||||
@ -159,7 +159,7 @@ class="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-500/20 flex items-c
|
|||||||
|
|
||||||
{{-- Latest Review Note --}}
|
{{-- Latest Review Note --}}
|
||||||
@if ($verification['reviews']['latest']['note'])
|
@if ($verification['reviews']['latest']['note'])
|
||||||
<div class="p-3 rounded-[var(--c-border-radius)] border {{ $verification['reviews']['latest']['classes'] }}">
|
<div class="p-3 custom-rounded border {{ $verification['reviews']['latest']['classes'] }}">
|
||||||
<p
|
<p
|
||||||
class="text-xs font-semibold uppercase mb-1 {{ $verification['reviews']['latest']['titleClasses'] }}">
|
class="text-xs font-semibold uppercase mb-1 {{ $verification['reviews']['latest']['titleClasses'] }}">
|
||||||
Catatan Terakhir
|
Catatan Terakhir
|
||||||
@ -177,7 +177,7 @@ class="text-xs font-semibold uppercase mb-1 {{ $verification['reviews']['latest'
|
|||||||
{{-- Review History Accordion --}}
|
{{-- Review History Accordion --}}
|
||||||
@if ($verification['reviews']['count'] > 0)
|
@if ($verification['reviews']['count'] > 0)
|
||||||
<div x-data="{ open: false }"
|
<div x-data="{ open: false }"
|
||||||
class="border border-gray-200 dark:border-gray-700 rounded-[var(--c-border-radius)] overflow-hidden">
|
class="border border-gray-200 dark:border-gray-700 custom-rounded overflow-hidden">
|
||||||
<button @click="open = !open"
|
<button @click="open = !open"
|
||||||
class="w-full flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
|
class="w-full flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
|
||||||
<div
|
<div
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user