NiekRabelink/Fociz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor UI components to use 'fociz-card' and 'fociz-card-interactive' classes for consistent styling across profile, roadmap, and user management pages; update text styles for improved readability and visual hierarchy.

Browse Source
This commit is contained in:
Niek Rabelink
2026-09-09 16:46:18 +02:00
parent 64a7a3bcf0
commit c5629dcfaa
7 changed files with 147 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin.php
+11 -11
View File
@@ -176,7 +176,7 @@ require_once __DIR__ . '/includes/header.php';
<div class="space-y-8 max-w-7xl mx-auto pb-12">
<!-- Top Header Banner -->
<div class="relative overflow-hidden bg-white dark:bg-[#111622] border border-slate-200 dark:border-slate-800/80 rounded-2xl p-6 sm:p-8 shadow-xs backdrop-blur-xl transition">
<div class="relative overflow-hidden fociz-card p-6 sm:p-8">
<div class="absolute -top-24 -right-24 w-80 h-80 bg-indigo-500/10 rounded-full blur-3xl pointer-events-none"></div>
<div class="absolute -bottom-24 -left-24 w-80 h-80 bg-sky-500/10 rounded-full blur-3xl pointer-events-none"></div>
@@ -217,7 +217,7 @@ require_once __DIR__ . '/includes/header.php';
<!-- Stat kaarten rij -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
<div class="bg-white dark:bg-[#111622] border border-slate-200 dark:border-slate-800/80 rounded-2xl p-5 flex items-center space-x-4 shadow-xs transition">
<div class="fociz-card p-5 flex items-center space-x-4">
<div class="w-12 h-12 rounded-xl bg-indigo-50 dark:bg-indigo-950/40 border border-indigo-200 dark:border-indigo-800/60 flex items-center justify-center text-indigo-600 dark:text-indigo-400 flex-shrink-0">
<i data-lucide="users" class="w-6 h-6"></i>
</div>
@@ -228,7 +228,7 @@ require_once __DIR__ . '/includes/header.php';
</div>
</div>
<div class="bg-white dark:bg-[#111622] border border-slate-200 dark:border-slate-800/80 rounded-2xl p-5 flex items-center space-x-4 shadow-xs transition">
<div class="fociz-card p-5 flex items-center space-x-4">
<div class="w-12 h-12 rounded-xl bg-sky-50 dark:bg-sky-950/40 border border-sky-200 dark:border-sky-800/60 flex items-center justify-center text-sky-600 dark:text-sky-400 flex-shrink-0">
<i data-lucide="calendar" class="w-6 h-6"></i>
</div>
@@ -239,7 +239,7 @@ require_once __DIR__ . '/includes/header.php';
</div>
</div>
<div class="bg-white dark:bg-[#111622] border border-slate-200 dark:border-slate-800/80 rounded-2xl p-5 flex items-center space-x-4 shadow-xs transition">
<div class="fociz-card p-5 flex items-center space-x-4">
<div class="w-12 h-12 rounded-xl bg-indigo-50 dark:bg-indigo-950/40 border border-indigo-200 dark:border-indigo-800/60 flex items-center justify-center text-indigo-600 dark:text-indigo-400 flex-shrink-0">
<i data-lucide="check-square" class="w-6 h-6"></i>
</div>
@@ -250,7 +250,7 @@ require_once __DIR__ . '/includes/header.php';
</div>
</div>
<div class="bg-white dark:bg-[#111622] border border-slate-200 dark:border-slate-800/80 rounded-2xl p-5 flex items-center space-x-4 shadow-xs transition">
<div class="fociz-card p-5 flex items-center space-x-4">
<div class="w-12 h-12 rounded-xl bg-amber-50 dark:bg-amber-950/40 border border-amber-200 dark:border-amber-800/60 flex items-center justify-center text-amber-600 dark:text-amber-400 flex-shrink-0">
<i data-lucide="mail" class="w-6 h-6"></i>
</div>
@@ -269,7 +269,7 @@ require_once __DIR__ . '/includes/header.php';
<div class="lg:col-span-8 space-y-8">
<!-- 1. Microsoft 365 Azure App Registratie -->
<div class="bg-white dark:bg-[#111622] border border-slate-200 dark:border-slate-800/80 rounded-2xl p-6 sm:p-7 shadow-xs transition">
<div class="fociz-card p-6 sm:p-7">
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-6 border-b border-slate-100 dark:border-slate-800/80">
<div class="flex items-center space-x-3.5">
<div class="w-12 h-12 rounded-xl bg-sky-50 dark:bg-sky-950/40 border border-sky-200 dark:border-sky-800/60 flex items-center justify-center text-sky-600 dark:text-sky-400 font-bold shadow-xs">
@@ -409,7 +409,7 @@ require_once __DIR__ . '/includes/header.php';
</div>
<!-- 2. Atlassian Jira Bedrijfsinstellingen -->
<div class="bg-white dark:bg-[#111622] border border-slate-200 dark:border-slate-800/80 rounded-2xl p-6 sm:p-7 shadow-xs transition">
<div class="fociz-card p-6 sm:p-7">
<div class="flex items-center space-x-3.5 pb-6 border-b border-slate-100 dark:border-slate-800/80">
<div class="w-12 h-12 rounded-xl bg-indigo-50 dark:bg-indigo-950/40 border border-indigo-200 dark:border-indigo-800/60 flex items-center justify-center text-indigo-600 dark:text-indigo-400 font-bold shadow-xs">
<i data-lucide="trello" class="w-6 h-6"></i>
@@ -453,7 +453,7 @@ require_once __DIR__ . '/includes/header.php';
</div>
<!-- 3. Organisatie Werkdag Standaarden (Release v1.4) -->
<div class="bg-white dark:bg-[#111622] border border-slate-200 dark:border-slate-800/80 rounded-2xl p-6 sm:p-7 shadow-xs space-y-6 transition">
<div class="fociz-card p-6 sm:p-7 space-y-6">
<div class="flex items-center justify-between pb-4 border-b border-slate-100 dark:border-slate-800/80">
<div class="flex items-center space-x-3.5">
<div class="w-12 h-12 rounded-xl bg-indigo-50 dark:bg-indigo-950/40 border border-indigo-200 dark:border-indigo-800/60 flex items-center justify-center text-indigo-600 dark:text-indigo-400 font-bold shadow-xs">
@@ -565,7 +565,7 @@ require_once __DIR__ . '/includes/header.php';
</div>
<!-- 4. AI & Brainstorm Co-Pilot (Release v1.5) -->
<div class="bg-white dark:bg-[#111622] border border-slate-200 dark:border-slate-800/80 rounded-2xl p-6 sm:p-7 shadow-xs space-y-6 transition">
<div class="fociz-card p-6 sm:p-7 space-y-6">
<div class="flex items-center justify-between pb-4 border-b border-slate-100 dark:border-slate-800/80">
<div class="flex items-center space-x-3.5">
<div class="w-12 h-12 rounded-xl bg-amber-50 dark:bg-amber-950/40 border border-amber-200 dark:border-amber-800/60 flex items-center justify-center text-amber-600 dark:text-amber-400 font-bold shadow-xs">
@@ -626,7 +626,7 @@ require_once __DIR__ . '/includes/header.php';
<div class="lg:col-span-4 space-y-6">
<!-- Team Status Overzicht -->
<div class="bg-white dark:bg-[#111622] border border-slate-200 dark:border-slate-800/80 rounded-2xl p-6 shadow-xs space-y-5 transition">
<div class="fociz-card p-6 space-y-5">
<div class="flex items-center justify-between pb-4 border-b border-slate-100 dark:border-slate-800/80">
<div class="flex items-center space-x-2.5">
<i data-lucide="activity" class="w-4 h-4 text-indigo-600 dark:text-indigo-400"></i>
@@ -671,7 +671,7 @@ require_once __DIR__ . '/includes/header.php';
</div>
<!-- Systeem Gezondheid & Beveiliging -->
<div class="bg-white dark:bg-[#111622] border border-slate-200 dark:border-slate-800/80 rounded-2xl p-6 shadow-xs space-y-4 transition">
<div class="fociz-card p-6 space-y-4">
<div class="flex items-center space-x-2 text-teal-600 dark:text-teal-400 text-xs font-semibold">
<i data-lucide="shield-check" class="w-4 h-4"></i>
<span>Systeem & Beveiliging</span>