update style

DiamondLightSource · May 20, 2024 · ded1b05 · ded1b05
1 parent c96dbf8
commit ded1b05
Show file tree

Hide file tree

Showing 11 changed files with 40 additions and 20 deletions.
diff --git a/src/data-entry/beamProperties.tsx b/src/data-entry/beamProperties.tsx
@@ -8,6 +8,7 @@ import {
   InputLabel,
   SelectChangeEvent,
   InputAdornment,
+  Divider,
 } from "@mui/material";
 import {
   AngleUnits,
@@ -83,6 +84,7 @@ export default function BeampropertiesDataEntry() {
   return (
     <Stack spacing={2}>
       <Typography variant="h6">Beam properties</Typography>
+      <Divider/>
       {/* ENERGY */}
       <Stack direction={"row"} spacing={1}>
         <TextField

diff --git a/src/data-entry/beamstop.tsx b/src/data-entry/beamstop.tsx
@@ -8,6 +8,7 @@ import {
   Button,
   TextField,
   InputAdornment,
+  Divider,
 } from "@mui/material";
 import { LengthUnits } from "../utils/units";
 import { useBeamstopStore } from "./beamstopStore";
@@ -53,6 +54,7 @@ export default function BeamStopDataEntry(): JSX.Element {
   return (
     <Stack spacing={1}>
       <Typography variant="h6"> Beamstop </Typography>
+      <Divider/>
       <Stack direction={"row"} alignItems={"center"}>
         {/* Diameter */}
         <Typography flexGrow={1}>

diff --git a/src/data-entry/cameraTube.tsx b/src/data-entry/cameraTube.tsx
@@ -1,4 +1,5 @@
 import {
+  Divider,
   FormControl,
   InputAdornment,
   InputLabel,
@@ -31,6 +32,7 @@ export default function CameraTubeDataEntry(): JSX.Element {
   return (
     <Stack spacing={1}>
       <Typography variant="h6"> CameraTube </Typography>
+      <Divider/>
       <Stack direction={"row"} alignItems={"center"}>
         <Typography flexGrow={1}>
           {" "}

diff --git a/src/data-entry/dataSideBar.tsx b/src/data-entry/dataSideBar.tsx
@@ -1,16 +1,15 @@
 import {
   Card,
-  CardContent,
   Stack,
   Typography,
-  Divider,
   Autocomplete,
   TextField,
   FormControl,
   Select,
   MenuItem,
   InputLabel,
   Button,
+  Divider,
 } from "@mui/material";
 import { LengthUnits } from "../utils/units";
 import BeamStopDataEntry from "./beamstop";
@@ -72,10 +71,12 @@ export default function DataSideBar(): JSX.Element {
   };
 
   return (
-    <Card sx={{ maxHeight: "92vh", overflow: "scroll"}}>
-      <CardContent>
+    <Stack sx={{ maxHeight: "92vh", overflow: "scroll"}}>
         <Stack spacing={1}>
+          <Card sx={{ p:2}} variant="outlined">
+          <Stack spacing={1}>
           <Typography variant="h6">Beamline</Typography>
+          <Divider/>
           <Stack direction={"row"} spacing={1}>
             <Autocomplete
               size="small"
@@ -100,8 +101,12 @@ export default function DataSideBar(): JSX.Element {
               handleOpen={handleClickOpenPreset}
             />
           </Stack>
-          <Divider />
+          </Stack>
+          </Card>
+          <Card sx={{ p:2}} variant="outlined">
+          <Stack spacing={1}>
           <Typography variant="h6">Detector</Typography>
+          <Divider/>
           <Stack direction={"row"} spacing={1}>
             <Autocomplete
               size="small"
@@ -125,7 +130,6 @@ export default function DataSideBar(): JSX.Element {
               handleOpen={handleClickOpenDetector}
             />
           </Stack>
-
           <Typography>
             Resolution (hxw): {detectorStore.detector.resolution.height} x{" "}
             {detectorStore.detector.resolution.width}
@@ -158,14 +162,18 @@ export default function DataSideBar(): JSX.Element {
               </Select>
             </FormControl>
           </Stack>
-          <Divider />
+          </Stack>
+          </Card>
+          <Card sx={{p:2}} variant="outlined">
           <BeamStopDataEntry />
-          <Divider />
+          </Card>
+          <Card sx={{ p:2}} variant="outlined">
           <CameraTubeDataEntry />
-          <Divider />
+          </Card>
+          <Card sx={{p:2}} variant="outlined">
           <BeampropertiesDataEntry />
+          </Card>
         </Stack>
-      </CardContent>
-    </Card>
+    </Stack>
   );
 }
diff --git a/src/dialogs/BeamlineTable.tsx b/src/dialogs/BeamlineTable.tsx
@@ -1,3 +1,4 @@
+import { Paper } from "@mui/material";
 import { useBeamlineConfigStore } from "../data-entry/beamlineconfigStore";
 import { AppBeamline } from "../utils/types";
 import { DataGrid, GridColDef, GridToolbar } from "@mui/x-data-grid";
@@ -59,6 +60,7 @@ export default function BeamlineTable() {
   ];
 
   return (
+  <Paper>
     <DataGrid
       autoHeight
       rows={displayArray}
@@ -68,5 +70,6 @@ export default function BeamlineTable() {
       sx={{ border: 0 }}
       disableSelectionOnClick
     />
+  </Paper>
   );
 }
diff --git a/src/dialogs/beamlineDialog.tsx b/src/dialogs/beamlineDialog.tsx
@@ -4,7 +4,6 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
-  Divider,
   Grid,
   InputAdornment,
   Stack,
@@ -19,7 +18,7 @@ import { useBeamlineConfigStore } from "../data-entry/beamlineconfigStore";
 import { createInternalBeamline } from "../presets/presetManager";
 import { SubmitHandler, useForm } from "react-hook-form";
 
-const GRID_ITEM_SIZE = 3;
+const GRID_ITEM_SIZE = 12;
 const INPUT_PRECISION = 0.000001;
 
 interface BeamlineForm {
@@ -61,7 +60,6 @@ export default function PresetDialog(props: {
         <DialogContent>
           <Stack spacing={2}>
             <BeamlineTable />
-            <Divider />
             <Grid container spacing={2}>
               <Grid item xs={GRID_ITEM_SIZE}>
                 <TextField

diff --git a/src/index.css b/src/index.css
@@ -9,6 +9,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: white;
 }
 
 code {

diff --git a/src/plot/centrePlot.tsx b/src/plot/centrePlot.tsx
@@ -169,7 +169,7 @@ export default function CentrePlot(): JSX.Element {
   return (
       <Stack direction="column" spacing={1}>
         <Stack direction="row" spacing={1}>
-          <Card>
+          <Card variant="outlined">
             <CardContent>
               <div
                 style={{

diff --git a/src/plot/legendBar.tsx b/src/plot/legendBar.tsx
@@ -19,7 +19,7 @@ export default function LegendBar(): JSX.Element {
   const plotConfig = usePlotStore();
 
   return (
-    <Card sx={{flexGrow: 1}}>
+    <Card sx={{flexGrow: 1}} variant="outlined">
       <CardContent>
         <Stack spacing={1}>
           <Typography variant="h6"> Legend</Typography>

diff --git a/src/results/rangeTable.tsx b/src/results/rangeTable.tsx
@@ -1,8 +1,8 @@
 import {
+  Card,
   FormControl,
   InputLabel,
   MenuItem,
-  Paper,
   Select,
   SelectChangeEvent,
   Table,
@@ -47,7 +47,8 @@ export default function RangeTable(props: { qRange: UnitRange }): JSX.Element {
     .to(resultsStore.dUnits as string);
 
   return (
-      <TableContainer component={Paper} sx={{ maxWidth: "30vw"}}>
+    <Card variant="outlined" sx={{ maxWidth: "30vw"}}>
+      <TableContainer >
         <Table sx={{ minWidth: 50 }} aria-label="simple table" size="small">
           {/* TABLE HEAD */}
           <TableHead>
@@ -163,5 +164,6 @@ export default function RangeTable(props: { qRange: UnitRange }): JSX.Element {
           </TableRow>
         </Table>
       </TableContainer>
+      </Card>
   );
 }
diff --git a/src/results/resultsBar.tsx b/src/results/resultsBar.tsx
@@ -160,10 +160,12 @@ export default function ResultsBar({
 
   const units = displayUnits(textBoxUnits);
   return (
-      <Card sx={{ 
+      <Card variant="outlined" sx={{ 
         height: 1 ,
         maxHeight: "27vh",
-        overflow: "scroll", flexGrow: 1,}}>
+        overflow: "scroll",
+        flexGrow: 1
+        }}>
         <CardContent>
           <Stack spacing={1}>
             <Typography variant="h6"> Results</Typography>