diff --git a/images/p5js-logo.svg b/images/p5js-logo.svg new file mode 100644 index 00000000..654bdc09 --- /dev/null +++ b/images/p5js-logo.svg @@ -0,0 +1,14 @@ + + + + p5js-rect + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/shared/components/Toolbar/Toolbar.jsx b/shared/components/Toolbar/Toolbar.jsx index a73b2056..f4a4452f 100644 --- a/shared/components/Toolbar/Toolbar.jsx +++ b/shared/components/Toolbar/Toolbar.jsx @@ -1,12 +1,16 @@ import React from 'react'; var playUrl = require('../../../images/play.svg'); +var logoUrl = require('../../../images/p5js-logo.svg'); class Toolbar extends React.Component { render() { return (
- + +
+ +
); } diff --git a/styles/abstracts/_placeholders.scss b/styles/abstracts/_placeholders.scss new file mode 100644 index 00000000..89c3c95f --- /dev/null +++ b/styles/abstracts/_placeholders.scss @@ -0,0 +1,12 @@ +%toolbar-button { + background-color: $light-button-background-color; + color: $light-button-color; + display: inline-block; + height: #{44 / $base-font-size}rem; + width: #{44 / $base-font-size}rem; + text-align: center; + border-radius: 100%; + + line-height: #{50 / $base-font-size}rem; + cursor: pointer; +} \ No newline at end of file diff --git a/styles/abstracts/_variables.scss b/styles/abstracts/_variables.scss index e0af53f9..e5f9990b 100644 --- a/styles/abstracts/_variables.scss +++ b/styles/abstracts/_variables.scss @@ -1 +1,36 @@ -$base-font-size: 16; \ No newline at end of file +$base-font-size: 16; + +//colors +$p5js-pink: #ed225d; +$white: #fff; +$black: #000; + + +$light-primary-text-color: #333; +$light-secondary-text-color: #6b6b6b; +$light-inactive-text-color: #b5b5b5; +$light-background-color: #fdfdfd; + +$light-button-background-color: #f4f4f4; +$light-button-color: $black; +$light-toolbar-button-color: $p5js-pink; +$light-button-background-hover-color: $p5js-pink; +$light-button-background-active-color: #f10046; +$light-button-hover-color: $white; +$light-button-active-color: $white; + +$dark-primary-text-color: $white; +$dark-secondary-text-color: #c2c2c2; +$dark-inactive-color: #7d7d7d; +$dark-background-color: #333; + +$dark-button-background-color: $white; +$dark-button-color: $black; +$dark-toolbar-button-color: $p5js-pink; +$dark-button-background-hover-color: $p5js-pink; +$dark-button-background-active-color: #f10046; +$dark-button-hover-color: $white; +$dark-button-active-color: $white; + +$editor-border-color: #f4f4f4; + diff --git a/styles/base/_base.scss b/styles/base/_base.scss index ef0932b8..0f333f27 100644 --- a/styles/base/_base.scss +++ b/styles/base/_base.scss @@ -1,3 +1,7 @@ +* { + box-sizing: border-box; +} + html { font-size: #{$base-font-size}px; } diff --git a/styles/components/_editor.scss b/styles/components/_editor.scss index e3fdd25a..233db07e 100644 --- a/styles/components/_editor.scss +++ b/styles/components/_editor.scss @@ -1,6 +1,7 @@ .CodeMirror { font-family: Inconsolata, monospace; height: 100%; + border: 1px solid $editor-border-color; } .CodeMirror-linenumbers { diff --git a/styles/components/_toolbar.scss b/styles/components/_toolbar.scss new file mode 100644 index 00000000..0f7e7794 --- /dev/null +++ b/styles/components/_toolbar.scss @@ -0,0 +1,12 @@ +.toolbar__play-button { + @extend %toolbar-button; +} + +.toolbar__logo { + margin-right: #{30 / $base-font-size}rem; +} + +.toolbar { + padding: #{20 / $base-font-size}rem #{60 / $base-font-size}rem; + display: flex; +} \ No newline at end of file diff --git a/styles/main.scss b/styles/main.scss index a93953f8..3e14f59d 100644 --- a/styles/main.scss +++ b/styles/main.scss @@ -1,4 +1,5 @@ @import 'abstracts/variables'; +@import 'abstracts/placeholders'; @import 'base/reset'; @import 'base/base'; @@ -7,5 +8,6 @@ @import 'components/p5-widget-codemirror-theme'; @import 'components/editor'; +@import 'components/toolbar'; @import 'layout/ide'; \ No newline at end of file