✨ 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() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="app">
|
<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}
|
{this.props.children}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -59,12 +59,28 @@ const ContentWrapper = styled(Content)`
|
||||||
.sketches-table-container { padding-bottom: ${remSize(160)} }
|
.sketches-table-container { padding-bottom: ${remSize(160)} }
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const FooterTab = styled(Link)`
|
const FooterTabSwitcher = styled.div`
|
||||||
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%;
|
|
||||||
display: flex;
|
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`
|
const Subheader = styled.div`
|
||||||
|
@ -83,13 +99,6 @@ const SubheaderButton = styled(Button)`
|
||||||
border-radius: 0px !important;
|
border-radius: 0px !important;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|
||||||
const FooterTabSwitcher = styled.div`
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
h3 { text-align: center; width: 100%; }
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Panels = {
|
const Panels = {
|
||||||
sketches: SketchList,
|
sketches: SketchList,
|
||||||
collections: CollectionList,
|
collections: CollectionList,
|
||||||
|
|
|
@ -58,6 +58,7 @@ export const prop = key => (props) => {
|
||||||
return value;
|
return value;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
[Theme.light]: {
|
[Theme.light]: {
|
||||||
colors,
|
colors,
|
||||||
|
|
Loading…
Reference in a new issue