From 172a2910d51d87c7a63713a3d7cf945337ca1a7e Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Tue, 27 Oct 2020 21:11:42 +0200
Subject: [PATCH] link styling
---
.../src/components/link/LinkComponent.js | 31 +++++++++++++------
wax-prosemirror-components/src/icons/icons.js | 7 +++++
.../DisplayText.js | 2 +-
3 files changed, 30 insertions(+), 10 deletions(-)
diff --git a/wax-prosemirror-components/src/components/link/LinkComponent.js b/wax-prosemirror-components/src/components/link/LinkComponent.js
index b22d7b8f7..4ac075f6d 100644
--- a/wax-prosemirror-components/src/components/link/LinkComponent.js
+++ b/wax-prosemirror-components/src/components/link/LinkComponent.js
@@ -1,15 +1,20 @@
/* eslint react/prop-types: 0 */
import React, { useRef, useEffect, useState, useContext } from 'react';
import styled from 'styled-components';
+import { grid, th } from '@pubsweet/ui-toolkit';
import { WaxContext } from 'wax-prosemirror-core';
import { DocumentHelpers } from 'wax-prosemirror-utilities';
const Wrapper = styled.div`
- background: silver;
- display: inline-block;
- padding: 12px;
+ background: #fff;
+ 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-origin: 50% 50% 0px;
+ padding: ${grid(2)} ${grid(1)} ${grid(2)} ${grid(2)};
a {
- color: unset;
+ color: #3a4863;
text-decoration: none;
}
`;
@@ -35,10 +40,18 @@ const ButtonGroup = styled.div`
const StyledButton = styled.button`
margin-right: 10px;
- background: #777;
+ background: ${th('colorPrimary')};
+ cursor: pointer;
color: #fff;
`;
+const StyledButtonCancel = styled.button`
+ margin-right: 10px;
+ background: #fff
+ cursor: pointer;
+ color:${th('colorPrimary')};;
+`;
+
const LinkComponent = ({ mark, setPosition, position }) => {
const href = mark ? mark.attrs.href : null;
const linkMark = mark ? mark : null;
@@ -202,9 +215,9 @@ const LinkComponent = ({ mark, setPosition, position }) => {
Apply
</StyledButton>
- <StyledButton onClick={editLinkHref} type="button">
+ <StyledButtonCancel onClick={editLinkHref} type="button">
Cancel
- </StyledButton>
+ </StyledButtonCancel>
</>
)}
@@ -214,9 +227,9 @@ const LinkComponent = ({ mark, setPosition, position }) => {
Edit
</StyledButton>
- <StyledButton onClick={removeLink} type="button">
+ <StyledButtonCancel onClick={removeLink} type="button">
Remove
- </StyledButton>
+ </StyledButtonCancel>
</>
)}
</ButtonGroup>
diff --git a/wax-prosemirror-components/src/icons/icons.js b/wax-prosemirror-components/src/icons/icons.js
index 242b93d9f..7797e4614 100644
--- a/wax-prosemirror-components/src/icons/icons.js
+++ b/wax-prosemirror-components/src/icons/icons.js
@@ -274,4 +274,11 @@ export default {
</g>
</Svg>
),
+ chapterList: ({ className }) => (
+ <Svg className={className} viewBox="0 0 24 24" fill="none">
+ <title> Chapters </title>
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" />
+ </Svg>
+ ),
};
diff --git a/wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayText.js b/wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayText.js
index 0ad922f8c..a345abd8a 100644
--- a/wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayText.js
+++ b/wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayText.js
@@ -45,7 +45,7 @@ class DisplayText extends ToolGroup {
const second = {
id: '2',
- icon: 'code',
+ icon: 'chapterList',
component: <Empty />,
};
--
GitLab