hammy
/
carbon
mirror of https://github.com/sgoudham/carbon.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Make pretty 👻

Browse Source
main
Jake Dexheimer 7 years ago
parent f4e7248cad
commit 85b193e1f1
16 changed files with 40 additions and 44 deletions
Show Stats Download Patch File Download Diff File

12
components/Button.js
Unescape Escape View File

@ -1,8 +1,11 @@
import React from 'react' import React from 'react'
import { PALETTE } from '../lib/constants'
export default (props) => ( export default (props) => (
<div onClick={props.onClick} className="toolbar-btn" style={Object.assign({ <div onClick={props.onClick} className="toolbar-btn" style={Object.assign({
background: props.bg background: PALETTE.EDITOR_BG,
color: props.color,
border: `0.5px solid ${props.color}`
}, props.style)}> }, props.style)}>
<span>{props.title}</span> <span>{props.title}</span>
<style jsx>{` <style jsx>{`
@ -13,13 +16,8 @@ export default (props) => (
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0 16px; padding: 0 16px;
color: #000;
border: 0.5px solid #000;
border-radius: 3px; border-radius: 3px;
} user-select: none;
div:last-of-type {
border-radius: 0px 3px 3px 0px;
border-left: 0px;
} }
`}</style> `}</style>
</div> </div>

4
components/Colorpicker.js
Unescape Escape View File

@ -1,6 +1,7 @@
import React from 'react' import React from 'react'
import enhanceWithClickOutside from 'react-click-outside' import enhanceWithClickOutside from 'react-click-outside'
import { TwitterPicker } from 'react-color' import { TwitterPicker } from 'react-color'
import { PALETTE } from '../lib/constants'
class ColorPicker extends React.Component { class ColorPicker extends React.Component {
constructor() { constructor() {
@ -44,7 +45,7 @@ class ColorPicker extends React.Component {
display: flex; display: flex;
height: 100%; height: 100%;
width: 72px; width: 72px;
border: 0.5px solid #000; border: 0.5px solid ${PALETTE.SECONDARY};
border-radius: 3px; border-radius: 3px;
} }
@ -56,6 +57,7 @@ class ColorPicker extends React.Component {
cursor: default; cursor: default;
height: 100%; height: 100%;
width: 36px; width: 36px;
border-right: 0.5px solid ${PALETTE.SECONDARY};
} }
.bg-color { .bg-color {

6
components/CopyButton.js
Unescape Escape View File

@ -5,8 +5,8 @@ import Button from './Button'
import api from '../lib/api' import api from '../lib/api'
// constants // constants
const BUTTON_COLOR = '#84ACFC' const BUTTON_COLOR = '#F6A623'
const BUTTON_STYLE = { borderRadius: '3px 0px 0px 3px' } const BUTTON_STYLE = { marginRight: '8px' }
const DEBOUNCE_DURATION = 10000 const DEBOUNCE_DURATION = 10000
const STATUS = { const STATUS = {
@ -84,7 +84,7 @@ class CopyButton extends React.Component {
return ( return (
<div > <div >
{ this.state.link ? <input id="linkTarget" type="hidden" value="https://github.com/zenorocha/clipboard.js.git" /> : null } { this.state.link ? <input id="linkTarget" type="hidden" value="https://github.com/zenorocha/clipboard.js.git" /> : null }
<Button onClick={this.handleClick} title={textMap[this.state.status]} bg={BUTTON_COLOR} style={BUTTON_STYLE}/> <Button onClick={this.handleClick} title={textMap[this.state.status]} color={BUTTON_COLOR} style={BUTTON_STYLE} />
</div> </div>
) )
} }

28
components/Dropdown.js
Unescape Escape View File

@ -1,6 +1,7 @@
import React from 'react' import React from 'react'
import enhanceWithClickOutside from 'react-click-outside' import enhanceWithClickOutside from 'react-click-outside'
import ArrowDown from './svg/Arrowdown' import ArrowDown from './svg/Arrowdown'
import Checkmark from './svg/Checkmark'
import { PALETTE } from '../lib/constants' import { PALETTE } from '../lib/constants'
class Dropdown extends React.Component { class Dropdown extends React.Component {
@ -31,27 +32,18 @@ class Dropdown extends React.Component {
renderListItems() { renderListItems() {
return this.props.list.map((item, i) => ( return this.props.list.map((item, i) => (
<div className={`dropdown-list-item ${this.state.selected === item ? "selected" : ""}`} key={i} onClick={this.select.bind(null, item)}> <div className="dropdown-list-item" key={i} onClick={this.select.bind(null, item)}>
<span>{ item.name }</span> <span>{ item.name }</span>
{ this.state.selected === item ? <Checkmark /> : null }
<style jsx>{` <style jsx>{`
.dropdown-list-item { .dropdown-list-item {
display: flex;
align-items: center;
justify-content: space-between;
background: ${PALETTE.EDITOR_BG}; background: ${PALETTE.EDITOR_BG};
user-select: none; user-select: none;
padding: 8px 16px; padding: 8px 16px;
border-bottom: 0.5px solid #000; border-bottom: 0.5px solid ${PALETTE.SECONDARY};
}
.selected {
background: #506874;
color: #fff;
}
.selected:hover {
background: #506874 !important;
}
.dropdown-list-item:hover {
background: #222;
} }
.dropdown-list-item:last-of-type { .dropdown-list-item:last-of-type {
@ -98,7 +90,7 @@ class Dropdown extends React.Component {
.dropdown-display { .dropdown-display {
height: 100%; height: 100%;
border: 1px solid #000; border: 1px solid ${PALETTE.SECONDARY};
border-radius: 3px; border-radius: 3px;
user-select: none; user-select: none;
padding: 8px 16px; padding: 8px 16px;
@ -119,8 +111,8 @@ class Dropdown extends React.Component {
.dropdown-list { .dropdown-list {
display: none; display: none;
margin-top: -2px; margin-top: -1px;
border: 0.5px solid #000; border: 0.5px solid ${PALETTE.SECONDARY};
border-radius: 0px 0px 3px 3px; border-radius: 0px 0px 3px 3px;
max-height: 350px; max-height: 350px;
overflow-y: scroll; overflow-y: scroll;

2
components/Footer.js
Unescape Escape View File

@ -7,7 +7,7 @@ const Footer = (props) => (
div { div {
font-size: 14px; font-size: 14px;
margin: 32px 0; margin: 32px 0;
color: #506874; color: rgba(255, 255, 255, 0.5);
} }
a { a {
color: #C694E8; color: #C694E8;

8
components/Meta.js
Unescape Escape View File

@ -1,5 +1,5 @@
import Head from 'next/head' import Head from 'next/head'
import { THEMES } from '../lib/constants' import { THEMES, PALETTE } from '../lib/constants'
export default () => ( export default () => (
<div className="meta"> <div className="meta">
@ -23,7 +23,7 @@ export default () => (
`}</style> `}</style>
<style jsx global>{` <style jsx global>{`
body { body {
font-family: Hack, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
background: #000; background: #000;
} }
@ -48,6 +48,10 @@ export default () => (
margin-right: 0px; margin-right: 0px;
} }
.settings-settings > div {
border-bottom: solid 1px ${PALETTE.SECONDARY};
}
.selected svg { .selected svg {
border-radius: 3px; border-radius: 3px;
border: solid 2px #fff; border: solid 2px #fff;

4
components/Settings.js
Unescape Escape View File

@ -61,7 +61,7 @@ class Settings extends React.Component {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: 0.5px solid #000; border: 0.5px solid ${PALETTE.SECONDARY};
border-radius: 3px; border-radius: 3px;
user-select: none; user-select: none;
position: relative; position: relative;
@ -82,7 +82,7 @@ class Settings extends React.Component {
position: absolute; position: absolute;
top: 48px; top: 48px;
left: 0; left: 0;
border: 0.5px solid #000; border: 0.5px solid ${PALETTE.SECONDARY};
width: 184px; width: 184px;
border-radius: 3px; border-radius: 3px;
background: ${PALETTE.EDITOR_BG}; background: ${PALETTE.EDITOR_BG};

1
components/Slider.js
Unescape Escape View File

@ -27,7 +27,6 @@ export default class extends React.Component {
position: relative; position: relative;
height: 32px; height: 32px;
overflow: hidden; overflow: hidden;
border-bottom: solid 1px #000;
} }
.slider:last-of-type { .slider:last-of-type {

1
components/ThemeSelect.js
Unescape Escape View File

@ -45,7 +45,6 @@ export default class extends React.Component {
<style jsx>{` <style jsx>{`
.window-theme { .window-theme {
padding: 8px; padding: 8px;
border-bottom: solid 1px #000;
} }
.window-theme span { .window-theme span {

1
components/Toggle.js
Unescape Escape View File

@ -27,7 +27,6 @@ export default class extends React.Component {
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
padding: 8px; padding: 8px;
border-bottom: solid 1px #000;
} }
`}</style> `}</style>
</div> </div>

2
components/Toolbar.js
Unescape Escape View File

@ -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" bg="#C3E98D" /> <Button onClick={props.save} title="Save Image" color="#84ACFC" />
</div> </div>
<style jsx>{` <style jsx>{`
#toolbar { #toolbar {

2
components/svg/Arrowdown.js
Unescape Escape View File

@ -2,6 +2,6 @@ import React from 'react'
export default () => ( export default () => (
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"> <svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6">
<path fill="#506874" fillRule="evenodd" d="M93.7890633,17.6396882 L97.4926052,14.0851393 C97.6061243,13.9716202 97.7196417,13.9716202 97.8331608,14.0851393 L98.4929872,14.723681 C98.6065063,14.8372001 98.6065063,14.9507175 98.4929872,15.0642366 L93.9593411,19.4063203 C93.9167714,19.4488899 93.8600127,19.4701744 93.7890633,19.4701744 C93.7181138,19.4701744 93.6613552,19.4488899 93.6187855,19.4063203 L89.0851393,15.0642366 C88.9716202,14.9507175 88.9716202,14.8372001 89.0851393,14.723681 L89.7449658,14.0851393 C89.8584849,13.9716202 89.9720022,13.9716202 90.0855213,14.0851393 L93.7890633,17.6396882 Z" transform="translate(-89 -14)"/> <path fill="#fff" fillRule="evenodd" d="M93.7890633,17.6396882 L97.4926052,14.0851393 C97.6061243,13.9716202 97.7196417,13.9716202 97.8331608,14.0851393 L98.4929872,14.723681 C98.6065063,14.8372001 98.6065063,14.9507175 98.4929872,15.0642366 L93.9593411,19.4063203 C93.9167714,19.4488899 93.8600127,19.4701744 93.7890633,19.4701744 C93.7181138,19.4701744 93.6613552,19.4488899 93.6187855,19.4063203 L89.0851393,15.0642366 C88.9716202,14.9507175 88.9716202,14.8372001 89.0851393,14.723681 L89.7449658,14.0851393 C89.8584849,13.9716202 89.9720022,13.9716202 90.0855213,14.0851393 L93.7890633,17.6396882 Z" transform="translate(-89 -14)"/>
</svg> </svg>
) )

2
components/svg/Checkmark.js
Unescape Escape View File

@ -1,7 +1,7 @@
import React from 'react' import React from 'react'
export default () => ( export default () => (
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="7" viewBox="0 0 9 7"> <svg xmlns="http://www.w3.org/2000/svg" width="9" height="8" viewBox="0 0 9 7">
<polygon fill="#FFFFFF" fillRule="evenodd" points="2.852 5.016 8.275 0 9 .67 2.852 6.344 0 3.711 .713 3.042"/> <polygon fill="#FFFFFF" fillRule="evenodd" points="2.852 5.016 8.275 0 9 .67 2.852 6.344 0 3.711 .713 3.042"/>
</svg> </svg>
) )

4
components/svg/Settings.js
Unescape Escape View File

@ -1,7 +1,7 @@
import React from 'react' import React from 'react'
export default () => ( export default () => (
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 18 18">
<path fill="#4F6875" fillRule="evenodd" d="M206.532032,366.702224 L208.523318,368.142728 C208.69279,368.3122 208.721035,368.509915 208.608053,368.735877 L206.786238,371.74399 C206.673257,371.969953 206.503788,372.040565 206.277825,371.955829 L203.989964,371.066106 C203.283831,371.546276 202.775423,371.842848 202.464724,371.955829 L202.125782,374.286058 C202.069291,374.51202 201.913944,374.625 201.659736,374.625 L198.058474,374.625 C197.804266,374.625 197.648919,374.51202 197.592428,374.286058 L197.253486,371.955829 C196.829806,371.786357 196.321398,371.489786 195.728246,371.066106 L193.440385,371.955829 C193.214422,372.068811 193.044953,371.998198 192.931972,371.74399 L191.110157,368.735877 C190.96893,368.481669 190.997175,368.283955 191.194892,368.142728 L193.101443,366.702224 C193.101443,366.617488 193.094382,366.476263 193.080259,366.278546 C193.066136,366.080828 193.059075,365.925481 193.059075,365.8125 C193.059075,365.699519 193.066136,365.544172 193.080259,365.346454 C193.094382,365.148737 193.101443,365.007512 193.101443,364.922776 L191.152525,363.482272 C190.983053,363.3128 190.954808,363.115085 191.067789,362.889123 L192.889604,359.88101 C193.002585,359.655047 193.172055,359.584435 193.398017,359.669171 L195.685878,360.558894 C196.392011,360.078724 196.90042,359.782152 197.211118,359.669171 L197.550061,357.338942 C197.606551,357.11298 197.761898,357 198.016106,357 L201.617368,357 C201.871576,357 202.026923,357.11298 202.083414,357.338942 L202.379988,359.669171 C202.803668,359.838643 203.312077,360.135214 203.905229,360.558894 L206.150722,359.669171 C206.376684,359.556189 206.560276,359.626802 206.701503,359.88101 L208.523318,362.889123 C208.664544,363.143331 208.6363,363.341045 208.438582,363.482272 L206.532032,364.922776 C206.532032,365.007512 206.539093,365.148737 206.553216,365.346454 C206.567338,365.544172 206.5744,365.699519 206.5744,365.8125 C206.5744,366.23618 206.560277,366.532752 206.532032,366.702224 Z M199.795553,368.905349 C200.671159,368.905349 201.419649,368.608777 202.041046,368.015625 C202.662443,367.422473 202.973138,366.688105 202.973138,365.8125 C202.973138,364.936895 202.662443,364.202527 202.041046,363.609375 C201.419649,363.016223 200.671159,362.719651 199.795553,362.719651 C198.919948,362.719651 198.178519,363.016223 197.571244,363.609375 C196.96397,364.202527 196.660337,364.936895 196.660337,365.8125 C196.660337,366.688105 196.96397,367.422473 197.571244,368.015625 C198.178519,368.608777 198.919948,368.905349 199.795553,368.905349 Z" transform="translate(-191 -357)"/> <path fill="#fff" fillRule="evenodd" d="M206.532032,366.702224 L208.523318,368.142728 C208.69279,368.3122 208.721035,368.509915 208.608053,368.735877 L206.786238,371.74399 C206.673257,371.969953 206.503788,372.040565 206.277825,371.955829 L203.989964,371.066106 C203.283831,371.546276 202.775423,371.842848 202.464724,371.955829 L202.125782,374.286058 C202.069291,374.51202 201.913944,374.625 201.659736,374.625 L198.058474,374.625 C197.804266,374.625 197.648919,374.51202 197.592428,374.286058 L197.253486,371.955829 C196.829806,371.786357 196.321398,371.489786 195.728246,371.066106 L193.440385,371.955829 C193.214422,372.068811 193.044953,371.998198 192.931972,371.74399 L191.110157,368.735877 C190.96893,368.481669 190.997175,368.283955 191.194892,368.142728 L193.101443,366.702224 C193.101443,366.617488 193.094382,366.476263 193.080259,366.278546 C193.066136,366.080828 193.059075,365.925481 193.059075,365.8125 C193.059075,365.699519 193.066136,365.544172 193.080259,365.346454 C193.094382,365.148737 193.101443,365.007512 193.101443,364.922776 L191.152525,363.482272 C190.983053,363.3128 190.954808,363.115085 191.067789,362.889123 L192.889604,359.88101 C193.002585,359.655047 193.172055,359.584435 193.398017,359.669171 L195.685878,360.558894 C196.392011,360.078724 196.90042,359.782152 197.211118,359.669171 L197.550061,357.338942 C197.606551,357.11298 197.761898,357 198.016106,357 L201.617368,357 C201.871576,357 202.026923,357.11298 202.083414,357.338942 L202.379988,359.669171 C202.803668,359.838643 203.312077,360.135214 203.905229,360.558894 L206.150722,359.669171 C206.376684,359.556189 206.560276,359.626802 206.701503,359.88101 L208.523318,362.889123 C208.664544,363.143331 208.6363,363.341045 208.438582,363.482272 L206.532032,364.922776 C206.532032,365.007512 206.539093,365.148737 206.553216,365.346454 C206.567338,365.544172 206.5744,365.699519 206.5744,365.8125 C206.5744,366.23618 206.560277,366.532752 206.532032,366.702224 Z M199.795553,368.905349 C200.671159,368.905349 201.419649,368.608777 202.041046,368.015625 C202.662443,367.422473 202.973138,366.688105 202.973138,365.8125 C202.973138,364.936895 202.662443,364.202527 202.041046,363.609375 C201.419649,363.016223 200.671159,362.719651 199.795553,362.719651 C198.919948,362.719651 198.178519,363.016223 197.571244,363.609375 C196.96397,364.202527 196.660337,364.936895 196.660337,365.8125 C196.660337,366.688105 196.96397,367.422473 197.571244,368.015625 C198.178519,368.608777 198.919948,368.905349 199.795553,368.905349 Z" transform="translate(-191 -357)"/>
</svg> </svg>
) )

3
lib/constants.js
Unescape Escape View File

@ -230,7 +230,8 @@ export const LANGUAGES = [
] ]
export const PALETTE = { export const PALETTE = {
'EDITOR_BG': '#1A1A1A' EDITOR_BG: '#1A1A1A',
SECONDARY: '#fff'
} }
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)

2
pages/index.js
Unescape Escape View File

@ -101,6 +101,8 @@ class Index extends React.Component {
#editor { #editor {
background: ${PALETTE.EDITOR_BG}; background: ${PALETTE.EDITOR_BG};
border: 3px solid ${PALETTE.SECONDARY};
border-radius: 8px;
padding: 16px; padding: 16px;
} }
`} `}

Write Preview
Loading…
Cancel
Save