From 6ccd8cb656d286463a2a15b7596ce1fd2fce7267 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Fri, 23 Oct 2020 01:08:11 +0300
Subject: [PATCH] styling
---
editors/editoria/src/layout/EditorElements.js | 2 +-
editors/editoria/src/layout/EditoriaLayout.js | 5 ++---
.../editoria/src/layout/EditoriaMobileLayout.js | 6 +++---
editors/editoria/src/theme/theme.js | 10 +++++-----
.../ExandedFindAndReplaceComponent.js | 4 +---
.../src/components/findAndReplace/FindComponent.js | 5 ++---
wax-prosemirror-components/src/icons/icons.js | 4 +++-
.../src/ui/comments/CommentBubble.js | 4 ++--
.../src/ui/tabs/BlockElement.js | 14 ++++++++++----
wax-prosemirror-components/src/ui/tabs/Tabs.js | 2 +-
10 files changed, 30 insertions(+), 26 deletions(-)
diff --git a/editors/editoria/src/layout/EditorElements.js b/editors/editoria/src/layout/EditorElements.js
index c0dee5cb8..66b1215c7 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 a9a47afc9..4668f5075 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 4a48e4486..5a51b110d 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 002e763ff..c16aa568e 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 4393d703e..45300451e 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 70ac578a3..bb5ecc8c5 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 89df2f3f2..2e35a7fa4 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 945138a1e..2ddae27ba 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 4dd07887c..64c7e5ab4 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 cf4d9d3e9..91f4f051f 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 => {
--
GitLab