SONAR-11183 UI toggle switch state should be more obvious

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>
     );
   }

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;
+}