updates to styles in seek component
This commit is contained in:
@@ -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`
|
||||||
|
|||||||
@@ -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;
|
||||||
|
`}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
|
|||||||
Reference in New Issue
Block a user