diff --git a/client/components/mobile/Tab.jsx b/client/components/mobile/Tab.jsx index 016b29d2..20a158b4 100644 --- a/client/components/mobile/Tab.jsx +++ b/client/components/mobile/Tab.jsx @@ -9,7 +9,7 @@ export default styled(Link)` background: transparent; /* 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')}; diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx index a8fe3e72..429687e5 100644 --- a/client/modules/Mobile/MobileDashboardView.jsx +++ b/client/modules/Mobile/MobileDashboardView.jsx @@ -47,6 +47,7 @@ const ContentWrapper = styled(Content)` tbody td, thead th { justify-self: stretch; align-self: flex-end; + color: ${prop('primaryTextColor')} } tbody td:nth-child(2) { grid-column-start: 2 } @@ -57,8 +58,13 @@ const ContentWrapper = styled(Content)` height: ${remSize(48)}; } - .sketches-table-container { padding-bottom: ${remSize(160)} } - .sketches-table__row { background: white !important; height: auto } + .sketches-table-container { + padding-bottom: ${remSize(160)}; + background: ${prop('backgroundColor')}; + } + .sketches-table__row { + background: ${prop('backgroundColor')} !important; height: auto + } tr { align-self: start; diff --git a/client/theme.js b/client/theme.js index 1fc6dada..fec3e93d 100644 --- a/client/theme.js +++ b/client/theme.js @@ -104,6 +104,8 @@ export default { border: grays.middleLight }, Separator: grays.middleLight, + + TabHighlight: colors.p5jsPink, }, [Theme.dark]: { colors, @@ -149,6 +151,8 @@ export default { border: grays.middleDark }, Separator: grays.middleDark, + + TabHighlight: colors.p5jsPink, }, [Theme.contrast]: { colors, @@ -194,5 +198,7 @@ export default { border: grays.middleDark }, Separator: grays.middleDark, + + TabHighlight: colors.yellow, }, };