Nov 1, 2023 · Oct 31, 2023 · Oct 31, 2023 · Oct 31, 2023 · Oct 31, 2023 · Oct 31, 2023
diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/ChartSection.tsx b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/ChartSection.tsx
 import { useTheme } from "@emotion/react";
 import Paper from "@mui/material/Paper";
 import { makeStyles } from "@mui/styles";
 import { HTMLProps, ReactNode, FC, PropsWithChildren } from "react";
 import { combineClasses } from "utils/combineClasses";
 import {
  type HTMLProps,
  type ReactNode,
  type FC,
  type PropsWithChildren,
 } from "react";

 export interface ChartSectionProps {
  /**
  contentsProps,
  title,
 }) => {
  conststyles =useStyles();
  consttheme =useTheme();

  return (
    <Paper className={styles.root} elevation={0}>
    <Paper
      css={{
        border: `1px solid ${theme.palette.divider}`,
        borderRadius: theme.shape.borderRadius,
      }}
      elevation={0}
    >
      {title && (
        <div className={styles.header}>
          <h6 className={styles.title}>{title}</h6>
        <div
          css={{
            alignItems: "center",
            display: "flex",
            justifyContent: "space-between",
            padding: theme.spacing(1.5, 2),
          }}
        >
          <h6
            css={{
              margin: 0,
              fontSize: 14,
              fontWeight: 600,
            }}
          >
            {title}
          </h6>
          {action && <div>{action}</div>}
        </div>
      )}

      <div
        {...contentsProps}
        className={combineClasses([styles.contents, contentsProps?.className])}
        css={{
          margin: theme.spacing(2),
        }}
      >
        {children}
      </div>
    </Paper>
  );
 };

 const useStyles = makeStyles((theme) => ({
  root: {
    border: `1px solid ${theme.palette.divider}`,
    borderRadius: theme.shape.borderRadius,
  },
  contents: {
    margin: theme.spacing(2),
  },
  header: {
    alignItems: "center",
    display: "flex",
    justifyContent: "space-between",
    padding: theme.spacing(1.5, 2),
  },
  title: {
    margin: 0,
    fontSize: 14,
    fontWeight: 600,
  },
 }));
Original file line number	Diff line number	Diff line change
		@@ -1,7 +1,11 @@
		import { useTheme } from "@emotion/react";
		import Paper from "@mui/material/Paper";
		import { makeStyles } from "@mui/styles";
		import { HTMLProps, ReactNode, FC, PropsWithChildren } from "react";
		import { combineClasses } from "utils/combineClasses";
		import {
		type HTMLProps,
		type ReactNode,
		type FC,
		type PropsWithChildren,
		} from "react";

		export interface ChartSectionProps {
		/**
Expand All		@@ -18,44 +22,46 @@ export const ChartSection: FC<PropsWithChildren<ChartSectionProps>> = ({
		contentsProps,
		title,
		}) => {
		conststyles =useStyles();
		consttheme =useTheme();

		return (
		<Paper className={styles.root} elevation={0}>
		<Paper
		css={{
		border: `1px solid ${theme.palette.divider}`,
		borderRadius: theme.shape.borderRadius,
		}}
		elevation={0}
		>
		{title && (
		<div className={styles.header}>
		<h6 className={styles.title}>{title}</h6>
		<div
		css={{
		alignItems: "center",
		display: "flex",
		justifyContent: "space-between",
		padding: theme.spacing(1.5, 2),
		}}
		>
		<h6
		css={{
		margin: 0,
		fontSize: 14,
		fontWeight: 600,
		}}
		>
		{title}
		</h6>
		{action && <div>{action}</div>}
		</div>
		)}

		<div
		{...contentsProps}
		className={combineClasses([styles.contents, contentsProps?.className])}
		css={{
		margin: theme.spacing(2),
		}}
		>
		{children}
		</div>
		</Paper>
		);
		};

		const useStyles = makeStyles((theme) => ({
		root: {
		border: `1px solid ${theme.palette.divider}`,
		borderRadius: theme.shape.borderRadius,
		},
		contents: {
		margin: theme.spacing(2),
		},
		header: {
		alignItems: "center",
		display: "flex",
		justifyContent: "space-between",
		padding: theme.spacing(1.5, 2),
		},
		title: {
		margin: 0,
		fontSize: 14,
		fontWeight: 600,
		},
		}));