style: some clean up

2026-08-29 18:48:11 +00:00 · 2026-06-19 16:24:20 +03:00
parent 2b4da2397c
commit 9caf9bbd59
6 changed files with 344 additions and 170 deletions
--- a/apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardHeader.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardHeader.tsx
@@ -87,7 +87,12 @@ const FreightDashboardHeader = ({
        <Text
          fw={700}
          truncate
-          style={{ fontSize: "20px", lineHeight: 1.2, color: "#0f172a", letterSpacing: "-0.4px" }}
+          style={{
+            fontSize: "20px",
+            lineHeight: 1.2,
+            color: "#0f172a",
+            letterSpacing: "-0.4px",
+          }}
        >
          {pageMeta.title}
        </Text>
@@ -120,13 +125,6 @@ const FreightDashboardHeader = ({
          </button>
        </Tooltip>

-        <Tooltip label="Messages" withArrow openDelay={300}>
-          <button type="button" className="fdh-icon-btn" aria-label="Messages">
-            <MessageSquare size={18} />
-            <span className="fdh-badge">3</span>
-          </button>
-        </Tooltip>
-
        <Tooltip label="Notifications" withArrow openDelay={300}>
          <button
            type="button"
@@ -189,7 +187,12 @@ const FreightDashboardHeader = ({
                  <div className="fdh-avatar">{initials}</div>
                </div>
                <Stack gap={0} style={{ minWidth: 0 }}>
-                  <Text size="sm" fw={600} truncate style={{ color: "#0f172a" }}>
+                  <Text
+                    size="sm"
+                    fw={600}
+                    truncate
+                    style={{ color: "#0f172a" }}
+                  >
                    {userName}
                  </Text>
                  {userEmail && (
--- a/apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardLayout.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardLayout.tsx
@@ -65,25 +65,24 @@ const FreightDashboardLayout = ({

  return (
    <>
-      <link rel="preconnect" href="https://fonts.googleapis.com" />
-      <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
-      <link
-        href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap"
-        rel="stylesheet"
-      />
-
      <MantineProvider theme={freightMantineTheme}>
        <Box
          style={{
            display: "flex",
            height: "100dvh",
            overflow: "hidden",
-            background: "var(--mantine-color-gray-1)",
            padding: "0px",
            fontFamily: "'Outfit', var(--font-sans)",
          }}
        >
-          <Box style={{ display: "flex", height: "100%", minHeight: 0, width: "100%", gap: "5px" }}>
+          <Box
+            style={{
+              display: "flex",
+              height: "100%",
+              minHeight: 0,
+              width: "100%",
+            }}
+          >
            <FreightSidebar
              sections={sidebarSections}
              activeHref={activeHref}
@@ -98,49 +97,21 @@ const FreightDashboardLayout = ({
                minWidth: 0,
                flex: 1,
                flexDirection: "column",
-                gap: "8px",
              }}
            >
-              <Paper
-                p={0}
-                radius="lg"
-                withBorder
-                style={{
-                  flexShrink: 0,
-                  background: "white",
-                  border: "1px solid var(--mantine-color-gray-2)",
-                  boxShadow: "0 1px 3px rgba(0, 0, 0, 0.05)",
-                }}
-              >
-                <FreightDashboardHeader
-                  pageMeta={pageMeta}
-                  headerRight={headerRight}
-                  enableThemeToggle={enableThemeToggle}
-                  userName={userName}
-                  userEmail={userEmail}
-                  userInitials={userInitials}
-                  onLogout={onLogout}
-                  theme={theme}
-                  onToggleTheme={toggleTheme}
-                />
-              </Paper>
+              <FreightDashboardHeader
+                pageMeta={pageMeta}
+                headerRight={headerRight}
+                enableThemeToggle={enableThemeToggle}
+                userName={userName}
+                userEmail={userEmail}
+                userInitials={userInitials}
+                onLogout={onLogout}
+                theme={theme}
+                onToggleTheme={toggleTheme}
+              />

-              <Paper
-                p={{ base: 16, md: 24 }}
-                radius="lg"
-                withBorder
-                style={{
-                  minHeight: 0,
-                  flex: 1,
-                  overflowY: "auto",
-                  overscrollBehavior: "contain",
-                  background: "white",
-                  border: "1px solid var(--mantine-color-gray-2)",
-                  boxShadow: "0 1px 3px rgba(0, 0, 0, 0.05)",
-                }}
-              >
-                {children}
-              </Paper>
+              {children}
            </Box>
          </Box>
        </Box>
--- a/apps/edr-freight-web/backoffice/src/components/layout/FreightSidebar.css
+++ b/apps/edr-freight-web/backoffice/src/components/layout/FreightSidebar.css
@@ -8,12 +8,7 @@
  max-height: 100%;
  width: 280px;
  flex-shrink: 0;
-  border-radius: 16px;
-  border: 1px solid #eef1f4;
-  background: #ffffff;
-  box-shadow:
-    0 1px 2px rgba(15, 23, 42, 0.04),
-    0 8px 24px -16px rgba(15, 23, 42, 0.12);
+  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
@@ -36,8 +31,9 @@
  content: "";
  position: absolute;
  inset: 0;
-  background:
-    radial-gradient(120px 80px at 24px 18px, rgba(34, 197, 94, 0.08), transparent 70%);
+  background: radial-gradient(120px 80px at 24px 18px,
+      rgba(34, 197, 94, 0.08),
+      transparent 70%);
  pointer-events: none;
 }

@@ -50,7 +46,7 @@
  width: 44px;
  height: 44px;
  border-radius: 13px;
-  background: linear-gradient(135deg, #2DBF95 0%, #1B9E7A 60%, #15805F 100%);
+  background: linear-gradient(135deg, #2dbf95 0%, #1b9e7a 60%, #15805f 100%);
  box-shadow:
    0 6px 16px -4px rgba(27, 158, 122, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
@@ -72,13 +68,16 @@
 .fsb-nav::-webkit-scrollbar {
  width: 6px;
 }
+
 .fsb-nav::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 3px;
 }
+
 .fsb-nav::-webkit-scrollbar-thumb:hover {
  background: #cbd5e1;
 }
+
 .fsb-nav::-webkit-scrollbar-track {
  background: transparent;
 }
@@ -121,12 +120,10 @@
 }

 .fsb-item[data-active="true"] {
-  background: linear-gradient(
-    135deg,
-    rgba(34, 197, 94, 0.12) 0%,
-    rgba(27, 158, 122, 0.06) 100%
-  );
-  color: #1B9E7A;
+  background: linear-gradient(135deg,
+      rgba(34, 197, 94, 0.12) 0%,
+      rgba(27, 158, 122, 0.06) 100%);
+  color: #1b9e7a;
  font-weight: 600;
 }

@@ -139,7 +136,7 @@
  width: 3px;
  height: 22px;
  border-radius: 0 4px 4px 0;
-  background: linear-gradient(180deg, #2DBF95 0%, #1B9E7A 100%);
+  background: linear-gradient(180deg, #2dbf95 0%, #1b9e7a 100%);
 }

 .fsb-item-label {
@@ -155,8 +152,6 @@
  display: flex;
  align-items: center;
  justify-content: center;
-  width: 31px;
-  height: 31px;
  border-radius: 9px;
  flex-shrink: 0;
  background: #f1f5f9;
@@ -164,13 +159,19 @@
  transition: all 160ms ease;
 }

+/* ---- Icon well ---- */
+.fsb-icon svg {
+  height: 24px;
+  width: 24px;
+}
+
 .fsb-item:hover .fsb-icon {
  background: #e6ebf1;
  color: #334155;
 }

 .fsb-item[data-active="true"] .fsb-icon {
-  background: linear-gradient(135deg, #2DBF95 0%, #1B9E7A 100%);
+  background: linear-gradient(135deg, #2dbf95 0%, #1b9e7a 100%);
  color: #ffffff;
  box-shadow: 0 5px 12px -2px rgba(27, 158, 122, 0.45);
 }
@@ -219,9 +220,11 @@
  background: transparent;
  transition: background-color 150ms ease;
 }
+
 .fsb-group:hover {
  background-color: #f5f7fa;
 }
+
 .fsb-group-label {
  font-size: 11px;
  font-weight: 700;
@@ -229,8 +232,9 @@
  text-transform: uppercase;
  color: #94a3b8;
 }
+
 .fsb-group[data-active="true"] .fsb-group-label {
-  color: #1B9E7A;
+  color: #1b9e7a;
 }

 /* child leaf */
@@ -251,12 +255,14 @@
    background-color 150ms ease,
    color 150ms ease;
 }
+
 .fsb-child:hover {
  background-color: #f5f7fa;
  color: #0f172a;
 }
+
 .fsb-child[data-active="true"] {
-  color: #1B9E7A;
+  color: #1b9e7a;
  font-weight: 600;
  background-color: rgba(27, 158, 122, 0.08);
 }
@@ -269,11 +275,13 @@
  background: #cbd5e1;
  transition: all 150ms ease;
 }
+
 .fsb-child:hover .fsb-dot {
  background: #94a3b8;
 }
+
 .fsb-child[data-active="true"] .fsb-dot {
-  background: #1B9E7A;
+  background: #1b9e7a;
  box-shadow: 0 0 0 3px rgba(27, 158, 122, 0.16);
 }

@@ -283,36 +291,41 @@
  padding: 12px;
  border-top: 1px solid #f1f5f9;
 }
+
 .fsb-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 11px;
-  background: linear-gradient(135deg, #E7F8F2 0%, #f8fafc 100%);
+  background: linear-gradient(135deg, #e7f8f2 0%, #f8fafc 100%);
  border: 1px solid #e7f3ec;
 }
+
 .fsb-pulse {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
-  background: #2DBF95;
+  background: #2dbf95;
  flex-shrink: 0;
 }
+
 .fsb-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
-  background: #2DBF95;
+  background: #2dbf95;
  animation: fsb-pulse 2s ease-out infinite;
 }
+
@keyframes fsb-pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
+
  100% {
    transform: scale(2.6);
    opacity: 0;
--- a/apps/edr-freight-web/backoffice/src/components/layout/FreightSidebar.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/layout/FreightSidebar.tsx
@@ -11,6 +11,7 @@ import { Box, Stack, Text } from "@mantine/core";

 import type { SidebarItem, SidebarSection } from "./types";
 import "./FreightSidebar.css";
+import { Link } from "react-router-dom";

 export interface FreightSidebarProps {
  sections: SidebarSection[];
@@ -176,20 +177,7 @@ const FreightSidebar = ({

    return (
      <Box key={item.href}>
-        <a
-          href={item.href}
-          className="fsb-item"
-          data-active={isActive}
-          onClick={(e) => {
-            if (hasChildren) {
-              setExpanded((current) => ({
-                ...current,
-                [item.href!]: true,
-              }));
-            }
-            navigateTo(e, item.href!);
-          }}
-        >
+        <Link to={item.href} className="fsb-item" data-active={isActive}>
          {item.icon && <span className="fsb-icon">{item.icon}</span>}
          <span className="fsb-item-label">{item.label}</span>
          {hasChildren && (
@@ -212,7 +200,7 @@ const FreightSidebar = ({
              />
            </button>
          )}
-        </a>
+        </Link>

        {hasChildren && isOpen && (
          <div className="fsb-branch">
@@ -224,7 +212,16 @@ const FreightSidebar = ({
  };

  return (
-    <Box component="aside" className="fsb-aside">
+    <Box
+      component="aside"
+      className="fsb-aside"
+      m="4px"
+      bg="edr-bg"
+      style={{
+        border: "1px solid var(--mantine-color-gray-2)",
+        boxShadow: "0 1px 3px rgba(0, 0, 0, 0.05)",
+      }}
+    >
      <div className="fsb-brand">
        <div className="fsb-logo">
          <Train size={23} color="white" strokeWidth={2.1} />
@@ -233,7 +230,11 @@ const FreightSidebar = ({
          <Text
            size="md"
            fw={700}
-            style={{ letterSpacing: "-0.3px", lineHeight: 1.2, color: "#0f172a" }}
+            style={{
+              letterSpacing: "-0.3px",
+              lineHeight: 1.2,
+              color: "#0f172a",
+            }}
          >
            EDR Freight
          </Text>
@@ -257,20 +258,6 @@ const FreightSidebar = ({
          </div>
        ))}
      </nav>
-
-      <div className="fsb-footer">
-        <div className="fsb-status">
-          <span className="fsb-pulse" />
-          <Stack gap={0} style={{ minWidth: 0 }}>
-            <Text size="xs" fw={600} style={{ color: "#15805F", lineHeight: 1.3 }}>
-              All systems operational
-            </Text>
-            <Text size="10px" style={{ color: "#94a3b8", lineHeight: 1.3 }}>
-              EDR Platform · v1.0
-            </Text>
-          </Stack>
-        </div>
-      </div>
    </Box>
  );
 };