From e9f1c8b3bbe007de81137fd4c0b961596ce61081 Mon Sep 17 00:00:00 2001
From: Stas Vilchik <stas.vilchik@sonarsource.com>
Date: Thu, 25 Oct 2018 12:08:59 +0200
Subject: [PATCH] SONAR-11183 UI toggle switch state should be more obvious

---
 .../src/main/js/components/controls/Toggle.tsx      |  5 ++++-
 .../src/main/js/components/controls/styles.css      | 13 +++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/server/sonar-web/src/main/js/components/controls/Toggle.tsx b/server/sonar-web/src/main/js/components/controls/Toggle.tsx
index b35d121f9e8..0c98f9d9ee7 100644
--- a/server/sonar-web/src/main/js/components/controls/Toggle.tsx
+++ b/server/sonar-web/src/main/js/components/controls/Toggle.tsx
@@ -20,6 +20,7 @@
 import * as React from 'react';
 import * as classNames from 'classnames';
 import { Button } from '../ui/buttons';
+import CheckIcon from '../icons-components/CheckIcon';
 import './styles.css';
 
 export interface Props {
@@ -47,7 +48,9 @@ export default class Toggle extends React.PureComponent<Props> {
 
     return (
       <Button className={className} name={this.props.name} onClick={this.handleClick}>
-        <div className="boolean-toggle-handle" />
+        <div className="boolean-toggle-handle">
+          <CheckIcon size={12} />
+        </div>
       </Button>
     );
   }
diff --git a/server/sonar-web/src/main/js/components/controls/styles.css b/server/sonar-web/src/main/js/components/controls/styles.css
index 32fb0c19f36..1dbc485d7cb 100644
--- a/server/sonar-web/src/main/js/components/controls/styles.css
+++ b/server/sonar-web/src/main/js/components/controls/styles.css
@@ -105,6 +105,9 @@
 }
 
 .boolean-toggle-handle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   width: 20px;
   height: 20px;
   border: 1px solid var(--gray80);
@@ -114,9 +117,15 @@
   transition: transform 0.3s cubic-bezier(0.87, -0.41, 0.19, 1.44), border 0.3s ease;
 }
 
+.boolean-toggle-handle > * {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
 .button.boolean-toggle-on {
   border-color: var(--darkBlue);
   background-color: var(--darkBlue);
+  color: var(--darkBlue);
 }
 
 .button.boolean-toggle-on:hover {
@@ -131,3 +140,7 @@
   border-color: #f6f6f6;
   transform: translateX(var(--controlHeight));
 }
+
+.button.boolean-toggle-on .boolean-toggle-handle > * {
+  opacity: 1;
+}
-- 
2.39.5