updates to styles in seek component

This commit is contained in:
Kyle Gill
2019-04-01 20:34:02 -06:00
parent 7eaa6b6046
commit 4c41094348
2 changed files with 11 additions and 6 deletions

View File

@@ -14,10 +14,11 @@ const SeekHeader = styled.header`
border-bottom-width: 1px; border-bottom-width: 1px;
border-bottom-style: solid; border-bottom-style: solid;
border-color: ${props => props.theme.colors.quarternary}; border-color: ${props => props.theme.colors.quarternary};
margin-top: 15px;
` `
const SeekH1 = styled.h1` const SeekH1 = styled.h1`
display: block; display: block;
font-size: ${SIZES.normal}; font-size: ${SIZES.small};
color: ${props => props.theme.colors.secondary}; color: ${props => props.theme.colors.secondary};
` `
const SeekArrows = styled.div` const SeekArrows = styled.div`

View File

@@ -1,6 +1,7 @@
import React, { Component } from "react" import React, { Component } from "react"
import styled from "@emotion/styled" import styled from "@emotion/styled"
import { css, keyframes } from "@emotion/core" /** @jsx jsx */
import { jsx, css, keyframes } from "@emotion/core"
import { compose } from "recompose" import { compose } from "recompose"
import { withRouter } from "react-router-dom" import { withRouter } from "react-router-dom"
import { withTheme } from "emotion-theming" import { withTheme } from "emotion-theming"
@@ -39,6 +40,9 @@ const JournalEntryArea = styled.textarea`
&::placeholder { &::placeholder {
color: ${props => props.theme.colors.tertiary}; color: ${props => props.theme.colors.tertiary};
} }
&::selection {
background: ${props => props.theme.colors.hover};
}
&:focus { &:focus {
box-shadow: 0 0 0 8px ${props => props.theme.colors.bodyBackground}, box-shadow: 0 0 0 8px ${props => props.theme.colors.bodyBackground},
0 0 0 10px ${props => props.theme.colors.hover}; 0 0 0 10px ${props => props.theme.colors.hover};
@@ -54,7 +58,6 @@ const fadeKeyFrames = keyframes`
` `
const LoadingSpinner = styled(BeatLoader)` const LoadingSpinner = styled(BeatLoader)`
opacity: 0; opacity: 0;
animation: fadein 2s;
` `
const AUTOSAVE_DELAY = 2000 const AUTOSAVE_DELAY = 2000
@@ -126,7 +129,6 @@ class Day extends Component {
this.setState({ text }) this.setState({ text })
this.timeout = setTimeout(() => { this.timeout = setTimeout(() => {
console.log(text)
this.saveText(text) this.saveText(text)
}, AUTOSAVE_DELAY) }, AUTOSAVE_DELAY)
} }
@@ -176,10 +178,9 @@ class Day extends Component {
/> />
<JournalHeading>RECORD THOUGHTS ABOUT YOUR DAY</JournalHeading> <JournalHeading>RECORD THOUGHTS ABOUT YOUR DAY</JournalHeading>
{loading ? ( {loading ? (
// <JournalEntryArea disabled placeholder="Loading..." />
<div style={{ marginTop: 10 }}> <div style={{ marginTop: 10 }}>
<LoadingSpinner <LoadingSpinner
color={theme.colors.tertiary} color={theme.colors.quarternary}
size={10} size={10}
margin="4px" margin="4px"
css={css` css={css`
@@ -192,6 +193,9 @@ class Day extends Component {
placeholder="Start writing..." placeholder="Start writing..."
onChange={e => this.onChangeText(e)} onChange={e => this.onChangeText(e)}
value={text} value={text}
css={css`
animation: ${fadeKeyFrames} 0.2s ease-in;
`}
/> />
)} )}
</> </>