Clean up styles

- Move globals out of Meta component
- Create style components for Reset and TypeSystem
main
Jake Dexheimer 7 years ago
parent 7a2ce44278
commit bf374f1728

@ -1,9 +1,9 @@
import React from 'react'
import { PALETTE } from '../lib/constants'
import { COLORS } from '../lib/constants'
export default (props) => (
<div onClick={props.onClick} className="toolbar-btn" style={Object.assign({
background: PALETTE.EDITOR_BG,
background: COLORS.BLACK,
color: props.color,
border: `0.5px solid ${props.color}`
}, props.style)}>

@ -2,8 +2,9 @@ import { EOL } from 'os'
import React from 'react'
import domtoimage from 'dom-to-image'
import CodeMirror from 'react-codemirror'
import WindowControls from '../components/WindowControls'
import Spinner from 'react-spinner'
import WindowControls from '../components/WindowControls'
import { COLORS } from '../lib/constants'
const DEFAULT_SETTINGS = {
paddingVertical: '50px',
@ -15,7 +16,7 @@ const DEFAULT_SETTINGS = {
language: 'javascript'
}
class CodeImage extends React.Component {
class Carbon extends React.Component {
constructor (props) {
super(props)
@ -69,6 +70,37 @@ class CodeImage extends React.Component {
value={this.props.children}
options={options}
/>
<style jsx>{`
#container :global(.cm-s-dracula .CodeMirror-cursor) {
border-left: solid 2px #159588;
}
#container :global(.CodeMirror__container.dropshadow) {
box-shadow: 0px 3px 15px rgba(0,0,0,0.3);
border-radius: 5px;
}
#container :global(.CodeMirror__container .CodeMirror) {
height: auto;
min-width: 680px;
padding: 24px 18px;
border-radius: 5px;
font-family: Hack, monospace !important;
font-size: 0.7rem;
}
#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: 40px;
}
`}</style>
</div>
)
}
@ -89,4 +121,4 @@ class CodeImage extends React.Component {
}
}
export default CodeImage
export default Carbon

@ -2,7 +2,7 @@ import React from 'react'
import enhanceWithClickOutside from 'react-click-outside'
import { TwitterPicker } from 'react-color'
import WindowPointer from './WindowPointer'
import { PALETTE } from '../lib/constants'
import { COLORS } from '../lib/constants'
class ColorPicker extends React.Component {
constructor() {
@ -46,7 +46,7 @@ class ColorPicker extends React.Component {
display: flex;
height: 100%;
width: 72px;
border: 0.5px solid ${PALETTE.SECONDARY};
border: 0.5px solid ${COLORS.SECONDARY};
border-radius: 3px;
}
@ -58,7 +58,7 @@ class ColorPicker extends React.Component {
cursor: default;
height: 100%;
width: 36px;
border-right: 0.5px solid ${PALETTE.SECONDARY};
border-right: 0.5px solid ${COLORS.SECONDARY};
}
.bg-color {
@ -73,6 +73,33 @@ class ColorPicker extends React.Component {
margin-left: 36px;
margin-top: 4px;
}
/* react-color overrides */
.colorpicker-picker :global(.twitter-picker) {
width: 278px !important;
border: 0.5px solid ${COLORS.SECONDARY} !important;
border-radius: 3px !important;
background: #1A1A1A !important;
}
.colorpicker-picker > :global(div > div:nth-child(3) > div:nth-child(11)) {
background: #1A1A1A !important;
border: 0.5px solid ${COLORS.SECONDARY} !important;
border-right: none !important;
border-radius: 3px 0 0 3px !important;
color: ${COLORS.SECONDARY} !important;
}
.colorpicker-picker > :global(div > div:nth-child(3) > div:nth-child(12) > input) {
background: rgba(255, 255, 255, 0.165) !important;
height: 30px !important;
width: 108px !important;
color: #fff !important;
}
.colorpicker-picker > :global(div > div:nth-child(3) > span > div) {
border-radius: 2px !important;
}
`}</style>
</div>
)

@ -2,7 +2,7 @@ import React from 'react'
import enhanceWithClickOutside from 'react-click-outside'
import ArrowDown from './svg/Arrowdown'
import Checkmark from './svg/Checkmark'
import { PALETTE } from '../lib/constants'
import { COLORS } from '../lib/constants'
class Dropdown extends React.Component {
constructor(props) {
@ -40,10 +40,10 @@ class Dropdown extends React.Component {
display: flex;
align-items: center;
justify-content: space-between;
background: ${PALETTE.EDITOR_BG};
background: ${COLORS.BLACK};
user-select: none;
padding: 8px 16px;
border-bottom: 0.5px solid ${PALETTE.SECONDARY};
border-bottom: 0.5px solid ${COLORS.SECONDARY};
}
.dropdown-list-item:last-of-type {
@ -90,7 +90,7 @@ class Dropdown extends React.Component {
.dropdown-display {
height: 100%;
border: 1px solid ${PALETTE.SECONDARY};
border: 1px solid ${COLORS.SECONDARY};
border-radius: 3px;
user-select: none;
padding: 8px 16px;
@ -108,7 +108,7 @@ class Dropdown extends React.Component {
.dropdown-list {
display: none;
margin-top: -1px;
border: 0.5px solid ${PALETTE.SECONDARY};
border: 0.5px solid ${COLORS.SECONDARY};
border-radius: 0px 0px 3px 3px;
max-height: 350px;
overflow-y: scroll;

@ -1,6 +1,6 @@
import React from 'react'
import Link from 'next/link'
import { PALETTE } from '../lib/constants'
import { COLORS } from '../lib/constants'
const Footer = (props) => (
<div className="mt3">
@ -14,7 +14,7 @@ const Footer = (props) => (
div > div {
text-align: center;
font-size: 14px;
color: ${PALETTE.GRAY};
color: ${COLORS.GRAY};
}
a {
@ -26,7 +26,7 @@ const Footer = (props) => (
}
.dawn-link {
color: ${PALETTE.PRIMARY};
color: ${COLORS.PRIMARY};
text-decoration: none;
}

@ -1,11 +1,12 @@
import Head from 'next/head'
import { THEMES, PALETTE } from '../lib/constants'
import { THEMES, COLORS } from '../lib/constants'
import Reset from './style/Reset'
import Typography from './style/Typography'
export default () => (
<div className="meta">
<Head>
<link rel="stylesheet" href='//cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.min.css' />
<link rel="stylesheet" href="/static/type-system.css" />
{
THEMES.map((theme, i) => (
<link key={i} rel="stylesheet" href={`//cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/theme/${theme.id}.min.css`}/>
@ -17,128 +18,12 @@ export default () => (
<link rel="stylesheet" href="//cdn.jsdelivr.net/font-hack/2.020/css/hack-extended.min.css" />
<link rel="stylesheet" type="text/css" href="/static/react-spinner.css" />
</Head>
<Reset />
<Typography />
<style jsx>{`
.meta {
display: none;
}
`}</style>
<style jsx global>{`
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
color: #fff;
background: #121212;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 500;
}
*, *:after, *:before {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.link {
color: #fff;
text-decoration: none;
padding-bottom: 2px;
background: linear-gradient(to right, rgba(255,255,255, 0.7) 0%, rgba(255,255,255, 0.7) 100%);
background-size: 1px 1px;
background-position: 0 100%;
background-repeat: repeat-x;
}
.link:hover {
color: ${PALETTE.PRIMARY};
background: none;
}
::selection {
background: rgba(255,255,255,.99);
color: #121212;
}
#toolbar > div {
margin-right: 8px; // TODO fix hack
}
#toolbar>div:last-child {
margin-right: 0px;
}
.settings-settings > div {
border-bottom: solid 1px ${PALETTE.SECONDARY};
}
.settings-settings > div:first-child {
border-bottom: none;
}
.selected svg {
border-radius: 3px;
border: solid 2px ${PALETTE.SECONDARY};
}
.CodeMirror__container.dropshadow {
box-shadow: 0px 3px 15px rgba(0,0,0,0.3);
border-radius: 5px;
}
.CodeMirror__container .CodeMirror {
height: auto;
min-width: 680px;
padding: 24px 18px;
border-radius: 5px;
font-family: Hack, monospace !important;
font-size: 0.7rem;
}
.window-theme__sharp > .CodeMirror {
border-radius: 0px;
}
.window-theme__bw > .CodeMirror {
border: 2px solid ${PALETTE.SECONDARY};
}
.window-controls + .CodeMirror__container > .CodeMirror {
padding-top: 40px;
}
.cm-s-dracula .CodeMirror-cursor {
border-left: solid 2px #159588;
}
/* Colorpicker overrides */
.twitter-picker {
width: 278px !important;
border: 0.5px solid ${PALETTE.SECONDARY} !important;
border-radius: 3px !important;
background: #1A1A1A !important;
}
.colorpicker-picker > div > div:nth-child(3) > div:nth-child(11) {
background: #1A1A1A !important;
border: 0.5px solid ${PALETTE.SECONDARY} !important;
border-right: none !important;
border-radius: 3px 0 0 3px !important;
color: ${PALETTE.SECONDARY} !important;
}
#toolbar > div.colorpicker-container > div.colorpicker-picker > div > div:nth-child(3) > div:nth-child(12) > input {
background: rgba(255, 255, 255, 0.165) !important;
height: 30px !important;
width: 108px !important;
color: #fff !important;
}
#toolbar > div.colorpicker-container > div.colorpicker-picker > div > div:nth-child(3) > span > div {
border-radius: 2px !important;
}
`}</style>
</div>
)

@ -5,7 +5,7 @@ import ThemeSelect from './ThemeSelect'
import Slider from './Slider'
import Toggle from './Toggle'
import WindowPointer from './WindowPointer';
import { PALETTE } from '../lib/constants'
import { COLORS } from '../lib/constants'
class Settings extends React.Component {
constructor(props) {
@ -63,7 +63,7 @@ class Settings extends React.Component {
display: flex;
justify-content: center;
align-items: center;
border: 0.5px solid ${PALETTE.SECONDARY};
border: 0.5px solid ${COLORS.SECONDARY};
border-radius: 3px;
user-select: none;
position: relative;
@ -80,11 +80,20 @@ class Settings extends React.Component {
position: absolute;
top: 44px;
left: 0;
border: 0.5px solid ${PALETTE.SECONDARY};
border: 0.5px solid ${COLORS.SECONDARY};
width: 184px;
border-radius: 3px;
background: ${PALETTE.EDITOR_BG};
background: ${COLORS.BLACK};
}
.settings-settings > :global(div) {
border-bottom: solid 1px ${COLORS.SECONDARY};
}
.settings-settings > :global(div):first-child {
border-bottom: none;
}
`}</style>
</div>
)

@ -1,5 +1,6 @@
import React from 'react'
import { None, BW, Sharp } from './svg/WindowThemes'
import { COLORS } from '../lib/constants'
const WINDOW_THEMES_MAP = { none: None, sharp: Sharp, bw: BW }
export const WINDOW_THEMES = Object.keys(WINDOW_THEMES_MAP)
@ -37,6 +38,11 @@ export default class extends React.Component {
.theme:last-of-type {
margin-right: 0px;
}
.selected :global(svg) {
border-radius: 3px;
border: solid 2px ${COLORS.SECONDARY};
}
`}</style>
</div>
)

@ -31,6 +31,14 @@ const Toolbar = (props) => (
color: #fff;
}
#toolbar > :global(div) {
margin-right: 8px;
}
#toolbar > :global(div):last-child {
margin-right: 0px;
}
.buttons {
display: flex;
margin-left: auto;

@ -15,7 +15,7 @@ export default DropTarget(NativeTypes.FILE, { drop }, (connect, monitor) => ({
isOver: monitor.isOver(),
canDrop: monitor.canDrop(),
item: monitor.getItem()
}))(CodeImage)
}))(Carbon)
let code = this.props.content

@ -0,0 +1,106 @@
import { COLORS } from '../../lib/constants'
export default () =>
<style jsx global>{`
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html,
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
background: ${COLORS.BLACK};
color: white;
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Ubuntu,
"Helvetica Neue",
sans-serif;
font-weight: 400;
font-style: normal;
text-transform: initial;
letter-spacing: initial;
overflow-x: hidden;
overflow-y: auto;
}
* { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6 {
font-weight: 500;
}
a {
color: inherit;
text-decoration: none;
cursor: pointer;
}
*::selection {
background: rgba(255,255,255,.99);
color: #121212;
}
.link {
color: #fff;
text-decoration: none;
padding-bottom: 2px;
background: linear-gradient(to right, rgba(255,255,255, 0.7) 0%, rgba(255,255,255, 0.7) 100%);
background-size: 1px 1px;
background-position: 0 100%;
background-repeat: repeat-x;
}
.link:hover {
color: ${COLORS.PRIMARY};
background: none;
}
`}</style>

@ -0,0 +1,93 @@
export default () =>
<style jsx global>{`
/* https://github.com/jxnblk/type-system
Brent Jackson
License: MIT
*/
:root {
--h0: 4.5rem;
--h1: 3rem;
--h2: 2.25rem;
--h3: 1.5rem;
--h4: 1.125rem;
--h5: .75rem;
--lh: calc(4/3);
--mx: 32em;
--m1: calc(2/3 * 1em);
--m2: calc(4/3 * 1em);
--m3: calc(8/3 * 1em);
--m4: calc(16/3 * 1em);
--x1: .5rem;
--x2: 1rem;
--x3: 2rem;
--x4: 4rem;
--x5: 8rem;
--x6: 16rem;
}
body {
font-size: var(--h4);
line-height: var(--lh);
margin: 2rem;
}
h1, h2, h3 {
margin-top: var(--m1);
margin-bottom: 0;
}
h4, h5, h6,
p, dl, ol, ul, blockquote {
margin-top: var(--m2);
margin-bottom: var(--m2);
}
h1 { font-size: var(--h2) }
h2, h3 { font-size: var(--h3) }
h4 { font-size: var(--h4) }
h5, h6 { font-size: var(--h5) }
.h0 { font-size: var(--h0) }
.h1 { font-size: var(--h1) }
.h2 { font-size: var(--h2) }
.h3 { font-size: var(--h3) }
.h4 { font-size: var(--h4) }
.h5 { font-size: var(--h5) }
.h6 { font-size: var(--h5) }
@media screen and (min-width: 40em) {
.xh0 { font-size: var(--h0) }
.xh1 { font-size: var(--h1) }
.xh2 { font-size: var(--h2) }
.xh3 { font-size: var(--h3) }
.xh4 { font-size: var(--h4) }
.xh5 { font-size: var(--h5) }
.xh6 { font-size: var(--h5) }
}
.lh1 { line-height: 1 }
/* h0, h1, h3 */
.lh2 { line-height: calc(7/6 * 1em) }
/* For body copy */
.lh3 { line-height: calc(16/9 * 1em) }
.mt0 { margin-top: 0 }
.mb0 { margin-bottom: 0 }
.mt1 { margin-top: var(--x1) }
.mb1 { margin-bottom: var(--x1) }
.mt2 { margin-top: var(--x2) }
.mb2 { margin-bottom: var(--x2) }
.mt3 { margin-top: var(--x3) }
.mb3 { margin-bottom: var(--x3) }
.mt4 { margin-top: var(--x4) }
.mb4 { margin-bottom: var(--x4) }
.mt5 { margin-top: var(--x5) }
.mb5 { margin-bottom: var(--x5) }
.mt6 { margin-top: var(--x6) }
.mb6 { margin-bottom: var(--x6) }
.mx { max-width: var(--mx) }
.bold { font-weight: bold }
`}</style>

@ -229,8 +229,8 @@ export const LANGUAGES = [
}
]
export const PALETTE = {
EDITOR_BG: '#121212',
export const COLORS = {
BLACK: '#121212',
PRIMARY: '#F8E81C',
SECONDARY: '#fff',
GRAY: '#b5b3a0'

@ -2,7 +2,7 @@ import Page from '../components/Page'
import Meta from '../components/Meta'
import Header from '../components/Header'
import Footer from '../components/Footer'
import { PALETTE } from '../lib/constants'
import { COLORS } from '../lib/constants'
export default () => (
<Page>
@ -34,7 +34,7 @@ export default () => (
</div>
<style jsx>{`
p, li {
color: ${PALETTE.GRAY};
color: ${COLORS.GRAY};
}
span {

@ -7,9 +7,9 @@ import domtoimage from 'dom-to-image'
import Page from '../components/Page'
import ReadFileDropContainer from '../components/ReadFileDropContainer'
import Toolbar from '../components/Toolbar'
import CodeImage from '../components/CodeImage'
import Carbon from '../components/Carbon'
import api from '../lib/api'
import { THEMES, LANGUAGES, PALETTE, DEFAULT_CODE } from '../lib/constants'
import { THEMES, LANGUAGES, COLORS, DEFAULT_CODE } from '../lib/constants'
class Editor extends React.Component {
/* pathname, asPath, err, req, res */
@ -78,15 +78,15 @@ class Editor extends React.Component {
bg={this.state.background}
enabled={this.state}
/>
<CodeImage config={this.state}>
<Carbon config={this.state}>
{this.state.droppedContent || this.props.content || DEFAULT_CODE}
</CodeImage>
</Carbon>
</div>
</ReadFileDropContainer>
<style jsx>{`
#editor {
background: ${PALETTE.EDITOR_BG};
border: 3px solid ${PALETTE.SECONDARY};
background: ${COLORS.BLACK};
border: 3px solid ${COLORS.SECONDARY};
border-radius: 8px;
padding: 16px;
}

@ -23,7 +23,6 @@
}
body {
font-family: -apple-system, sans-serif;
font-size: var(--h4);
line-height: var(--lh);
margin: 2rem;
@ -86,4 +85,3 @@ h5, h6 { font-size: var(--h5) }
.mx { max-width: var(--mx) }
.bold { font-weight: bold }

Loading…
Cancel
Save