From 707551af382a9d49e9b7468e8c73647b49e16780 Mon Sep 17 00:00:00 2001 From: ray Date: Tue, 28 Apr 2020 22:22:23 +0100 Subject: [PATCH] add styling --- src/App.css | 56 +++++------ src/App.js | 281 +++++++++++++++++++++++++++++++++++++++++++--------- 2 files changed, 262 insertions(+), 75 deletions(-) diff --git a/src/App.css b/src/App.css index 74b5e05..bdd7d29 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +1,34 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +button, +body { + color: #fff; + background-color: #202020; +} + .App { - text-align: center; + width: 100vw; + height: 100vh; + display: flex; + flex-direction: row; + justify-content: stretch; + align-items: stretch; } -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; +.article { + position: relative; + width: 100%; + height: 100%; display: flex; flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; + justify-content: stretch; + align-items: stretch; } -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +button { + cursor: pointer; } diff --git a/src/App.js b/src/App.js index 5d4a2f6..be8520d 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,4 @@ -import palette from 'nice-color-palettes'; +import niceColorPalette from 'nice-color-palettes'; import chroma from 'chroma-js'; import React from 'react'; import styled from 'styled-components'; @@ -7,48 +7,172 @@ import './App.css'; // an object to hold our styled components const S = {}; -class Shade extends React.Component { - render() { - return ( -
- {this.props.color} -
- ); - } -} - -S.Shade = styled(Shade)` -background-color: ${props => props.color}; - -span { +S.Button = styled.button` + width: 100%; + display: flex; + justify-content: center; + align-items: center; + background: none; + border: 0; font-weight: bold; - color: ${props => chroma.contrast(props.color, '#000') < 4.5 ? '#fff' : '#000'}; - opacity: 0; -} + opacity: 0.6; + min-height: 3em; - &:hover span { - opacity: 0.9; + &:hover { + opacity: 1; } `; -S.ShadeBase = styled(S.Shade)` -border-top: 3px solid rgba(0, 0, 0, 0.5); -border-bottom: 3px solid rgba(0, 0, 0, 0.5); +S.ShadeBG = styled.span.attrs( + ({ color }) => ({ + style: { + backgroundColor: color, + } + }) +)` +width: 100%; +height: 100%; +`; + +S.ShadeText = styled.span.attrs( + ({ color }) => ({ + style: { + color: chroma.contrast(color, '#000') < 4.5 ? '#fff' : '#000' + } + }) +)` +width: 100%; +height: 100%; +`; + +function ShadeBox(props) { + return ( +
+ + {props.color} +
+ ); +} + +S.ShadeBox = styled(ShadeBox)` +position: relative; +width: 100%; +height: 100%; +font-weight: bold; + +span { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; +} + + .text { + display: flex; + justify-content: center; + align-items: center; + opacity: 0; + + &:hover { + opacity: 0.7; + } + } +`; + +S.ShadeBoxBase = styled(S.ShadeBox)` +.text { + opacity: 0.7; +} `; function IncDecButton(props) { return (
-
{props.children}
- + {props.children} + {props.value !== undefined && {props.value} } - +
); } +S.IncDecButton = styled(IncDecButton)` + position: relative; + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + min-height: 3em; + + span { + opacity: 0.6; + font-weight: bold; + padding: 0.25em 25%; + + &:first-child { + padding: 0.25em 1em; + } + } + + button { + position: absolute; + width: 50%; + height: 100%; + top: 0; + background: transparent; + border: none; + font-size: 2em; + font-weight: bold; + opacity: 0.5; + padding: 0.25em 0.5em; + + &.btn-l { + left: 0; + border-right-width: 0; + padding-right: 25%; + + &:hover { + opacity: 1; + } + } + + &.btn-r { + right: 0; + border-left-width: 0; + padding-left: 25%; + + &:hover { + opacity: 1; + } + } + } +`; + +S.GradientBG = styled.span` + opacity: 0.3; + background: + linear-gradient(to bottom, + rgba(0, 0, 0, 1), + rgba(0, 0, 0, 0) 12rem + ), + linear-gradient(to top, + rgba(0, 0, 0, 1), + rgba(0, 0, 0, 0) 10rem + ), + linear-gradient( + to right, + ${props => props.colorList.map((color, index) => { + const lineEnd = props.colorList.length - 1 === index ? "" : ","; + return color + lineEnd; + })} + ); +`; + class Color extends React.Component { constructor(props) { super(props); @@ -125,44 +249,44 @@ class Color extends React.Component { return (
- - Random + { this.incState("brightenAmount", 0.25); }} onDecrement={() => { this.incState("brightenAmount", -0.25); }} value={this.state.brightenAmount} > Brightness - - + { this.incState("scaleTintStepCount", 1); }} onDecrement={() => { this.incState("scaleTintStepCount", -1); }} > Count - +
- { this.incState("scaleShadeStepCount", 1); }} onDecrement={() => { this.incState("scaleShadeStepCount", -1); }} > Count - - + { this.incState("darkenAmount", 0.25); }} onDecrement={() => { this.incState("darkenAmount", -0.25); }} value={this.state.darkenAmount} > Darkness - +
); @@ -175,7 +299,7 @@ Color.defaultProps = { scaleShadeStart: 0.2, scaleShadeEnd: 0.8, scaleShadeStepCount: 4, - scaleTintStart: 0.2, + scaleTintStart: 0.1, scaleTintEnd: 0.8, scaleTintStepCount: 4, } @@ -186,6 +310,23 @@ S.Color = styled(Color)` justify-content: stretch; align-items: stretch; + header, + footer { + display: flex; + flex-direction: column; + justify-content: stretch; + align-items: center; + } + + header { + padding-bottom: 1em; + } + + footer { + padding-top: 1em; + padding-bottom: 1em; + } + ul { display: flex; flex-direction: column; @@ -217,7 +358,7 @@ class Palette extends React.Component { } randomFivePalette() { - const newPalette = palette[Math.floor(Math.random() * palette.length)]; + const newPalette = niceColorPalette[Math.floor(Math.random() * niceColorPalette.length)]; this.setState({palette: newPalette}); } @@ -235,9 +376,14 @@ class Palette extends React.Component { ); return ( -
- -