GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-10 22:29:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fixed toggle Button contrast in Light Theme (#505)

Browse Source 
* fixed toggle Button contrast in Light Theme

refactored to styled props and fixed theme

set defaultChecked to isDarkMode value

* Refactored boolean logic
This commit is contained in:
Devesh Kumar 2022-01-26 21:55:11 +05:30 committed by GitHub
parent 6e6fd9b44b
commit b55c362bbb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/container/SideNav/index.tsx
View File

@ -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} />

14
frontend/src/container/SideNav/styles.ts
View File

@ -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'};
}
`;