feat(web/input): description tooltip on fields

web/src/features/dialog/components/InfoTooltip.tsx

@@ -0,0 +1,23 @@
+import { Box, Tooltip } from '@chakra-ui/react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const InfoTooltip: React.FC<{ description: string }> = ({ description }) => {
+  return (
+    <Tooltip label={description} placement="top" hasArrow arrowSize={4} maxW={220}>
+      <Box
+        borderRadius="full"
+        bg="whiteAlpha.200"
+        p={0.5}
+        w={18}
+        h={18}
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+      >
+        <FontAwesomeIcon icon="question" fixedWidth fontSize={10} />
+      </Box>
+    </Tooltip>
+  );
+};
+
+export default InfoTooltip;

web/src/features/dialog/components/Label.tsx

@@ -0,0 +1,13 @@
+import { HStack, Text } from '@chakra-ui/react';
+import InfoTooltip from './InfoTooltip';
+
+const Label: React.FC<{ label: string; description?: string }> = ({ label, description }) => {
+  return (
+    <HStack spacing={1}>
+      <Text>{label}</Text>
+      {description && <InfoTooltip description={description} />}
+    </HStack>
+  );
+};
+
+export default Label;

web/src/features/dialog/components/checkbox.tsx

@@ -1,6 +1,8 @@
-import { Box, Checkbox } from '@chakra-ui/react';
+import { Box, Checkbox, HStack, Text } from '@chakra-ui/react';
 import { useEffect } from 'react';
 import { ICheckbox } from '../../../interfaces/dialog';
+import InfoTooltip from './InfoTooltip';
+import Label from './Label';
 
 interface Props {
   row: ICheckbox;
@@ -20,7 +22,7 @@ const CheckboxField: React.FC<Props> = (props) => {
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => props.handleChange(e.target.checked, props.index)}
           defaultChecked={props.row.checked}
         >
-          {props.row.label}
+          <Label label={props.row.label} description={props.row.description} />
         </Checkbox>
       </Box>
     </>

web/src/features/dialog/components/input.tsx

@@ -1,7 +1,8 @@
-import { Box, InputGroup, InputLeftElement, InputRightElement, Text, Input } from '@chakra-ui/react';
+import { Box, InputGroup, InputLeftElement, InputRightElement, Input } from '@chakra-ui/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useEffect } from 'react';
 import { IInput } from '../../../interfaces/dialog';
+import Label from './Label';
 
 interface Props {
   row: IInput;
@@ -19,7 +20,7 @@ const InputField: React.FC<Props> = (props) => {
   return (
     <>
       <Box mb={3} textAlign="left">
-        <Text>{props.row.label}</Text>
+        <Label label={props.row.label} description={props.row.description} />
         <InputGroup>
           {props.row.icon && (
             <InputLeftElement pointerEvents="none" children={<FontAwesomeIcon icon={props.row.icon} fixedWidth />} />

web/src/features/dialog/components/number.tsx

@@ -11,6 +11,7 @@ import {
 import { useEffect } from 'react';
 import { INumber } from '../../../interfaces/dialog';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Label from './Label';
 
 interface Props {
   row: INumber;
@@ -25,7 +26,7 @@ const NumberField: React.FC<Props> = (props) => {
 
   return (
     <Box mb={3}>
-      <Text>{props.row.label}</Text>
+      <Label label={props.row.label} description={props.row.description} />
       <NumberInput
         onChange={(val: string) => props.handleChange(+val, props.index)}
         defaultValue={props.row.default}

web/src/features/dialog/components/slider.tsx

@@ -1,6 +1,7 @@
 import { Box, Text, Slider, SliderTrack, SliderFilledTrack, SliderThumb, HStack, Tooltip } from '@chakra-ui/react';
 import { useEffect, useState } from 'react';
 import { ISlider } from '../../../interfaces/dialog';
+import Label from './Label';
 
 interface Props {
   row: ISlider;
@@ -18,7 +19,7 @@ const SliderField: React.FC<Props> = (props) => {
   return (
     <>
       <Box mb={3} key={`slider-${props.index}`}>
-        <Text>{props.row.label}</Text>
+        <Label label={props.row.label} description={props.row.description} />
         <Slider
           onChangeEnd={(val: number) => props.handleChange(val, props.index)}
           onChange={(val: number) => setSliderValue(val)}