From b55c362bbbcfa54d8c50781294d97e4889661812 Mon Sep 17 00:00:00 2001
From: Devesh Kumar <59202075+Devesh21700Kumar@users.noreply.github.com>
Date: Wed, 26 Jan 2022 21:55:11 +0530
Subject: [PATCH] Fixed toggle Button contrast in Light Theme (#505)

* fixed toggle Button contrast in Light Theme

refactored to styled props and fixed theme

set defaultChecked to isDarkMode value

* Refactored boolean logic
---
 frontend/src/container/SideNav/index.tsx |  5 +++--
 frontend/src/container/SideNav/styles.ts | 14 +++++++++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/frontend/src/container/SideNav/index.tsx b/frontend/src/container/SideNav/index.tsx
index 1078ca1123..c628d939f1 100644
--- a/frontend/src/container/SideNav/index.tsx
+++ b/frontend/src/container/SideNav/index.tsx
@@ -1,4 +1,5 @@
-import { Menu, Switch as ToggleButton, Typography } from 'antd';
+import { Menu, Typography } from 'antd';
+import { ToggleButton } from './styles';
 import ROUTES from 'constants/routes';
 import history from 'lib/history';
 import React, { useCallback, useState } from 'react';
@@ -59,7 +60,7 @@ const SideNav = ({ toggleDarkMode }: Props): JSX.Element => {
 	return (
 		<Sider collapsible collapsed={collapsed} onCollapse={onCollapse} width={200}>
 			<ThemeSwitcherWrapper>
-				<ToggleButton checked={getTheme() === 'darkMode'} onChange={toggleTheme} />
+				<ToggleButton checked={isDarkMode} onChange={toggleTheme} defaultChecked={isDarkMode} />
 			</ThemeSwitcherWrapper>
 			<NavLink to={ROUTES.APPLICATION}>
 				<Logo src={'/signoz.svg'} alt="SigNoz" collapsed={collapsed} />
diff --git a/frontend/src/container/SideNav/styles.ts b/frontend/src/container/SideNav/styles.ts
index 750503e821..11583359e1 100644
--- a/frontend/src/container/SideNav/styles.ts
+++ b/frontend/src/container/SideNav/styles.ts
@@ -1,4 +1,4 @@
-import { Layout } from 'antd';
+import { Layout, Switch } from 'antd';
 import styled from 'styled-components';
 const { Sider: SiderComponent } = Layout;
 
@@ -24,3 +24,15 @@ export const Sider = styled(SiderComponent)`
 		color: white;
 	}
 `;
+
+interface DarkModeProps {
+	checked?: boolean;
+	defaultChecked?: boolean;
+}
+
+export const ToggleButton = styled(Switch)<DarkModeProps>`
+	&&& {
+		background: ${({ checked }) => checked === false && 'grey'};
+	}
+`;
+