Feature/hadas/toggle color (#166)

* css: toggle apperance when disable

* fix disable apperance

src/components/Toggle/Toggle.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import classNames from "classnames";
+import cx from "classnames";
 import NOOP from "lodash/noop";
 import { BASE_TOGGLE_CLASS_NAME } from "./ToggleConstants";
 import ToggleText from "./ToggleText";
@@ -37,17 +37,22 @@ const Toggle = ({
     ariaControls
   });
 
-  const className = classNames(bemHelper({ element: "toggle" }), componentClassName, {
-    [bemHelper({ element: "toggle", state: "selected" })]: isChecked,
-    [bemHelper({ element: "toggle", state: "not-selected" })]: !isChecked,
-    [bemHelper({ element: "toggle", state: "disabled" })]: isDisabled
-  });
-
   return (
-    <label htmlFor={id} className={bemHelper({ element: "wrapper" })}>
+    <label
+      htmlFor={id}
+      className={cx(bemHelper({ element: "wrapper" }), {
+        [bemHelper({ element: "wrapper", state: "disabled" })]: isDisabled
+      })}
+    >
       {areLabelsHidden ? null : <ToggleText>{offOverrideText}</ToggleText>}
       <input {...inputProps} className={bemHelper({ element: "input" })} />
-      <div className={className} aria-hidden="true" />
+      <div
+        className={cx(bemHelper({ element: "toggle" }), componentClassName, {
+          [bemHelper({ element: "toggle", state: "selected" })]: isChecked,
+          [bemHelper({ element: "toggle", state: "not-selected" })]: !isChecked
+        })}
+        aria-hidden="true"
+      />
       {areLabelsHidden ? null : <ToggleText>{onOverrideText}</ToggleText>}
     </label>
   );

src/components/Toggle/Toggle.scss

@@ -5,6 +5,12 @@
   &_wrapper {
     display: flex;
     align-items: center;
+    &--disabled {
+      opacity: 0.4;
+      & .monday-style-toggle_text {
+        color: rgba(var(--primary-text-color), 0.4);
+      }
+    }
   }
 
   // Since it is not possible to change the design of the checkbox according to the storybook toggle requirements using css,
@@ -57,10 +63,6 @@
         left: 3px;
       }
     }
-
-    &--disabled {
-      @include theme-prop(background-color, primary-background-hover-color);
-    }
   }
 
   &_text {

src/components/Toggle/ToggleText.jsx

@@ -1,5 +1,5 @@
 import React from "react";
 import { BASE_TOGGLE_CLASS_NAME } from "./ToggleConstants";
 
-const ToggleText = ({ children }) => <span className={`${BASE_TOGGLE_CLASS_NAME}__text`}>{children}</span>;
+const ToggleText = ({ children }) => <span className={`${BASE_TOGGLE_CLASS_NAME}_text`}>{children}</span>;
 export default ToggleText;