diskominfo/simedkom
diskominfo/simedkom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: standardize UI border-radius using dynamic CSS variable across Filament middleware and blade components

Browse Source
This commit is contained in:
Yoga Pangestu 2026-03-31 15:52:01 +07:00
parent f5c0b0ec18
commit 1cb716aea2
4 changed files with 78 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
app/Http/Middleware/DynamicFilamentTheme.php
View File

@ -84,7 +84,64 @@ public function handle(Request $request, Closure $next): Response
}
/* Apply border radius to common elements */
.fi-section, .fi-btn, .fi-input, .fi-card, .fi-modal-window {
.fi-section,
.fi-section-header,
.fi-section-content,
.fi-btn,
.fi-input,
.fi-card,
.fi-modal-window,
.fi-dropdown-panel,
.fi-popover,
.fi-ta-content,
.fi-ta-header-cell,
.fi-ta-cell,
.fi-ta-row,
.fi-ta-ctn,
.fi-ta-content-grid-item,
.fi-badge,
.fi-avatar,
.fi-fo-wizard,
.fi-fo-wizard-header,
.fi-fo-wizard-step,
.fi-wi-widget,
.fi-wi-stats-overview-stat,
.fi-wi-stats-overview-stat-ctn,
.fi-in-repeatable-entry-item,
.fi-in-section,
.fi-in-grid,
.fi-ac-action,
.fi-no-notification,
.fi-no-notification-content,
.fi-fo-checkbox,
.fi-fo-radio,
.fi-fo-toggle,
.fi-fo-color-picker,
.fi-fo-date-time-picker,
.fi-fo-select-option,
.fi-main-aside,
.fi-sidebar-item,
.fi-sidebar-group {
border-radius: {$radius} !important;
}
/* Handle nested rounded elements that might resist override */
.fi-input-wrp,
.fi-fo-text-input,
.fi-fo-select,
.fi-fo-textarea,
.fi-fo-file-upload,
.fi-fo-rich-editor,
.fi-fo-markdown-editor,
.fi-fo-key-value {
border-radius: {$radius} !important;
}
/* Custom helper for custom views & override standard Tailwind rounded classes */
.custom-rounded,
.rounded-lg,
.rounded-xl,
.rounded-2xl {
border-radius: {$radius} !important;
}
</style>

18
resources/views/components/verification-card.blade.php
View File

@ -10,15 +10,15 @@
<div class="flex items-center gap-3">
{{-- Icon based on type --}}
@if ($type === 'company')
<div class="p-2 rounded-lg bg-info-50 dark:bg-info-500/10">
<div class="p-2 rounded-[var(--c-border-radius)] bg-info-50 dark:bg-info-500/10">
<x-heroicon-o-building-office-2 class="w-6 h-6 text-info-500" />
</div>
@elseif($type === 'media')
<div class="p-2 rounded-lg bg-info-50 dark:bg-info-500/10">
<div class="p-2 rounded-[var(--c-border-radius)] bg-info-50 dark:bg-info-500/10">
<x-heroicon-o-newspaper class="w-6 h-6 text-info-500" />
</div>
@else
<div class="p-2 rounded-lg bg-info-50 dark:bg-info-500/10">
<div class="p-2 rounded-[var(--c-border-radius)] bg-info-50 dark:bg-info-500/10">
<x-heroicon-o-user-circle class="w-6 h-6 text-info-500" />
</div>
@endif
@ -55,7 +55,7 @@
{{-- Alert for Revision Notes --}}
@if ($progress['needsRevision'] && $progress['latestNotes'])
<div
class="p-4 rounded-xl bg-warning-50 dark:bg-warning-500/10 border border-warning-200 dark:border-warning-500/20">
class="p-4 rounded-[var(--c-border-radius)] bg-warning-50 dark:bg-warning-500/10 border border-warning-200 dark:border-warning-500/20">
<div class="flex gap-3">
<div class="shrink-0">
<x-heroicon-s-exclamation-triangle class="w-5 h-5 text-warning-500" />
@ -81,7 +81,7 @@ class="p-4 rounded-xl bg-warning-50 dark:bg-warning-500/10 border border-warning
{{-- Alert for Rejection --}}
@if ($progress['isRejected'] && $progress['latestNotes'])
<div
class="p-4 rounded-xl bg-danger-50 dark:bg-danger-500/10 border border-danger-200 dark:border-danger-500/20">
class="p-4 rounded-[var(--c-border-radius)] bg-danger-50 dark:bg-danger-500/10 border border-danger-200 dark:border-danger-500/20">
<div class="flex gap-3">
<div class="shrink-0">
<x-heroicon-s-x-circle class="w-5 h-5 text-danger-500" />
@ -101,7 +101,7 @@ class="p-4 rounded-xl bg-danger-50 dark:bg-danger-500/10 border border-danger-20
{{-- Success Message for Approved --}}
@if ($progress['isApproved'])
<div
class="p-4 rounded-xl bg-success-50 dark:bg-success-500/10 border border-success-200 dark:border-success-500/20">
class="p-4 rounded-[var(--c-border-radius)] bg-success-50 dark:bg-success-500/10 border border-success-200 dark:border-success-500/20">
<div class="flex gap-3">
<div class="shrink-0">
<x-heroicon-s-check-circle class="w-5 h-5 text-success-500" />
@ -120,7 +120,7 @@ class="p-4 rounded-xl bg-success-50 dark:bg-success-500/10 border border-success
{{-- Pending Message --}}
@if ($progress['isPending'])
<div class="p-4 rounded-xl bg-info-50 dark:bg-info-500/10 border border-info-200 dark:border-info-500/20">
<div class="p-4 rounded-[var(--c-border-radius)] bg-info-50 dark:bg-info-500/10 border border-info-200 dark:border-info-500/20">
<div class="flex gap-3">
<div class="shrink-0">
<x-heroicon-s-clock class="w-5 h-5 text-info-500 animate-pulse" />
@ -139,7 +139,7 @@ class="p-4 rounded-xl bg-success-50 dark:bg-success-500/10 border border-success
{{-- No Data Message --}}
@if (!$hasEntity)
<div class="p-4 rounded-xl bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
<div class="p-4 rounded-[var(--c-border-radius)] bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
<div class="flex gap-3">
<div class="shrink-0">
<x-heroicon-o-information-circle class="w-5 h-5 text-gray-400" />
@ -165,7 +165,7 @@ class="p-4 rounded-xl bg-success-50 dark:bg-success-500/10 border border-success
{{-- Review History Accordion --}}
@if ($progress['reviewHistory']->isNotEmpty())
<div x-data="{ open: false }" class="border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden">
<div x-data="{ open: false }" class="border border-gray-200 dark:border-gray-700 rounded-[var(--c-border-radius)] overflow-hidden">
<button @click="open = !open"
class="w-full flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
<div class="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300">

10
resources/views/filament/pages/admin-verification.blade.php
View File

@ -3,7 +3,7 @@
@foreach ($this->getFilters as $filter)
<button wire:click="setFilter('{{ $filter['id'] }}')"
@class([
'group inline-flex items-center gap-2.5 px-5 py-2.5 text-sm font-bold rounded-2xl 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 rounded-[var(--c-border-radius)] transition-all duration-300 active:scale-95 shadow-sm hover:shadow-md',
// Active Styles
$filterStatus === $filter['id'] ? match($filter['color']) {
'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">
{{-- Submitter Info --}}
<div class="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
<div class="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-[var(--c-border-radius)]">
<div class="shrink-0">
<div
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>
{{-- Data Summary --}}
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
<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)]">
{{-- Company Summary --}}
<div>
<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 --}}
@if ($verification['reviews']['latest']['note'])
<div class="p-3 rounded-lg border {{ $verification['reviews']['latest']['classes'] }}">
<div class="p-3 rounded-[var(--c-border-radius)] border {{ $verification['reviews']['latest']['classes'] }}">
<p
class="text-xs font-semibold uppercase mb-1 {{ $verification['reviews']['latest']['titleClasses'] }}">
Catatan Terakhir
@ -177,7 +177,7 @@ class="text-xs font-semibold uppercase mb-1 {{ $verification['reviews']['latest'
{{-- Review History Accordion --}}
@if ($verification['reviews']['count'] > 0)
<div x-data="{ open: false }"
class="border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden">
class="border border-gray-200 dark:border-gray-700 rounded-[var(--c-border-radius)] overflow-hidden">
<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">
<div

