LaconicNetwork/dydx-v4-web
6
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

make system panel reflect user prefs

Browse Source
This commit is contained in:
mulan xia 2024-02-01 14:57:09 -05:00
parent f111f54295
commit 3ec9c2442e
No known key found for this signature in database
GPG Key ID: C6CE526613568D73
6 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/chart-background-light.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 111 KiB

BIN
public/chart-background.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 122 KiB

0
public/Dots-dark.svg → public/chart-dots-background-dark.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 MiB

After

Width:  |  Height:  |  Size: 2.2 MiB

0
public/Dots-light.svg → public/chart-dots-background-light.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 MiB

After

Width:  |  Height:  |  Size: 2.1 MiB

4
src/views/charts/PnlChart.tsx
View File

@ -63,8 +63,8 @@ const MS_FOR_PERIOD = {
[HistoricalPnlPeriod.Period90d.name]: 90 * timeUnits.day,
};
const DARK_CHART_BACKGROUND_URL = '/Dots-dark.svg';
const LIGHT_CHART_BACKGROUND_URL = '/Dots-light.svg';
const DARK_CHART_BACKGROUND_URL = '/chart-dots-background-dark.svg';
const LIGHT_CHART_BACKGROUND_URL = '/chart-dots-background-light.svg';
type ElementProps = {
onTooltipContext?: (tooltipContext: TooltipContextType<PnlDatum>) => void;

11
src/views/dialogs/DisplaySettingsDialog.tsx
View File

@ -7,12 +7,13 @@ import { useStringGetter } from '@/hooks';
import {
AppTheme,
type AppThemeSetting,
AppThemeSystemSetting,
AppColorMode,
setAppThemeSetting,
setAppColorMode,
} from '@/state/configs';
import { getAppThemeSetting, getAppColorMode } from '@/state/configsSelectors';
import { getAppTheme, getAppThemeSetting, getAppColorMode } from '@/state/configsSelectors';
import { layoutMixins } from '@/styles/layoutMixins';
import { Themes } from '@/styles/themes';
@ -33,7 +34,8 @@ export const DisplaySettingsDialog = ({ setIsOpen }: ElementProps) => {
const dispatch = useDispatch();
const stringGetter = useStringGetter();
const currentTheme: AppTheme = useSelector(getAppThemeSetting);
const currentThemeSetting: AppThemeSetting = useSelector(getAppThemeSetting);
const currentTheme: AppTheme = useSelector(getAppTheme);
const currentColorMode: AppColorMode = useSelector(getAppColorMode);
const sectionHeader = (heading: string) => {
@ -47,7 +49,7 @@ export const DisplaySettingsDialog = ({ setIsOpen }: ElementProps) => {
const themePanels = () => {
return (
<Styled.AppThemeRoot value={currentTheme}>
<Styled.AppThemeRoot value={currentThemeSetting}>
{[
{
themeSetting: AppTheme.Classic,
@ -66,8 +68,7 @@ export const DisplaySettingsDialog = ({ setIsOpen }: ElementProps) => {
label: STRING_KEYS.LIGHT,
},
].map(({ themeSetting, label }) => {
const theme =
themeSetting === AppThemeSystemSetting.System ? AppTheme.Dark : themeSetting;
const theme = themeSetting === AppThemeSystemSetting.System ? currentTheme : themeSetting;
const backgroundColor = Themes[theme][currentColorMode].layer2;
const gridColor = Themes[theme][currentColorMode].borderDefault;