Commit a1a3d31e authored by Aanand Prasad's avatar Aanand Prasad

fix: convert css var usage to 'th' helper

parent 4007770f
Pipeline #4889 failed with stages
in 6 minutes and 48 seconds
......@@ -3,7 +3,7 @@ import styled from 'styled-components'
import { compose, withProps } from 'recompose'
import { groupBy } from 'lodash'
import { withJournal } from 'xpub-journal'
import { Badge } from '@pubsweet/ui'
import { Badge, th } from '@pubsweet/ui'
const Root = styled.div`
display: inline-flex;
......@@ -12,7 +12,7 @@ const Root = styled.div`
margin-top: 0.3em;
padding-left: 1.5em;
font-family: var(--font-reviewer);
font-family: ${th('fontReviewer')};
font-size: 0.9em;
`
......
import React from 'react'
import styled from 'styled-components'
import { th } from '@pubsweet/ui'
// TODO: move labels to journal config
......@@ -14,7 +15,7 @@ const labels = {
}
const Root = styled.div`
color: var(--color-primary);
color: ${th('colorPrimary')};
`
const Status = ({ status }) => <Root>{labels[status] || 'Unsubmitted'}</Root>
......
import React, { Component } from 'react'
import styled, { keyframes } from 'styled-components'
import Dropzone from 'react-dropzone'
import { Icon } from '@pubsweet/ui'
import { Icon, th } from '@pubsweet/ui'
const StyledDropzone = styled(Dropzone)`
border: none;
......@@ -10,12 +10,12 @@ const StyledDropzone = styled(Dropzone)`
`
const StatusIcon = ({ children }) => (
<Icon color="var(--color-primary)">{children}</Icon>
<Icon color={th('colorPrimary')}>{children}</Icon>
)
const Status = styled.div`
align-items: center;
color: var(--color-primary);
color: ${th('colorPrimary')};
display: inline-flex;
`
......@@ -57,7 +57,7 @@ const StatusConverting = Status.extend.attrs({
const StatusError = Status.extend.attrs({
children: () => <StatusIcon>plus_circle</StatusIcon>,
})`
color: var(--color-danger);
color: ${th('colorDanger')};
font-size: 1.5em;
font-style: italic;
font-weight: 400;
......@@ -67,7 +67,7 @@ const StatusError = Status.extend.attrs({
}
.icon line {
stroke: var(--color-danger);
stroke: ${th('colorDanger')};
transform: rotate(45deg) scale(2.8);
transform-origin: 50% 50%;
}
......@@ -107,8 +107,8 @@ const Root = styled.div`
&:hover ${StatusIdle} {
circle {
fill: var(--color-primary);
stroke: var(--color-primary);
fill: ${th('colorPrimary')};
stroke: ${th('colorPrimary')};
}
line {
......@@ -122,14 +122,14 @@ const Main = styled.div`
`
const Error = styled.div`
color: var(--color-danger);
color: ${th('colorDanger')};
font-size: 1.5em;
font-style: italic;
font-weight: 400;
`
const Info = styled.div`
color: var(--color-primary);
color: ${th('colorPrimary')};
font-size: 2em;
font-weight: 400;
text-transform: uppercase;
......
import styled from 'styled-components'
import { th } from '@pubsweet/ui'
const Meta = styled.div`
display: flex;
flex-wrap: nowrap;
font-size: var(--font-size-base-small);
font-size: ${th('fontSizeBaseSmall')};
white-space: nowrap;
`
......
import styled from 'styled-components'
import { th } from '@pubsweet/ui'
const Item = styled.div`
margin-bottom: var(--grid-unit);
margin-bottom: ${th('gridUnit')};
`
const Header = styled.div`
......@@ -14,14 +15,14 @@ const Body = styled.div`
align-items: flex-end;
display: flex;
justify-content: flex-end;
margin-bottom: var(--grid-unit);
margin-bottom: ${th('gridUnit')};
padding-left: 1.5em;
`
const Divider = styled.span.attrs({
children: props => ` ${props.separator} `,
})`
color: var(--color-furniture);
color: ${th('colorFurniture')};
white-space: pre;
`
......
import styled from 'styled-components'
import { th } from '@pubsweet/ui'
const Links = styled.div`
align-items: flex-end;
......@@ -7,7 +8,7 @@ const Links = styled.div`
`
const LinkContainer = styled.div`
font-size: var(--font-size-base-small);
font-size: ${th('fontSizeBaseSmall')};
`
export { Links, LinkContainer }
import styled from 'styled-components'
import { th } from '@pubsweet/ui'
const Page = styled.div`
margin: auto;
......@@ -6,18 +7,18 @@ const Page = styled.div`
`
const Section = styled.div`
margin: var(--grid-unit) 0;
margin: ${th('gridUnit')} 0;
&:not(:last-of-type) {
margin-bottom: calc(var(--grid-unit) * 2);
margin-bottom: calc(${th('gridUnit')} * 2);
}
`
const Heading = styled.div`
color: var(--color-primary);
font-family: var(--font-heading);
font-size: var(--font-size-heading-3);
margin: var(--grid-unit) 0;
color: ${th('colorPrimary')};
font-family: ${th('fontHeading')};
font-size: ${th('fontSizeHeading3')};
margin: ${th('gridUnit')} 0;
`
const UploadContainer = styled.div`
......
import React from 'react'
import styled from 'styled-components'
import { th } from '@pubsweet/ui'
// import {TitleViewer} from 'xpub-edit/src/components'
const Root = styled.div`
flex: 1;
font-size: var(--font-size-heading-3);
font-size: ${th('fontSizeHeading3')};
`
export default ({ version, className }) => {
......
import styled from 'styled-components'
import { th } from '@pubsweet/ui'
const AdminSection = styled.div`
margin-bottom: var(--grid-unit);
margin-bottom: ${th('gridUnit')};
`
export default AdminSection
import styled from 'styled-components'
import { th } from '@pubsweet/ui'
const Tab = styled.div`
padding: var(--sub-grid-unit) 1em;
font-size: var(--font-size-base-small);
border-width: 0 var(--border-width) var(--border-width) 0;
border-style: var(--border-style);
border-color: ${({ active }) =>
active ? 'var(--color-primary)' : 'var(--color-border)'};
padding: ${th('subGridUnit')} 1em;
font-size: ${th('fontSizeBaseSmall')};
border-width: 0 ${th('borderWidth')} ${th('borderWidth')} 0;
border-style: ${th('borderStyle')};
border-color: ${({ active, theme }) =>
active ? theme.colorPrimary : theme.colorBorder};
`
export default Tab
import React from 'react'
import styled from 'styled-components'
import { th } from '@pubsweet/ui'
import Tab from './Tab'
// TODO: allow the tab content to be separate from the key
......@@ -7,11 +8,11 @@ import Tab from './Tab'
const Root = styled.div``
const TabsContainer = styled.div`
display: flex;
margin-bottom: var(--grid-unit);
margin-bottom: ${th('gridUnit')};
`
const Title = styled.div`
border-bottom: var(--border-width) var(--border-style) var(--color-border);
padding: var(--sub-grid-unit) 1em;
border-bottom: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
padding: ${th('subGridUnit')} 1em;
`
const TabContainer = styled.div``
const Content = styled.div``
......
......@@ -2,7 +2,7 @@ import React from 'react'
import styled from 'styled-components'
import { compose, withState, withHandlers } from 'recompose'
import { withJournal } from 'xpub-journal'
import { Button } from '@pubsweet/ui'
import { Button, th } from '@pubsweet/ui'
import Review from '../review/Review'
const ToggleReview = ({ open, toggle }) => (
......@@ -67,7 +67,7 @@ const DecisionReview = ({ review, reviewer, journal, open, toggleOpen }) => {
const { name, ordinal } = reviewer
const Root = styled.div`
margin-bottom: var(--grid-unit);
margin-bottom: ${th('gridUnit')};
`
const ReviewBody = styled.div`
......
import React from 'react'
import styled from 'styled-components'
import { File } from '@pubsweet/ui'
import { File, th } from '@pubsweet/ui'
const Root = styled.div``
......@@ -13,7 +13,7 @@ const Table = styled.table`
const Heading = styled.th`
font-weight: inherit;
color: var(--color-quiet);
color: ${th('colorQuiet')};
padding: 0 1em 0 0;
`
......
import React from 'react'
import styled from 'styled-components'
import { NoteViewer } from 'xpub-edit'
import { Attachment } from '@pubsweet/ui'
import { Attachment, th } from '@pubsweet/ui'
const Heading = styled.div``
const Note = styled.div`
font-size: var(--font-size-base-small);
font-size: ${th('fontSizeBaseSmall')};
`
const Recommendation = Note.extend``
const Content = styled.div``
......
......@@ -2,16 +2,16 @@ import React from 'react'
import styled from 'styled-components'
import { map } from 'lodash'
import Moment from 'react-moment'
import { Avatar, Button } from '@pubsweet/ui'
import { Avatar, Button, th } from '@pubsweet/ui'
const Root = styled.div`
font-family: var(--font-reviewer);
margin-right: var(--sub-grid-unit);
padding: var(--sub-grid-unit);
font-family: ${th('fontReviewer')};
margin-right: ${th('subGridUnit')};
padding: ${th('subGridUnit')};
`
const Event = styled.div`
font-size: var(--font-size-base-small);
font-size: ${th('fontSizeBaseSmall')};
`
const ordinalLetter = ordinal =>
......
import React from 'react'
import styled from 'styled-components'
import { th } from '@pubsweet/ui'
const Root = styled.div`
display: flex;
margin-top: var(--grid-unit);
margin-top: ${th('gridUnit')};
`
const Form = styled.div``
const ReviewersList = styled.div`
......
import React from 'react'
import styled from 'styled-components'
import { Button, PlainButton } from '@pubsweet/ui'
import { Button, PlainButton, th } from '@pubsweet/ui'
import { Heading1 } from '../styles'
const Wrapper = styled.div`
background: var(--color-background);
color: var(--color-text);
line-height: var(--font-line-height);
background: ${th('colorBackground')};
color: ${th('colorText')};
line-height: ${th('fontLineHeight')};
max-height: 100%;
max-width: 60em;
overflow-y: auto;
padding: calc(var(--grid-unit) * 2);
padding: calc(${th('gridUnit')} * 2);
`
const Paragraph = styled.p`
font-size: var(--font-size-base);
margin-bottom: var(--grid-unit);
font-size: ${th('fontSizeBase')};
margin-bottom: ${th('gridUnit')};
width: 55ch;
`
const Divider = styled.span`
margin: 0 calc(var(--grid-unit) / 2);
margin: 0 calc(${th('gridUnit')} / 2);
`
const Confirm = ({ toggleConfirming }) => (
......
import React from 'react'
import { css } from 'styled-components'
import { FormSection } from 'redux-form'
import { ValidatedField, RadioGroup } from '@pubsweet/ui'
import { ValidatedField, RadioGroup, th } from '@pubsweet/ui'
import { withJournal } from 'xpub-journal'
import { required } from 'xpub-validators'
import { Section, Legend } from '../styles'
......@@ -15,7 +15,7 @@ const hoverStyles = css`
`
const DeclarationSection = Section.extend`
margin: calc(var(--grid-unit) * 2) 0;
margin: calc(${th('gridUnit')} * 2) 0;
display: flex;
justify-content: space-between;
......
import React from 'react'
import styled from 'styled-components'
import { Link } from 'react-router-dom'
import { Button } from '@pubsweet/ui'
import { Button, th } from '@pubsweet/ui'
import Metadata from './Metadata'
import Declarations from './Declarations'
import Suggestions from './Suggestions'
......@@ -12,7 +12,7 @@ import { Heading1 } from '../styles'
// import Validots from './Validots'
const Wrapper = styled.div`
font-family: var(--font-interface);
font-family: ${th('fontInterface')};
line-height: 1.3;
margin: auto;
max-width: 60em;
......
import React from 'react'
import { FormSection } from 'redux-form'
import { TextField, ValidatedField } from '@pubsweet/ui'
import { TextField, ValidatedField, th } from '@pubsweet/ui'
import { join, split } from 'xpub-validators'
import { Section, Legend } from '../styles'
......@@ -25,7 +25,7 @@ const OpposedEditorInput = input => (
const SubLegend = Legend.extend`
font-weight: normal;
margin-top: var(--grid-unit);
margin-top: ${th('gridUnit')};
`
const Suggestions = ({ readonly }) => (
......
import styled from 'styled-components'
import { th } from '@pubsweet/ui'
// TODO: use the parent validots node instead of document
// TODO: highlight the scrolled-to element
......@@ -7,7 +8,7 @@ const scrollIntoView = id => document.getElementById(id).scrollIntoView()
const Validot = styled.div.attrs({
onClick: props => () => scrollIntoView(props.input.name),
})`
background: var(--color-circle);
background: ${th('colorCircle')};
border: 3px solid white;
border-radius: 100%;
cursor: pointer;
......@@ -19,7 +20,7 @@ const Validot = styled.div.attrs({
&:hover::before {
background: var(--color-circle);
background: ${th('colorCircle')};
border-radius: 50%;
content: ' ';
height: 25px;
......@@ -31,7 +32,7 @@ const Validot = styled.div.attrs({
}
&:hover::after {
color: var(--color-circle);
color: ${th('colorCircle')};
content: '${props => props.message}';
display: block;
font-size: 0.8em;
......
import styled from 'styled-components'
import { th } from '@pubsweet/ui'
export const Heading1 = styled.h1`
margin: 0 0 var(--grid-unit);
font-size: var(--font-size-heading-1);
margin: 0 0 ${th('gridUnit')};
font-size: ${th('fontSizeHeading1')};
`
export const Section = styled.div`
margin: calc(var(--grid-unit) * 2) 0;
margin: calc(${th('gridUnit')} * 2) 0;
`
export const Legend = styled.div`
font-size: var(--font-size-base);
font-size: ${th('fontSizeBase')};
font-weight: 600;
margin-bottom: ${({ space }) => space && `var(--sub-grid-unit)`};
margin-bottom: ${({ space, theme }) => space && theme.subGridUnit};
`
......@@ -6,17 +6,13 @@ import createHistory from 'history/createBrowserHistory'
import { configureStore, Root } from 'pubsweet-client'
import { JournalProvider } from 'xpub-journal'
import injectNormalizeCSS from 'pubsweet-client/src/helpers/inject-normalize-css'
import '@pubsweet/default-theme'
import theme from '@pubsweet/default-theme'
import * as journal from './config/journal'
import Routes from './routes'
injectNormalizeCSS()
const history = createHistory()
const store = configureStore(history, {})
const theme = {}
const render = () => {
ReactDOM.render(
......
......@@ -3,9 +3,10 @@ import styled from 'styled-components'
import { compose } from 'recompose'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import { th } from '@pubsweet/ui'
const ErrorMessage = styled.div`
color: var(--color-error);
color: ${th('colorError')};
`
const LoadingMessage = styled.div.attrs({
......
import React from 'react'
import styled from 'styled-components'
import map from 'lodash/map'
import { th } from '@pubsweet/ui'
import MenuButton from './MenuButton'
const Wrapper = styled.div`
......@@ -11,7 +12,7 @@ const Wrapper = styled.div`
`
const Legend = styled.div`
font-size: var(--font-size-base);
font-size: ${th('fontSizeBase')};
margin-right: 10px;
`
......
import React from 'react'
import styled from 'styled-components'
import { th } from '@pubsweet/ui'
const Button = styled.button`
background: var(--color-background);
background: ${th('colorBackground')};
border: none;
border-bottom: 2px solid transparent;
color: #777;
......@@ -13,8 +14,8 @@ const Button = styled.button`
padding: 0;
&:hover {
border-bottom-color: var(--color-primary);
color: var(--color-primary);
border-bottom-color: ${th('colorPrimary')};
color: ${th('colorPrimary')};
}
border-bottom-color: ${({ active }) => active && 'black'};
......
import styled from 'styled-components'
import { th } from '@pubsweet/ui'
import Editor from './Editor'
const StyledEditor = styled(Editor).attrs({
basePlaceholderClassName: 'placeholder',
})`
font-family: var(--font-writing);
font-size: var(--font-size-base);
font-family: ${th('fontWriting')};
font-size: ${th('fontSizeBase')};
line-height: 1.8;
min-height: 1em;
margin-bottom: var(--grid-unit);
margin-bottom: ${th('gridUnit')};
border: var(--border-width) var(--border-style) var(--color-border);
border-radius: var(--border-radius);
padding: calc(var(--grid-unit) / 2);
border: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
border-radius: ${th('borderRadius')};
padding: calc(${th('gridUnit')} / 2);
&:focus {
outline: none;
......@@ -55,8 +56,8 @@ const StyledEditor = styled(Editor).attrs({
}
.placeholder {
color: var(--color-text-placeholder);
font-family: var(--font-interface);
color: ${th('colorTextPlaceholder')};
font-family: ${th('fontInterface')};
height: 0;
pointer-events: none;
}
......
import styled, { css } from 'styled-components'
import { th } from '@pubsweet/ui'
const contentStyles = css`
hr {
......@@ -46,23 +47,23 @@ const contentStyles = css`
export const withEditorStyle = Component => styled(Component).attrs({
basePlaceholderClassName: 'placeholder',
})`
font-family: var(--font-writing);
font-size: var(--font-size-base);
font-family: ${th('fontWriting')};
font-size: ${th('fontSizeBase')};
line-height: 1.8;
min-height: 1em;
margin-bottom: var(--grid-unit);
margin-bottom: ${th('gridUnit')};
border: var(--border-width) var(--border-style) var(--color-border);
border-radius: var(--border-radius);
padding: calc(var(--grid-unit) / 2);
border: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
border-radius: ${th('borderRadius')};
padding: calc(${th('gridUnit')} / 2);
&:focus {
outline: none;
}
.placeholder {
color: var(--color-text-placeholder);
font-family: var(--font-interface);
color: ${th('colorTextPlaceholder')};
font-family: ${th('fontInterface')};
height: 0;
pointer-events: none;
}
......@@ -75,10 +76,10 @@ export const withEditorStyle = Component => styled(Component).attrs({
`
export const withViewerStyle = Component => styled(Component)`
font-family: var(--font-reading);
font-size: var(--font-size-base);
font-family: ${th('fontReading')};
font-size: ${th('fontSizeBase')};
line-height: 1.8;
margin-bottom: var(--grid-unit);
margin-bottom: ${th('gridUnit')};
${contentStyles};
`
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment