add coporate theme color variables

2023-10-08 15:46:33 +02:00
parent cc47206fd6
commit d3310f861b
48 changed files with 15269 additions and 259 deletions
--- a/pkgs/ui/src/app/layout.tsx
+++ b/pkgs/ui/src/app/layout.tsx
@@ -1,33 +1,25 @@
 "use client";
-
-import "./globals.css";
-import localFont from "next/font/local";
-import * as React from "react";
+import { Sidebar } from "@/components/sidebar";
+import { tw } from "@/utils/tailwind";
+import MenuIcon from "@mui/icons-material/Menu";
 import {
  Button,
  CssBaseline,
  IconButton,
  ThemeProvider,
  useMediaQuery,
-  useTheme,
 } from "@mui/material";
-import { useState } from "react";
-import { Toaster } from "react-hot-toast";
 import { StyledEngineProvider } from "@mui/material/styles";
-
-import { darkTheme, lightTheme } from "./theme/themes";
-import { Sidebar } from "@/components/sidebar";
-import MenuIcon from "@mui/icons-material/Menu";
-import Image from "next/image";
-import { tw } from "@/utils/tailwind";
 import axios from "axios";
+import localFont from "next/font/local";
+import Image from "next/image";
+import * as React from "react";
+import { Toaster } from "react-hot-toast";
+import "./globals.css";
+import { darkTheme, lightTheme } from "./theme/themes";

-import {
-  AppContext,
-  WithAppState,
-  // useAppState,
-} from "@/components/hooks/useAppContext";
 import Background from "@/components/background";
