diff --git a/components/BackgroundSelect.js b/components/BackgroundSelect.js index 52af9b3..85c28fa 100644 --- a/components/BackgroundSelect.js +++ b/components/BackgroundSelect.js @@ -10,7 +10,7 @@ import { parseRGBA, capitalizeFirstLetter } from '../lib/util' class BackgroundSelect extends React.PureComponent { constructor(props) { super(props) - this.state = { isVisible: false, selectedTab: 'color', mounted: false } + this.state = { isVisible: false, mounted: false } this.toggle = this.toggle.bind(this) this.selectTab = this.selectTab.bind(this) this.handlePickColor = this.handlePickColor.bind(this) @@ -69,9 +69,9 @@ class BackgroundSelect extends React.PureComponent { - + `} + ) } diff --git a/components/Button.js b/components/Button.js index 3a17b7c..9d02a1c 100644 --- a/components/Button.js +++ b/components/Button.js @@ -12,24 +12,26 @@ export default props => ( }} > {props.title} - + button > span { + font-size: 14px; + line-height: 1; + } + `} + ) diff --git a/components/Carbon.js b/components/Carbon.js index e2e06f6..60d2e1e 100644 --- a/components/Carbon.js +++ b/components/Carbon.js @@ -1,23 +1,14 @@ -import { EOL } from 'os' import * as hljs from 'highlight.js' import React, { PureComponent } from 'react' import Spinner from 'react-spinner' import ResizeObserver from 'resize-observer-polyfill' -import toHash from 'tohash' import debounce from 'lodash.debounce' import ms from 'ms' import WindowControls from '../components/WindowControls' import Watermark from '../components/svg/Watermark' import CodeMirror from '../lib/react-codemirror' -import { - COLORS, - DEFAULT_LANGUAGE, - LANGUAGES, - LANGUAGE_MODE_HASH, - LANGUAGE_NAME_HASH, - DEFAULT_SETTINGS -} from '../lib/constants' +import { COLORS, LANGUAGE_MODE_HASH, LANGUAGE_NAME_HASH, DEFAULT_SETTINGS } from '../lib/constants' class Carbon extends PureComponent { constructor(props) { @@ -130,120 +121,122 @@ class Carbon extends PureComponent {
- + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; + } + + #container .alpha { + position: absolute; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==); + } + + #container :global(.cm-s-dracula .CodeMirror-cursor) { + border-left: solid 2px #159588; + } + + #container :global(.cm-s-solarized) { + box-shadow: none; + } + + #container :global(.cm-s-solarized.cm-s-light) { + text-shadow: #eee8d5 0 1px; + } + + #container :global(.CodeMirror-gutters) { + background-color: unset; + border-right: none; + } + + #container :global(.CodeMirror__container) { + min-width: inherit; + position: relative; + z-index: 1; + border-radius: 5px; + ${config.dropShadow + ? `box-shadow: 0 ${config.dropShadowOffsetY} ${ + config.dropShadowBlurRadius + } rgba(0, 0, 0, 0.55)` + : ''}; + } + + #container :global(.CodeMirror__container .CodeMirror) { + height: auto; + min-width: inherit; + padding: 18px 18px; + ${config.lineNumbers ? 'padding-left: 12px;' : ''} border-radius: 5px; + font-family: ${config.fontFamily}, monospace !important; + font-size: ${config.fontSize}; + font-variant-ligatures: contextual; + font-feature-settings: 'calt' 1; + user-select: none; + } + + #container :global(.CodeMirror-scroll) { + overflow: hidden !important; + } + + #container :global(.window-theme__sharp > .CodeMirror) { + border-radius: 0px; + } + + #container :global(.window-theme__bw > .CodeMirror) { + border: 2px solid ${COLORS.SECONDARY}; + } + + #container :global(.window-controls + .CodeMirror__container > .CodeMirror) { + padding-top: 48px; + } + `} +
) } @@ -254,24 +247,26 @@ class Carbon extends PureComponent { {content}
- + ) } diff --git a/components/Collapse.js b/components/Collapse.js index ceb7ea9..d925d7b 100644 --- a/components/Collapse.js +++ b/components/Collapse.js @@ -1,6 +1,5 @@ import React from 'react' import Toggle from './Toggle' -import Arrowdown from './svg/Arrowdown' class Collapse extends React.Component { constructor(props) { diff --git a/components/Dropdown.js b/components/Dropdown.js index 4cdf825..4c71cbe 100644 --- a/components/Dropdown.js +++ b/components/Dropdown.js @@ -10,13 +10,10 @@ class Dropdown extends PureComponent { inputValue: this.props.selected.name, itemsToShow: this.props.list } - userInputtedValue = '' onUserAction = changes => { this.setState(({ inputValue, itemsToShow }) => { - const clearUserInput = changes.hasOwnProperty('isOpen') - - if (changes.hasOwnProperty('inputValue')) { + if (Object.prototype.hasOwnProperty.call(changes, 'inputValue')) { if (changes.type === Downshift.stateChangeTypes.keyDownEscape) { inputValue = this.userInputtedValue } else { @@ -30,7 +27,7 @@ class Dropdown extends PureComponent { : this.props.list if ( - changes.hasOwnProperty('highlightedIndex') && + Object.prototype.hasOwnProperty.call(changes, 'highlightedIndex') && (changes.type === Downshift.stateChangeTypes.keyDownArrowUp || changes.type === Downshift.stateChangeTypes.keyDownArrowDown) ) { @@ -38,7 +35,7 @@ class Dropdown extends PureComponent { this.props.onChange(itemsToShow[changes.highlightedIndex]) } - if (changes.hasOwnProperty('isOpen')) { + if (Object.prototype.hasOwnProperty.call(changes, 'isOpen')) { this.userInputtedValue = '' // clear on open @@ -56,6 +53,8 @@ class Dropdown extends PureComponent { }) } + userInputtedValue = '' + render() { const { button, color, list, selected, onChange } = this.props @@ -122,13 +121,15 @@ const DropdownContainer = ({ children, innerRef, minWidth, ...rest }) => { return (
{children} - +
) } @@ -150,40 +151,42 @@ const SelectedItem = ({ getButtonProps, getInputProps, children, isOpen, color, className="dropdown-display-text" /> )} -
+
- + .dropdown-display-text { + flex-grow: 1; + color: ${itemColor}; + background: transparent; + border: none; + outline: none; + font-size: inherit; + font-family: inherit; + } + .is-open > .dropdown-arrow { + transform: rotate(180deg); + } + `} + ) } @@ -192,15 +195,17 @@ const ListItems = ({ children, color }) => { return ( ) } @@ -212,27 +217,29 @@ const ListItem = ({ children, color, isHighlighted, isSelected, ...rest }) => {
  • {children} {isSelected ? : null} - + .dropdown-list-item:hover { + background: ${COLORS.HOVER}; + } + .dropdown-list-item-text { + flex-grow: 1; + color: ${itemColor}; + } + `} +
    • ) } diff --git a/components/ExportSizeSelect.js b/components/ExportSizeSelect.js index 93624a9..4318ee9 100644 --- a/components/ExportSizeSelect.js +++ b/components/ExportSizeSelect.js @@ -1,7 +1,6 @@ import React from 'react' -import { COLORS } from '../lib/constants' import Checkmark from './svg/Checkmark' -import { EXPORT_SIZES } from '../lib/constants' +import { EXPORT_SIZES, COLORS } from '../lib/constants' export default class extends React.Component { constructor(props) { @@ -22,12 +21,16 @@ export default class extends React.Component { } renderExportSizes() { - return EXPORT_SIZES.map((exportSize, i) => { - return ( -
    - {exportSize.name} - {this.props.selected === exportSize.id ? : null} - -
    - ) - }) + `} + +
    + )) } render() { @@ -63,25 +66,27 @@ export default class extends React.Component { {selectedExportSize.name}
    {this.renderExportSizes()}
    - + ) } diff --git a/components/FontSelect.js b/components/FontSelect.js index 6f612d2..8af01fe 100644 --- a/components/FontSelect.js +++ b/components/FontSelect.js @@ -21,28 +21,30 @@ export default class extends React.Component { } renderListItems() { - return FONTS.map((font, i) => ( -
    + return FONTS.map(font => ( +
    {font.name} {this.props.selected === font.id ? : null} - +
    )) } @@ -59,25 +61,27 @@ export default class extends React.Component { {selectedFont.name}
    {this.renderListItems()}
    - + ) } diff --git a/components/Footer.js b/components/Footer.js index 830f79f..d3a6c89 100644 --- a/components/Footer.js +++ b/components/Footer.js @@ -4,7 +4,7 @@ import { COLORS } from '../lib/constants' const Footer = () => ( ) diff --git a/components/Header.js b/components/Header.js index cc061cc..5bd713d 100644 --- a/components/Header.js +++ b/components/Header.js @@ -14,25 +14,27 @@ const Header = ({ enableHeroText }) => ( ) : null} - + h2 { + text-align: center; + } + `} + ) diff --git a/components/ImagePicker.js b/components/ImagePicker.js index 6912d1b..1102049 100644 --- a/components/ImagePicker.js +++ b/components/ImagePicker.js @@ -1,9 +1,7 @@ import React from 'react' import ReactCrop, { makeAspectCrop } from 'react-image-crop' -import Slider from './Slider' import RandomImage from './RandomImage' -import { COLORS } from '../lib/constants' import { fileToDataURL } from '../lib/util' const getCroppedImg = (imageDataURL, pixelCrop) => { @@ -12,7 +10,7 @@ const getCroppedImg = (imageDataURL, pixelCrop) => { canvas.height = pixelCrop.height const ctx = canvas.getContext('2d') - return new Promise((resolve, reject) => { + return new Promise(resolve => { const image = new Image() image.src = imageDataURL image.onload = () => { @@ -47,7 +45,7 @@ export default class extends React.Component { } componentWillReceiveProps(nextProps) { - if (this.state.crop && this.props.aspectRatio != nextProps.aspectRatio) { + if (this.state.crop && this.props.aspectRatio !== nextProps.aspectRatio) { // update crop for editor container aspect-ratio change this.setState({ crop: makeAspectCrop( @@ -61,20 +59,17 @@ export default class extends React.Component { } } - selectImage(e) { - const file = e.target ? e.target.files[0] : e - - return fileToDataURL(file).then(dataURL => - this.props.onChange({ backgroundImage: dataURL, backgroundImageSelection: null }) - ) + async onDragEnd() { + if (this.state.pixelCrop) { + const croppedImg = await getCroppedImg(this.props.imageDataURL, this.state.pixelCrop) + this.props.onChange({ backgroundImageSelection: croppedImg }) + } } - removeImage() { - this.setState(INITIAL_STATE, () => { - this.props.onChange({ - backgroundImage: null, - backgroundImageSelection: null - }) + onCropChange(crop, pixelCrop) { + this.setState({ + crop: { ...crop, aspect: this.props.aspectRatio }, + pixelCrop }) } @@ -93,18 +88,21 @@ export default class extends React.Component { }) } - onCropChange(crop, pixelCrop) { - this.setState({ - crop: { ...crop, aspect: this.props.aspectRatio }, - pixelCrop - }) + selectImage(e) { + const file = e.target ? e.target.files[0] : e + + return fileToDataURL(file).then(dataURL => + this.props.onChange({ backgroundImage: dataURL, backgroundImageSelection: null }) + ) } - async onDragEnd() { - if (this.state.pixelCrop) { - const croppedImg = await getCroppedImg(this.props.imageDataURL, this.state.pixelCrop) - this.props.onChange({ backgroundImageSelection: croppedImg }) - } + removeImage() { + this.setState(INITIAL_STATE, () => { + this.props.onChange({ + backgroundImage: null, + backgroundImageSelection: null + }) + }) } render() { @@ -125,31 +123,33 @@ export default class extends React.Component { - + ) @@ -174,31 +174,33 @@ export default class extends React.Component { keepSelection /> - + ) } @@ -206,11 +208,13 @@ export default class extends React.Component { return (
    {content}
    - +
    ) } diff --git a/components/Language.js b/components/Language.js index ffc18cf..090abcc 100644 --- a/components/Language.js +++ b/components/Language.js @@ -1,5 +1,4 @@ import React from 'react' -import { Controls, ControlsBW } from './svg/Controls' export default ({ language }) => (
    diff --git a/components/Meta.js b/components/Meta.js index 644bd48..70b4516 100644 --- a/components/Meta.js +++ b/components/Meta.js @@ -1,5 +1,5 @@ import Head from 'next/head' -import { THEMES, COLORS } from '../lib/constants' +import { THEMES } from '../lib/constants' import Reset from './style/Reset' import Font from './style/Font' import Typography from './style/Typography' @@ -39,11 +39,11 @@ export default () => ( /> - {THEMES.filter(t => t.hasStylesheet !== false).map((theme, i) => ( + {THEMES.filter(t => t.hasStylesheet !== false).map(theme => ( ( - +
    ) diff --git a/components/Overlay.js b/components/Overlay.js index 353cd12..9f3f53a 100644 --- a/components/Overlay.js +++ b/components/Overlay.js @@ -2,25 +2,27 @@ const Overlay = props => (
    {props.isOver ?
    {props.title}
    : null} {props.children} - + .dnd-overlay { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + width: 100%; + height: 100%; + z-index: 999; + position: absolute; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0.85); + } + `} +
    ) diff --git a/components/Page.js b/components/Page.js index 9071455..4b41a63 100644 --- a/components/Page.js +++ b/components/Page.js @@ -11,13 +11,15 @@ export default ({ children, enableHeroText }) => (