Update table field components

The structure of TableField's image props have changed

components/common/SliderTableField/index.tsx

@@ -11,9 +11,11 @@ interface Props {
   description?: string
   value?: number
   className?: string
-  imageAlt?: string
+  image?: {
-  imageClass?: string
+    className?: String
-  imageSrc?: string[]
+    alt?: string
+    src: string[]
+  }
   min: number
   max: number
   step: number
@@ -47,10 +49,8 @@ const SliderTableField = (props: Props) => {
   return (
     <TableField
       name={props.name}
-      className="SliderField"
+      className="slider"
-      imageAlt={props.imageAlt}
+      image={props.image}
-      imageClass={props.imageClass}
-      imageSrc={props.imageSrc}
       label={props.label}
     >
       <Slider
@@ -63,13 +63,15 @@ const SliderTableField = (props: Props) => {
         onValueCommit={handleValueCommit}
       />
       <Input
-        className="Bound"
+        className="number"
+        bound={true}
         type="number"
         value={`${value}`}
         min={props.min}
         max={props.max}
         step={props.step}
         onChange={handleInputChange}
+        hide1Password={false}
       />
     </TableField>
   )

components/common/SwitchTableField/index.tsx

@@ -13,9 +13,11 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
   value?: boolean
   className?: string
   tabIndex?: number
-  imageAlt?: string
+  image?: {
-  imageClass?: string
+    className?: String
-  imageSrc?: string[]
+    alt?: string
+    src: string[]
+  }
   onValueChange: (value: boolean) => void
 }
 
@@ -36,8 +38,8 @@ const SwitchTableField = (props: Props) => {
 
   const classes = classNames(
     {
-      SwitchTableField: true,
+      switch: true,
-      Disabled: props.disabled,
+      disabled: props.disabled,
     },
     props.className
   )
@@ -47,9 +49,7 @@ const SwitchTableField = (props: Props) => {
       name={props.name}
       description={props.description}
       className={classes}
-      imageAlt={props.imageAlt}
+      image={props.image}
-      imageClass={props.imageClass}
-      imageSrc={props.imageSrc}
       label={props.label}
     >
       <Switch

components/common/TableField/index.module.scss

@@ -14,10 +14,6 @@
     flex-direction: column;
   }
 
-  &:hover .Left .Info h3 {
-    color: var(--accent-blue);
-  }
-
   &.numeric .right > .input,
   &.numeric .right > .duration {
     text-align: right;