From 4f152d7b66d91940a51f41efc96f0b213c9a2f0b Mon Sep 17 00:00:00 2001
From: Bogdan Cochior <bogdan.cochior@thinslices.com>
Date: Mon, 12 Mar 2018 16:17:50 +0200
Subject: [PATCH] style(faraday): change icon size
---
.../src/components/AuthorList/Author.js | 4 +-
.../src/components/AuthorList/AuthorAdder.js | 2 +-
.../src/components/AuthorList/AuthorEditor.js | 6 +--
.../src/components/AuthorList/FormItems.js | 6 +--
.../src/components/Files/FileItem.js | 15 ++++---
.../src/components/Files/FileSection.js | 42 +++++++++----------
.../src/components/Steps/Steps.js | 26 ++++++------
7 files changed, 54 insertions(+), 47 deletions(-)
diff --git a/packages/components-faraday/src/components/AuthorList/Author.js b/packages/components-faraday/src/components/AuthorList/Author.js
index e7609082e..08d6c1eb7 100644
--- a/packages/components-faraday/src/components/AuthorList/Author.js
+++ b/packages/components-faraday/src/components/AuthorList/Author.js
@@ -30,12 +30,12 @@ export default ({
<ButtonContainer>
{!isSubmitting && (
<ClickableIcon onClick={removeAuthor(email)} title="Delete author">
- <Icon size={18}>trash</Icon>
+ <Icon size={3}>trash</Icon>
</ClickableIcon>
)}
{editedAuthor < 0 && (
<ClickableIcon onClick={setAuthorEdit(index)} title="Edit author">
- <Icon size={18}>edit-2</Icon>
+ <Icon size={3}>edit-2</Icon>
</ClickableIcon>
)}
</ButtonContainer>
diff --git a/packages/components-faraday/src/components/AuthorList/AuthorAdder.js b/packages/components-faraday/src/components/AuthorList/AuthorAdder.js
index 5a11c7c6c..eccca4326 100644
--- a/packages/components-faraday/src/components/AuthorList/AuthorAdder.js
+++ b/packages/components-faraday/src/components/AuthorList/AuthorAdder.js
@@ -60,7 +60,7 @@ const AuthorAdder = ({
Save
</Button>
) : (
- <Spinner />
+ <Spinner size={3} />
)}
</ButtonsContainer>
</FormBody>
diff --git a/packages/components-faraday/src/components/AuthorList/AuthorEditor.js b/packages/components-faraday/src/components/AuthorList/AuthorEditor.js
index 6c3eda847..879ff26a3 100644
--- a/packages/components-faraday/src/components/AuthorList/AuthorEditor.js
+++ b/packages/components-faraday/src/components/AuthorList/AuthorEditor.js
@@ -51,14 +51,14 @@ const AuthorEdit = ({
<ButtonsContainer>
<ClickableIcon onClick={setAuthorEdit(-1)}>
- <Icon size={18}>x-circle</Icon>
+ <Icon size={3}>x-circle</Icon>
</ClickableIcon>
{!isFetching ? (
<ClickableIcon onClick={handleSubmit}>
- <Icon size={18}>check-circle</Icon>
+ <Icon size={3}>check-circle</Icon>
</ClickableIcon>
) : (
- <Spinner />
+ <Spinner size={3} />
)}
</ButtonsContainer>
</Header>
diff --git a/packages/components-faraday/src/components/AuthorList/FormItems.js b/packages/components-faraday/src/components/AuthorList/FormItems.js
index 7a8a37a59..807a34fe4 100644
--- a/packages/components-faraday/src/components/AuthorList/FormItems.js
+++ b/packages/components-faraday/src/components/AuthorList/FormItems.js
@@ -38,11 +38,11 @@ export const Label = ({ label, value }) => (
export const DragHandle = withTheme(({ theme }) => (
<DragHandleRoot>
- <Icon color={theme.colorFurniture}>chevron_up</Icon>
- <Icon color={theme.colorFurniture} size={16}>
+ <Icon color={theme.colorPrimary}>chevron_up</Icon>
+ <Icon color={theme.colorPrimary} size={3}>
menu
</Icon>
- <Icon color={theme.colorFurniture}>chevron_down</Icon>
+ <Icon color={theme.colorPrimary}>chevron_down</Icon>
</DragHandleRoot>
))
diff --git a/packages/components-faraday/src/components/Files/FileItem.js b/packages/components-faraday/src/components/Files/FileItem.js
index da8af7456..618292b02 100644
--- a/packages/components-faraday/src/components/Files/FileItem.js
+++ b/packages/components-faraday/src/components/Files/FileItem.js
@@ -1,6 +1,6 @@
import React from 'react'
import { Icon } from '@pubsweet/ui'
-import styled from 'styled-components'
+import styled, { withTheme } from 'styled-components'
const parseFileSize = size => {
const kbSize = size / 1000
@@ -24,9 +24,10 @@ const FileItem = ({
id,
removeFile,
previewFile,
+ theme,
...rest
}) => (
- <Root>
+ <Root data-test={`file-${id}`}>
{dragHandle}
<Info>
<span>{name}</span>
@@ -34,16 +35,20 @@ const FileItem = ({
</Info>
<Buttons>
<button onClick={previewFile(id)}>
- <Icon color="#666">eye</Icon>
+ <Icon color={theme.colorPrimary} size={3}>
+ eye
+ </Icon>
</button>
<button onClick={removeFile(id)} title="Delete">
- <Icon color="#666">trash-2</Icon>
+ <Icon color={theme.colorPrimary} size={3}>
+ trash-2
+ </Icon>
</button>
</Buttons>
</Root>
)
-export default FileItem
+export default withTheme(FileItem)
// #region styles
const Root = styled.div`
diff --git a/packages/components-faraday/src/components/Files/FileSection.js b/packages/components-faraday/src/components/Files/FileSection.js
index 4d3ceb5d5..453006fd2 100644
--- a/packages/components-faraday/src/components/Files/FileSection.js
+++ b/packages/components-faraday/src/components/Files/FileSection.js
@@ -1,27 +1,24 @@
import React from 'react'
import PropTypes from 'prop-types'
-import { Icon } from '@pubsweet/ui'
+import { Icon, Spinner, th } from '@pubsweet/ui'
import styled, { withTheme } from 'styled-components'
import { DropTarget } from 'react-dnd'
import { NativeTypes } from 'react-dnd-html5-backend'
import { compose, getContext, withHandlers, withState } from 'recompose'
-import {
- SortableList,
- Spinner,
-} from 'pubsweet-components-faraday/src/components'
+import { SortableList } from 'pubsweet-components-faraday/src/components'
import FileItem from './FileItem'
import FilePicker from './FilePicker'
const DragHandle = withTheme(({ theme }) => (
<Handle>
- <Icon color={theme.colorBorder} size={14}>
+ <Icon color={theme.colorPrimary} size={3}>
chevron_up
</Icon>
- <Icon color={theme.colorBorder} size={10}>
+ <Icon color={theme.colorPrimary} size={3}>
menu
</Icon>
- <Icon color={theme.colorBorder} size={14}>
+ <Icon color={theme.colorPrimary} size={3}>
chevron_down
</Icon>
</Handle>
@@ -198,15 +195,15 @@ export default compose(
// #region styles
const Error = styled.span`
- color: ${({ theme }) => theme.colorError};
- font-size: ${({ theme }) => theme.fontSizeBaseSmall};
- margin-right: 5px;
+ color: ${th('colorError')};
+ font-size: ${th('fontSizeBaseSmall')};
+ margin-right: ${th('subGridUnit')};
`
const UploadButton = styled.div`
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
display: flex;
- margin-left: 5px;
+ margin-left: ${th('subGridUnit')};
`
const PickerContainer = styled.div`
@@ -216,7 +213,7 @@ const PickerContainer = styled.div`
`
const Title = styled.span`
- margin: 5px;
+ margin: ${th('subGridUnit')};
text-transform: uppercase;
`
@@ -227,7 +224,7 @@ const Header = styled.div`
`
const DropSection = styled.div`
- border: ${({ theme }) => theme.borderDefault};
+ border: ${th('borderDefault')};
border-top: ${({ isFirst, theme }) =>
isFirst ? theme.borderDefault : 'none'};
border-bottom: ${({ isLast, theme }) =>
@@ -236,18 +233,21 @@ const DropSection = styled.div`
over ? theme.colorSecondary : theme.backgroundColorReverse};
display: flex;
flex-direction: column;
- padding: 5px;
+ padding: ${th('subGridUnit')};
`
const Handle = styled.div`
align-items: center;
- border-right: ${({ theme }) => theme.borderDefault};
+ border-right: ${th('borderDefault')};
cursor: move;
display: flex;
flex-direction: column;
justify-content: center;
- margin-right: 10px;
- padding: 3px;
+ margin-right: calc(${th('subGridUnit')}*2);
+ padding: calc(${th('subGridUnit')}/2);
+ span {
+ padding: 0;
+ }
`
const InfoContainer = styled.div`
@@ -255,11 +255,11 @@ const InfoContainer = styled.div`
display: flex;
height: 60px;
justify-content: center;
- margin: 10px 0;
+ margin: calc(${th('subGridUnit')}*2) 0;
span {
- color: ${({ theme }) => theme.colorTextPlaceholder};
- font-size: ${({ theme }) => theme.themefontSizeBaseSmall};
+ color: ${th('colorTextPlaceholder')};
+ font-size: ${th('fontSizeBaseSmall')};
}
`
// #endregion
diff --git a/packages/components-faraday/src/components/Steps/Steps.js b/packages/components-faraday/src/components/Steps/Steps.js
index c6f5e28ef..f35a2f442 100644
--- a/packages/components-faraday/src/components/Steps/Steps.js
+++ b/packages/components-faraday/src/components/Steps/Steps.js
@@ -1,30 +1,31 @@
import React from 'react'
import PropTypes from 'prop-types'
+import { th } from '@pubsweet/ui'
import styled, { css } from 'styled-components'
import { compose, withHandlers, setDisplayName } from 'recompose'
const Separator = styled.div`
- background-color: #000;
+ background-color: ${th('colorPrimary')};
flex: 1;
height: 2px;
`
const StyledStep = styled.div`
align-items: center;
- border: 2px solid #000;
+ border: ${th('borderDefault')};
border-radius: 50%;
display: flex;
- height: 16px;
justify-content: center;
position: relative;
- width: 16px;
+ height: calc(${th('subGridUnit')} * 3);
+ width: calc(${th('subGridUnit')} * 3);
`
const bulletStyle = css`
- background-color: #000;
+ background-color: ${th('colorPrimary')};
border-radius: 50%;
- height: 10px;
- width: 10px;
+ height: calc(${th('subGridUnit')} * 2);
+ width: calc(${th('subGridUnit')} * 2);
`
const Bullet = styled.div`
@@ -34,16 +35,17 @@ const Bullet = styled.div`
const Success = styled.div`
${bulletStyle};
align-items: center;
- color: #fff;
+ color: ${th('colorBackground')};
display: flex;
- font-size: 12px;
- height: 18px;
+ font-size: ${th('fontSizeBaseSmall')};
+ height: ${th('fontSizeBase')};
justify-content: center;
- width: 18px;
+ width: ${th('fontSizeBase')};
`
const StepTitle = styled.span`
- font-size: 0.9em;
+ font-size: ${th('fontSizeBaseSmall')};
+ line-height: ${th('fontSizeBaseSmall')};
left: -45px;
position: absolute;
text-align: center;
--
GitLab