update bottom tab styles

This commit is contained in:
ghalestrilo 2020-08-10 11:02:52 -03:00
parent 38b59d2223
commit 88c48c300a
3 changed files with 23 additions and 13 deletions

View file

@ -34,7 +34,7 @@ class App extends React.Component {
render() {
return (
<div className="app">
{this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
{false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
{this.props.children}
</div>
);

View file

@ -59,12 +59,28 @@ const ContentWrapper = styled(Content)`
.sketches-table-container { padding-bottom: ${remSize(160)} }
`;
const FooterTab = styled(Link)`
background: ${props => prop(props.selected ? 'backgroundColor' : 'MobilePanel.default.foreground')};
color: ${props => prop(`MobilePanel.default.${props.selected ? 'foreground' : 'background'}`)};
padding: ${remSize(8)} ${remSize(16)};
width: 100%;
const FooterTabSwitcher = styled.div`
display: flex;
justify-content: space-between;
h3 { text-align: center; width: 100%; }
border-top: 1px solid ${prop('Separator')};
background: ${props => prop('backgroundColor')};
`;
const FooterTab = styled(Link)`
box-sizing: border-box;
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')};
color: ${prop('primaryTextColor')};
padding: ${remSize(8)} ${remSize(16)};
width: 30%;
`;
const Subheader = styled.div`
@ -83,13 +99,6 @@ const SubheaderButton = styled(Button)`
border-radius: 0px !important;
`;
const FooterTabSwitcher = styled.div`
display: flex;
h3 { text-align: center; width: 100%; }
`;
const Panels = {
sketches: SketchList,
collections: CollectionList,

View file

@ -58,6 +58,7 @@ export const prop = key => (props) => {
return value;
};
export default {
[Theme.light]: {
colors,