Merge pull request #954 from RedisInsight/fix/switcher_styles

fix switcher styles

Author: AmirAllayarovSofteq

redisinsight/ui/src/components/consents-settings/ConsentOption/ConsentOption.tsx

@@ -6,6 +6,7 @@ import {
   EuiText,
   EuiSpacer,
 } from '@elastic/eui'
+import cx from 'classnames'
 import parse from 'html-react-parser'
 
 import { IConsent } from '../ConsentsSettings'
@@ -32,7 +33,12 @@ const ConsentOption = (props: Props) => {
     <EuiFlexItem key={consent.agreementName}>
       {isSettingsPage && consent.description && (
         <>
-          <EuiText size="s" className={styles.smallText} color="subdued" style={{ marginTop: '12px' }}>
+          <EuiText
+            size="s"
+            className={styles.smallText}
+            color="subdued"
+            style={{ marginTop: '12px' }}
+          >
             {parse(consent.description)}
           </EuiText>
           <EuiSpacer size="m" />
@@ -51,9 +57,16 @@ const ConsentOption = (props: Props) => {
           />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiText className={styles.label}>{parse(consent.label)}</EuiText>
+          <EuiText className={cx({ [styles.disabled]: consent?.disabled, [styles.smallText]: true })}>
+            {parse(consent.label)}
+          </EuiText>
           {!isSettingsPage && consent.description && (
-            <EuiText size="s" className={styles.smallText} color="subdued" style={{ marginTop: '12px' }}>
+            <EuiText
+              size="s"
+              className={styles.smallText}
+              color="subdued"
+              style={{ marginTop: '12px' }}
+            >
               {parse(consent.description)}
             </EuiText>
           )}

redisinsight/ui/src/components/consents-settings/styles.module.scss

@@ -96,6 +96,10 @@
   }
 }
 
+.smallText.disabled {
+  color: var(--disabledLabelColor) !important;
+}
+
 :global(.euiOverlayMask) {
   background: none !important;
 }

redisinsight/ui/src/styles/components/_switch.scss

@@ -18,11 +18,7 @@
     }
   }
   .euiSwitch__button:disabled {
-    opacity: 50%;
-
-    .euiSwitch__icon {
-      display: none;
-    }
+    opacity: 0.5;
   }
 }
 

redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss

@@ -96,6 +96,7 @@
   --browserComponentActive: #{$browserComponentActive};
   --browserTreeNodeOpen: #{$browserTreeNodeOpen};
   --defaultGreenColor: #{$defaultGreenColor};
+  --disabledLabelColor: #{$disabledLabelColor};
 
   --iconsDefaultColor: #{$iconsDefaultColor};
   --iconsDefaultHoverColor: #{$iconsDefaultHoverColor};

redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss

@@ -62,6 +62,7 @@ $iconsDefaultHoverColor: #dfe5ef;
 $separatorColor: #3d3d3d;
 $separatorNavigationColor: #465282;
 $separatorDropdownColor: #8b90a3;
+$disabledLabelColor: #898A90;
 
 $buttonSecondaryHoverColor: #364da8;
 $buttonSecondaryTextColor: #dfe5ef;

redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss

@@ -98,6 +98,7 @@
   --browserComponentActive: #{$browserComponentActive};
   --browserTreeNodeOpen: #{$browserTreeNodeOpen};
   --defaultGreenColor: #{$defaultGreenColor};
+  --disabledLabelColor: #{$disabledLabelColor};
 
   --iconsDefaultColor: #{$iconsDefaultColor};
   --iconsDefaultHoverColor: #{$iconsDefaultHoverColor};

redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss

@@ -59,6 +59,7 @@ $iconsDefaultHoverColor: #173369;
 $separatorColor: #cdd7e6;
 $separatorNavigationColor: #465282;
 $separatorDropdownColor: #8b90a3;
+$disabledLabelColor: #527298;
 
 $buttonSecondaryHoverColor: #2848d7;
 $buttonSecondaryTextColor: #243dac;