r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

💄 improve visibility on dark mode

Browse source
This commit is contained in:
ghalestrilo 2020-08-10 14:55:02 -03:00
parent 672fd406fa
commit 702adf93f6
3 changed files with 15 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/components/mobile/Tab.jsx
View file

@ -9,7 +9,7 @@ export default styled(Link)`
background: transparent; background: transparent;
/* border-top: ${remSize(4)} solid ${props => prop(props.selected ? 'colors.p5jsPink' : 'MobilePanel.default.background')}; */ /* border-top: ${remSize(4)} solid ${props => prop(props.selected ? 'colors.p5jsPink' : 'MobilePanel.default.background')}; */
border-top: ${remSize(4)} solid ${props => (props.selected ? prop('colors.p5jsPink') : 'transparent')}; border-top: ${remSize(4)} solid ${props => (props.selected ? prop('TabHighlight') : 'transparent')};
color: ${prop('primaryTextColor')}; color: ${prop('primaryTextColor')};

10
client/modules/Mobile/MobileDashboardView.jsx
View file

@ -47,6 +47,7 @@ const ContentWrapper = styled(Content)`
tbody td, thead th { tbody td, thead th {
justify-self: stretch; justify-self: stretch;
align-self: flex-end; align-self: flex-end;
color: ${prop('primaryTextColor')}
} }
tbody td:nth-child(2) { grid-column-start: 2 } tbody td:nth-child(2) { grid-column-start: 2 }
@ -57,8 +58,13 @@ const ContentWrapper = styled(Content)`
height: ${remSize(48)}; height: ${remSize(48)};
} }
.sketches-table-container { padding-bottom: ${remSize(160)} } .sketches-table-container {
.sketches-table__row { background: white !important; height: auto } padding-bottom: ${remSize(160)};
background: ${prop('backgroundColor')};
}
.sketches-table__row {
background: ${prop('backgroundColor')} !important; height: auto
}
tr { tr {
align-self: start; align-self: start;

6
client/theme.js
View file

@ -104,6 +104,8 @@ export default {
border: grays.middleLight border: grays.middleLight
}, },
Separator: grays.middleLight, Separator: grays.middleLight,
TabHighlight: colors.p5jsPink,
}, },
[Theme.dark]: { [Theme.dark]: {
colors, colors,
@ -149,6 +151,8 @@ export default {
border: grays.middleDark border: grays.middleDark
}, },
Separator: grays.middleDark, Separator: grays.middleDark,
TabHighlight: colors.p5jsPink,
}, },
[Theme.contrast]: { [Theme.contrast]: {
colors, colors,
@ -194,5 +198,7 @@ export default {
border: grays.middleDark border: grays.middleDark
}, },
Separator: grays.middleDark, Separator: grays.middleDark,
TabHighlight: colors.yellow,
}, },
}; };