Permalink
Browse files

Improve copy and styles

  • Loading branch information...
1 parent 1e8679a commit 4da73ff3c9f4951aa6fe016b8c3fe6f9ab01951b @javierbyte committed Sep 10, 2016
Showing with 24 additions and 16 deletions.
  1. +8 −8 dist/bundle.js
  2. +1 −1 dist/bundle.js.map
  3. +10 −7 src/App.js
  4. +5 −0 styles/styles.css
View
Oops, something went wrong.
View
Oops, something went wrong.
View
@@ -173,17 +173,18 @@ var App = React.createClass({
<div className='content-block'>
<h1>Cohesive Colors.</h1>
<div>
- This is a tool that may help you to create cohesive color schemes.
+ Tool that may help you to create cohesive color schemes.
</div>
</div>
<div className='content-block'>
<h2>Original colors:</h2>
+ <div className='help-text'>Click on any color to edit.</div>
<ColorBar colors={colorScheme} onChange={this.handleChangeColor} action='edit' />
<button onClick={this.randomize}>
Get random from ColourLovers
</button>
- {' - '}
+ {' '}
<button onClick={this.handleResizePallete.bind(null, -1)} disabled={colorScheme.length < 2}>
Fewer colors
</button>
@@ -193,7 +194,7 @@ var App = React.createClass({
</div>
<div className='content-block'>
- <h2>OverlayColor</h2>
+ <h2>Overlay Color:</h2>
<ColorBar colors={[overlayColor]} onChange={this.handleOverlayChange} action='edit' />
<div className='flex-center'>
<div className='margin-right-Hx'>Intensity</div>
@@ -203,14 +204,16 @@ var App = React.createClass({
<div className='content-block'>
<h2>Result:</h2>
+ {!!window.ClipboardEvent && (
+ <div className='help-text'>Click on any color to copy.</div>
+ )}
<ColorBar key={colorScheme.join('')} colors={fixMyColors(colorScheme, overlayColor, overlayIntensity)} action='copy' />
</div>
<div className='content-block text-block'>
- {!!window.ClipboardEvent && (
- <div>Click on any color to copy.</div>
- )}
- <br />
+ <div className='help-text'>
+ 1/ Pick or create a color palette. 2/ Pick an overall color. 3/ ??? 4/ Profit!
+ </div>
<div className='content-block -credits'>
Based on <a target='_blank' href='https://dribbble.com/shots/166246-My-Secret-for-Color-Schemes'>this idea</a> by <a target='_blank' href='https://twitter.com/_erica'>_erica</a>.
Made by <a href='http://javier.xyz/' target='_blank'>javierbyte</a>.
View
@@ -79,3 +79,8 @@ button {
.margin-right-Hx {
margin-right: 0.5rem;
}
+
+.help-text {
+ font-size: 0.9rem;
+ color: #444;
+}

0 comments on commit 4da73ff

Please sign in to comment.