fix: dashboard margins

neetbox/frontend/.gitignore

@@ -1,5 +1,4 @@
 # Logs
-logs
 *.log
 npm-debug.log*
 yarn-debug.log*

neetbox/frontend/src/components/dashboard/project/actions.tsx

@@ -19,7 +19,7 @@ export function Actions({ actions }: Props) {
   const [blocking, setBlocking] = useState(false);
   const actionList = Object.entries(actions?.value ?? {});
   return (
-    <Space>
+    <Space style={{ marginBottom: "20px" }}>
       {actionList.length ? (
         actionList.map(([actionName, actionOptions]) => (
           <ActionItem
@@ -68,7 +68,7 @@ export function ActionItem({
   };
   const renderContent = () => (
     <div style={{ padding: "10px", maxWidth: "400px" }}>
-      <Space vertical spacing={"tight"}>
+      <Space vertical spacing={"medium"}>
         <Typography.Title heading={5}>{name}</Typography.Title>
         {options.description && (
           <div style={{ margin: 0, whiteSpace: "pre-wrap" }}>
@@ -101,6 +101,8 @@ export function ActionItem({
         <Button
           style={{ width: "100px" }}
           onClick={handleRun}
+          type="warning"
+          theme="solid"
           disabled={blocking}
         >
           Run

neetbox/frontend/src/components/dashboard/project/logs/logs.tsx

@@ -46,7 +46,6 @@ export const Logs = React.memo(({ projectName }: Props) => {
 });
 
 const LogItems = ({ logs }: { logs: LogData[] }) => {
-  console.info("logitems render logs count", logs.length);
   return logs.map((x) => <LogItem key={x._id} data={x} />);
 };
 

neetbox/frontend/src/components/sectionTitle.tsx

@@ -0,0 +1,15 @@
+import { Typography } from "@douyinfe/semi-ui";
+
+interface Props {
+  title: string;
+}
+
+export function SectionTitle(props: Props) {
+  return (
+    <div>
+      <Typography.Title heading={3} style={{ margin: "20px 0" }}>
+        {props.title}
+      </Typography.Title>
+    </div>
+  );
+}

neetbox/frontend/src/pages/console/proejctDashboard.tsx

@@ -1,12 +1,13 @@
 import { useParams } from "react-router-dom";
 import { createContext, useMemo } from "react";
-import { Typography } from "@douyinfe/semi-ui";
+import { Divider, Typography } from "@douyinfe/semi-ui";
 import PlatformProps from "../../components/dashboard/project/platformProps";
 import { useProjectStatus } from "../../services/projects";
 import { Logs } from "../../components/dashboard/project/logs/logs";
 import { Actions } from "../../components/dashboard/project/actions";
 import Loading from "../../components/loading";
 import { Hardware } from "../../components/dashboard/project/hardware";
+import { SectionTitle } from "../../components/sectionTitle";
 
 export const ProjectContext = createContext<{ projectName: string } | null>(
   null,
@@ -33,19 +34,22 @@ function ProjectDashboard() {
 
   return (
     <ProjectContext.Provider value={projectContextData}>
-      <div style={{ padding: "10px" }}>
+      <div style={{ padding: "20px" }}>
         <Typography.Title heading={2} style={{ textAlign: "center" }}>
           Project "{projectName}"
         </Typography.Title>
-        <Typography.Title heading={3}>Logs</Typography.Title>
+        <SectionTitle title="Logs" />
         <Logs projectName={projectName} />
+        <Divider />
         {data.current ? (
           <>
-            <Typography.Title heading={3}>Actions</Typography.Title>
+            <SectionTitle title="Actions" />
             <Actions actions={data.current.__action} />
-            <Typography.Title heading={3}>Hardware</Typography.Title>
+            <Divider />
+            <SectionTitle title="Hardware" />
             <Hardware hardwareData={data.history.map((x) => x.hardware)} />
-            <Typography.Title heading={3}>Platform</Typography.Title>
+            <Divider />
+            <SectionTitle title="Platform" />
             <PlatformProps data={data.current.platform} />
           </>
         ) : (