Skip to content

Commit 7c30ffe

Browse files
fkKyleAMathews
authored andcommitted
Improve sidebar UI (#1178)
* use presets.veryLightPurple (instead of purple) for header and sidebar borders * add even lighter purple as background for the sidebar * consolidate sidebar CSS in presets.sidebarStyles * make "Tutorial" sidebar 100vh * let the browser decide wether to display a scrollbar for `overflowY`
1 parent 1639377 commit 7c30ffe

File tree

2 files changed

+10
-7
lines changed

2 files changed

+10
-7
lines changed

www/src/layouts/index.js

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ module.exports = React.createClass({
5555
<div
5656
css={{
5757
borderBottom: this.props.location.pathname !== `/`
58-
? `1px solid ${presets.purple}`
58+
? `1px solid ${presets.veryLightPurple}`
5959
: ``,
6060
}}
6161
>
@@ -231,10 +231,7 @@ module.exports = React.createClass({
231231
width: rhythm(10),
232232
display: `none`,
233233
[presets.Tablet]: {
234-
borderRight: `1px solid ${presets.purple}`,
235-
position: `fixed`,
236-
overflowY: `scroll`,
237-
height: `calc(100vh - 55px)`,
234+
...presets.sidebarStyles,
238235
display: this.props.location.pathname.slice(0, 6) === `/docs/`
239236
? `block`
240237
: `none`,
@@ -251,8 +248,7 @@ module.exports = React.createClass({
251248
width: rhythm(10),
252249
display: `none`,
253250
[presets.Tablet]: {
254-
borderRight: `1px solid ${presets.purple}`,
255-
position: `fixed`,
251+
...presets.sidebarStyles,
256252
display: this.props.location.pathname.slice(0, 10) ===
257253
`/tutorial/`
258254
? `block`

www/src/utils/presets.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,11 @@ module.exports = {
1616
purple: colors.a[13],
1717
lightPurple: colors.b[2],
1818
veryLightPurple: colors.b[0],
19+
sidebarStyles: {
20+
borderRight: `1px solid ${colors.b[0]}`,
21+
backgroundColor: `#fcfaff`,
22+
position: `fixed`,
23+
overflowY: `auto`,
24+
height: `calc(100vh - 55px)`,
25+
},
1926
}

0 commit comments

Comments
 (0)