mini UI

frontend/src/components/AsideMenuItem.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
+import BaseIcon from './BaseIcon';
+
 import { useAppSelector } from '../stores/hooks';
 import { MenuAsideItem } from '../interfaces';
 
@@ -17,14 +19,16 @@ const AsideMenuItem = ({ item }: Props) => {
   const activeClass = isActive ? 'border-b-2 border-blue-600' : '';
 
   return (
-    <li>
+    <li title={item.label}>
       {item.withDevider && <hr className={`${borders} my-2`} />}
       {item.href ? (
-        <Link href={item.href} target={item.target} className={`${baseClass} ${activeClass}`}> 
-          {item.label}
+        <Link href={item.href} target={item.target} title={item.label} className={`${baseClass} ${activeClass}`}>
+          <BaseIcon path={item.icon} size="20" />
         </Link>
       ) : (
-        <span className={`${baseClass} ${activeClass}`}>{item.label}</span>
+        <span title={item.label} className={`${baseClass} ${activeClass}`}>
+          <BaseIcon path={item.icon} size="20" />
+        </span>
       )}
     </li>
   );

frontend/src/components/Logo/index.tsx

@@ -6,10 +6,6 @@ type Props = {
 
 export default function Logo({ className = '' }: Props) {
   return (
-    <img
-      src={'https://flatlogic.com/logo.svg'}
-      className={className}
-      alt={'Flatlogic logo'}
-    ></img>
+  <div className={className}>App</div>
   );
 }

frontend/src/css/_app.css

@@ -1,3 +1,10 @@
+@layer base {
+  /* Global reset */
+  * { @apply m-0 p-0; }
+  /* System font and smaller text */
+  body { @apply font-sans text-sm; }
+}
+
 html {
   @apply h-full;
 }

frontend/src/css/_table.css

@@ -8,8 +8,7 @@
   }
 
   tr {
-    @apply max-w-full block relative border-b-4 border-gray-100
-      lg:table-row lg:border-b-0 dark:border-slate-800;
+    @apply max-w-full block relative lg:table-row;
   }
 
   tr:last-child {

frontend/src/layouts/Authenticated.tsx

@@ -8,7 +8,6 @@ import BaseIcon from '../components/BaseIcon';
 import NavBar from '../components/NavBar';
 import NavBarItemPlain from '../components/NavBarItemPlain';
 import AsideMenu from '../components/AsideMenu';
-import FooterBar from '../components/FooterBar';
 import { useAppDispatch, useAppSelector } from '../stores/hooks';
 import Search from '../components/Search';
 import { useRouter } from 'next/router';
@@ -125,7 +124,6 @@ export default function LayoutAuthenticated({
           onAsideLgClose={() => setIsAsideLgActive(false)}
         />
         {children}
-        <FooterBar>Hand-crafted & Made with ❤️</FooterBar>
       </div>
     </div>
   );

frontend/src/styles.ts

@@ -41,7 +41,7 @@ export const white: StyleObject = {
   cardsColor: 'bg-white',
   focusRingColor: 'focus:ring focus:ring-blue-300 focus:outline-none',
   corners: '',
-  cardsStyle: 'bg-white border border-gray-200',
+  cardsStyle: 'bg-white',
   linkColor: 'text-blue-600',
   websiteHeder: 'border-b border-gray-200',
   borders: 'border-gray-200',