styling

editors/editoria/src/layout/EditorElements.js

@@ -258,7 +258,7 @@ export default css`
   }
 
   span.search-result {
-    background: grey;
+    background: #bee594;
   }
 
   /* == Math Nodes ======================================== */

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;

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;

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 */
 

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)};
 `;

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)};
 `;

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;
 `;
 

wax-prosemirror-components/src/ui/comments/CommentBubble.js

 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 => {

wax-prosemirror-components/src/ui/tabs/BlockElement.js

 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)``;

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 => {