+import { AppContext, WithAppState } from "@/components/hooks/useAppContext";
 // import { usePathname, redirect } from "next/navigation";

 const roboto = localFont({
@@ -62,27 +54,27 @@ export default function RootLayout({
  children: React.ReactNode;
 }) {
  const userPrefersDarkmode = useMediaQuery("(prefers-color-scheme: dark)");
-  const theme = useTheme();
-  const is_small = useMediaQuery(theme.breakpoints.down("sm"));

-  let [useDarkTheme, setUseDarkTheme] = useState(false);
-  let [showSidebar, setShowSidebar] = useState(true);
+  // const theme = useTheme({});
+  // const is_small = useMediaQuery(theme.breakpoints.down("sm"));
+  // const [useDarkTheme, setUseDarkTheme] = useState(false);
+  const [showSidebar, setShowSidebar] = React.useState(true);

  // If the screen is small, hide the sidebar
-  React.useEffect(() => {
-    if (is_small) {
-      setShowSidebar(false);
-    } else {
-      setShowSidebar(true);
-    }
-  }, [is_small]);
+  // useEffect(() => {
+  //   if (is_small) {
+  //     setShowSidebar(false);
+  //   } else {
+  //     setShowSidebar(true);
+  //   }
+  // }, [is_small]);

-  React.useEffect(() => {
-    if (useDarkTheme !== userPrefersDarkmode) {
-      // Enable dark theme if the user prefers dark mode
-      setUseDarkTheme(userPrefersDarkmode);
-    }
-  }, [userPrefersDarkmode, useDarkTheme, setUseDarkTheme]);
+  // useEffect(() => {
+  //   if (useDarkTheme !== userPrefersDarkmode) {
+  //     // Enable dark theme if the user prefers dark mode
+  //     setUseDarkTheme(userPrefersDarkmode);
+  //   }
+  // }, [userPrefersDarkmode, useDarkTheme, setUseDarkTheme]);

  // const changeThemeHandler = (target: ChangeEvent, currentValue: boolean) => {
  //   setUseDarkTheme(currentValue);
@@ -97,7 +89,7 @@ export default function RootLayout({
        <link rel="icon" href="/favicon.ico" />
      </head>
      <StyledEngineProvider injectFirst>
-        <ThemeProvider theme={useDarkTheme ? darkTheme : lightTheme}>
+        <ThemeProvider theme={userPrefersDarkmode ? darkTheme : lightTheme}>
          <body id="__next" className={roboto.className}>
            <CssBaseline />
            <Toaster />
@@ -134,9 +126,9 @@ export default function RootLayout({
                                  )}
                                </IconButton>
                              </div>
-                              <div className="col-span-1 block w-full bg-fixed text-center font-semibold text-white lg:hidden">
+                              <div className="col-span-1 block w-full bg-fixed text-center font-semibold dark:invert lg:hidden">
                                <Image
-                                  src="/logo.svg"
+                                  src="/favicon.png"
                                  alt="Clan Logo"
                                  width={58}
                                  height={58}
--- a/pkgs/ui/src/app/machines/page.tsx
+++ b/pkgs/ui/src/app/machines/page.tsx
@@ -1,7 +1,7 @@
 "use client";

-import { StrictMode } from "react";
 import { NodeTable } from "@/components/table";
+import { StrictMode } from "react";

 export default function Page() {
  return (
--- a/pkgs/ui/src/app/page.tsx
+++ b/pkgs/ui/src/app/page.tsx
@@ -1,41 +1,39 @@
 "use client";
+import { NetworkOverview } from "@/components/dashboard/NetworkOverview";
 import { RecentActivity } from "@/components/dashboard/activity";
 import { AppOverview } from "@/components/dashboard/appOverview";
-import { NetworkOverview } from "@/components/dashboard/NetworkOverview";
 import { Notifications } from "@/components/dashboard/notifications";
 import { QuickActions } from "@/components/dashboard/quickActions";
 import { TaskQueue } from "@/components/dashboard/taskQueue";
 import { useAppState } from "@/components/hooks/useAppContext";
 import { MachineContextProvider } from "@/components/hooks/useMachines";
 import { LoadingOverlay } from "@/components/join/loadingOverlay";
-import { tw } from "@/utils/tailwind";
 import JoinPrequel from "@/views/joinPrequel";

-interface DashboardCardProps {
-  children?: React.ReactNode;
-  rowSpan?: number;
-  sx?: string;
-}
-const DashboardCard = (props: DashboardCardProps) => {
-  const { children, rowSpan, sx = "" } = props;
-  return (
-    <div
-      className={tw`col-span-full row-span-${rowSpan || 1} xl:col-span-1 ${sx}`}
-    >
-      {children}
-    </div>
-  );
-};
+// interface DashboardCardProps {
+//   children?: React.ReactNode;
+//   rowSpan?: number;
+//   sx?: string;
+// }
+// const DashboardCard = (props: DashboardCardProps) => {
+//   const { children, rowSpan, sx = "" } = props;
+//   return (
+//     // <div className={tw`col-span-full row-span-${rowSpan} 2xl:col-span-1 ${sx}`}>
+//     <div className={tw`row-span-2`}>
+//       {children}
+//     </div>
+//   );
+// };

-interface DashboardPanelProps {
-  children?: React.ReactNode;
-}
-const DashboardPanel = (props: DashboardPanelProps) => {
-  const { children } = props;
-  return (
-    <div className="col-span-full row-span-1 xl:col-span-2">{children}</div>
-  );
-};
+// interface DashboardPanelProps {
+//   children?: React.ReactNode;
+// }
+// const DashboardPanel = (props: DashboardPanelProps) => {
+//   const { children } = props;
+//   return (
+//     <div className="col-span-full row-span-1 2xl:col-span-2">{children}</div>
+//   );
+// };

 export default function Dashboard() {
  const { data, isLoading } = useAppState();
@@ -58,26 +56,20 @@ export default function Dashboard() {
  if (data.isJoined) {
    return (
      <MachineContextProvider>
-        <div className="flex h-screen w-full">
-          <div className="grid w-full auto-rows-max grid-cols-1 grid-rows-none gap-4 xl:grid-cols-2 2xl:grid-cols-3 ">
-            <DashboardCard rowSpan={2}>
+        <div className="flex w-full">
+          <div className="grid w-full grid-flow-row grid-cols-3 gap-4">
+            <div className="row-span-2">
              <NetworkOverview />
-            </DashboardCard>
-            <DashboardCard rowSpan={2}>
-              <RecentActivity />
-            </DashboardCard>
-            <DashboardCard>
-              <Notifications />
-            </DashboardCard>
-            <DashboardCard>
-              <QuickActions />
-            </DashboardCard>
-            <DashboardPanel>
+            </div>
+            <div className="col-span-2">
              <AppOverview />
-            </DashboardPanel>
-            <DashboardCard sx={tw`xl:col-span-full 2xl:col-span-1`}>
-              <TaskQueue />
-            </DashboardCard>
+            </div>
+            <div className="row-span-2">
+              <RecentActivity />
+            </div>
+            <QuickActions />
+            <Notifications />
+            <TaskQueue />
          </div>
        </div>
      </MachineContextProvider>
--- a/pkgs/ui/src/app/templates/[id]/page.tsx
+++ b/pkgs/ui/src/app/templates/[id]/page.tsx
@@ -67,12 +67,12 @@ export default function TemplateDetail({ params }: TemplateDetailProps) {
          Back
        </Button>
      </div>
-      <div className="h-full w-full border border-solid border-slate-100 bg-slate-50 shadow-sm shadow-slate-400">
+      <div className="h-full w-full border border-solid border-neutral-90 bg-neutral-98 shadow-sm shadow-neutral-60 dark:bg-paper-dark">
        <div className="flex w-full flex-col items-center justify-center xl:p-2">
-          <Avatar className="m-1 h-20 w-20 bg-violet-600">
+          <Avatar className="m-1 h-20 w-20 bg-purple-40">
            <Typography variant="h5">N</Typography>
          </Avatar>
-          <Typography variant="h6" className="text-violet-600">
+          <Typography variant="h6" className="text-purple-40">
            {details.short}
          </Typography>
          <div className="w-full">
@@ -159,12 +159,12 @@ export default function TemplateDetail({ params }: TemplateDetailProps) {
        <div className="mt-2 flex w-full justify-evenly">
          <Button
            variant="text"
-            className="w-full text-black"
+            className="w-full text-black dark:text-white"
            startIcon={<Edit />}
          >
            Edit
          </Button>
-          <Button className="w-full text-red-700" startIcon={<Delete />}>
+          <Button className="w-full text-red" startIcon={<Delete />}>
            Delete
          </Button>
        </div>
--- a/pkgs/ui/src/app/templates/page.tsx
+++ b/pkgs/ui/src/app/templates/page.tsx
@@ -44,7 +44,7 @@ export default function ImageOverview() {
            <ListItem key={id}>
              <ListItemButton LinkComponent={"a"} href={`/templates/${id}`}>
                <ListItemAvatar>
-                  <Avatar className="bg-violet-600">{name.slice(0, 1)}</Avatar>
+                  <Avatar className="bg-purple-40">{name.slice(0, 1)}</Avatar>
                </ListItemAvatar>
                <ListItemText primary={name} secondary={date} />
                <ListItemSecondaryAction>
--- a/pkgs/ui/src/app/theme/themes.ts
+++ b/pkgs/ui/src/app/theme/themes.ts
@@ -1,56 +1,69 @@
-import { createTheme } from "@mui/material/styles";
+import {
+  PaletteOptions,
+  ThemeOptions,
+  createTheme,
+} from "@mui/material/styles";

 import colors from "@clan/colors/colors.json";
+const { palette, common } = colors.ref;
+
+const commonOptions: Partial<ThemeOptions> = {
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 400,
+      md: 900,
+      lg: 1200,
+      xl: 1536,
+    },
+  },
+};
+
+const commonPalette: Partial<PaletteOptions> = {
+  primary: {
+    main: palette.green50.value,
+  },
+  secondary: {
+    main: palette.green50.value,
+  },
+  info: {
+    main: palette.blue50.value,
+  },
+  success: {
+    main: palette.green50.value,
+  },
+  warning: {
+    main: palette.yellow50.value,
+  },
+  error: {
+    main: palette.red50.value,
+  },
+};

 export const darkTheme = createTheme({
-  breakpoints: {
-    values: {
-      xs: 0,
-      sm: 400,
-      md: 900,
-      lg: 1200,
-      xl: 1536,
-    },
-  },
+  ...commonOptions,
  palette: {
    mode: "dark",
+    ...commonPalette,
+    background: {
+      default: palette.neutral2.value,
+      paper: palette.neutral5.value,
+    },
+    common: {
+      black: common.black.value,
+      white: common.white.value,
+    },
  },
 });

-const { palette, common } = colors.ref;
 export const lightTheme = createTheme({
-  breakpoints: {
-    values: {
-      xs: 0,
-      sm: 400,
-      md: 900,
-      lg: 1200,
-      xl: 1536,
-    },
-  },
+  ...commonOptions,
  palette: {
    mode: "light",
+    ...commonPalette,
    background: {
-      default: common.white.value,
-      paper: palette.neutral98.value,
-    },
-    primary: {
-      main: palette.green50.value,
-    },
-    secondary: {
-      main: palette.green50.value,
-    },
-    error: {
-      main: palette.red50.value,
-    },
-    warning: {
-      main: palette.yellow50.value,
-    },
-    success: {
-      main: palette.green50.value,
-    },
-    info: {
-      main: palette.red50.value,
+      default: palette.neutral98.value,
+      paper: palette.neutral100.value,
    },
  },
 });