kontenhumas
/
kontenhumas-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: dark mode

This commit is contained in:
Sabda Yagra 2026-02-04 15:43:19 +07:00
parent 82062bc3ad
commit 27fbb39396
22 changed files with 94 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/[locale]/(admin)/admin/categories/components/table-categories.tsx
View File

@ -187,7 +187,7 @@ const TableCategories = () => {
return (
<>
<div className="w-full overflow-x-auto bg-white rounded-lg border border-gray-200 shadow-sm">
<div className="w-full overflow-x-auto bg-white dark:bg-default-50 rounded-lg border border-gray-200 shadow-sm">
<div className="flex justify-between items-center px-4 py-2">
<h2 className="text-lg font-semibold">Daftar Kategori</h2>

8
app/[locale]/(admin)/admin/categories/page.tsx
View File

@ -127,12 +127,12 @@ const ReactTableImagePage = () => {
};
return (
<div className="min-h-screen bg-gray-50">
<div className="min-h-screen bg-gray-50 dark:bg-default-50">
{/* <SiteBreadcrumb /> */}
<div className="p-6">
<div className="max-w-7xl mx-auto">
<Card className="shadow-sm border-0">
<CardHeader className="border-b border-gray-200 bg-white rounded-t-lg">
<CardHeader className="border-b border-gray-200 bg-white dark:bg-default-50 rounded-t-lg">
<CardTitle>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
@ -140,7 +140,7 @@ const ReactTableImagePage = () => {
<UploadIcon className="w-4 h-4 text-blue-600" />
</div>
<div>
<h1 className="text-xl font-semibold text-gray-900">
<h1 className="text-xl font-semibold text-gray-900 dark:text-white">
Categories Management
</h1>
<p className="text-sm text-gray-500">
@ -294,7 +294,7 @@ const ReactTableImagePage = () => {
</div>
</CardTitle>
</CardHeader>
<CardContent className="p-6 bg-gray-50">
<CardContent className="p-6 bg-gray-50 dark:bg-default-50">
<TableCategories />
</CardContent>
</Card>

2
app/[locale]/(admin)/admin/content/audio/components/audio-tabs.tsx
View File

@ -35,7 +35,7 @@ const AudioTabs = () => {
</div>
<TabsContent value="submitted" className="mt-0">
<div className="bg-white rounded-lg border border-gray-200 shadow-sm">
<div className="bg-white dark:bg-default-50 rounded-lg border border-gray-200 shadow-sm">
<TableAudio />
</div>
</TabsContent>

2
app/[locale]/(admin)/admin/content/audio/create/page.tsx
View File

@ -3,7 +3,7 @@ import FormAudio from "@/components/form/content/audio/audio-form";
const AudioCreatePage = async () => {
return (
<div>
<div className="space-y-4 bg-slate-100">
<div className="space-y-4 bg-slate-100 dark:bg-default-50">
<FormAudio />
</div>
</div>

2
app/[locale]/(admin)/admin/content/audio/detail/[id]/page.tsx
View File

@ -5,7 +5,7 @@ const AudioDetailPage = async () => {
return (
<div>
<SiteBreadcrumb />
<div className="space-y-4 bg-slate-100">
<div className="space-y-4 bg-slate-100 dark:bg-default-50">
<FormAudioDetail />
</div>
</div>

8
app/[locale]/(admin)/admin/content/audio/page.tsx
View File

@ -12,12 +12,12 @@ const ReactTableAudioPage = () => {
const { can } = usePermission();
return (
<div className="min-h-screen bg-gray-50">
<div className="min-h-screen bg-gray-50 dark:bg-default-50">
<SiteBreadcrumb />
<div className="p-6">
<div className="max-w-7xl mx-auto">
<Card className="shadow-sm border-0">
<CardHeader className="border-b border-gray-200 bg-white rounded-t-lg">
<CardHeader className="border-b border-gray-200 bg-white dark:bg-default-50 rounded-t-lg">
<CardTitle>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
@ -25,7 +25,7 @@ const ReactTableAudioPage = () => {
<UploadIcon className="w-4 h-4 text-blue-600" />
</div>
<div>
<h1 className="text-xl font-semibold text-gray-900">
<h1 className="text-xl font-semibold text-gray-900 dark:text-white">
Audio Management
</h1>
<p className="text-sm text-gray-500">
@ -49,7 +49,7 @@ const ReactTableAudioPage = () => {
</div>
</CardTitle>
</CardHeader>
<CardContent className="p-6 bg-gray-50">
<CardContent className="p-6 bg-gray-50 dark:bg-default-50">
<AudioTabs />
</CardContent>
</Card>

2
app/[locale]/(admin)/admin/content/image/components/image-tabs.tsx
View File

@ -35,7 +35,7 @@ const ImageTabs = () => {
</div>
*/}
<TabsContent value="submitted" className="mt-0">
<div className="bg-white rounded-lg border border-gray-200 shadow-sm">
<div className="bg-white dark:bg-default-50 rounded-lg border border-gray-200 shadow-sm">
<TableImage />
</div>
</TabsContent>

2
app/[locale]/(admin)/admin/content/image/detail/[id]/page.tsx
View File

@ -5,7 +5,7 @@ const ImageDetailPage = async () => {
return (
<div>
<SiteBreadcrumb />
<div className="space-y-4 bg-slate-100">
<div className="space-y-4 bg-slate-100 dark:bg-default-50">
<FormImageDetail />
</div>
</div>

8
app/[locale]/(admin)/admin/content/image/page.tsx
View File

@ -12,12 +12,12 @@ const ReactTableImagePage = () => {
const { can } = usePermission();
return (
<div className="min-h-screen bg-gray-50">
<div className="min-h-screen bg-gray-50 dark:bg-default-50">
<SiteBreadcrumb />
<div className="p-6">
<div className="max-w-7xl mx-auto">
<Card className="shadow-sm border-0">
<CardHeader className="border-b border-gray-200 bg-white rounded-t-lg">
<CardHeader className="border-b border-gray-200 bg-white dark:bg-default-50 rounded-t-lg">
<CardTitle>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
@ -25,7 +25,7 @@ const ReactTableImagePage = () => {
<UploadIcon className="w-4 h-4 text-blue-600" />
</div>
<div>
<h1 className="text-xl font-semibold text-gray-900">
<h1 className="text-xl font-semibold text-gray-900 dark:text-white">
Image Management
</h1>
<p className="text-sm text-gray-500">
@ -55,7 +55,7 @@ const ReactTableImagePage = () => {
</div>
</CardTitle>
</CardHeader>
<CardContent className="p-6 bg-gray-50">
<CardContent className="p-6 bg-gray-50 dark:bg-default-50">
<ImageTabs />
</CardContent>
</Card>

2
app/[locale]/(admin)/admin/content/text/components/document-tabs.tsx
View File

@ -35,7 +35,7 @@ const DocumentTabs = () => {
</div>
<TabsContent value="submitted" className="mt-0">
<div className="bg-white rounded-lg border border-gray-200 shadow-sm">
<div className="bg-white dark:bg-default-50 rounded-lg border border-gray-200 shadow-sm">
<TableTeks />
</div>
</TabsContent>

2
app/[locale]/(admin)/admin/content/text/create/page.tsx
View File

@ -5,7 +5,7 @@ const TeksCreatePage = async () => {
return (
<div>
<SiteBreadcrumb />
<div className="space-y-4 bg-slate-100">
<div className="space-y-4 bg-slate-100 dark:bg-default-50">
<FormTeks />
</div>
</div>

2
app/[locale]/(admin)/admin/content/text/detail/[id]/page.tsx
View File

@ -5,7 +5,7 @@ const TeksDetailPage = async () => {
return (
<div>
<SiteBreadcrumb />
<div className="space-y-4 bg-slate-100">
<div className="space-y-4 bg-slate-100 dark:bg-default-50">
<FormTeksDetail />
</div>
</div>

10
app/[locale]/(admin)/admin/content/text/page.tsx
View File

@ -12,12 +12,12 @@ const ReactTableDocumentPage = () => {
const { can } = usePermission();
return (
<div className="min-h-screen bg-gray-50">
{/* <SiteBreadcrumb /> */}
<div className="min-h-screen bg-gray-50 dark:bg-default-50">
<SiteBreadcrumb />
<div className="p-6">
<div className="max-w-7xl mx-auto">
<Card className="shadow-sm border-0">
<CardHeader className="border-b border-gray-200 bg-white rounded-t-lg">
<CardHeader className="border-b border-gray-200 bg-white dark:bg-default-50 rounded-t-lg">
<CardTitle>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
@ -25,7 +25,7 @@ const ReactTableDocumentPage = () => {
<UploadIcon className="w-4 h-4 text-blue-600" />
</div>
<div>
<h1 className="text-xl font-semibold text-gray-900">
<h1 className="text-xl font-semibold text-gray-900 dark:text-white">
Document Management
</h1>
<p className="text-sm text-gray-500">
@ -50,7 +50,7 @@ const ReactTableDocumentPage = () => {
</div>
</CardTitle>
</CardHeader>
<CardContent className="p-6 bg-gray-50">
<CardContent className="p-6 bg-gray-50 dark:bg-default-50">
<DocumentTabs />
</CardContent>
</Card>

2
app/[locale]/(admin)/admin/content/video/components/audio-visual-tabs.tsx
View File

@ -35,7 +35,7 @@ const AudioVisualTabs = () => {
</div> */}
<TabsContent value="submitted" className="mt-0">
<div className="bg-white rounded-lg border border-gray-200 shadow-sm">
<div className="bg-white dark:bg-default-50 rounded-lg border border-gray-200 shadow-sm">
<TableVideo />
</div>
</TabsContent>

2
app/[locale]/(admin)/admin/content/video/detail/[id]/page.tsx
View File

@ -5,7 +5,7 @@ const VideoDetailPage = async () => {
return (
<div>
<SiteBreadcrumb />
<div className="space-y-4 bg-slate-100">
<div className="space-y-4 bg-slate-100 dark:bg-default-50">
<FormVideoDetail />
</div>
</div>

10
app/[locale]/(admin)/admin/content/video/page.tsx
View File

@ -12,20 +12,20 @@ const ReactTableAudioVisualPage = () => {
const { can } = usePermission();
return (
<div className="min-h-screen bg-gray-50">
<div className="min-h-screen bg-gray-50 dark:bg-default-50">
<SiteBreadcrumb />
<div className="p-6">
<div className="max-w-7xl mx-auto">
<Card className="shadow-sm border-0">
<CardHeader className="border-b border-gray-200 bg-white rounded-t-lg">
<CardHeader className="border-b border-gray-200 bg-white dark:bg-default-50 rounded-t-lg">
<CardTitle>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="w-8 h-8 bg-black rounded-lg flex items-center justify-center">
<div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
<UploadIcon className="w-4 h-4 text-blue-600" />
</div>
<div>
<h1 className="text-xl font-semibold text-gray-900">
<h1 className="text-xl font-semibold text-gray-900 dark:text-white">
Audio-Visual Management
</h1>
<p className="text-sm text-gray-500">
@ -50,7 +50,7 @@ const ReactTableAudioVisualPage = () => {
</div>
</CardTitle>
</CardHeader>
<CardContent className="p-6 bg-gray-50">
<CardContent className="p-6 bg-gray-50 dark:bg-default-50">
<AudioVisualTabs />
</CardContent>
</Card>

2
app/[locale]/(admin)/admin/management-user/page.tsx
View File

@ -32,7 +32,7 @@ export default function ManagementUser() {
return (
<div>
<SiteBreadcrumb />
<section className="flex flex-col gap-2 bg-white rounded-lg p-3 mt-5 border">
<section className="flex flex-col gap-2 bg-white dark:bg-default-50 rounded-lg p-3 mt-5 border">
<div className="flex justify-between py-3">
<p className="text-lg">
Data User

19
app/[locale]/globals.css
View File

@ -133,6 +133,25 @@
}
}
@layer base {
/* CKEditor – force light mode even in dark */
.ck-viewer .ck.ck-editor__main > .ck-editor__editable {
@apply bg-white text-black;
}
.ck-viewer .ck-content {
@apply text-black;
}
.ck-viewer .ck-content h1,
.ck-viewer .ck-content h2,
.ck-viewer .ck-content h3,
.ck-viewer .ck-content p,
.ck-viewer .ck-content li {
@apply text-black;
}
}
/* @import "tailwindcss";
@import "tw-animate-css";

41
components/editor/view-editor.js
View File

@ -1,18 +1,39 @@
// import React from "react";
// import { CKEditor } from "@ckeditor/ckeditor5-react";
// import Editor from "@/vendor/ckeditor5/build/ckeditor";
// function ViewEditor(props) {
// return (
// <CKEditor
// editor={Editor}
// data={props.initialData}
// disabled={true}
// config={{
// // toolbar: [],
// isReadOnly: true,
// }}
// />
// );
// }
// export default ViewEditor;
import React from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import Editor from "@/vendor/ckeditor5/build/ckeditor";
function ViewEditor(props) {
function ViewEditor({ initialData }) {
return (
<CKEditor
editor={Editor}
data={props.initialData}
disabled={true}
config={{
// toolbar: [],
isReadOnly: true,
}}
/>
<div className="ck-viewer">
<CKEditor
editor={Editor}
data={initialData}
disabled
config={{
isReadOnly: true,
}}
/>
</div>
);
}

6
components/form/categories/categories-update-form.tsx
View File

@ -225,13 +225,13 @@ export default function CategoriesUpdateForm() {
</div>
</div>
<Button
<button
type="submit"
className="w-full mt-4 bg-green-600 text-white"
className="w-full mt-4 bg-[#1f2937] text-white py-2 rounded-xl hover:bg-slate-500"
disabled={isSubmitting || isUploading}
>
{isSubmitting ? "Menyimpan..." : "Simpan Perubahan"}
</Button>
</button>
</Card>
{/* SIDEBAR */}

12
components/landing-page/navbar.tsx
View File

@ -75,7 +75,7 @@ export default function Navbar() {
const fullname = Cookies.get("ufne");
return (
<header className="relative max-w-[1400px] mx-auto flex items-center justify-between px-4 py-3 border-b bg-white z-50">
<header className="relative max-w-[1400px] mx-auto flex items-center justify-between px-4 py-3 border-b bg-white dark:bg-default-50 z-50">
<div className="flex flex-row items-center justify-between space-x-4 z-10">
<Menu
className="w-6 h-6 cursor-pointer"
@ -92,6 +92,10 @@ export default function Navbar() {
</Link>
<DynamicLogoTenant />
<div className="hidden custom-lg-button:flex items-end">
<ThemeSwitcher />
</div>
</div>
{/* 🌐 NAV MENU */}
@ -171,10 +175,6 @@ export default function Navbar() {
})}
</nav>
{/* <div className="hidden custom-lg-button:flex text-left">
<ThemeSwitcher />
</div> */}
{/* 🔹 PROFILE / LOGIN SECTION */}
<nav className="hidden md:flex items-center gap-3 z-10 relative">
{!isLoggedIn ? (
@ -357,7 +357,7 @@ export default function Navbar() {
</Link>
<Link
href="/auth/register"
className="block text-lg text-gray-800"
className="block text-lg text-gray-800 dark:text-white"
>
{t("register")}
</Link>

2
components/table/management-user/management-user-internal-table.tsx
View File

@ -193,7 +193,7 @@ const UserInternalTable = () => {
};
return (
<div className="bg-white">
<div className="bg-white dark:bg-default-50">
<div className="flex justify-between py-3">
<Input
type="text"