added flow display controls overlay

src/components/input/Toggle/index.tsx

@@ -1,16 +1,17 @@
 import React, { FC, useCallback } from 'react';
 import styles from './styles.module.scss';
 import classNames from 'classnames';
+import { ButtonProps, DivProps } from '~/utils/types';
 
-type ToggleColor = 'primary' | 'secondary' | 'lab' | 'danger';
+type ToggleColor = 'primary' | 'secondary' | 'lab' | 'danger' | 'white';
 
-interface IProps {
+type IProps = Omit<ButtonProps, 'value' | 'color'> & {
   value?: boolean;
   handler?: (val: boolean) => void;
   color?: ToggleColor;
-}
+};
 
-const Toggle: FC<IProps> = ({ value, handler, color = 'primary' }) => {
+const Toggle: FC<IProps> = ({ value, handler, color = 'primary', ...rest }) => {
   const onClick = useCallback(() => {
     if (!handler) {
       return;
@@ -21,8 +22,14 @@ const Toggle: FC<IProps> = ({ value, handler, color = 'primary' }) => {
 
   return (
     <button
+      {...rest}
       type="button"
-      className={classNames(styles.toggle, { [styles.active]: value }, styles[color])}
+      className={classNames(
+        styles.toggle,
+        { [styles.active]: value },
+        styles[color],
+        rest.className
+      )}
       onClick={onClick}
     />
   );

src/components/input/Toggle/styles.module.scss

@@ -12,6 +12,19 @@
   cursor: pointer;
   position: relative;
 
+  &.white {
+    box-shadow: inset white 0 0 0 2px;
+
+    &::after {
+      width: 14px;
+      height: 14px;
+      top: 5px;
+      left: 5px;
+      background: none;
+      box-shadow: inset white 0 0 0 2px;
+    }
+  }
+
   &::after {
     content: ' ';
     position: absolute;
@@ -26,7 +39,6 @@
   }
 
   &.active {
-
     &::after {
       transform: translate(24px, 0);
       background-color: white;
@@ -47,5 +59,9 @@
     &.danger {
       background-color: $red;
     }
+
+    &.monochrome {
+      background-color: white;
+    }
   }
 }