fix: fix icons on rich text editor component

Adslot · Oct 30, 2023 · 125e869 · 125e869
1 parent 25dee58
commit 125e869
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 10 deletions.
diff --git a/src/components/RichTextEditor/BlockStyleButtons.jsx b/src/components/RichTextEditor/BlockStyleButtons.jsx
@@ -1,12 +1,19 @@
 import React from 'react';
 import { RichUtils } from 'draft-js';
 import ToolbarButton from './ToolbarButton';
-import BulletIcon from '../../styles/icons/bullet.svg';
-import NumberIcon from '../../styles/icons/number.svg';
+import './styles.css';
 
 const BLOCK_TYPES = [
-  { label: <BulletIcon data-testid="bullet" />, style: 'unordered-list-item', ariaLabel: 'Unordered list' },
-  { label: <NumberIcon data-testid="number" />, style: 'ordered-list-item', ariaLabel: 'Ordered list' },
+  {
+    label: <div className="bullet-icon" data-testid="bullet" />,
+    style: 'unordered-list-item',
+    ariaLabel: 'Unordered list',
+  },
+  {
+    label: <div className="number-icon" data-testid="number" />,
+    style: 'ordered-list-item',
+    ariaLabel: 'Ordered list',
+  },
 ];
 
 const BlockStyleButtons = (props) => {

diff --git a/src/components/RichTextEditor/InlineStyleButtons.jsx b/src/components/RichTextEditor/InlineStyleButtons.jsx
@@ -1,15 +1,17 @@
 import React from 'react';
 import { RichUtils } from 'draft-js';
 import ToolbarButton from './ToolbarButton';
-import BoldIcon from '../../styles/icons/bold.svg';
-import ItalicIcon from '../../styles/icons/italic.svg';
-import UnderlineIcon from '../../styles/icons/underline.svg';
+import './styles.css';
 
 const INLINE_STYLES = [
-  { label: <BoldIcon data-testid="bold" />, style: 'BOLD', ariaLabel: 'Bold' },
-  { label: <ItalicIcon data-testid="italics" aria-label="italic" />, style: 'ITALIC', ariaLabel: 'Italic' },
+  { label: <div className="bold-icon" data-testid="bold" alt="icon" />, style: 'BOLD', ariaLabel: 'Bold' },
   {
-    label: <UnderlineIcon data-testid="underline" aria-label="Underline" />,
+    label: <div className="italic-icon" data-testid="italics" aria-label="italic" alt="icon" />,
+    style: 'ITALIC',
+    ariaLabel: 'Italic',
+  },
+  {
+    label: <div className="underline-icon" data-testid="underline" aria-label="Underline" alt="icon" />,
     style: 'UNDERLINE',
     ariaLabel: 'Underline',
   },

diff --git a/src/components/RichTextEditor/styles.css b/src/components/RichTextEditor/styles.css
@@ -204,3 +204,23 @@
   border: $color-white 2px solid;
   background-color: $color-white;
 }
+
+.bullet-icon {
+  background-image: url('../../styles/icons/bullet.svg');
+}
+
+.number-icon {
+  background-image: url('../../styles/icons/number.svg');
+}
+
+.bold-icon {
+  background-image: url('../../styles/icons/bold.svg');
+}
+
+.italic-icon {
+  background-image: url('../../styles/icons/italic.svg');
+}
+
+.underline-icon {
+  background-image: url('../../styles/icons/underline.svg');
+}