change writing font and apply font sizes

wax-prosemirror-components/src/components/notes/NoteEditorContainer.js

 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
+import { th } from '@pubsweet/ui-toolkit';
 import NoteNumber from './NoteNumber';
 
+const fontWriting = css`
+  font-family: ${th('fontWriting')};
+  font-size: ${th('fontSizeBase')};
+  color: ${th('colorText')};
+`;
+
 const NoteEditorContainerStyled = styled.div`
   display: flex;
   flex-direction: row;
@@ -10,6 +17,8 @@ const NoteEditorContainerStyled = styled.div`
   width: 100%;
   position: relative;
   margin-bottom: 5px;
+
+  ${fontWriting};
 `;
 
 const NoteStyled = styled.div`

wax-prosemirror-components/src/ui/buttons/MenuButton.js

@@ -37,6 +37,7 @@ const Wrapper = styled.button.attrs(props => ({
   border-radius: 2px;
   cursor: pointer;
   font-family: ${th('fontInterface')};
+  font-size: ${th('fontSizeBase')};
   height: 28px;
   outline: none;
   padding: 2px;

wax-prosemirror-layouts/src/layouts/EditorElements.js

@@ -4,12 +4,17 @@ import { th } from '@pubsweet/ui-toolkit';
 
 /* All styles regarding ProseMirror surface and elements */
 
+const fontWriting = css`
+  font-family: ${th('fontWriting')};
+  font-size: ${th('fontSizeBase')};
+  color: ${th('colorText')};
+`;
+
 export default css`
   .ProseMirror {
     background: white;
     counter-reset: footnote;
-    font-family: ${th('fontWriting')};
-    color: ${th('colorText')};
+    ${fontWriting}
 
     p::selection,
     p span::selection {

wax-prosemirror-layouts/src/layouts/EditoriaLayout.js

@@ -28,6 +28,7 @@ const divider = css`
 const Wrapper = styled.div`
   background: ${th('colorBackground')};
   font-family: ${th('fontInterface')};
+  font-size: ${th('fontSizeBase')};
 
   display: flex;
   flex-direction: column;

wax-prosemirror-themes/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@pubsweet/ui-toolkit": "^2.2.13",
     "cokourier-prime-sans": "git+https://gitlab.coko.foundation/julientaq/cokourier-sans-prime.git",
+    "fontsource-merriweather": "^3.0.9",
     "typeface-fira-sans-condensed": "^0.0.54",
     "typeface-vollkorn": "^0.0.54"
   }

wax-prosemirror-themes/src/coko-theme/index.js

 /* eslint-disable import/extensions */
 import 'typeface-fira-sans-condensed';
-import 'typeface-vollkorn';
+import 'fontsource-merriweather';
+// import 'typeface-vollkorn';
 
 import { css } from 'styled-components';
 
@@ -19,19 +20,17 @@ const cokoTheme = {
   colorTextPlaceholder: '#595959',
   colorWarning: '#ffc107',
 
-  /*Buttons*/
-  colorButton: '#777',
   /* Text variables */
 
   // fonts
   fontInterface: 'Fira Sans Condensed',
   fontHeading: 'Fira Sans Condensed',
   fontReading: 'Vollkorn',
-  fontWriting: 'Vollkorn',
+  fontWriting: 'Merriweather',
 
   // font sizes
-  fontSizeBase: '16px',
-  fontSizeBaseSmall: '14px',
+  fontSizeBase: '14px',
+  fontSizeBaseSmall: '12px',
   fontSizeHeading1: '40px',
   fontSizeHeading2: '36px',
   fontSizeHeading3: '28px',

yarn.lock

@@ -8186,6 +8186,11 @@ follow-redirects@^1.0.0:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.12.1.tgz#de54a6205311b93d60398ebc01cf7015682312b6"
   integrity sha512-tmRv0AVuR7ZyouUHLeNSiO6pqulF7dYa3s19c6t+wz9LD69/uSzdMxJ2S91nTI9U3rt/IldxpzMOFejp6f0hjg==
+fontsource-merriweather@^3.0.9:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/fontsource-merriweather/-/fontsource-merriweather-3.0.9.tgz#c170a179e332a530c5308274fe4a7fde7cf7e3ab"
+  integrity sha512-ugq1m28EGWW1oNltVs0Ewl5p6KTX/8yNqMzBQ26G8S4hs4gLkKuSi+3nogM4PwF0AkGtT9PobSUkNUf4Noxg9w==
+
 for-in@^0.1.3:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"