new icons

wax-prosemirror-core/src/components/icons/icons.js

@@ -222,11 +222,16 @@ export default {
     </Svg>
   ),
   highlight: ({ className }) => (
-    <Svg
-      className={className}
-      enable-background="new 0 0 24 24"
-      viewBox="0 0 24 24"
-    />
+    <Svg className={className} viewBox="0 0 24 24">
+      <path
+        id="highlight"
+        d="M14.837,2.538L7.587,9.617L6.826,11.846L5.707,12.94L8.752,15.912L9.869,14.818L12.153,14.075L19.402,6.995L14.837,2.538ZM21.685,6.252C22.105,6.662 22.105,7.328 21.685,7.738L13.315,15.912L11.033,16.655L9.511,18.141C9.091,18.551 8.41,18.551 7.989,18.141L3.424,13.682C3.004,13.272 3.004,12.607 3.424,12.197L4.945,10.711L5.706,8.482L14.076,0.308C14.497,-0.103 15.178,-0.103 15.598,0.308L21.685,6.252ZM14.837,5.509L16.359,6.995L10.46,12.769L8.939,11.283L14.837,5.509ZM6.468,18L4.566,20L0,18.514L3.424,15.027"
+      />
+      <path
+        id="trait"
+        d="M7.447,18.31L7.64,18.499C8.254,19.097 9.248,19.097 9.86,18.499L10.053,18.31L22.506,18.31L22.506,21.417L1.876,21.417L1.876,19.65L4.411,20.475C4.594,20.535 4.796,20.484 4.928,20.345L6.83,18.345L6.794,18.31L7.447,18.31Z"
+      />
+    </Svg>
   ),
   title: ({ className }) => (
     <Svg className={className} viewBox="0 0 24 24">
@@ -328,7 +333,8 @@ export default {
       <g>
         <g>
           <g>
-            <path d="M11.88,9.14c1.28,0.06,1.61,1.15,1.63,1.66h1.79c-0.08-1.98-1.49-3.19-3.45-3.19C9.64,7.61,8,9,8,12.14 c0,1.94,0.93,4.24,3.84,4.24c2.22,0,3.41-1.65,3.44-2.95h-1.79c-0.03,0.59-0.45,1.38-1.63,1.44C10.55,14.83,10,13.81,10,12.14 C10,9.25,11.28,9.16,11.88,9.14z M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M12,20c-4.41,0-8-3.59-8-8 s3.59-8,8-8s8,3.59,8,8S16.41,20,12,20z" />
+            <path d="M16.8279 5.64748C16.1334 5.21583 15.306 5 14.3455 5C13.5476 5 12.8383 5.16547 12.2177 5.4964C11.5971 5.82734 11.0947 6.28777 10.7106 6.8777C10.4003 6.23022 9.9422 5.76259 9.33638 5.47482C8.74533 5.17266 7.99174 5.02158 7.07562 5.02158C6.35159 5.02158 5.62017 5.11511 4.88136 5.30216C4.14255 5.48921 3.51456 5.72662 2.99739 6.01439L3.59583 7.43885C4.08344 7.19424 4.608 6.98561 5.16949 6.81295C5.74576 6.64029 6.32942 6.55396 6.92047 6.55396C7.67406 6.55396 8.27249 6.74101 8.71578 7.11511C9.17384 7.48921 9.40287 8.14389 9.40287 9.07914V9.81295L7.40808 9.8777C6.19644 9.90647 5.18427 10.0719 4.37158 10.3741C3.57366 10.6619 2.97523 11.0719 2.57627 11.6043C2.19209 12.1367 2 12.7914 2 13.5683C2 14.3453 2.16254 14.9928 2.48761 15.5108C2.82747 16.0144 3.27814 16.3885 3.83964 16.6331C4.41591 16.8777 5.05867 17 5.76793 17C6.53629 17 7.18644 16.8993 7.71838 16.6978C8.2651 16.4964 8.73794 16.2158 9.1369 15.8561C9.55063 15.482 9.92742 15.0504 10.2673 14.5612C10.5776 15.0935 10.947 15.5468 11.3755 15.9209C11.8188 16.2806 12.3212 16.554 12.8827 16.741C13.4589 16.9137 14.0869 17 14.7666 17C14.8924 17 15.0157 16.9981 15.1364 16.9944V15.3775C15.037 15.38 14.9359 15.3813 14.8331 15.3813C13.7397 15.3813 12.8974 15.0576 12.3064 14.4101C11.7301 13.7482 11.4272 12.7266 11.3977 11.3453H19V10.1799C19 9.14388 18.8079 8.23741 18.4237 7.46043C18.0543 6.68345 17.5224 6.07914 16.8279 5.64748ZM4.81486 11.8849C5.34681 11.482 6.30726 11.2518 7.69622 11.1942L9.35854 11.1295V12.1655C9.35854 12.9137 9.21078 13.5324 8.91525 14.0216C8.63451 14.5108 8.24294 14.8777 7.74055 15.1223C7.25293 15.3525 6.69883 15.4676 6.07823 15.4676C5.45763 15.4676 4.95524 15.3165 4.57106 15.0144C4.20165 14.7122 4.01695 14.2374 4.01695 13.5899C4.01695 12.8561 4.28292 12.2878 4.81486 11.8849ZM12.2842 7.41727C12.7866 6.84173 13.4663 6.55396 14.3233 6.55396C14.9292 6.55396 15.4242 6.69065 15.8083 6.96403C16.1925 7.23741 16.4733 7.6259 16.6506 8.1295C16.8427 8.61871 16.9387 9.19424 16.9387 9.85611H11.442C11.5159 8.79137 11.7966 7.97842 12.2842 7.41727Z" />
+            <path d="M20.75 15.25V13H19.25V15.25H17V16.75H19.25V19H20.75V16.75H23V15.25H20.75Z" />
           </g>
         </g>
       </g>

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

@@ -12,11 +12,6 @@ const Wrapper = styled.div`
   font-size: 0;
   position: relative;
   z-index: 2;
-
-  button,
-  button:hover {
-    background: transparent;
-  }
 `;
 
 const DropWrapper = styled.div`
@@ -48,14 +43,10 @@ const TextHighlightingTool = ({ view: { dispatch, state }, item }) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const highlightDropDownOptions = [
-    { name: 'red', value: 'red' },
-    { name: 'Light blue', value: '#add8e6' },
-    { name: 'yellow', value: 'yellow' },
-    { name: 'green', value: '#90EE90' },
-    { name: 'gray', value: '#d3d3d3' },
-    { name: 'orange', value: 'orange' },
-    { name: 'brown', value: 'brown' },
-    { name: 'aquamarine', value: 'aquamarine' },
+    { name: 'yellow', value: '#ed0' },
+    { name: 'green', value: '#9d5' },
+    { name: 'yellow', value: '#4d8' },
+    { name: 'green', value: '#2cb' },
     { name: 'remove highlight', value: 'transparent' },
   ];
 
@@ -109,19 +100,17 @@ const TextHighlightingTool = ({ view: { dispatch, state }, item }) => {
   let isDisabled = !select(state, activeViewId, activeView);
   if (!isEditable) isDisabled = true;
 
+  const line = document.getElementById('trait');
+  if (line)
+    line.style.fill =
+      localStorage.getItem('lastBgColor') !== null
+        ? localStorage.getItem('lastBgColor')
+        : highlightDropDownOptions[0].name;
+
   const MenuButtonComponent = useMemo(
     () => (
       <Wrapper onDoubleClick={handleDblClk} ref={ref}>
-        <div
-          disabled={isDisabled}
-          style={{
-            backgroundColor:
-              localStorage.getItem('lastBgColor') !== null
-                ? localStorage.getItem('lastBgColor')
-                : highlightDropDownOptions[0].name,
-            opacity: isDisabled ? '0.6' : '1',
-          }}
-        >
+        <div disabled={isDisabled}>
           <MenuButton
             active={isOpen}
             disabled={isDisabled}