Updated switch and bg color to gradient updated MD sizing (#14545)

datahub-web-react/src/alchemy-components/components/Switch/components.ts

@@ -41,7 +41,7 @@ export const Slider = styled.div<{ size?: SizeOptions; isSquare?: boolean; isDis
             minHeight: getToggleSize(size || 'md', 'slider'),
             borderRadius: !isSquare ? '35px' : '0px',
             top: '50%',
-            left: spacing.xxsm,
+            left: '2px',
             transform: 'translate(0, -50%)',
             backgroundColor: !isDisabled ? colors.white : colors.gray[200],
             boxShadow: `
@@ -60,7 +60,7 @@ export const Slider = styled.div<{ size?: SizeOptions; isSquare?: boolean; isDis
         position: 'relative',
 
         backgroundColor: colors.gray[100],
-        padding: spacing.xxsm,
+        padding: '2px',
         transition: `${transition.duration.normal} all`,
         boxSizing: 'content-box',
     },
@@ -81,8 +81,10 @@ export const StyledInput = styled.input<{
     position: absolute;
 
     &:checked + ${Slider} {
-        background-color: ${(props) =>
-            !props.disabled ? getColor(props.colorScheme, 500, props.theme) : colors.gray[100]};
+        background: ${(props) =>
+            !props.disabled
+                ? 'linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(83.44, 63, 209, 0.20) 100%), #533FD1'
+                : colors.gray[100]};
 
         &:before {
             transform: ${({ customSize }) => getSliderTransformPosition(customSize || 'md')};
@@ -101,6 +103,7 @@ export const StyledIcon = styled(Icon)<{ checked?: boolean; size: SizeOptions }>
     ({ checked, size }) => ({
         left: getIconTransformPositionLeft(size, checked || false),
         top: getIconTransformPositionTop(size),
+        color: checked ? colors.violet[500] : colors.gray[500],
     }),
     {
         transition: `${transition.duration.normal} all`,
@@ -108,7 +111,6 @@ export const StyledIcon = styled(Icon)<{ checked?: boolean; size: SizeOptions }>
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        color: colors.gray[500],
     },
 );
 

datahub-web-react/src/alchemy-components/components/Switch/utils.ts

@@ -2,21 +2,21 @@ import { SizeOptions } from '@components/theme/config';
 
 const sliderSize = {
     sm: '14px',
-    md: '16px',
+    md: '18px',
     lg: '18px',
     xl: '20px',
 };
 
 const inputSize = {
     sm: '35px',
-    md: '40px',
+    md: '32px',
     lg: '45px',
     xl: '50px',
 };
 
 const translateSize = {
     sm: '22px',
-    md: '24px',
+    md: '14px',
     lg: '26px',
     xl: '28px',
 };
@@ -27,8 +27,8 @@ const iconTransformPositionLeft = {
         unchecked: '-16.5px',
     },
     md: {
-        checked: '5px',
-        unchecked: '-19px',
+        checked: '.5px',
+        unchecked: '-14px',
     },
     lg: {
         checked: '4.5px',