Upd layout, bts, add new widget

frontend/public/locales/de/common.json

@@ -5,6 +5,7 @@
       "overview": "Übersicht",
       "loadingWidgets": "Widgets werden geladen...",
       "loading": "Laden..."
+      "currentUser": "Aktueller Benutzer",
     },
     "login": {
       "pageTitle": "Anmeldung",

frontend/public/locales/en/common.json

@@ -5,6 +5,7 @@
       "overview": "Overview",
       "loadingWidgets": "Loading widgets...",
       "loading": "Loading..."
+      "currentUser": "Current User",
     },
     "login": {
       "pageTitle": "Login",

frontend/public/locales/es/common.json

@@ -5,6 +5,7 @@
       "overview": "Resumen",
       "loadingWidgets": "Cargando widgets...",
       "loading": "Cargando..."
+      "currentUser": "Usuario actual",
     },
     "login": {
       "pageTitle": "Inicio de sesión",

frontend/public/locales/fr/common.json

@@ -5,6 +5,7 @@
       "overview": "Vue d'ensemble",
       "loadingWidgets": "Chargement des widgets...",
       "loading": "Chargement..."
+      "currentUser": "Utilisateur actuel",
     },
     "login": {
       "pageTitle": "Connexion",

frontend/src/colors.ts

@@ -12,20 +12,20 @@ export const colorsBgLight = {
   light: ' bg-white text-black text-black dark:bg-dark-900 dark:text-white',
   contrast: 'bg-gray-800 text-white dark:bg-white dark:text-black',
   success:
-    'bg-emerald-500 border-emerald-500 dark:bg-pavitra-blue dark:border-pavitra-blue text-white',
+    'bg-green-500 border-green-500 dark:bg-green-700 dark:border-green-700 text-white',
   danger: 'bg-red-500 border-red-500 text-white',
   warning: 'bg-yellow-500 border-yellow-500 text-white',
-  info: 'bg-blue-500 border-blue-500 dark:bg-pavitra-blue dark:border-pavitra-blue text-white',
+  info: 'bg-green-500 border-green-500 dark:bg-green-700 dark:border-green-700 text-white',
 };
 
 export const colorsText = {
   white: 'text-black dark:text-slate-100',
   light: 'text-gray-700 dark:text-slate-400',
   contrast: 'dark:text-white',
-  success: 'text-emerald-500',
+  success: 'text-green-600 dark:text-green-500',
   danger: 'text-red-500',
   warning: 'text-yellow-500',
-  info: 'text-blue-500',
+  info: 'text-green-600 dark:text-green-500',
 };
 
 export const colorsOutline = {
@@ -34,10 +34,10 @@ export const colorsOutline = {
   contrast: [colorsText.contrast, 'border-gray-900 dark:border-slate-100'].join(
     ' ',
   ),
-  success: [colorsText.success, 'border-emerald-500'].join(' '),
+  success: [colorsText.success, 'border-green-500'].join(' '),
   danger: [colorsText.danger, 'border-red-500'].join(' '),
   warning: [colorsText.warning, 'border-yellow-500'].join(' '),
-  info: [colorsText.info, 'border-blue-500'].join(' '),
+  info: [colorsText.info, 'border-green-500'].join(' '),
 };
 
 export const getButtonColor = (
@@ -56,30 +56,30 @@ export const getButtonColor = (
       whiteDark: 'ring-gray-200 dark:ring-dark-500',
       lightDark: 'ring-gray-200 dark:ring-gray-500',
       contrast: 'ring-gray-300 dark:ring-gray-400',
-      success: 'ring-emerald-300 dark:ring-pavitra-blue',
+      success: 'ring-green-300 dark:ring-green-700',
       danger: 'ring-red-300 dark:ring-red-700',
       warning: 'ring-yellow-300 dark:ring-yellow-700',
-      info: 'ring-blue-300 dark:ring-pavitra-blue',
+      info: 'ring-green-300 dark:ring-green-700',
     },
     active: {
       white: 'bg-gray-100',
       whiteDark: 'bg-gray-100 dark:bg-dark-800',
       lightDark: 'bg-gray-200 dark:bg-slate-700',
       contrast: 'bg-gray-700 dark:bg-slate-100',
-      success: 'bg-emerald-700 dark:bg-pavitra-blue',
+      success: 'bg-green-700 dark:bg-green-500',
       danger: 'bg-red-700 dark:bg-red-600',
       warning: 'bg-yellow-700 dark:bg-yellow-600',
-      info: 'bg-blue-700  dark:bg-pavitra-blue',
+      info: 'bg-green-700 dark:bg-green-500',
     },
     bg: {
       white: 'bg-white text-black',
       whiteDark: 'bg-white  text-black  dark:bg-dark-900 dark:text-white',
       lightDark: 'bg-gray-100 text-black dark:bg-slate-800 dark:text-white',
       contrast: 'bg-gray-800 text-white dark:bg-white dark:text-black',
-      success: 'bg-emerald-600 dark:bg-pavitra-blue text-white',
+      success: 'bg-green-600 dark:bg-green-500 text-white',
       danger: 'bg-red-600 text-white    dark:bg-red-500 ',
       warning: 'bg-yellow-600 dark:bg-yellow-500 text-white',
-      info: ' bg-blue-600  dark:bg-pavitra-blue  text-white ',
+      info: 'bg-green-600 dark:bg-green-500 text-white',
     },
     bgHover: {
       white: 'hover:bg-gray-100',
@@ -87,40 +87,40 @@ export const getButtonColor = (
       lightDark: 'hover:bg-gray-200 hover:dark:bg-slate-700',
       contrast: 'hover:bg-gray-700 hover:dark:bg-slate-100',
       success:
-        'hover:bg-emerald-700 hover:border-emerald-700 hover:dark:bg-pavitra-blue hover:dark:border-pavitra-blue',
+        'hover:bg-green-700 hover:border-green-700 hover:dark:bg-green-500 hover:dark:border-green-500',
       danger:
         'hover:bg-red-700 hover:border-red-700 hover:dark:bg-red-600 hover:dark:border-red-600',
       warning:
         'hover:bg-yellow-700 hover:border-yellow-700 hover:dark:bg-yellow-600 hover:dark:border-yellow-600',
-      info: 'hover:bg-blue-700 hover:border-blue-700   hover:dark:bg-pavitra-blue/80 hover:dark:border-pavitra-blue/80',
+      info: 'hover:bg-green-700 hover:border-green-700 hover:dark:bg-green-500 hover:dark:border-green-500',
     },
     borders: {
       white: 'border-white',
       whiteDark: 'border-white  dark:border-dark-900',
       lightDark: 'border-gray-100 dark:border-slate-800',
       contrast: 'border-gray-800 dark:border-white',
-      success: 'border-emerald-600 dark:border-pavitra-blue',
+      success: 'border-green-600 dark:border-green-500',
       danger: 'border-red-600 dark:border-red-500',
       warning: 'border-yellow-600 dark:border-yellow-500',
-      info: 'border-blue-600  border-blue-600 dark:border-pavitra-blue',
+      info: 'border-green-600 dark:border-green-500',
     },
     text: {
       contrast: 'dark:text-slate-100',
       success: 'text-emerald-600 dark:text-pavitra-blue',
-      danger: 'text-red-600 dark:text-red-500',
+      success: 'text-green-600 dark:text-green-500',
       warning: 'text-yellow-600 dark:text-yellow-500',
-      info: 'text-blue-600  dark:text-pavitra-blue',
+      info: 'text-green-600 dark:text-green-500',
     },
     outlineHover: {
       contrast:
         'hover:bg-gray-800 hover:text-gray-100 hover:dark:bg-slate-100 hover:dark:text-black',
       success:
-        'hover:bg-emerald-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-pavitra-blue',
+        'hover:bg-green-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-green-500',
       danger:
         'hover:bg-red-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-red-600',
       warning:
         'hover:bg-yellow-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-yellow-600',
-      info: 'hover:bg-blue-600  hover:bg-blue-600 hover:text-white hover:dark:text-white hover:dark:border-pavitra-blue',
+      info: 'hover:bg-green-600 hover:border-green-600 hover:text-white hover:dark:text-white hover:dark:border-green-500',
     },
   };
 

frontend/src/config.ts

@@ -12,7 +12,7 @@ export const localStorageDarkModeKey = 'darkMode';
 
 export const localStorageStyleKey = 'style';
 
-export const containerMaxW = 'xl:max-w-full xl:mx-auto 2xl:mx-20';
+export const containerMaxW = 'max-w-screen-2xl mx-auto px-4';
 
 export const appTitle = 'created by Flatlogic generator!';
 

frontend/src/pages/dashboard.tsx

@@ -181,6 +181,30 @@ const Dashboard = () => {
           id='dashboard'
           className='grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6'
         >
+            {currentUser && (
+              <div className={`${corners !== 'rounded-full' ? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}>
+                <div className='flex justify-between align-center'>
+                  <div>
+                    <div className='text-lg leading-tight text-gray-500 dark:text-gray-400'>
+                      {t('pages.dashboard.currentUser', { defaultValue: 'Current User' })}
+                    </div>
+                    <div className='text-xl leading-tight font-medium'>
+                      {`${currentUser.firstName} ${currentUser.lastName}`}
+                    </div>
+                    <div className='text-sm leading-tight text-gray-600 dark:text-gray-500'>
+                      {currentUser.email}
+                    </div>
+                  </div>
+                  <div>
+                    <BaseIcon
+                      className={`${iconsColor}`}
+                      size={48}
+                      path={icon.mdiAccount}
+                    />
+                  </div>
+                </div>
+              </div>
+            )}
           {hasPermission(currentUser, 'READ_USERS') && (
             <Link href={'/users/users-list'}>
               <div

frontend/src/styles.ts

@@ -52,26 +52,24 @@ export const basic: StyleObject = {
 };
 
 export const white: StyleObject = {
-  aside: 'bg-white dark:text-white',
+  aside: 'bg-white text-gray-900',
   asideScrollbars: 'aside-scrollbars-light',
-  asideBrand: '',
+  asideBrand: 'text-gray-900',
-  asideMenuItem:
+  asideMenuItem: 'text-gray-700 hover:text-gray-900',
-    'text-gray-700 hover:bg-gray-100/70 dark:text-dark-500 dark:hover:text-white dark:hover:bg-dark-800',
+  asideMenuItemActive: 'font-semibold text-gray-900',
-  asideMenuItemActive: 'font-bold text-black dark:text-white',
+  asideMenuDropdown: 'bg-gray-100',
-  asideMenuDropdown: 'bg-gray-100/75',
+  navBarItemLabel: 'text-gray-900',
-  navBarItemLabel: 'text-blue-600',
+  navBarItemLabelHover: 'hover:text-gray-900',
-  navBarItemLabelHover: 'hover:text-black',
+  navBarItemLabelActiveColor: 'text-gray-900',
-  navBarItemLabelActiveColor: 'text-black',
+  overlay: 'from-white via-white to-white',
-  overlay: 'from-white via-gray-100 to-white',
+  activeLinkColor: 'bg-gray-100',
-  activeLinkColor: 'bg-gray-100/70',
+  bgLayoutColor: 'bg-white',
-  bgLayoutColor: 'bg-gray-50',
+  iconsColor: 'text-gray-700',
-  iconsColor: 'text-blue-500',
   cardsColor: 'bg-white',
-  focusRingColor:
+  focusRingColor: 'focus:ring focus:ring-gray-300 focus:border-gray-300 focus:outline-none border-gray-200',
-    'focus:ring focus:ring-blue-600 focus:border-blue-600 focus:outline-none border-gray-300 dark:focus:ring-blue-600 dark:focus:border-blue-600',
+  corners: 'none',
-  corners: 'rounded',
+  cardsStyle: 'bg-white border border-gray-200',
-  cardsStyle: 'bg-white border border-pavitra-400',
+  linkColor: 'text-gray-700',
-  linkColor: 'text-blue-600',
   websiteHeder: 'border-b border-gray-200',
   borders: 'border-gray-200',
   shadow: '',