Skip to content
Snippets Groups Projects
Commit 599ff431 authored by chris's avatar chris
Browse files

styling

parent ca772a9b
No related branches found
No related tags found
1 merge request!190Find and replace
......@@ -14,6 +14,7 @@ const cokoTheme = {
colorFurniture: '#CCC',
colorBorder: '#EBEBF0',
colorBackgroundHue: '#F1F5FF',
colorBackgroundTabs: '#e1ebff',
colorSuccess: '#008800',
colorError: 'indianred',
colorText: '#111',
......
......@@ -11,7 +11,7 @@ const Wrapper = styled.div`
> button,
> div {
margin: 0 2px;
margin: 0 5px;
}
`;
......
......@@ -131,9 +131,9 @@ export default ({ comment, top, commentId, recalculateTops }) => {
const onTextAreaBlur = (content, isNewComment) => {
// TODO Save into local storage
if (content !== '') {
onClickPost(content);
}
// if (content !== '') {
// onClickPost(content);
// }
if (content === '' && isNewComment) {
onClickResolve();
......
import React from 'react';
import { grid } from '@pubsweet/ui-toolkit';
import { grid, th } from '@pubsweet/ui-toolkit';
import styled from 'styled-components';
import NoteNumber from './NoteNumber';
......@@ -23,7 +23,7 @@ const NoteStyled = styled.div`
height: auto;
margin-top: 10px;
height: 100%;
border-bottom: 1px solid black;
box-shadow: 0 2px 2px -2px ${th('colorPrimary')};
&:focus {
outline: none;
......
......@@ -7,20 +7,20 @@ import CommentItemList from './CommentItemList';
import CommentReply from './CommentReply';
const inactive = css`
background: #e2e2e2;
background: ${th('colorBackgroundHue')};
cursor: pointer;
transition: box-shadow 0.2s;
/* transition: background-color 0.2s; */
&:hover {
/* background: white; */
box-shadow: 0 0 1px 2px gray;
box-shadow: 0 0 1px 2px ${th('colorBackgroundTabs')};
}
`;
const Wrapper = styled.div`
background: white;
border: 1px solid gray;
border: 1px solid ${th('colorBackgroundTabs')};
border-radius: 3px;
box-sizing: border-box;
display: flex;
......@@ -38,13 +38,15 @@ const Head = styled.div`
const Resolve = styled.button`
align-self: flex-end;
border: none;
background: none;
color: #0042c7;
cursor: pointer;
margin-bottom: 12px;
&:hover {
background: gold;
border-color: gold;
border-radius: 3px;
background: ${th('colorBackgroundHue')};
border: none;
}
`;
......
......@@ -5,7 +5,7 @@ import styled, { css } from 'styled-components';
import { grid, th } from '@pubsweet/ui-toolkit';
const Wrapper = styled.div`
background: #e2e2e2;
background: ${th('colorBackgroundHue')};
display: flex;
flex-direction: column;
padding: ${grid(2)} ${grid(4)};
......@@ -14,8 +14,10 @@ const Wrapper = styled.div`
const TextWrapper = styled.div``;
const ReplyTextArea = styled.textarea`
background: #e2e2e2;
box-sizing: border-box;
background: ${th('colorBackgroundHue')};
border: 3px solid ${th('colorBackgroundTabs')};
position: relative;
right: 5px;
font-family: ${th('fontWriting')};
width: 100%;
`;
......@@ -27,7 +29,7 @@ const ActionWrapper = styled.div`
`;
const primary = css`
background: gray;
background: ${th('colorPrimary')};
color: white;
`;
......@@ -85,6 +87,8 @@ const CommentReply = props => {
onBlur={() => onBlur(commentInput.current.value)}
placeholder={isNewComment ? 'Write comment...' : 'Reply...'}
onChange={() => setCommentValue(commentInput.current.value)}
cols="5"
rows="3"
onKeyDown={e => {
if (e.keyCode === 13 && !e.shiftKey) {
e.preventDefault();
......
......@@ -12,15 +12,15 @@ const Wrapper = styled.div`
const Tabs = styled.div`
display: flex;
flex-direction: column;
background: #e3e3e3;
background: #fff;
`;
const activeTab = css`
box-shadow: 0 0 3px ${th('colorPrimary')};
box-shadow: 0 0 1px ${th('colorPrimary')};
background: ${th('colorBackgroundTabs')};
`;
const Tab = styled.div`
background: gainsboro;
padding: 8px;
margin: 0 4px 4px 4px;
cursor: pointer;
......@@ -32,7 +32,7 @@ const Tab = styled.div`
${props => props.active && activeTab}
&:hover {
background: silver;
background: ${th('colorBackgroundTabs')};
}
`;
......
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