Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Dashboard light and dark mode

Browse Source
This commit is contained in:
ISA
2025-08-18 14:34:24 +02:00
parent 710d780a3a
commit eae8ea37d0
9 changed files with 46 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/main/dashboard/DashboardView.tsx
View File

@@ -25,7 +25,7 @@ const DashboardView: React.FC = () => {
}, [dispatch]);
//-------------------------------------
return (
<div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-5vh)] xl:h-[calc(100vh-10vh-6vh)] laptop:gap-0">
<div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-5vh)] xl:h-[calc(100vh-10vh-6vh)] laptop:gap-0 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
{/* Header */}
<div className="flex justify-between items-center w-full lg:w-2/3">
<div className="flex justify-between gap-1">

30
components/main/dashboard/NetworkInfo.tsx
View File

@@ -38,7 +38,7 @@ const NetworkInfo: React.FC = () => {
return (
<div className="w-full flex-direction: row flex">
<div className=" flex-grow flex justify-between items-center mt-1 bg-white p-2 rounded-lg shadow-md border border-gray-200 laptop:m-0 laptop:scale-y-75 2xl:scale-y-75">
<div className=" flex-grow flex justify-between items-center mt-1 bg-white dark:bg-gray-800 p-2 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 laptop:m-0 laptop:scale-y-75 2xl:scale-y-75">
<div className="flex items-center space-x-4">
<Image
src="/images/IP-icon.svg"
@@ -49,8 +49,12 @@ const NetworkInfo: React.FC = () => {
priority
/>
<div>
<p className="text-xs text-gray-500">IP-Adresse</p>
<p className="text-sm font-medium text-gray-700">{ip}</p>
<p className="text-xs text-gray-500 dark:text-gray-400">
IP-Adresse
</p>
<p className="text-sm font-medium text-gray-700 dark:text-gray-200">
{ip}
</p>
</div>
</div>
@@ -64,8 +68,12 @@ const NetworkInfo: React.FC = () => {
priority
/>
<div>
<p className="text-xs text-gray-500">Subnet-Maske</p>
<p className="text-sm font-medium text-gray-700">{subnet}</p>
<p className="text-xs text-gray-500 dark:text-gray-400">
Subnet-Maske
</p>
<p className="text-sm font-medium text-gray-700 dark:text-gray-200">
{subnet}
</p>
</div>
</div>
@@ -79,16 +87,20 @@ const NetworkInfo: React.FC = () => {
priority
/>
<div>
<p className="text-xs text-gray-500">Gateway</p>
<p className="text-sm font-medium text-gray-700">{gateway}</p>
<p className="text-xs text-gray-500 dark:text-gray-400">Gateway</p>
<p className="text-sm font-medium text-gray-700 dark:text-gray-200">
{gateway}
</p>
</div>
</div>
<div className="flex items-center space-x-4">
<div className="text-xs font-bold text-littwin-blue">OPC-UA</div>
<div>
<p className="text-xs text-gray-500">Status</p>
<p className="text-sm font-medium text-gray-700">{opcUaZustand}</p>
<p className="text-xs text-gray-500 dark:text-gray-400">Status</p>
<p className="text-sm font-medium text-gray-700 dark:text-gray-200">
{opcUaZustand}
</p>
</div>
</div>
{/* OPC UA Nodeset Name */}

10
components/main/dashboard/VersionInfo.tsx
View File

@@ -18,22 +18,24 @@ const VersionInfo: React.FC<VersionInfoProps> = ({ className = "" }) => {
return (
<div
className={`bg-gray-50 rounded-lg shadow-sm border border-gray-200 w-full laptop:p-2 ${className}`}
className={`bg-gray-50 dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 w-full laptop:p-2 ${className}`}
>
<h2 className="text-lg font-semibold text-gray-700 mb-2">
<h2 className="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-2">
Versionsinformationen
</h2>
<div className="flex flex-row p-2 space-x-2">
<Icon icon="bx:code-block" className="text-xl text-blue-400" />
<p className="text-sm text-gray-600">
<p className="text-sm text-gray-600 dark:text-gray-300">
Applikationsversion: {appVersion}
</p>
</div>
<div className="flex flex-row p-2 space-x-2">
<Icon icon="mdi:web" className="text-xl text-blue-400" />
<p className="text-sm text-gray-600">Webversion: {webVersion}</p>
<p className="text-sm text-gray-600 dark:text-gray-300">
Webversion: {webVersion}
</p>
</div>
</div>
);