✨ update bottom tab styles
This commit is contained in:
parent
38b59d2223
commit
88c48c300a
3 changed files with 23 additions and 13 deletions
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -58,6 +58,7 @@ export const prop = key => (props) => {
|
|||
return value;
|
||||
};
|
||||
|
||||
|
||||
export default {
|
||||
[Theme.light]: {
|
||||
colors,
|
||||
|
|
Loading…
Reference in a new issue