Fix tab style (#1832)

CHANGELOG.md

@@ -11,6 +11,7 @@
 
 - Exporting boreholes as CSV and JSON (without attachments) is now also available in anonymous mode. 
 - Removed all asterisks from required form fields.
+- Updated the UI design of the tabs component.
 - Reincluded download link for codelist references in the import panel.
 
 ### Fixed

src/client/src/AppTheme.ts

@@ -476,6 +476,17 @@ export const theme = createTheme({
         },
       },
     },
+    MuiTabs: {
+      styleOverrides: {
+        root: {
+          margin: "0px !important",
+          overflow: "visible !important",
+        },
+        scroller: {
+          overflow: "visible !important",
+        },
+      },
+    },
     MuiBadge: {
       styleOverrides: {
         badge: {

src/client/src/components/styledTabComponents.jsx → src/client/src/components/styledTabComponents.tsx

@@ -4,30 +4,43 @@ import { theme } from "../AppTheme";
 
 export const BdmsTabContentBox = styled(Box)(() => ({
   backgroundColor: theme.palette.background.default,
-  borderBottom: `1px solid ${theme.palette.boxShadow}`,
-  borderRight: `1px solid ${theme.palette.boxShadow}`,
-  borderLeft: `1px solid ${theme.palette.boxShadow}`,
-  borderRadius: "3px",
-  padding: "10px 10px 5px 10px",
-  margin: "0 5px 10px 5px",
+  border: `1px solid ${theme.palette.boxShadow}`,
+  padding: `${theme.spacing(3)}`,
   display: "flex",
   flexDirection: "column",
 }));
 
 export const BdmsTabs = styled(Tabs)({
+  overflow: "visible",
   margin: "0 4px",
   "& .MuiTabs-indicator": {
     display: "none",
   },
 });
 
-export const BdmsTab = styled(props => <Tab disableRipple {...props} />)(() => ({
+interface BdmsTabProps {
+  label: string;
+  key: string;
+  "data-cy": string;
+}
+export const BdmsTab = styled((props: BdmsTabProps) => <Tab disableRipple {...props} />)(() => ({
+  fontSize: "16px",
+  fontWeight: "400",
+  paddingTop: `${theme.spacing(2)}`,
+  paddingBottom: `${theme.spacing(2)}`,
+  paddingRight: `${theme.spacing(3)}`,
+  paddingLeft: `${theme.spacing(3)}`,
+  color: theme.palette.secondary.main,
+
   "&.Mui-selected": {
+    color: theme.palette.background.menuItemActive,
     backgroundColor: theme.palette.background.default,
     borderTop: `1px solid ${theme.palette.boxShadow}`,
     borderRight: `1px solid ${theme.palette.boxShadow}`,
     borderLeft: `1px solid ${theme.palette.boxShadow}`,
-    borderRadius: "3px solid black",
+    borderBottom: `1px solid ${theme.palette.background.default}`,
+    borderRadius: `${theme.spacing(0.5)} ${theme.spacing(0.5)} 0 0`,
+    top: "1px",
   },
   "&.Mui-focusVisible": {
     backgroundColor: "rgba(100, 95, 228, 0.32)",

src/client/src/mui.theme.d.ts

@@ -128,6 +128,7 @@ declare module "@mui/material/styles" {
     MuiInputLabel: object;
     MuiOutlinedInput: object;
     MuiTab: object;
+    MuiTabs: object;
     MuiBadge: object;
     MuiDialogTitle: object;
     MuiDialogActions: object;
@@ -150,6 +151,7 @@ declare module "@mui/material/styles" {
     MuiInputLabel: object;
     MuiOutlinedInput: object;
     MuiTab: object;
+    MuiTabs: object;
     MuiBadge: object;
     MuiDialogTitle: object;
     MuiDialogActions: object;

src/client/src/pages/detail/form/borehole/boreholeForm.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, useCallback, useEffect, useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
+import { Card } from "@mui/material";
 import { DevTool } from "../../../../../hookformDevtools.ts";
 import { getBoreholeGeometryDepthTVD } from "../../../../api/fetchApiV2.js";
 import {
@@ -112,7 +113,7 @@ export const BoreholeForm = forwardRef(({ borehole, editingEnabled, onSubmit }:
   }, [fetchDepthTVD, topBedrockWeatheredMd]);
 
   return (
-    <>
+    <Card>
       <DevTool control={formMethods.control} placement="top-right" />
       <FormProvider {...formMethods}>
         <form onSubmit={formMethods.handleSubmit(onSubmit)}>
@@ -244,6 +245,6 @@ export const BoreholeForm = forwardRef(({ borehole, editingEnabled, onSubmit }:
           </FormSegmentBox>
         </form>
       </FormProvider>
-    </>
+    </Card>
   );
 });

src/client/src/pages/detail/form/borehole/boreholePanel.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, SyntheticEvent, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory, useLocation } from "react-router-dom";
-import { BdmsTab, BdmsTabContentBox, BdmsTabs } from "../../../../components/styledTabComponents.jsx";
+import { BdmsTab, BdmsTabContentBox, BdmsTabs } from "../../../../components/styledTabComponents.js";
 import { BoreholeForm } from "./boreholeForm.tsx";
 import { BoreholePanelProps } from "./boreholePanelInterfaces";
 import Geometry from "./geometry.jsx";

src/client/src/pages/detail/form/completion/completion.jsx

@@ -14,7 +14,7 @@ import { AddButton } from "../../../../components/buttons/buttons.tsx";
 import { DataCardExternalContext } from "../../../../components/dataCard/dataCardContext.jsx";
 import { PromptContext } from "../../../../components/prompt/promptContext.tsx";
 import { FullPage } from "../../../../components/styledComponents.ts";
-import { BdmsTab, BdmsTabContentBox, BdmsTabs } from "../../../../components/styledTabComponents.jsx";
+import { BdmsTab, BdmsTabContentBox, BdmsTabs } from "../../../../components/styledTabComponents.tsx";
 import CompletionContent from "./completionContent.jsx";
 import CompletionHeaderDisplay from "./completionHeaderDisplay.jsx";
 import CompletionHeaderInput from "./completionHeaderInput.jsx";

src/client/src/pages/detail/form/completion/completionContent.jsx

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import { useHistory, useLocation } from "react-router-dom";
 import { Stack } from "@mui/material";
 import { DataCardExternalContext } from "../../../../components/dataCard/dataCardContext.jsx";
-import { BdmsTab, BdmsTabContentBox, BdmsTabs } from "../../../../components/styledTabComponents.jsx";
+import { BdmsTab, BdmsTabContentBox, BdmsTabs } from "../../../../components/styledTabComponents.tsx";
 import Backfill from "./backfill.jsx";
 import Casing from "./casing.jsx";
 import Instrumentation from "./instrumentation.jsx";

src/client/src/components/boreholeImportDropzone.tsx → src/client/src/pages/overview/sidePanelContent/importer/boreholeImportDropzone.tsx

@@ -3,8 +3,8 @@ import { Accept, FileRejection, useDropzone } from "react-dropzone";
 import { useTranslation } from "react-i18next";
 import { Box, Stack, Typography } from "@mui/material";
 import { CircleX, File as FileIcon, Trash2 } from "lucide-react";
-import UploadIcon from "../assets/icons/upload.svg?react";
-import { theme } from "../AppTheme.ts";
+import UploadIcon from "../../../../assets/icons/upload.svg?react";
+import { theme } from "../../../../AppTheme.ts";
 
 interface BoreholeImportDropzoneProps {
   file: File | null;

src/client/src/pages/overview/sidePanelContent/importer/importPanel.tsx

@@ -5,10 +5,10 @@ import { Box, Button, Link, Stack } from "@mui/material";
 import { importBoreholesCsv, importBoreholesJson, importBoreholesZip } from "../../../../api/borehole.ts";
 import { downloadCodelistCsv } from "../../../../api/fetchApiV2";
 import { AlertContext } from "../../../../components/alert/alertContext.tsx";
-import { BoreholeImportDropzone } from "../../../../components/boreholeImportDropzone.tsx";
 import { SideDrawerHeader } from "../../layout/sideDrawerHeader.tsx";
 import { ErrorResponse, NewBoreholeProps } from "../commons/actionsInterfaces.ts";
 import WorkgroupSelect from "../commons/workgroupSelect.tsx";
+import { BoreholeImportDropzone } from "./boreholeImportDropzone.tsx";
 
 interface ImportPanelProps extends NewBoreholeProps {
   setErrorsResponse: React.Dispatch<React.SetStateAction<ErrorResponse | null>>;