link styling

wax-prosemirror-components/src/components/link/LinkComponent.js

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

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>
+  ),
 };

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 />,
     };