[Frontend] Create TableHeaderWithTooltip component

UniversityOfHelsinkiCS · Nov 27, 2024 · 264aaa2 · 264aaa2
1 parent 98eaddc
commit 264aaa2
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/services/frontend/src/components/material/InfoBox/index.tsx b/services/frontend/src/components/material/InfoBox/index.tsx
@@ -23,7 +23,7 @@ export const InfoBox = ({
       }
     >
       {mini ? (
-        <IconButton data-cy={`${cypress}InfoBoxButton`}>
+        <IconButton data-cy={`${cypress}InfoBoxButton`} sx={{ padding: 0 }}>
           <HelpOutline fontSize="small" />
         </IconButton>
       ) : (

diff --git a/services/frontend/src/components/material/TableHeaderWithTooltip.tsx b/services/frontend/src/components/material/TableHeaderWithTooltip.tsx
@@ -0,0 +1,10 @@
+import { Stack } from '@mui/material'
+
+import { InfoBox } from './InfoBox'
+
+export const TableHeaderWithTooltip = ({ header, tooltipText }: { header: string; tooltipText: string }) => (
+  <Stack direction="row" gap={1}>
+    <span style={{ whiteSpace: 'wrap', minWidth: '80px' }}>{header}</span>
+    <InfoBox content={tooltipText} mini />
+  </Stack>
+)
diff --git a/services/frontend/src/components/material/Toggle/index.tsx b/services/frontend/src/components/material/Toggle/index.tsx
@@ -20,10 +20,12 @@ export const Toggle = ({
   infoBoxContent?: string
 }) => {
   return (
-    <Stack alignItems="center" direction="row">
-      <Typography color={disabled ? 'text.secondary' : 'text.primary'}>{firstLabel}</Typography>
-      <Switch checked={value} data-cy={cypress} disabled={disabled} onChange={() => setValue(!value)} />
-      <Typography color={disabled ? 'text.secondary' : 'text.primary'}>{secondLabel}</Typography>
+    <Stack alignItems="center" direction="row" gap={1}>
+      <Stack alignItems="center" direction="row">
+        <Typography color={disabled ? 'text.secondary' : 'text.primary'}>{firstLabel}</Typography>
+        <Switch checked={value} data-cy={cypress} disabled={disabled} onChange={() => setValue(!value)} />
+        <Typography color={disabled ? 'text.secondary' : 'text.primary'}>{secondLabel}</Typography>
+      </Stack>
       {infoBoxContent && <InfoBox content={infoBoxContent} mini />}
     </Stack>
   )