IoSL/service-aware-frontend
3
0
Fork 0
generated from Luis/nextjs-python-web-template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add coporate theme color variables

Browse Source
This commit is contained in:
Johannes Kirschbauer
2023-10-08 15:46:33 +02:00
parent cc47206fd6
commit d3310f861b
48 changed files with 15269 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
pkgs/ui/src/components/background.tsx
View File

@@ -1,6 +1,8 @@
import Image from "next/image";
import clanLight from "../../public/clan-dark.png";
import clanDark from "../../public/clan-dark.png";
import {
default as clanDark,
default as clanLight,
} from "../../public/clan-dark.png";
import { useAppState } from "./hooks/useAppContext";
export default function Background() {

6
pkgs/ui/src/components/card/index.tsx
View File

@@ -8,7 +8,11 @@ interface DashboardCardProps {
const DashboardCard = (props: DashboardCardProps) => {
const { children, title } = props;
return (
<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-80 bg-neutral-98
shadow-sm shadow-neutral-60 dark:border-none dark:bg-neutral-5 dark:shadow-none"
>
<div className="h-full w-full px-3 py-2">
<Typography variant="h6" color={"secondary"}>
{title}

22
pkgs/ui/src/components/createMachineForm/customConfig.tsx
View File

@@ -14,11 +14,6 @@ import {
} from "@mui/material";
import { IChangeEvent } from "@rjsf/core";
import { Form } from "@rjsf/mui";
import validator from "@rjsf/validator-ajv8";
import toast from "react-hot-toast";
import { JSONSchema7 } from "json-schema";
import { useMemo, useRef } from "react";
import { FormStepContentProps } from "./interfaces";
import {
ErrorListProps,
FormContextType,
@@ -26,6 +21,11 @@ import {
StrictRJSFSchema,
TranslatableString,
} from "@rjsf/utils";
import validator from "@rjsf/validator-ajv8";
import { JSONSchema7 } from "json-schema";
import { useMemo, useRef } from "react";
import toast from "react-hot-toast";
import { FormStepContentProps } from "./interfaces";
interface PureCustomConfigProps extends FormStepContentProps {
schema: JSONSchema7;
@@ -34,6 +34,18 @@ interface PureCustomConfigProps extends FormStepContentProps {
export function CustomConfig(props: FormStepContentProps) {
const { formHooks } = props;
const { data, isLoading, error } = useGetMachineSchema("mama");
// const { data, isLoading, error } = { data: {data:{schema: {
// title: 'Test form',
// type: 'object',
// properties: {
// name: {
// type: 'string',
// },
// age: {
// type: 'number',
// },
// },
// }}}, isLoading: false, error: undefined }
const schema = useMemo(() => {
if (!isLoading && !error?.message && data?.data) {
return data?.data.schema;

2
pkgs/ui/src/components/dashboard/activity/index.tsx
View File

@@ -4,7 +4,7 @@ import { NoDataOverlay } from "@/components/noDataOverlay";
export const RecentActivity = () => {
return (
<DashboardCard title="Recent Activity">
<div className="flex h-full w-full justify-center align-middle">
<div className="flex w-full justify-center align-middle">
<NoDataOverlay label="No Activity yet" />
</div>
</DashboardCard>

6
pkgs/ui/src/components/dashboard/appOverview/index.tsx
View File

@@ -13,10 +13,12 @@ const AppCard = (props: AppCardProps) => {
<div
role="button"
className="flex h-40 w-40 cursor-pointer items-center justify-center rounded-3xl p-2
align-middle shadow-md ring-2 ring-inset ring-violet-500 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-300"
align-middle shadow-md ring-2 ring-inset ring-purple-50
hover:bg-neutral-90 focus:bg-neutral-90 active:bg-neutral-80
dark:hover:bg-neutral-10 dark:focus:bg-neutral-10 dark:active:bg-neutral-20"
>
<div className="flex w-full flex-col justify-center">
<div className="my-1 flex h-[22] w-[22] items-center justify-center self-center overflow-visible p-1">
<div className="my-1 flex h-[22] w-[22] items-center justify-center self-center overflow-visible p-1 dark:invert">
<Image
src={iconPath}
alt={`${name}-app-icon`}

8
pkgs/ui/src/components/dashboard/quickActions/index.tsx
View File

@@ -1,11 +1,11 @@
"use client";
import { DashboardCard } from "@/components/card";
import { Fab } from "@mui/material";
import { Fab, Typography } from "@mui/material";
import { MouseEventHandler, ReactNode } from "react";
import LanIcon from "@mui/icons-material/Lan";
import AppsIcon from "@mui/icons-material/Apps";
import DevicesIcon from "@mui/icons-material/Devices";
import LanIcon from "@mui/icons-material/Lan";
type Action = {
id: string;
@@ -43,7 +43,7 @@ export const QuickActions = () => {
];
return (
<DashboardCard title="Quick Actions">
<div className="flex h-fit w-full items-center justify-start pt-5 align-bottom">
<div className="flex h-full w-full items-center justify-start pb-10 align-bottom">
<div className="flex w-full flex-col flex-wrap justify-evenly gap-2 sm:flex-row">
{actions.map(({ id, icon, label, eventHandler }) => (
<Fab
@@ -54,7 +54,7 @@ export const QuickActions = () => {
variant="extended"
>
{icon}
{label}
<Typography>{label}</Typography>
</Fab>
))}
</div>

4
pkgs/ui/src/components/hooks/useMachines.tsx
View File

@@ -1,11 +1,13 @@
"use client";
import { useListMachines } from "@/api/default/default";
import { Machine, MachinesResponse } from "@/api/model";
import { AxiosError, AxiosResponse } from "axios";
import React, {
createContext,
Dispatch,
ReactNode,
SetStateAction,
createContext,
useMemo,
useState,
} from "react";

4
pkgs/ui/src/components/join/log.tsx
View File

@@ -6,8 +6,8 @@ interface LogOptions {
export const Log = (props: LogOptions) => {
const { lines, title } = props;
return (
<div className="max-h-[70vh] min-h-[9rem] w-full overflow-scroll bg-slate-800 p-4 text-white shadow-inner shadow-black">
<div className="mb-1 text-slate-400">{title}</div>
<div className="max-h-[70vh] min-h-[9rem] w-full overflow-scroll bg-neutral-20 p-4 text-white shadow-inner shadow-black">
<div className="mb-1 text-neutral-70">{title}</div>
<pre className="max-w-[90vw] text-xs">
{lines.map((item, idx) => (
<code key={`${idx}`} className="mb-2 block break-words">

26
pkgs/ui/src/components/sidebar/index.tsx
View File

@@ -10,17 +10,16 @@ import {
import Image from "next/image";
import { ReactNode } from "react";
import { tw } from "@/utils/tailwind";
import AppsIcon from "@mui/icons-material/Apps";
import BackupIcon from "@mui/icons-material/Backup";
import DashboardIcon from "@mui/icons-material/Dashboard";
import DesignServicesIcon from "@mui/icons-material/DesignServices";
import DevicesIcon from "@mui/icons-material/Devices";
import LanIcon from "@mui/icons-material/Lan";
import AppsIcon from "@mui/icons-material/Apps";
import DesignServicesIcon from "@mui/icons-material/DesignServices";
import BackupIcon from "@mui/icons-material/Backup";
import Link from "next/link";
import { tw } from "@/utils/tailwind";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import React from "react";
type MenuEntry = {
icon: ReactNode;
@@ -84,22 +83,22 @@ export function Sidebar(props: SidebarProps) {
<aside
className={tw`${
show ? showSidebar : hideSidebar
} z-9999 dark:bg-boxdark static left-0 top-0 flex h-screen w-14 flex-col overflow-x-hidden overflow-y-hidden bg-zinc-950 transition duration-150 ease-in-out lg:w-64`}
} z-9999 static left-0 top-0 flex h-screen w-14 flex-col overflow-x-hidden overflow-y-hidden bg-neutral-10 transition duration-150 ease-in-out dark:bg-neutral-2 lg:w-64`}
>
<div className="flex items-center justify-between gap-2 overflow-hidden px-0 py-5 lg:p-6">
<div className="mt-8 hidden w-full text-center font-semibold text-white lg:block">
<Image
src="/logo.svg"
src="/logo.png"
alt="Clan Logo"
width={58}
height={58}
width={75}
height={75}
priority
/>
</div>
</div>
<Divider
flexItem
className="mx-8 mb-4 mt-9 hidden bg-zinc-600 lg:block"
className="mx-8 mb-4 mt-9 hidden bg-neutral-40 lg:block"
/>
<div className="flex w-full justify-center">
<IconButton size="large" className="text-white" onClick={onClose}>
@@ -139,7 +138,10 @@ export function Sidebar(props: SidebarProps) {
);
})}
</List>
<Divider flexItem className="mx-8 my-10 hidden bg-zinc-600 lg:block" />
<Divider
flexItem
className="mx-8 my-10 hidden bg-neutral-40 lg:block"
/>
<div className="mx-auto mb-8 hidden w-full max-w-xs rounded-sm px-4 py-6 text-center align-bottom shadow-sm lg:block">
<h3 className="mb-2 w-full font-semibold text-white">
Clan.lol Admin
@@ -148,7 +150,7 @@ export function Sidebar(props: SidebarProps) {
href=""
target="_blank"
rel="nofollow"
className="inline-block w-full rounded-md p-2 text-center text-white hover:text-violet-400/95"
className="inline-block w-full rounded-md p-2 text-center text-white hover:text-purple-60/95"
>
Donate
</a>

101
pkgs/ui/src/components/table/nodeTable.tsx
View File

@@ -1,23 +1,22 @@
"use client";
import { useState, ChangeEvent, useMemo } from "react";
import Box from "@mui/material/Box";
import TablePagination from "@mui/material/TablePagination";
import Paper from "@mui/material/Paper";
import { CircularProgress, Grid, useTheme } from "@mui/material";
import Box from "@mui/material/Box";
import Paper from "@mui/material/Paper";
import TablePagination from "@mui/material/TablePagination";
import useMediaQuery from "@mui/material/useMediaQuery";
import { ChangeEvent, useMemo, useState } from "react";
import { EnhancedTableToolbar } from "./enhancedTableToolbar";
import { StickySpeedDial } from "./stickySpeedDial";
import { NodeTableContainer } from "./nodeTableContainer";
import { SearchBar } from "./searchBar";
import { Machine } from "@/api/model/machine";
import Grid2 from "@mui/material/Unstable_Grid2/Grid2";
import { useMachines } from "../hooks/useMachines";
import { Machine } from "@/api/model/machine";
import { EnhancedTableToolbar } from "./enhancedTableToolbar";
import { NodeTableContainer } from "./nodeTableContainer";
import { SearchBar } from "./searchBar";
import { StickySpeedDial } from "./stickySpeedDial";
export function NodeTable() {
const machines = useMachines();
const theme = useTheme();
const is_xs = useMediaQuery(theme.breakpoints.only("xs"));
@@ -47,49 +46,51 @@ export function NodeTable() {
return (
<Grid
container
style={{ height: "100vh" }} // make the container fill the screen height
alignItems="center" // center the items vertically
justifyContent="center" // center the items horizontally
sx={{
h: "100vh",
alignItems: "center",
justifyContent: "center",
}}
>
<CircularProgress size={80} color="secondary" />
</Grid>
);
} else {
return (
<Box sx={{ width: "100%" }}>
<Paper sx={{ width: "100%", mb: 2 }}>
<StickySpeedDial selected={selected} />
<EnhancedTableToolbar tableData={tableData}>
<Grid2 xs={12}>
<SearchBar
tableData={tableData}
setFilteredList={setFilteredList}
/>
</Grid2>
</EnhancedTableToolbar>
<NodeTableContainer
tableData={filteredList}
page={page}
rowsPerPage={rowsPerPage}
dense={false}
selected={selected}
setSelected={setSelected}
/>
{/* TODO: This creates the error Warning: Prop `id` did not match. Server: ":RspmmcqH1:" Client: ":R3j6qpj9H1:" */}
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
labelRowsPerPage={is_xs ? "Rows" : "Rows per page:"}
component="div"
count={filteredList.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</Paper>
</Box>
);
}
return (
<Box sx={{ width: "100%" }}>
<Paper sx={{ width: "100%", mb: 2 }}>
<StickySpeedDial selected={selected} />
<EnhancedTableToolbar tableData={tableData}>
<Grid2 xs={12}>
<SearchBar
tableData={tableData}
setFilteredList={setFilteredList}
/>
</Grid2>
</EnhancedTableToolbar>
<NodeTableContainer
tableData={filteredList}
page={page}
rowsPerPage={rowsPerPage}
dense={false}
selected={selected}
setSelected={setSelected}
/>
{/* TODO: This creates the error Warning: Prop `id` did not match. Server: ":RspmmcqH1:" Client: ":R3j6qpj9H1:" */}
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
labelRowsPerPage={is_xs ? "Rows" : "Rows per page:"}
component="div"
count={filteredList.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</Paper>
</Box>
);
}