Add new logo, colors

main
Jake Dexheimer 7 years ago
parent ad43cd7d32
commit 5aa85443dc

@ -5,7 +5,7 @@ import Button from './Button'
import api from '../lib/api' import api from '../lib/api'
// constants // constants
const BUTTON_COLOR = '#F6A623' const BUTTON_COLOR = '#c198fb'
const BUTTON_STYLE = { marginRight: '8px' } const BUTTON_STYLE = { marginRight: '8px' }
const DEBOUNCE_DURATION = 10000 const DEBOUNCE_DURATION = 10000

@ -17,7 +17,7 @@ const Toolbar = (props) => (
<Settings onChange={props.onSettingsChange} enabled={props.enabled} /> <Settings onChange={props.onSettingsChange} enabled={props.enabled} />
<div className="buttons"> <div className="buttons">
<CopyButton /> <CopyButton />
<Button onClick={props.save} title="Save Image" color="#84ACFC" /> <Button onClick={props.save} title="Save Image" color="#57b5f9" />
</div> </div>
<style jsx>{` <style jsx>{`
#toolbar { #toolbar {

File diff suppressed because one or more lines are too long

@ -233,7 +233,7 @@ export const PALETTE = {
EDITOR_BG: '#121212', EDITOR_BG: '#121212',
PRIMARY: '#F8E81C', PRIMARY: '#F8E81C',
SECONDARY: '#fff', SECONDARY: '#fff',
GRAY: 'rgba(255, 255, 255, 0.6)' GRAY: '#b5b3a0'
} }
export const DEFAULT_CODE = `const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj) export const DEFAULT_CODE = `const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj)

@ -9,7 +9,7 @@ export default () => (
<div className="about"> <div className="about">
<div className="mb4"> <div className="mb4">
<h2>What does this do?</h2> <h2>What does this do?</h2>
<p>You know all of those code screenshots you see on Twitter? Although the code's usually impressive, we saw room for improvement in the aesthetic department. Carbon is the easiest way to create beautiful images of your source code. So what are you waiting for? Go you can impress all of your followers with your newfound design prowess. 🎨</p> <p>You know all of those code screenshots you see on Twitter? Although the code's usually impressive, we saw room for improvement in the aesthetic department. Carbon is the easiest way to create beautiful images of your source code. So what are you waiting for? Go impress all of your followers with your newfound design prowess. <span>🎨</span></p>
</div> </div>
<div className="mb4"> <div className="mb4">
<h2>How do I use it?</h2> <h2>How do I use it?</h2>
@ -25,7 +25,7 @@ export default () => (
<h4 className="mb0">Export/Sharing</h4> <h4 className="mb0">Export/Sharing</h4>
<p className="mt2">After you've customized your image you can copy an Imgur link to the image, or save it directly.</p> <p className="mt2">After you've customized your image you can copy an Imgur link to the image, or save it directly.</p>
</div> </div>
<div className="mb4"> <div>
<h2>I want to make this better.</h2> <h2>I want to make this better.</h2>
<p> <p>
<a className="link" href="https://github.com/dawnlabs/carbon">Please do.</a> <a className="link" href="https://github.com/dawnlabs/carbon">Please do.</a>
@ -37,6 +37,10 @@ export default () => (
color: ${PALETTE.GRAY}; color: ${PALETTE.GRAY};
} }
span {
color: #fff;
}
ul { ul {
list-style-position: inside; list-style-position: inside;
} }

Loading…
Cancel
Save