From 7cf9d2f05c5cea0dbe9bce499df93b01f1cfe50b Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Mon, 19 Sep 2022 15:10:02 +1000
Subject: [PATCH] feat: updated session toggle styling

---
 ts/components/basic/SessionToggle.tsx | 25 +++++++++++++++----------
 ts/themes/SessionTheme.tsx            |  3 ++-
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/ts/components/basic/SessionToggle.tsx b/ts/components/basic/SessionToggle.tsx
index 2dd1a9beb..1d6b6aefe 100644
--- a/ts/components/basic/SessionToggle.tsx
+++ b/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;
-  left: 0.5px;
+  top: ${props => (props.active ? '1px' : '0.5px')};
+  left: ${props => (props.active ? '2px' : '0.5px')};
   height: 21px;
   width: 21px;
   border-radius: 28px;
-  /* TODO Theming update */
-  background-color: ${whiteColor};
+  background-color: var(--toggle-switch-ball-color);
   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)'};
-  border-color: ${props => (props.active ? 'var(--color-accent)' : 'var(--color-cell-background)')};
+    props.active
+      ? '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 = {
diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx
index d7adb2afb..a3330eecc 100644
--- a/ts/themes/SessionTheme.tsx
+++ b/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);