Skip to content

Commit e31382d

Browse files
zerox80zerox80
committed
feat: add dark mode support to page management components
- Applied dark mode text color classes to PageManager headers, descriptions, and status cards - Updated SiteContentEditor section picker and headings with dark mode styling - Enhanced TutorialSection text elements with consistent dark mode colors
1 parent 62b53bf commit e31382d

3 files changed

Lines changed: 23 additions & 23 deletions

File tree

‎src/components/PageManager.jsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -985,8 +985,8 @@ const PageManager = () => {
985985
<div className="space-y-8">
986986
<div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
987987
<div>
988-
<h2 className="text-2xl font-bold text-gray-900">Seiten & Beiträge</h2>
989-
<p className="text-sm text-gray-600">
988+
<h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Seiten & Beiträge</h2>
989+
<p className="text-sm text-gray-600 dark:text-gray-300">
990990
Verwalte dynamische Seiten, Navigationseinträge und veröffentlichte Beiträge.
991991
</p>
992992
</div>
@@ -1013,21 +1013,21 @@ const PageManager = () => {
10131013
<div className="flex items-center gap-3 border-b border-gray-100 pb-4 mb-4">
10141014
<Navigation className="h-5 w-5 text-primary-600" />
10151015
<div>
1016-
<p className="text-sm font-semibold text-gray-900">Navigation</p>
1017-
<p className="text-xs text-gray-500">
1016+
<p className="text-sm font-semibold text-gray-900 dark:text-gray-100">Navigation</p>
1017+
<p className="text-xs text-gray-500 dark:text-gray-400">
10181018
{dynamicPagesInNav} dynamische Seite{dynamicPagesInNav === 1 ? '' : 'n'} im Menü
10191019
</p>
10201020
</div>
10211021
</div>
10221022
<div className="space-y-3">
10231023
{(navigation?.dynamic ?? []).map((item) => (
1024-
<div key={item.id} className="flex items-center justify-between text-sm text-gray-600">
1024+
<div key={item.id} className="flex items-center justify-between text-sm text-gray-600 dark:text-gray-300">
10251025
<span>{item.label}</span>
10261026
<span className="text-xs text-gray-400">/pages/{item.slug}</span>
10271027
</div>
10281028
))}
10291029
{dynamicPagesInNav === 0 && (
1030-
<p className="text-sm text-gray-500">Noch keine dynamischen Seiten in der Navigation.</p>
1030+
<p className="text-sm text-gray-500 dark:text-gray-400">Noch keine dynamischen Seiten in der Navigation.</p>
10311031
)}
10321032
</div>
10331033
</div>
@@ -1036,20 +1036,20 @@ const PageManager = () => {
10361036
<div className="flex items-center gap-3 border-b border-gray-100 pb-4 mb-4">
10371037
<Eye className="h-5 w-5 text-green-600" />
10381038
<div>
1039-
<p className="text-sm font-semibold text-gray-900">Veröffentlichungen</p>
1040-
<p className="text-xs text-gray-500">
1039+
<p className="text-sm font-semibold text-gray-900 dark:text-gray-100">Veröffentlichungen</p>
1040+
<p className="text-xs text-gray-500 dark:text-gray-400">
10411041
{totalPublishedPages} veröffentlichte Seite{totalPublishedPages === 1 ? '' : 'n'}
10421042
</p>
10431043
</div>
10441044
</div>
10451045
<div className="space-y-3">
10461046
{(publishedPages?.publishedSlugs ?? []).map((slugValue) => (
1047-
<div key={slugValue} className="flex items-center justify-between text-sm text-gray-600">
1047+
<div key={slugValue} className="flex items-center justify-between text-sm text-gray-600 dark:text-gray-300">
10481048
<span>/pages/{slugValue}</span>
10491049
</div>
10501050
))}
10511051
{totalPublishedPages === 0 && (
1052-
<p className="text-sm text-gray-500">Noch keine Seite veröffentlicht.</p>
1052+
<p className="text-sm text-gray-500 dark:text-gray-400">Noch keine Seite veröffentlicht.</p>
10531053
)}
10541054
</div>
10551055
</div>
@@ -1058,13 +1058,13 @@ const PageManager = () => {
10581058
<div className="flex items-center gap-3 border-b border-gray-100 pb-4 mb-4">
10591059
<Layers className="h-5 w-5 text-indigo-600" />
10601060
<div>
1061-
<p className="text-sm font-semibold text-gray-900">Seitenübersicht</p>
1062-
<p className="text-xs text-gray-500">
1061+
<p className="text-sm font-semibold text-gray-900 dark:text-gray-100">Seitenübersicht</p>
1062+
<p className="text-xs text-gray-500 dark:text-gray-400">
10631063
{pages.length} Seite{pages.length === 1 ? '' : 'n'} insgesamt
10641064
</p>
10651065
</div>
10661066
</div>
1067-
<div className="space-y-3 text-sm text-gray-600">
1067+
<div className="space-y-3 text-sm text-gray-600 dark:text-gray-300">
10681068
<p>
10691069
<span className="font-semibold">Ausgewählt:</span>{' '}
10701070
{selectedPage ? selectedPage.title : 'Keine Seite ausgewählt'}
@@ -1090,11 +1090,11 @@ const PageManager = () => {
10901090
<div className="grid gap-6 lg:grid-cols-2">
10911091
<div className="space-y-4">
10921092
{loading && pages.length === 0 ? (
1093-
<div className="rounded-2xl border border-gray-200 bg-white p-8 text-center text-gray-500">
1093+
<div className="rounded-2xl border border-gray-200 bg-white p-8 text-center text-gray-500 dark:text-gray-400">
10941094
Seiten werden geladen…
10951095
</div>
10961096
) : pages.length === 0 ? (
1097-
<div className="rounded-2xl border border-dashed border-gray-300 bg-gray-50 p-10 text-center text-gray-600">
1097+
<div className="rounded-2xl border border-dashed border-gray-300 bg-gray-50 p-10 text-center text-gray-600 dark:text-gray-300">
10981098
Noch keine Seiten vorhanden. Erstelle deine erste Seite, um Beiträge zu veröffentlichen.
10991099
</div>
11001100
) : (

‎src/components/SiteContentEditor/index.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,11 @@ const SectionPicker = ({ sections, selected, onSelect }) => {
3737
className={`rounded-xl border px-4 py-3 text-left transition-all ${
3838
isActive
3939
? 'border-primary-600 bg-primary-50 text-primary-700 shadow-sm'
40-
: 'border-gray-200 text-gray-700 hover:border-primary-200 hover:bg-gray-50'
40+
: 'border-gray-200 text-gray-700 hover:border-primary-200 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-700'
4141
}`}
4242
>
4343
<p className="text-sm font-semibold">{label}</p>
44-
<p className="text-xs text-gray-500">{section}</p>
44+
<p className="text-xs text-gray-500 dark:text-gray-400">{section}</p>
4545
</button>
4646
)
4747
})}
@@ -372,8 +372,8 @@ const SiteContentEditor = () => {
372372
<div className="space-y-8">
373373
<div className="flex flex-wrap items-center justify-between gap-3">
374374
<div>
375-
<h2 className="text-2xl font-bold text-gray-900">Seiteninhalte verwalten</h2>
376-
<p className="text-sm text-gray-600">
375+
<h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Seiteninhalte verwalten</h2>
376+
<p className="text-sm text-gray-600 dark:text-gray-300">
377377
Bearbeite Texte, Navigation und weitere statische Inhalte. Änderungen werden nach dem Speichern sofort aktiv.
378378
</p>
379379
</div>
@@ -399,7 +399,7 @@ const SiteContentEditor = () => {
399399

400400
{!selectedSection && (
401401
<div className="space-y-4">
402-
<p className="text-sm font-medium text-gray-700">Wähle einen Inhaltsbereich aus:</p>
402+
<p className="text-sm font-medium text-gray-700 dark:text-gray-200">Wähle einen Inhaltsbereich aus:</p>
403403
<SectionPicker
404404
sections={sectionOptions}
405405
selected={selectedSection}

‎src/components/TutorialSection.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ const TutorialSection = () => {
2929
id="tutorials"
3030
>
3131
<div className="text-center mb-12">
32-
<h2 className="section-title dark:text-slate-100">{sectionContent.title || 'Tutorial Inhalte'}</h2>
33-
<p className="text-gray-600 dark:text-slate-300 text-lg max-w-2xl mx-auto">
32+
<h2 className="section-title">{sectionContent.title || 'Tutorial Inhalte'}</h2>
33+
<p className="text-gray-600 dark:text-gray-300 text-lg max-w-2xl mx-auto">
3434
{sectionContent.description ||
3535
'Umfassende Lernmodule für alle Erfahrungsstufen - vom Anfänger bis zum Profi'}
3636
</p>
@@ -47,7 +47,7 @@ const TutorialSection = () => {
4747
)}
4848

4949
{loading && normalizedTutorials.length === 0 ? (
50-
<div className="text-center text-gray-600 py-12">Lade Tutorials…</div>
50+
<div className="text-center text-gray-600 dark:text-gray-300 py-12">Lade Tutorials…</div>
5151
) : (
5252
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
5353
{normalizedTutorials.map((tutorial) => (

0 commit comments

Comments
 (0)