feat: updated session toggle styling

ts/components/basic/SessionToggle.tsx

@@ -2,19 +2,19 @@ import React from 'react';
 import { updateConfirmModal } from '../../state/ducks/modalDialog';
 import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
-import { whiteColor } from '../../themes/SessionTheme';
 
 const StyledKnob = styled.div<{ active: boolean }>`
   position: absolute;
-  top: 0.5px;
+  top: ${props => (props.active ? '1px' : '0.5px')};
-  left: 0.5px;
+  left: ${props => (props.active ? '2px' : '0.5px')};
   height: 21px;
   width: 21px;
   border-radius: 28px;
-  /* TODO Theming update */
+  background-color: var(--toggle-switch-ball-color);
-  background-color: ${whiteColor};
   box-shadow: ${props =>
-    props.active ? '-2px 1px 3px rgba(0, 0, 0, 0.15)' : '2px 1px 3px rgba(0, 0, 0, 0.15);'};
+    props.active
+      ? '-2px 1px 3px var(--toggle-switch-ball-shadow-color);'
+      : '2px 1px 3px var(--toggle-switch-ball-shadow-color);'};
 
   transition: transform var(--default-duration) ease, background-color var(--default-duration) ease;
 
@@ -24,17 +24,22 @@ const StyledKnob = styled.div<{ active: boolean }>`
 const StyledSessionToggle = styled.div<{ active: boolean }>`
   width: 51px;
   height: 25px;
-  border: 1px solid #e5e5ea; // TODO Theming update
+  background-color: (--toggle-switch-off-background-color);
+  border: 1px solid var(--toggle-switch-off-border-color);
   border-radius: 16px;
   position: relative;
 
   cursor: pointer;
-  background-color: var(--color-transparent-color);
   transition: var(--default-duration);
 
   background-color: ${props =>
-    props.active ? 'var(--color-accent)' : 'var(--color-clickable-hovered)'};
+    props.active
-  border-color: ${props => (props.active ? 'var(--color-accent)' : 'var(--color-cell-background)')};
+      ? 'var(--toggle-switch-on-background-color)'
+      : 'var(--toggle-switch-off-background-color)'};
+  border-color: ${props =>
+    props.active
+      ? 'var(--toggle-switch-on-border-color)'
+      : 'var(--toggle-switch-off-border-color)'};
 `;
 
 type Props = {

ts/themes/SessionTheme.tsx

@@ -583,7 +583,8 @@ export const SessionGlobalStyles = createGlobalStyle`
     --zoom-bar-selector-color: var(--primary-color);
 
     /* Toggle Switch */
-    --toggle-switch-ball-color: ;
+    --toggle-switch-ball-color: var(--white-color);
+    --toggle-switch-ball-shadow-color: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.15);
     /* TODO Theming think this should be white instead of transparent */
     --toggle-switch-off-background-color: var(--transparent-color);
     --toggle-switch-off-border-color: var(--border-color);