tool overrrides

wax-prosemirror-services/src/HighlightService/components/TextHighlightingTool.js

 import React, { useMemo, useState, useRef, useContext } from 'react';
 import styled from 'styled-components';
-import { grid } from '@pubsweet/ui-toolkit';
+import { grid, override } from '@pubsweet/ui-toolkit';
 import { v4 as uuidv4 } from 'uuid';
 import {
   WaxContext,
@@ -25,6 +25,8 @@ const DropWrapper = styled.div`
   position: absolute;
   top: 32px;
   width: max-content;
+
+  ${override('Wax.HighlightToolWrapper')}
 `;
 const TextHighlightComponent = styled.div`
   background: white;

wax-prosemirror-services/src/SpecialCharactersService/components/SpecialCharactersTool.js

 import React, { useContext, useMemo, useState, useRef } from 'react';
 import styled from 'styled-components';
-import { grid } from '@pubsweet/ui-toolkit';
+import { grid, override } from '@pubsweet/ui-toolkit';
 import {
   WaxContext,
   useOnClickOutside,
@@ -19,6 +19,8 @@ const DropWrapper = styled.div`
   margin-top: ${grid(1)};
   position: absolute;
   top: 32px;
+
+  ${override('Wax.SpecialCharacterToolWrapper')}
 `;
 
 const SpecialCharactersTool = ({ item }) => {

wax-prosemirror-services/src/TransformService/components/TransformCaseComponent.js

 import React, { useContext, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
-import { grid } from '@pubsweet/ui-toolkit';
+import { grid, override } from '@pubsweet/ui-toolkit';
 import { v4 as uuid } from 'uuid';
 import {
   WaxContext,
@@ -21,6 +21,8 @@ const DropWrapper = styled.div`
   position: absolute;
   top: 32px;
   width: max-content;
+
+  ${override('Wax.TransformToolWrapper')}
 `;
 const TextTransformCaseComponent = styled.div`
   background: white;