adapt navigation + apply lit styling to Dashboard and Header Elements

src/components/Header/Header.tsx

@@ -3,12 +3,7 @@ import { Disclosure } from '@headlessui/react';
 import { MenuIcon, XIcon } from '@heroicons/react/outline';
 import clsx from 'clsx';
 import { Link, useLocation } from 'react-router-dom';
-
+import { DASHBOARD_APPS } from 'src/modules/dashboard/consts';
-const navigation = [
-  { name: 'Dashboard', to: '/dashboard', requiresAdmin: false },
-  { name: 'Dateiablage', to: '/files', requiresAdmin: false },
-  { name: 'Projekte', to: '/projects', requiresAdmin: false },
-];
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface HeaderProps {}
@@ -18,14 +13,14 @@ const Header: React.FC<HeaderProps> = () => {
 
   return (
     <>
-      <Disclosure as="nav" className="bg-white shadow relative z-10">
+      <Disclosure as="nav" className="bg-light shadow relative z-10">
         {({ open }) => (
           <div className="relative">
             <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
               <div className="relative flex justify-between h-16">
                 <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
                   {/* Mobile menu button */}
-                  <Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500">
+                  <Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500">
                     <span className="sr-only">Open main menu</span>
                     {open ? (
                       <XIcon className="block h-6 w-6" aria-hidden="true" />
@@ -36,24 +31,24 @@ const Header: React.FC<HeaderProps> = () => {
                 </div>
                 <div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
                   <Link to="/" className="flex-shrink-0 flex items-center">
-                    <img className="block lg:hidden" src="/assets/logo-small.svg" alt="Stackspin" />
+                    <img className="block lg:hidden" src="/assets/lit_logos/lit_transp_title_96.png" alt="Local-IT" />
-                    <img className="hidden lg:block" src="/assets/logo.svg" alt="Stackspin" />
+                    <img className="hidden lg:block" src="/assets/lit_logos/lit_transp_title_96.png" alt="Local-IT" />
                   </Link>
                   <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
                     {/* Current: "border-primary-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" */}
-                    {navigation.map((item) => (
+                    {DASHBOARD_APPS('').map((app) => (
                       <Link
-                        key={item.name}
+                        key={app.name}
-                        to={item.to}
+                        to={app.internalUrl}
                         className={clsx(
-                          'border-primary-50 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium',
+                          'border-primary-50 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium litbutton',
                           {
-                            'border-primary-500 text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium':
+                            'border-primary-500 litbutton-active text-gray-500 hover:border-gray-300 inline-flex items-center px-1 pt-1 text-sm font-medium':
-                              pathname.includes(item.to),
+                              pathname.includes(app.internalUrl),
                           },
                         )}
                       >
-                        {item.name}
+                        {app.name}
                       </Link>
                     ))}
                   </div>
@@ -63,20 +58,18 @@ const Header: React.FC<HeaderProps> = () => {
 
             <Disclosure.Panel className="sm:hidden">
               <div className="pt-2 pb-4 space-y-1">
-                {navigation.map((item) => (
+                {DASHBOARD_APPS('').map((app) => (
                   <Link
-                    key={item.name}
+                    key={app.name}
-                    to={item.to}
+                    to={app.internalUrl}
                     className={clsx(
-                      'border-transparent text-gray-500 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium',
+                      'border-transparent text-gray-500 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 litbutton text-base font-medium',
                       {
-                        'bg-primary-50 border-primary-400 text-primary-700 block pl-3 pr-4 py-2': pathname.includes(
+                        'litbutton-active border-primary-400 block pl-3 pr-4 py-2': pathname.includes(app.internalUrl),
-                          item.to,
-                        ),
                       },
                     )}
                   >
-                    {item.name}
+                    {app.name}
                   </Link>
                 ))}
               </div>

src/modules/dashboard/components/DashboardCard/DashboardCard.tsx

@@ -39,7 +39,7 @@ export const DashboardCard: React.FC<any> = ({ app }: { app: any }) => {
               />
 
               <div>
-                <h2 className="text-xl leading-8 font-bold">{app.name}</h2>
+                <h2 className="text-xl text-logo-darkviolet border-logo-darkviolet leading-8 font-bold">{app.name}</h2>
               </div>
             </div>
           </div>

src/modules/dashboard/consts.ts

@@ -17,6 +17,14 @@ export const DASHBOARD_APPS = (rootDomain: string) => [
     internalUrl: `projects`,
     externalUrl: `https://board.${rootDomain}`,
   },
+  {
+    id: 3,
+    name: 'Secrets',
+    assetSrc: '/assets/nextcloud.svg',
+    markdownSrc: '/markdown/nextcloud.md',
+    internalUrl: `vikunja`,
+    externalUrl: `https://cloud.${rootDomain}`,
+  },
 ];
 
 export const DASHBOARD_QUICK_ACCESS = () => [

tailwind.config.js

@@ -19,6 +19,14 @@ module.exports = {
           DEFAULT: '#54C6CC',
           dark: '#1E8290',
         },
+        logo: {
+          bluegray: '#3f607d',
+          yellow: '#f5bd1c',
+          lightviolet: '#a587bf',
+          darkviolet: '#755d86',
+          azure: '#3a97a3',
+          lightazure: ' #b4e0e4',
+        },
       },
     },
   },