Skip to content

Commit 88c48c3

Browse files
committed
✨ update bottom tab styles
1 parent 38b59d2 commit 88c48c3

File tree

3 files changed

+22
-12
lines changed

3 files changed

+22
-12
lines changed

client/modules/App/App.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ class App extends React.Component {
3434
render() {
3535
return (
3636
<div className="app">
37-
{this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
37+
{false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
3838
{this.props.children}
3939
</div>
4040
);

client/modules/Mobile/MobileDashboardView.jsx

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -59,12 +59,28 @@ const ContentWrapper = styled(Content)`
5959
.sketches-table-container { padding-bottom: ${remSize(160)} }
6060
`;
6161

62+
const FooterTabSwitcher = styled.div`
63+
display: flex;
64+
justify-content: space-between;
65+
66+
h3 { text-align: center; width: 100%; }
67+
border-top: 1px solid ${prop('Separator')};
68+
69+
background: ${props => prop('backgroundColor')};
70+
`;
71+
6272
const FooterTab = styled(Link)`
63-
background: ${props => prop(props.selected ? 'backgroundColor' : 'MobilePanel.default.foreground')};
64-
color: ${props => prop(`MobilePanel.default.${props.selected ? 'foreground' : 'background'}`)};
73+
box-sizing: border-box;
74+
75+
76+
background: transparent;
77+
/* border-top: ${remSize(4)} solid ${props => prop(props.selected ? 'colors.p5jsPink' : 'MobilePanel.default.background')}; */
78+
border-top: ${remSize(4)} solid ${props => (props.selected ? prop('colors.p5jsPink') : 'transparent')};
79+
80+
color: ${prop('primaryTextColor')};
81+
6582
padding: ${remSize(8)} ${remSize(16)};
66-
width: 100%;
67-
display: flex;
83+
width: 30%;
6884
`;
6985

7086
const Subheader = styled.div`
@@ -83,13 +99,6 @@ const SubheaderButton = styled(Button)`
8399
border-radius: 0px !important;
84100
`;
85101

86-
87-
const FooterTabSwitcher = styled.div`
88-
display: flex;
89-
90-
h3 { text-align: center; width: 100%; }
91-
`;
92-
93102
const Panels = {
94103
sketches: SketchList,
95104
collections: CollectionList,

client/theme.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ export const prop = key => (props) => {
5858
return value;
5959
};
6060

61+
6162
export default {
6263
[Theme.light]: {
6364
colors,

0 commit comments

Comments
 (0)