ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: updated color definitions for backgroundModule, add scrolledSurface (#4538)

Browse Source 
Updated color definitions for BackgroundModule and tokens list in Explore page

Update Dark Mode BackgroundModule to Grey800 to match new design spec

Update Widgets theme to use BackgroundModule for Module

Update Token List in Explore page to use Surface instead of Module

Add Scrolled Surface color definition
This commit is contained in:
pp-hh-ii-ll 2022-08-29 22:00:34 -04:00 committed by GitHub
parent 75175b8e54
commit 134af82d90
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Tokens/TokenTable/TokenTable.tsx
View File

@ -21,7 +21,7 @@ const GridContainer = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-width: ${MAX_WIDTH_MEDIA_BREAKPOINT}; max-width: ${MAX_WIDTH_MEDIA_BREAKPOINT};
background-color: ${({ theme }) => theme.backgroundModule}; background-color: ${({ theme }) => theme.backgroundSurface};
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
0px 24px 32px rgba(0, 0, 0, 0.01); 0px 24px 32px rgba(0, 0, 0, 0.01);
margin-left: auto; margin-left: auto;

5
src/theme/colors.ts
View File

@ -178,6 +178,7 @@ export interface Palette {
backgroundModule: Color backgroundModule: Color
backgroundOutline: Color backgroundOutline: Color
backgroundScrim: Color backgroundScrim: Color
backgroundScrolledSurface: Color
textPrimary: Color textPrimary: Color
textSecondary: Color textSecondary: Color
@ -237,6 +238,7 @@ export const colorsLight: Palette = {
backgroundFloating: opacify(8, colors.gray700), backgroundFloating: opacify(8, colors.gray700),
backgroundOutline: opacify(24, colors.gray500), backgroundOutline: opacify(24, colors.gray500),
backgroundScrim: opacify(60, colors.gray900), backgroundScrim: opacify(60, colors.gray900),
backgroundScrolledSurface: opacify(72, colors.white),
textPrimary: colors.gray900, textPrimary: colors.gray900,
textSecondary: colors.gray500, textSecondary: colors.gray500,
@ -293,11 +295,12 @@ export const colorsDark: Palette = {
backgroundBackdrop: colors.black, backgroundBackdrop: colors.black,
backgroundSurface: colors.gray900, backgroundSurface: colors.gray900,
backgroundModule: opacify(8, colors.gray300), backgroundModule: colors.gray800,
backgroundInteractive: colors.gray700, backgroundInteractive: colors.gray700,
backgroundFloating: opacify(12, colors.black), backgroundFloating: opacify(12, colors.black),
backgroundOutline: opacify(24, colors.gray300), backgroundOutline: opacify(24, colors.gray300),
backgroundScrim: opacify(72, colors.gray900), backgroundScrim: opacify(72, colors.gray900),
backgroundScrolledSurface: opacify(72, colors.gray900),
textPrimary: colors.white, textPrimary: colors.white,
textSecondary: colors.gray300, textSecondary: colors.gray300,

2
src/theme/widget.ts
View File

@ -22,7 +22,7 @@ export const DARK_THEME = {
// surface // surface
container: colorsDark.backgroundSurface, container: colorsDark.backgroundSurface,
interactive: colorsDark.backgroundInteractive, interactive: colorsDark.backgroundInteractive,
module: colorsDark.backgroundInteractive, module: colorsDark.backgroundModule,
accent: colorsDark.accentAction, accent: colorsDark.accentAction,
dialog: colorsDark.backgroundBackdrop, dialog: colorsDark.backgroundBackdrop,
outline: colorsDark.backgroundOutline, outline: colorsDark.backgroundOutline,