12
resources/views/filament/pages/verification.blade.php
View File

@ -11,7 +11,7 @@
<x-slot name="heading">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="p-2 rounded-lg bg-primary-50 dark:bg-primary-500/10">
<div class="p-2 rounded-[var(--c-border-radius)] bg-primary-50 dark:bg-primary-500/10">
<x-heroicon-o-check-badge class="w-6 h-6 text-primary-500" />
</div>
<div>
@ -42,7 +42,7 @@
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
{{-- Company Summary --}}
<div
class="p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
class="p-4 rounded-[var(--c-border-radius)] border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
<div class="flex items-center gap-2 mb-2">
<x-heroicon-o-building-office-2 class="w-5 h-5 text-primary-500" />
<h4 class="font-medium text-gray-900 dark:text-white">Perusahaan</h4>
@ -55,7 +55,7 @@ class="p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dar
{{-- Media Summary --}}
<div
class="p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
class="p-4 rounded-[var(--c-border-radius)] border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
<div class="flex items-center gap-2 mb-2">
<x-heroicon-o-newspaper class="w-5 h-5 text-info-500" />
<h4 class="font-medium text-gray-900 dark:text-white">Media</h4>
@ -69,7 +69,7 @@ class="p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dar
{{-- Journalists Summary --}}
<div
class="p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
class="p-4 rounded-[var(--c-border-radius)] border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
<div class="flex items-center gap-2 mb-2">
<x-heroicon-o-identification class="w-5 h-5 text-info-500" />
<h4 class="font-medium text-gray-900 dark:text-white">Jurnalis</h4>
@ -121,7 +121,7 @@ class="p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dar
$iconClasses =
$alertIconClasses . (isset($alert['animate']) && $alert['animate'] ? ' animate-pulse' : '');
@endphp
<div class="p-4 rounded-xl border {{ $alertClasses }}">
<div class="p-4 rounded-[var(--c-border-radius)] border {{ $alertClasses }}">
<div class="flex gap-3">
<div class="shrink-0">
<x-dynamic-component :component="$iconName" class="w-5 h-5 {{ $iconClasses }}" />
@ -141,7 +141,7 @@ class="p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dar
{{-- Review History Accordion --}}
@if ($progress['reviewHistory']->isNotEmpty())
<div x-data="{ open: false }"
class="border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden">
class="border border-gray-200 dark:border-gray-700 rounded-[var(--c-border-radius)] overflow-hidden">
<button @click="open = !open"
class="w-full flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
<div class="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300">