diff --git a/editors/editoria/src/layout/EditorElements.js b/editors/editoria/src/layout/EditorElements.js
index c0dee5cb87eda857bc1a7db9faef01c54eac627e..66b1215c748d31adba1276cf6ec6e212b44a96a9 100644
--- a/editors/editoria/src/layout/EditorElements.js
+++ b/editors/editoria/src/layout/EditorElements.js
@@ -258,7 +258,7 @@ export default css`
}
span.search-result {
- background: grey;
+ background: #bee594;
}
/* == Math Nodes ======================================== */
diff --git a/editors/editoria/src/layout/EditoriaLayout.js b/editors/editoria/src/layout/EditoriaLayout.js
index a9a47afc9bdaa2d352dfa2b8878fe10325995686..4668f50752ec28a48bdb240960e9e28ef49a27da 100644
--- a/editors/editoria/src/layout/EditoriaLayout.js
+++ b/editors/editoria/src/layout/EditoriaLayout.js
@@ -4,7 +4,6 @@ import PanelGroup from 'react-panelgroup';
import { DocumentHelpers } from 'wax-prosemirror-utilities';
import { WaxContext, ComponentPlugin } from 'wax-prosemirror-core';
import { grid, th } from '@pubsweet/ui-toolkit';
-import { debounce } from 'lodash';
import { cokoTheme } from '../theme';
import EditorElements from './EditorElements';
@@ -13,7 +12,7 @@ import '~../../katex/dist/katex.min.css';
const divider = css`
.panelGroup {
- background: ${th('colorBackgroundHue')};
+ background: #fff;
}
.divider {
> div {
@@ -111,7 +110,6 @@ const CommentsContainer = styled.div`
`;
const CommentsContainerNotes = styled.div`
- background: ${th('colorBackgroundHue')};
display: flex;
flex-direction: column;
width: 35%;
@@ -134,6 +132,7 @@ const NotesAreaContainer = styled.div`
`;
const NotesContainer = styled.div`
+ box-shadow: 0 0 8px #ecedf1;
counter-reset: footnote-view;
display: flex;
flex-direction: column;
diff --git a/editors/editoria/src/layout/EditoriaMobileLayout.js b/editors/editoria/src/layout/EditoriaMobileLayout.js
index 4a48e4486fee424d164c6166bc6906d8bf886f60..5a51b110d0cfee6101396e33963689284350ef4b 100644
--- a/editors/editoria/src/layout/EditoriaMobileLayout.js
+++ b/editors/editoria/src/layout/EditoriaMobileLayout.js
@@ -13,7 +13,7 @@ import '~../../katex/dist/katex.min.css';
const divider = css`
.panelGroup {
- background: ${th('colorBackgroundHue')};
+ background: #fff;
}
.divider {
> div {
@@ -67,7 +67,7 @@ const TopMenu = styled.div`
}
> div:not(:last-child) {
border-right: ${th('borderWidth')} ${th('borderStyle')}
- ${th('colorFurniture')};
+ ${th('colorBorder')};
}
button: {
height: 20px;
@@ -117,13 +117,13 @@ const CommentsContainer = styled.div`
`;
const CommentsContainerNotes = styled.div`
- background: ${th('colorBackgroundHue')};
display: flex;
flex-direction: column;
height: 100%;
`;
const NotesAreaContainer = styled.div`
+ box-shadow: 0 0 8px #ecedf1;
background: #fff;
display: flex;
flex-direction: row;
diff --git a/editors/editoria/src/theme/theme.js b/editors/editoria/src/theme/theme.js
index 002e763ff552d896c2e2e7d159e775315d88fb88..c16aa568ee4a01ba1f83a5cfdd2d0f07242485f5 100644
--- a/editors/editoria/src/theme/theme.js
+++ b/editors/editoria/src/theme/theme.js
@@ -9,19 +9,19 @@ import { css } from 'styled-components';
const cokoTheme = {
/* Colors */
colorBackground: 'white',
- colorPrimary: '#808080',
+ colorPrimary: '#525E76',
colorSecondary: '#E7E7E7',
colorFurniture: '#CCC',
- colorBorder: '#AAA',
- colorBackgroundHue: '#F7F7F7',
+ colorBorder: '#EBEBF0',
+ colorBackgroundHue: '#F1F5FF',
colorSuccess: '#008800',
colorError: 'indianred',
colorText: '#111',
colorTextReverse: '#FFF',
colorTextPlaceholder: '#595959',
colorWarning: '#ffc107',
- colorBackgroundToolBar: '#D9D9D9',
- colorSelection: '#D3D3D3',
+ colorBackgroundToolBar: '#fff',
+ colorSelection: '#C5D7FE',
colorBackgroundButton: '#0042C7',
/* Text variables */
diff --git a/wax-prosemirror-components/src/components/findAndReplace/ExandedFindAndReplaceComponent.js b/wax-prosemirror-components/src/components/findAndReplace/ExandedFindAndReplaceComponent.js
index 4393d703e362752ff020b57ec7aeb82d283964f7..45300451e697cb164e80fca2b0627ea4b6fcf630 100644
--- a/wax-prosemirror-components/src/components/findAndReplace/ExandedFindAndReplaceComponent.js
+++ b/wax-prosemirror-components/src/components/findAndReplace/ExandedFindAndReplaceComponent.js
@@ -18,12 +18,10 @@ const Wrapper = styled.div`
font-size: 15px;
width: 400px;
height: 300px;
- background: ${th('colorBackgroundHue')};
+ background: #fff;
font-family: ${th('fontTools')};
- border-radius: 1.03093% / 8%;
box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px 0px,
rgba(9, 30, 66, 0.31) 0px 0px 1px 0px;
- transform: rotate(0deg);
transform-origin: 50% 50% 0px;
padding: ${grid(2)};
`;
diff --git a/wax-prosemirror-components/src/components/findAndReplace/FindComponent.js b/wax-prosemirror-components/src/components/findAndReplace/FindComponent.js
index 70ac578a39eb35b32367f2c64b537ab684da47cc..bb5ecc8c5335ef344a00e34f92597810e74a56bc 100644
--- a/wax-prosemirror-components/src/components/findAndReplace/FindComponent.js
+++ b/wax-prosemirror-components/src/components/findAndReplace/FindComponent.js
@@ -9,18 +9,17 @@ import React, {
} from 'react';
import { debounce, each } from 'lodash';
import styled from 'styled-components';
-import { grid, th } from '@pubsweet/ui-toolkit';
+import { grid } from '@pubsweet/ui-toolkit';
import { WaxContext } from 'wax-prosemirror-core';
import Icon from '../../helpers/Icon';
import helpers from './helpers';
const Wrapper = styled.div`
width: 400px;
- background: ${th('colorBackgroundHue')};
+ background: #fff;
border-radius: 1.03093% / 8%;
box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px 0px,
rgba(9, 30, 66, 0.31) 0px 0px 1px 0px;
- transform: rotate(0deg);
transform-origin: 50% 50% 0px;
padding: ${grid(2)};
`;
diff --git a/wax-prosemirror-components/src/icons/icons.js b/wax-prosemirror-components/src/icons/icons.js
index 89df2f3f2a9ae08dfd66229725a98147a8f20660..2e35a7fa4eb43c747ee3386fbc287dd4445c96cd 100644
--- a/wax-prosemirror-components/src/icons/icons.js
+++ b/wax-prosemirror-components/src/icons/icons.js
@@ -5,6 +5,8 @@
import React from 'react';
import styled from 'styled-components';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import { th } from '@pubsweet/ui-toolkit';
+
import {
faCheck,
faParagraph,
@@ -23,7 +25,7 @@ const Svg = styled.svg.attrs(() => ({
}))`
height: 24px;
width: 24px;
- fill: gray;
+ fill: ${th('colorPrimary')};
vertical-align: top;
`;
diff --git a/wax-prosemirror-components/src/ui/comments/CommentBubble.js b/wax-prosemirror-components/src/ui/comments/CommentBubble.js
index 945138a1e815dfd815a65138503cc1e642a176e7..2ddae27ba424ff2570634ece488af1b5e666006f 100644
--- a/wax-prosemirror-components/src/ui/comments/CommentBubble.js
+++ b/wax-prosemirror-components/src/ui/comments/CommentBubble.js
@@ -1,6 +1,6 @@
import React from 'react';
import styled from 'styled-components';
-
+import { th } from '@pubsweet/ui-toolkit';
/**
* SVG source
* https://material.io/resources/icons/?search=chat&icon=chat&style=baseline
@@ -40,7 +40,7 @@ const IconSVG = props => {
const Icon = styled(IconSVG)`
height: 28px;
width: 28px;
- fill: gray;
+ fill: ${th('colorPrimary')};
`;
const Bubble = props => {
diff --git a/wax-prosemirror-components/src/ui/tabs/BlockElement.js b/wax-prosemirror-components/src/ui/tabs/BlockElement.js
index 4dd07887cebaddf5d2a6ffb2e3e61d94929729c9..64c7e5ab4ff2f0be30ca51be3d5e536470899d61 100644
--- a/wax-prosemirror-components/src/ui/tabs/BlockElement.js
+++ b/wax-prosemirror-components/src/ui/tabs/BlockElement.js
@@ -1,7 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
-import { th } from '@pubsweet/ui-toolkit';
import Button from '../../components/Button';
@@ -10,14 +9,21 @@ const Wrapper = styled.div`
button {
border-radius: 4px;
margin-left: 4px;
+ padding-left: 25px;
+ position: relative;
+ left: -33px;
}
`;
const Box = styled.div`
- width: 28px;
- height: 28px;
+ width: 22px;
+ height: 22px;
+ position: relative;
+ top: 3px;
+ right: 3px;
border-radius: 4px;
- background: gray;
+ background: #bfc4cd;
+ z-index: 999;
`;
const StyledButton = styled(Button)``;
diff --git a/wax-prosemirror-components/src/ui/tabs/Tabs.js b/wax-prosemirror-components/src/ui/tabs/Tabs.js
index cf4d9d3e9e87604603f857f8343a5ca98c4f7940..91f4f051fb3da6ad29905542ec330bf5cc771dc0 100644
--- a/wax-prosemirror-components/src/ui/tabs/Tabs.js
+++ b/wax-prosemirror-components/src/ui/tabs/Tabs.js
@@ -39,7 +39,7 @@ const Tab = styled.div`
const Content = styled.div`
width: 100%;
height: 100%;
- background: gainsboro;
+ background: #fff;
`;
const TabsPane = props => {