fix: dark mode

tiavina-mika · Jun 29, 2024 · d1839a0 · d1839a0
1 parent 7cf163d
commit d1839a0
Show file tree

Hide file tree

Showing 15 changed files with 68 additions and 124 deletions.
diff --git a/src/components/ColorPicker.tsx b/src/components/ColorPicker.tsx
@@ -1,4 +1,4 @@
-import { Tooltip } from "@mui/material";
+import { Tooltip, useTheme } from "@mui/material";
 import { Editor } from "@tiptap/react";
 
 import { ChangeEvent, useEffect, useState } from "react";
@@ -39,11 +39,14 @@ type Props = {
 const ColorPicker = ({ editor }: Props) => {
   const [color, setColor] = useState<string>("");
 
+  const theme = useTheme();
+
   // add default styles if not defined
   useEffect(() => {
     const currentColor = editor.getAttributes("textStyle").color;
-    setColor(currentColor || '#000000');
-  }, [editor])
+    const defaultColor = theme.palette.mode === "dark" ? "#ffffff" : "#000000";
+    setColor(currentColor || defaultColor);
+  }, [editor, theme.palette.mode])
 
   const handleInput = (event: ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value;

diff --git a/src/components/TextEditor.tsx b/src/components/TextEditor.tsx
@@ -13,13 +13,14 @@ import { useTextEditor } from "../hooks/useTextEditor";
 
 import Toolbar from './Toolbar';
 import { IEditorToolbar, TextEditorProps } from "../types";
+import { getBorderColor } from "../utils/app.utils";
 
 const defaultMenuToolbar: IEditorToolbar[] = ['heading', 'bold', 'italic', 'underline', 'link', 'bulletList'];
 
 const classes = {
   input: (theme: Theme) => ({
     paddingBottom: 0,
-    border: `1px solid ${theme.palette.grey[300]} !important`,
+    border: `1px solid ${getBorderColor(theme)} !important`,
     borderTopRightRadius: 4,
     borderBottomRightRadius: 4,
     borderBottomLeftRadius: 4,
@@ -52,8 +53,8 @@ const classes = {
     fontSize: theme.typography.pxToRem(15),
     marginRight: theme.spacing(1),
     '&.Mui-selected': {
-      color: '#000',
-      backgroundColor: '#ededed',
+      color: theme.palette.mode === 'light' ? '#000' : '#fff',
+      backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[800],
       borderTopLeftRadius: 2,
       borderTopRightRadius: 2,
     },

diff --git a/src/components/Toolbar.tsx b/src/components/Toolbar.tsx
@@ -9,7 +9,7 @@ import LinkDialog from "./LinkDialog";
 import Heading from "./Heading";
 import ColorPicker from "./ColorPicker";
 import { IEditorToolbar, ILabels } from "../types.d";
-import { defaultEditorToolbar, showTextEditorToolbarMenu } from "../utils/app.utils";
+import { defaultEditorToolbar, getBorderColor, showTextEditorToolbarMenu } from "../utils/app.utils";
 import YoutubeDialog from "./YoutubeDialog";
 import Bold from "../icons/Bold";
 import Italic from "../icons/Italic";
@@ -34,27 +34,38 @@ import Icon from "../icons/Icon";
 const classes = {
   toolbar: (theme: Theme) => ({
     marginTop: -1,
-    borderTop: "1px solid " + theme.palette.grey[300],
+    borderTop: '1px solid ' + getBorderColor(theme),
     paddingLeft: 8,
     paddingRight: 8,
   }),
-  button: (isActive: boolean, split: boolean) => (theme: Theme) => ({
-    borderRadius: 0,
-    border: "none",
-    borderRight: split ? `1px solid ${theme.palette.grey[300]}` : "none",
-    cursor: "pointer",
-    height: 24,
-    width: 24,
-    padding: 18,
-    backgroundColor: isActive ? theme.palette.grey[100] : "#fff",
-    "&.Mui-disabled": {
-      opacity: 0.4
+  button: (isActive: boolean, split: boolean) => (theme: Theme) => {
+    let backgroundColor = 'transparent';
+    const isLightMode = theme.palette.mode === "light";
+    if (isActive) {
+      if (isLightMode) {
+        backgroundColor = theme.palette.grey[100];
+      } else {
+        backgroundColor = theme.palette.grey[800];
+      }
     }
-  }),
+
+    return {
+      borderRadius: 0,
+      border: "none",
+      borderRight: split ? `1px solid ${getBorderColor(theme)}` : "none",
+      cursor: "pointer",
+      height: 24,
+      width: 24,
+      padding: 18,
+      backgroundColor,
+      "&.Mui-disabled": {
+        opacity: 0.4
+      }
+    };
+  },
   splittedBorder: (theme: Theme) => {
-    const borderColor = theme.palette.grey[300];
     return {
-      borderRight: "1px solid " + borderColor
+      borderRight: "1px solid " + getBorderColor(theme)
     };
   },
 };

diff --git a/src/dev/App.tsx b/src/dev/App.tsx
@@ -1,9 +1,7 @@
 import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
-import { Container, ThemeProvider } from '@mui/material';
+import { Container, CssBaseline, ThemeProvider, createTheme } from '@mui/material';
 import TextEditor from '../components/TextEditor';
 
-import { getTheme } from './theme.utils';
-
 const mentions = [
   { label: "Lea Thompson", value: "xxxx1" },
   { label: "Cyndi Lauper", value: "xxxx2" },
@@ -32,13 +30,19 @@ const mentions = [
   { label: "Lisa Bonet", value: "xxxx25" }
 ];
 
-const html = "<h1>Hello world</h1>";
 const currentUser = mentions[0];
-const theme = getTheme();
+
+const theme = createTheme({
+  palette: {
+    mode: 'dark',
+  },
+});
 
 const App = () => {
   return (
     <ThemeProvider theme={theme}>
+      <CssBaseline />
+
       <EmotionThemeProvider theme={theme}>
         <Container>
           <TextEditor

diff --git a/src/dev/theme.utils.ts b/src/dev/theme.utils.ts
diff --git a/src/icons/Bold.tsx b/src/icons/Bold.tsx
@@ -4,10 +4,10 @@ const Bold = () => {
     return (
       <SvgIcon>
         <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="19.29" height="24" viewBox="0 0 19.29 24">
-          <path d="M12.33,24H0V0H11.33a7,7,0,0,1,5.34,11.53A7,7,0,0,1,12.33,24ZM4,20h8.31a3,3,0,0,0,1.14-.23,3,3,0,0,0,1-.65,3,3,0,0,0,.65-1,3,3,0,0,0,0-2.3,3,3,0,0,0-.65-1,3,3,0,0,0-1-.65A3,3,0,0,0,12.31,14H4ZM4,10h7.33a3,3,0,0,0,1.15-.23,2.81,2.81,0,0,0,1-.65,3,3,0,0,0,.65-1,3,3,0,0,0,0-2.3,3,3,0,0,0-.65-1,2.81,2.81,0,0,0-1-.65A3,3,0,0,0,11.33,4H4Z" fill="#303030"/>
+          <path fill="currentColor" d="M12.33,24H0V0H11.33a7,7,0,0,1,5.34,11.53A7,7,0,0,1,12.33,24ZM4,20h8.31a3,3,0,0,0,1.14-.23,3,3,0,0,0,1-.65,3,3,0,0,0,.65-1,3,3,0,0,0,0-2.3,3,3,0,0,0-.65-1,3,3,0,0,0-1-.65A3,3,0,0,0,12.31,14H4ZM4,10h7.33a3,3,0,0,0,1.15-.23,2.81,2.81,0,0,0,1-.65,3,3,0,0,0,.65-1,3,3,0,0,0,0-2.3,3,3,0,0,0-.65-1,2.81,2.81,0,0,0-1-.65A3,3,0,0,0,11.33,4H4Z" />
         </svg>
       </SvgIcon>
     );
 }
 
-export default Bold;
+export default Bold;
diff --git a/src/icons/BulletList.tsx b/src/icons/BulletList.tsx
@@ -15,4 +15,4 @@ const BulletList = () => {
     );
 }
 
-export default BulletList;
+export default BulletList;
diff --git a/src/icons/Italic.tsx b/src/icons/Italic.tsx
@@ -4,10 +4,10 @@ const Italic = () => {
     return (
       <SvgIcon>
         <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M13.75 1.75V0.25H4V1.75H7.855L4.5775 12.25H0.25V13.75H10V12.25H6.145L9.4225 1.75H13.75Z" fill="#303030"/>
+          <path d="M13.75 1.75V0.25H4V1.75H7.855L4.5775 12.25H0.25V13.75H10V12.25H6.145L9.4225 1.75H13.75Z" fill="currentColor"/>
         </svg>
       </SvgIcon>
     );
 }
 
-export default Italic;
+export default Italic;
diff --git a/src/icons/Link.tsx b/src/icons/Link.tsx
@@ -4,11 +4,11 @@ const Link = () => {
     return (
       <SvgIcon>
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M21.9368 5.07013C21.5188 4.65061 21.022 4.31774 20.475 4.09062C19.928 3.8635 19.3416 3.74658 18.7493 3.74658C18.1571 3.74658 17.5706 3.8635 17.0236 4.09062C16.4767 4.31774 15.9799 4.65061 15.5618 5.07013L16.6268 6.13513C16.9061 5.85591 17.2375 5.63442 17.6024 5.4833C17.9672 5.33219 18.3582 5.25441 18.7531 5.25441C19.148 5.25441 19.539 5.33219 19.9038 5.4833C20.2686 5.63442 20.6001 5.85591 20.8793 6.13513C21.1586 6.41435 21.38 6.74584 21.5312 7.11066C21.6823 7.47548 21.7601 7.8665 21.7601 8.26138C21.7601 8.65626 21.6823 9.04728 21.5312 9.4121C21.38 9.77692 21.1586 10.1084 20.8793 10.3876L14.8793 16.3876C14.3164 16.9515 13.5525 17.2687 12.7557 17.2695C11.9589 17.2702 11.1945 16.9543 10.6306 16.3914C10.0667 15.8285 9.74946 15.0646 9.74876 14.2678C9.74806 13.471 10.0639 12.7065 10.6268 12.1426L11.6843 11.0776L10.6268 10.0126L9.56183 11.0776C9.14231 11.4957 8.80944 11.9925 8.58232 12.5394C8.3552 13.0864 8.23828 13.6729 8.23828 14.2651C8.23828 14.8574 8.3552 15.4438 8.58232 15.9908C8.80944 16.5378 9.14231 17.0346 9.56183 17.4526C10.4104 18.2904 11.5569 18.757 12.7493 18.7501C13.3439 18.7526 13.933 18.6372 14.4827 18.4106C15.0324 18.184 15.5317 17.8508 15.9518 17.4301L21.9518 11.4301C22.7925 10.5844 23.2632 9.43953 23.2604 8.24703C23.2576 7.05452 22.7815 5.91189 21.9368 5.07013Z" fill="#303030"/>
-          <path d="M3.14333 18.6149C2.86328 18.3361 2.64105 18.0048 2.48941 17.6399C2.33777 17.275 2.25971 16.8838 2.25971 16.4886C2.25971 16.0935 2.33777 15.7022 2.48941 15.3373C2.64105 14.9725 2.86328 14.6411 3.14333 14.3624L9.14333 8.36237C9.42209 8.08231 9.75342 7.86008 10.1183 7.70844C10.4832 7.55681 10.8744 7.47875 11.2696 7.47875C11.6647 7.47875 12.056 7.55681 12.4209 7.70844C12.7857 7.86008 13.1171 8.08231 13.3958 8.36237C13.6741 8.64332 13.8932 8.97727 14.04 9.34443C14.1869 9.71159 14.2586 10.1045 14.2508 10.4999C14.2531 10.8965 14.1767 11.2896 14.0261 11.6565C13.8755 12.0234 13.6536 12.3568 13.3733 12.6374L11.7833 14.2499L12.8483 15.3149L14.4383 13.7249C15.2847 12.8785 15.7602 11.7306 15.7602 10.5336C15.7602 9.33667 15.2847 8.18874 14.4383 7.34237C13.592 6.49599 12.444 6.02051 11.2471 6.02051C10.0501 6.02051 8.9022 6.49599 8.05583 7.34237L2.05583 13.3424C1.63518 13.7606 1.30136 14.2578 1.07357 14.8055C0.845783 15.3532 0.728516 15.9405 0.728516 16.5336C0.728516 17.1268 0.845783 17.7141 1.07357 18.2618C1.30136 18.8094 1.63518 19.3067 2.05583 19.7249C2.90995 20.5562 4.059 21.0148 5.25083 20.9999C6.45316 21.001 7.60712 20.5265 8.46083 19.6799L7.39583 18.6149C7.11708 18.8949 6.78574 19.1172 6.42086 19.2688C6.05597 19.4204 5.66472 19.4985 5.26958 19.4985C4.87444 19.4985 4.48319 19.4204 4.11831 19.2688C3.75342 19.1172 3.42209 18.8949 3.14333 18.6149Z" fill="#303030"/>
+          <path d="M21.9368 5.07013C21.5188 4.65061 21.022 4.31774 20.475 4.09062C19.928 3.8635 19.3416 3.74658 18.7493 3.74658C18.1571 3.74658 17.5706 3.8635 17.0236 4.09062C16.4767 4.31774 15.9799 4.65061 15.5618 5.07013L16.6268 6.13513C16.9061 5.85591 17.2375 5.63442 17.6024 5.4833C17.9672 5.33219 18.3582 5.25441 18.7531 5.25441C19.148 5.25441 19.539 5.33219 19.9038 5.4833C20.2686 5.63442 20.6001 5.85591 20.8793 6.13513C21.1586 6.41435 21.38 6.74584 21.5312 7.11066C21.6823 7.47548 21.7601 7.8665 21.7601 8.26138C21.7601 8.65626 21.6823 9.04728 21.5312 9.4121C21.38 9.77692 21.1586 10.1084 20.8793 10.3876L14.8793 16.3876C14.3164 16.9515 13.5525 17.2687 12.7557 17.2695C11.9589 17.2702 11.1945 16.9543 10.6306 16.3914C10.0667 15.8285 9.74946 15.0646 9.74876 14.2678C9.74806 13.471 10.0639 12.7065 10.6268 12.1426L11.6843 11.0776L10.6268 10.0126L9.56183 11.0776C9.14231 11.4957 8.80944 11.9925 8.58232 12.5394C8.3552 13.0864 8.23828 13.6729 8.23828 14.2651C8.23828 14.8574 8.3552 15.4438 8.58232 15.9908C8.80944 16.5378 9.14231 17.0346 9.56183 17.4526C10.4104 18.2904 11.5569 18.757 12.7493 18.7501C13.3439 18.7526 13.933 18.6372 14.4827 18.4106C15.0324 18.184 15.5317 17.8508 15.9518 17.4301L21.9518 11.4301C22.7925 10.5844 23.2632 9.43953 23.2604 8.24703C23.2576 7.05452 22.7815 5.91189 21.9368 5.07013Z" fill="currentColor"/>
+          <path d="M3.14333 18.6149C2.86328 18.3361 2.64105 18.0048 2.48941 17.6399C2.33777 17.275 2.25971 16.8838 2.25971 16.4886C2.25971 16.0935 2.33777 15.7022 2.48941 15.3373C2.64105 14.9725 2.86328 14.6411 3.14333 14.3624L9.14333 8.36237C9.42209 8.08231 9.75342 7.86008 10.1183 7.70844C10.4832 7.55681 10.8744 7.47875 11.2696 7.47875C11.6647 7.47875 12.056 7.55681 12.4209 7.70844C12.7857 7.86008 13.1171 8.08231 13.3958 8.36237C13.6741 8.64332 13.8932 8.97727 14.04 9.34443C14.1869 9.71159 14.2586 10.1045 14.2508 10.4999C14.2531 10.8965 14.1767 11.2896 14.0261 11.6565C13.8755 12.0234 13.6536 12.3568 13.3733 12.6374L11.7833 14.2499L12.8483 15.3149L14.4383 13.7249C15.2847 12.8785 15.7602 11.7306 15.7602 10.5336C15.7602 9.33667 15.2847 8.18874 14.4383 7.34237C13.592 6.49599 12.444 6.02051 11.2471 6.02051C10.0501 6.02051 8.9022 6.49599 8.05583 7.34237L2.05583 13.3424C1.63518 13.7606 1.30136 14.2578 1.07357 14.8055C0.845783 15.3532 0.728516 15.9405 0.728516 16.5336C0.728516 17.1268 0.845783 17.7141 1.07357 18.2618C1.30136 18.8094 1.63518 19.3067 2.05583 19.7249C2.90995 20.5562 4.059 21.0148 5.25083 20.9999C6.45316 21.001 7.60712 20.5265 8.46083 19.6799L7.39583 18.6149C7.11708 18.8949 6.78574 19.1172 6.42086 19.2688C6.05597 19.4204 5.66472 19.4985 5.26958 19.4985C4.87444 19.4985 4.48319 19.4204 4.11831 19.2688C3.75342 19.1172 3.42209 18.8949 3.14333 18.6149Z" fill="currentColor"/>
         </svg>
       </SvgIcon>
     );
 }
 
-export default Link;
+export default Link;
diff --git a/src/icons/Mention.tsx b/src/icons/Mention.tsx
@@ -4,10 +4,10 @@ const Mention = () => {
     return (
       <SvgIcon>
         <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M19.2263 6.24984C16.6033 1.70784 10.7943 0.151841 6.25233 2.77484C1.70933 5.39684 0.153329 11.2058 2.77533 15.7488C5.39833 20.2908 11.2063 21.8478 15.7493 19.2258C15.9215 19.128 16.1254 19.1021 16.3165 19.154C16.5077 19.2059 16.6705 19.3313 16.7695 19.5028C16.8686 19.6743 16.8957 19.8781 16.8451 20.0695C16.7945 20.261 16.6702 20.4247 16.4993 20.5248C11.2393 23.5618 4.51233 21.7598 1.47533 16.4988C-1.56167 11.2398 0.240329 4.51184 5.50133 1.47484C10.7603 -1.56216 17.4883 0.239841 20.5253 5.50084C21.3787 6.9746 21.8769 8.62697 21.9803 10.3268C21.9933 10.3828 22.0003 10.4398 22.0003 10.4998V12.7498C22.0005 13.5369 21.7354 14.3011 21.2478 14.919C20.7602 15.5368 20.0786 15.9723 19.313 16.155C18.5474 16.3378 17.7426 16.2572 17.0285 15.9262C16.3144 15.5952 15.7327 15.0331 15.3773 14.3308C14.5966 15.3568 13.4803 16.0758 12.2233 16.3624C10.9664 16.6491 9.64866 16.485 8.50035 15.899C7.35204 15.3129 6.44609 14.3421 5.94073 13.1561C5.43537 11.97 5.3627 10.6441 5.73543 9.40998C6.10816 8.17582 6.90259 7.11181 7.97999 6.40378C9.05738 5.69574 10.3493 5.38869 11.63 5.53623C12.9107 5.68378 14.099 6.27654 14.9871 7.21101C15.8753 8.14548 16.407 9.36226 16.4893 10.6488C16.4965 10.6915 16.5001 10.7346 16.5003 10.7778V12.7498C16.5003 13.2803 16.711 13.789 17.0861 14.1641C17.4612 14.5391 17.9699 14.7498 18.5003 14.7498C19.0308 14.7498 19.5395 14.5391 19.9145 14.1641C20.2896 13.789 20.5003 13.2803 20.5003 12.7498V10.9838C20.499 9.32162 20.0596 7.68811 19.2263 6.24984ZM15.0003 10.9998C15.0003 9.93897 14.5789 8.92156 13.8288 8.17141C13.0786 7.42127 12.0612 6.99984 11.0003 6.99984C9.93946 6.99984 8.92205 7.42127 8.1719 8.17141C7.42176 8.92156 7.00033 9.93897 7.00033 10.9998C7.00033 12.0607 7.42176 13.0781 8.1719 13.8283C8.92205 14.5784 9.93946 14.9998 11.0003 14.9998C12.0612 14.9998 13.0786 14.5784 13.8288 13.8283C14.5789 13.0781 15.0003 12.0607 15.0003 10.9998Z" fill="#303030"/>
+          <path d="M19.2263 6.24984C16.6033 1.70784 10.7943 0.151841 6.25233 2.77484C1.70933 5.39684 0.153329 11.2058 2.77533 15.7488C5.39833 20.2908 11.2063 21.8478 15.7493 19.2258C15.9215 19.128 16.1254 19.1021 16.3165 19.154C16.5077 19.2059 16.6705 19.3313 16.7695 19.5028C16.8686 19.6743 16.8957 19.8781 16.8451 20.0695C16.7945 20.261 16.6702 20.4247 16.4993 20.5248C11.2393 23.5618 4.51233 21.7598 1.47533 16.4988C-1.56167 11.2398 0.240329 4.51184 5.50133 1.47484C10.7603 -1.56216 17.4883 0.239841 20.5253 5.50084C21.3787 6.9746 21.8769 8.62697 21.9803 10.3268C21.9933 10.3828 22.0003 10.4398 22.0003 10.4998V12.7498C22.0005 13.5369 21.7354 14.3011 21.2478 14.919C20.7602 15.5368 20.0786 15.9723 19.313 16.155C18.5474 16.3378 17.7426 16.2572 17.0285 15.9262C16.3144 15.5952 15.7327 15.0331 15.3773 14.3308C14.5966 15.3568 13.4803 16.0758 12.2233 16.3624C10.9664 16.6491 9.64866 16.485 8.50035 15.899C7.35204 15.3129 6.44609 14.3421 5.94073 13.1561C5.43537 11.97 5.3627 10.6441 5.73543 9.40998C6.10816 8.17582 6.90259 7.11181 7.97999 6.40378C9.05738 5.69574 10.3493 5.38869 11.63 5.53623C12.9107 5.68378 14.099 6.27654 14.9871 7.21101C15.8753 8.14548 16.407 9.36226 16.4893 10.6488C16.4965 10.6915 16.5001 10.7346 16.5003 10.7778V12.7498C16.5003 13.2803 16.711 13.789 17.0861 14.1641C17.4612 14.5391 17.9699 14.7498 18.5003 14.7498C19.0308 14.7498 19.5395 14.5391 19.9145 14.1641C20.2896 13.789 20.5003 13.2803 20.5003 12.7498V10.9838C20.499 9.32162 20.0596 7.68811 19.2263 6.24984ZM15.0003 10.9998C15.0003 9.93897 14.5789 8.92156 13.8288 8.17141C13.0786 7.42127 12.0612 6.99984 11.0003 6.99984C9.93946 6.99984 8.92205 7.42127 8.1719 8.17141C7.42176 8.92156 7.00033 9.93897 7.00033 10.9998C7.00033 12.0607 7.42176 13.0781 8.1719 13.8283C8.92205 14.5784 9.93946 14.9998 11.0003 14.9998C12.0612 14.9998 13.0786 14.5784 13.8288 13.8283C14.5789 13.0781 15.0003 12.0607 15.0003 10.9998Z" fill="currentColor" />
         </svg>
       </SvgIcon>
     );
 }
 
-export default Mention;
+export default Mention;
diff --git a/src/icons/OrderedList.tsx b/src/icons/OrderedList.tsx
@@ -4,10 +4,10 @@ const OrderedList = () => {
     return (
       <SvgIcon>
         <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="20" height="17.5" viewBox="0 0 20 17.5">
-          <path d="M18.75,7.5h-10a1.25,1.25,0,0,0,0,2.5h10a1.25,1.25,0,0,0,0-2.5Zm-10-3.75h10a1.25,1.25,0,0,0,0-2.5h-10a1.25,1.25,0,0,0,0,2.5Zm10,10h-10a1.25,1.25,0,0,0,0,2.5h10a1.25,1.25,0,0,0,0-2.5ZM1.56,7.5H4.69a1,1,0,0,0,.94-1,.91.91,0,0,0-.94-.94H4.06V.94A1,1,0,0,0,3.59.12a1,1,0,0,0-.94,0L1.4.86a.94.94,0,0,0,.79,1.69V5.62H1.56a.94.94,0,0,0,0,1.88Zm3.76,8.12H3.39l1.43-1.26a2.85,2.85,0,0,0,.31-4,2.78,2.78,0,0,0-2-1,2.9,2.9,0,0,0-2.11.69l-.49.43a.94.94,0,0,0,1.22,1.42l.49-.42a1,1,0,0,1,1.43.11A.94.94,0,0,1,3.58,13L.31,15.86A.94.94,0,0,0,.94,17.5H5.33a.93.93,0,0,0,.93-.9A1,1,0,0,0,5.32,15.62Z"/>
+          <path fill="currentColor" d="M18.75,7.5h-10a1.25,1.25,0,0,0,0,2.5h10a1.25,1.25,0,0,0,0-2.5Zm-10-3.75h10a1.25,1.25,0,0,0,0-2.5h-10a1.25,1.25,0,0,0,0,2.5Zm10,10h-10a1.25,1.25,0,0,0,0,2.5h10a1.25,1.25,0,0,0,0-2.5ZM1.56,7.5H4.69a1,1,0,0,0,.94-1,.91.91,0,0,0-.94-.94H4.06V.94A1,1,0,0,0,3.59.12a1,1,0,0,0-.94,0L1.4.86a.94.94,0,0,0,.79,1.69V5.62H1.56a.94.94,0,0,0,0,1.88Zm3.76,8.12H3.39l1.43-1.26a2.85,2.85,0,0,0,.31-4,2.78,2.78,0,0,0-2-1,2.9,2.9,0,0,0-2.11.69l-.49.43a.94.94,0,0,0,1.22,1.42l.49-.42a1,1,0,0,1,1.43.11A.94.94,0,0,1,3.58,13L.31,15.86A.94.94,0,0,0,.94,17.5H5.33a.93.93,0,0,0,.93-.9A1,1,0,0,0,5.32,15.62Z"/>
         </svg>
       </SvgIcon>
     );
 }
 
-export default OrderedList;
+export default OrderedList;