GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-14 06:26:03 +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 ROUTES from 'constants/routes';
import history from 'lib/history'; import history from 'lib/history';
import React, { useCallback, useState } from 'react'; import React, { useCallback, useState } from 'react';
@ -59,7 +60,7 @@ const SideNav = ({ toggleDarkMode }: Props): JSX.Element => {
return ( return (
<Sider collapsible collapsed={collapsed} onCollapse={onCollapse} width={200}> <Sider collapsible collapsed={collapsed} onCollapse={onCollapse} width={200}>
<ThemeSwitcherWrapper> <ThemeSwitcherWrapper>
<ToggleButton checked={getTheme() === 'darkMode'} onChange={toggleTheme} /> <ToggleButton checked={isDarkMode} onChange={toggleTheme} defaultChecked={isDarkMode} />
</ThemeSwitcherWrapper> </ThemeSwitcherWrapper>
<NavLink to={ROUTES.APPLICATION}> <NavLink to={ROUTES.APPLICATION}>
<Logo src={'/signoz.svg'} alt="SigNoz" collapsed={collapsed} /> <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'; import styled from 'styled-components';
const { Sider: SiderComponent } = Layout; const { Sider: SiderComponent } = Layout;
@ -24,3 +24,15 @@ export const Sider = styled(SiderComponent)`
color: white; color: white;
} }
`; `;
interface DarkModeProps {
checked?: boolean;
defaultChecked?: boolean;
}
export const ToggleButton = styled(Switch)<DarkModeProps>`
&&& {
background: ${({ checked }) => checked === false && 'grey'};
}
`;