From 67d8b720567f63b784c0e2bba65dfaaa9703fb69 Mon Sep 17 00:00:00 2001
From: Ibrahim Almalki <67344551+Eebro@users.noreply.github.com>
Date: Sun, 3 Mar 2024 18:48:18 -0500
Subject: [PATCH] replace fill styles with svgs (#80)

---
 client/src/assets/CrossHatched.tsx            | 84 ++++++++++++++++
 client/src/assets/Dashed.tsx                  | 66 +++++++++++++
 client/src/assets/Dots.tsx                    | 99 +++++++++++++++++++
 client/src/assets/Hachure.tsx                 | 44 +++++++++
 client/src/assets/None.tsx                    | 27 +++++
 client/src/assets/Solid.tsx                   | 26 +++++
 client/src/assets/Zigzag.tsx                  | 57 +++++++++++
 client/src/assets/ZigzagLine.tsx              | 48 +++++++++
 client/src/components/lib/ChangeFillStyle.tsx | 30 +++---
 9 files changed, 469 insertions(+), 12 deletions(-)
 create mode 100644 client/src/assets/CrossHatched.tsx
 create mode 100644 client/src/assets/Dashed.tsx
 create mode 100644 client/src/assets/Dots.tsx
 create mode 100644 client/src/assets/Hachure.tsx
 create mode 100644 client/src/assets/None.tsx
 create mode 100644 client/src/assets/Solid.tsx
 create mode 100644 client/src/assets/Zigzag.tsx
 create mode 100644 client/src/assets/ZigzagLine.tsx

diff --git a/client/src/assets/CrossHatched.tsx b/client/src/assets/CrossHatched.tsx
new file mode 100644
index 0000000..3c73cd4
--- /dev/null
+++ b/client/src/assets/CrossHatched.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+
+const CrossHatchedSVG: React.FC = () => (
+  <svg
+    version="1.0"
+    xmlns="http://www.w3.org/2000/svg"
+    width="2em"
+    height="2em"
+    viewBox="0 0 150 150"
+  >
+    <g
+      transform="translate(-18.00000,165.000000) scale(0.100000,-0.100000)"
+      fill="#000000"
+      stroke="none"
+    >
+      <path
+        d="M878 1639 c-263 -38 -459 -180 -565 -408 -52 -110 -63 -155 -70 -276
+-15 -273 99 -507 318 -656 143 -97 280 -135 448 -126 114 7 174 20 263 60 132
+59 237 148 316 270 84 128 122 255 122 407 0 206 -74 383 -222 531 -64 63 -95
+86 -180 128 -57 27 -131 57 -164 66 -66 16 -173 18 -266 4z m6 -114 c-64 -73
+-51 -72 -127 -4 l-30 26 104 21 c57 11 105 21 107 21 2 1 -23 -28 -54 -64z
+m200 3 c39 -34 71 -64 71 -68 0 -10 -129 -158 -139 -159 -5 -1 -30 18 -55 42
+-25 23 -61 54 -79 69 l-33 28 67 75 c37 41 74 75 82 75 8 0 46 -28 86 -62z
+m67 41 c35 -12 67 -25 72 -28 4 -4 -4 -17 -17 -30 l-24 -23 -59 47 c-32 26
+-60 49 -62 51 -11 10 32 2 90 -17z m-398 -85 c26 -25 47 -47 47 -50 0 -8 -133
+-159 -140 -159 -4 0 -35 25 -69 55 -34 30 -68 58 -74 63 -8 5 0 18 25 39 42
+35 138 96 153 97 6 0 31 -20 58 -45z m657 -54 l33 -27 -34 -41 c-19 -23 -36
+-42 -39 -41 -3 0 -40 32 -84 72 l-78 73 26 32 27 31 58 -36 c32 -20 73 -48 91
+-63z m-178 -29 c24 -21 60 -54 82 -73 l38 -34 -36 -40 c-20 -21 -51 -58 -69
+-81 -18 -23 -35 -41 -39 -40 -3 1 -43 33 -87 71 l-80 69 52 59 c28 33 60 71
+70 84 10 13 20 24 22 24 2 0 23 -18 47 -39z m-332 -47 c36 -31 71 -62 79 -69
+12 -12 4 -26 -53 -94 -37 -45 -70 -81 -73 -81 -3 0 -31 21 -61 48 -30 26 -66
+56 -80 68 l-25 21 68 81 c37 45 71 82 74 82 3 0 35 -25 71 -56z m-363 -18 c26
+-24 60 -54 76 -67 l27 -24 -71 -82 -72 -82 -68 57 -69 56 32 55 c27 49 86 131
+94 131 2 0 25 -20 51 -44z m1019 -83 c30 -53 33 -64 23 -82 -12 -19 -16 -17
+-72 32 -33 29 -71 61 -85 73 l-25 21 33 42 34 42 28 -33 c16 -18 44 -61 64
+-95z m-98 -50 c42 -36 79 -67 80 -69 2 -1 -29 -41 -69 -88 l-73 -85 -46 42
+c-25 23 -62 56 -84 74 l-39 32 46 48 c24 26 57 63 72 81 15 17 29 32 31 32 3
+0 40 -30 82 -67z m-363 -18 c37 -33 74 -64 82 -68 11 -7 5 -18 -29 -55 -24
+-26 -57 -64 -75 -86 l-31 -39 -80 69 c-44 38 -81 73 -81 77 -1 4 10 20 23 34
+14 15 44 50 68 79 24 29 46 52 49 51 4 -1 37 -29 74 -62z m-376 -8 c25 -23 61
+-54 79 -69 l33 -28 -73 -84 -73 -84 -45 42 c-25 23 -62 55 -84 73 l-39 31 69
+80 c38 44 73 81 78 81 5 1 30 -18 55 -42z m-309 -64 c33 -27 59 -52 59 -57 1
+-5 -29 -43 -66 -85 -37 -42 -68 -78 -70 -80 -1 -2 -10 2 -19 10 -13 11 -15 25
+-11 77 6 62 35 182 44 182 3 0 31 -21 63 -47z m1209 17 c10 -31 6 -32 -27 -7
+-9 7 -9 13 -1 23 15 19 15 18 28 -16z m25 -126 c13 -98 8 -137 -25 -172 l-29
+-33 -85 72 -84 71 72 83 71 83 37 -28 c29 -24 37 -38 43 -76z m-408 58 c10 -9
+47 -41 81 -70 l61 -53 -48 -52 c-27 -29 -58 -64 -70 -79 -12 -16 -25 -28 -29
+-28 -4 0 -29 20 -56 44 -28 24 -63 54 -80 68 l-29 25 69 81 c39 45 73 82 76
+82 3 0 14 -8 25 -18z m-306 -68 c19 -18 48 -42 63 -55 l28 -24 -43 -50 c-24
+-27 -56 -64 -73 -82 l-30 -33 -79 68 c-43 38 -78 73 -77 78 1 5 32 44 68 87
+75 87 58 85 143 11z m-352 -30 c43 -36 77 -69 77 -74 0 -14 -127 -161 -136
+-158 -19 7 -160 131 -157 139 4 11 130 159 135 159 3 0 39 -30 81 -66z m909
+-119 l80 -70 -56 -65 c-31 -35 -64 -73 -73 -84 -17 -19 -19 -18 -65 25 -27 24
+-63 56 -80 71 -18 15 -33 30 -33 33 0 4 29 39 65 78 36 39 65 75 65 80 0 14
+12 6 97 -68z m-354 -25 c41 -36 76 -67 76 -70 0 -3 -22 -30 -50 -60 -28 -30
+-57 -65 -66 -77 -8 -13 -20 -23 -25 -23 -6 0 -44 30 -87 67 -42 37 -78 68 -80
+70 -6 4 142 164 149 161 4 -2 41 -32 83 -68z m-394 7 c25 -23 61 -54 79 -69
+17 -15 32 -29 32 -33 0 -5 -90 -114 -130 -159 -5 -4 -46 25 -92 65 l-85 74 71
+81 c39 45 73 83 75 83 2 1 25 -18 50 -42z m-271 -100 l33 -27 -57 -64 -58 -64
+-22 47 c-27 59 -54 151 -54 183 0 50 21 50 74 0 28 -26 66 -59 84 -75z m1174
+63 c-4 -29 -16 -39 -26 -22 -4 7 20 52 28 52 1 0 1 -13 -2 -30z m-38 -46 c24
+-9 20 -38 -18 -117 -53 -114 -54 -114 -100 -73 l-39 34 69 81 c38 44 70 80 71
+81 1 0 8 -3 17 -6z m-256 -114 l52 -47 -42 -49 c-24 -27 -48 -55 -55 -62 -7
+-7 -19 -22 -27 -34 -15 -21 -15 -21 -58 15 -24 20 -62 53 -85 74 l-42 38 72
+81 72 82 30 -26 c17 -14 54 -46 83 -72z m-387 3 c44 -36 79 -70 79 -74 0 -8
+-64 -84 -121 -143 -18 -19 -19 -19 -61 16 -24 19 -61 51 -82 70 l-39 35 69 82
+c38 44 71 81 73 81 2 0 39 -30 82 -67z m-295 -76 c28 -22 30 -17 -63 -122
+l-53 -58 -21 19 c-42 37 -120 136 -117 148 2 7 27 40 57 74 l55 61 59 -52 c32
+-29 70 -60 83 -70z m805 -32 l39 -35 -53 -53 c-28 -29 -66 -62 -82 -74 l-30
+-21 -35 28 -34 28 46 48 c25 27 58 64 73 82 15 17 29 32 32 32 3 0 23 -16 44
+-35z m-307 -69 l70 -64 -64 -73 c-34 -41 -69 -75 -77 -77 -12 -3 -154 110
+-161 129 -2 5 25 40 60 79 35 39 64 75 66 80 5 14 28 -2 106 -74z m-363 -17
+l78 -71 -46 -54 c-26 -30 -52 -54 -57 -54 -16 0 -196 91 -196 98 1 4 28 36 60
+72 33 36 60 68 60 73 0 19 28 1 101 -64z m487 -88 c12 -11 22 -22 22 -25 0 -7
+-46 -31 -110 -56 l-52 -20 54 60 c29 33 55 59 58 59 3 0 15 -8 28 -18z m-248
+-119 c3 -3 -44 -2 -104 2 -60 3 -111 8 -114 10 -2 3 15 27 38 55 l42 50 67
+-56 c36 -31 68 -58 71 -61z"
+      />
+    </g>
+  </svg>
+);
+
+export default CrossHatchedSVG;
diff --git a/client/src/assets/Dashed.tsx b/client/src/assets/Dashed.tsx
new file mode 100644
index 0000000..c735951
--- /dev/null
+++ b/client/src/assets/Dashed.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+
+const Dashed: React.FC = () => (
+  <svg
+    version="1.0"
+    xmlns="http://www.w3.org/2000/svg"
+    width="2em"
+    height="2em"
+    viewBox="0 0 150 150"
+  >
+    <g
+      transform="translate(-25.000000,160.000000) scale(0.100000,-0.100000)"
+      fill="#000000"
+      stroke="none"
+    >
+      <path
+        d="M916 1579 c-261 -38 -457 -180 -563 -408 -52 -110 -63 -155 -70 -276
+-17 -318 145 -589 431 -720 110 -51 209 -69 335 -62 114 7 174 20 263 60 132
+59 237 148 316 270 84 128 122 255 122 407 0 206 -74 383 -222 531 -64 63 -95
+86 -180 128 -160 78 -262 95 -432 70z m270 -70 c201 -62 348 -185 433 -362
+114 -238 87 -499 -73 -712 -81 -108 -188 -183 -336 -235 -94 -34 -284 -34
+-384 -1 -92 30 -148 59 -223 115 -209 157 -309 445 -243 700 46 183 176 350
+336 433 142 75 360 102 490 62z"
+      />
+      <path
+        d="M826 1355 c-43 -51 -78 -97 -78 -102 2 -25 33 -5 82 53 103 123 102
+120 88 131 -10 8 -33 -12 -92 -82z"
+      />
+      <path
+        d="M1020 1194 c-76 -87 -88 -108 -72 -118 10 -6 165 167 170 190 8 34
+-29 7 -98 -72z"
+      />
+      <path
+        d="M1202 1018 c-63 -71 -79 -95 -70 -105 6 -7 12 -12 13 -11 1 2 39 45
+84 95 73 82 89 113 62 113 -5 0 -45 -41 -89 -92z"
+      />
+      <path
+        d="M523 1006 c-28 -33 -65 -77 -82 -97 -23 -28 -28 -39 -18 -47 9 -7 33
+15 92 84 89 105 91 109 72 117 -8 3 -34 -20 -64 -57z"
+      />
+      <path
+        d="M1388 850 c-79 -91 -87 -105 -66 -112 12 -4 169 172 169 189 0 27
+-36 1 -103 -77z"
+      />
+      <path
+        d="M687 810 c-76 -88 -85 -104 -69 -114 12 -7 174 182 167 194 -11 18
+-20 11 -98 -80z"
+      />
+      <path
+        d="M940 723 c0 -5 -34 -46 -75 -93 -41 -47 -75 -88 -75 -91 0 -4 6 -9
+13 -12 8 -3 35 21 65 57 28 33 65 76 82 95 16 18 27 37 24 42 -6 11 -34 12
+-34 2z"
+      />
+      <path
+        d="M1460 548 c-19 -24 -56 -66 -82 -94 -41 -43 -46 -53 -34 -63 12 -10
+28 4 93 79 43 50 78 96 78 102 0 26 -24 16 -55 -24z"
+      />
+      <path
+        d="M1058 470 c-77 -88 -87 -103 -69 -114 10 -7 171 175 171 193 0 27
+-30 3 -102 -79z"
+      />
+    </g>
+  </svg>
+);
+
+export default Dashed;
diff --git a/client/src/assets/Dots.tsx b/client/src/assets/Dots.tsx
new file mode 100644
index 0000000..efc697a
--- /dev/null
+++ b/client/src/assets/Dots.tsx
@@ -0,0 +1,99 @@
+import React from 'react';
+
+const DotsSVG: React.FC = () => (
+  <svg
+    version="1.0"
+    xmlns="http://www.w3.org/2000/svg"
+    width="2em"
+    height="2em"
+    viewBox="0 0 150 150"
+  >
+    <g
+      transform="translate(-24.000000,170.000000) scale(0.100000,-0.100000)"
+      fill="#000000"
+      stroke="none"
+    >
+      <path
+        d="M868 1699 c-263 -38 -459 -180 -565 -408 -52 -110 -63 -155 -70 -276
+-15 -273 99 -507 318 -656 143 -97 280 -135 448 -126 114 7 174 20 263 60 132
+59 237 148 316 270 93 143 127 269 119 447 -4 85 -12 133 -30 185 -72 209
+-194 350 -381 440 -149 72 -255 88 -418 64z m251 -65 c52 -15 58 -19 49 -34
+-6 -10 -8 -25 -5 -34 9 -24 41 -16 45 12 4 27 3 27 55 1 135 -68 241 -176 306
+-312 114 -238 87 -499 -73 -712 -81 -108 -189 -183 -336 -235 -95 -34 -285
+-34 -384 -2 -92 31 -148 60 -223 116 -209 157 -309 445 -243 700 22 86 84 210
+135 270 29 35 35 38 50 26 14 -11 18 -11 31 2 12 12 14 20 5 36 -10 18 -5 24
+42 55 93 61 154 86 259 106 130 24 212 25 287 5z"
+      />
+      <path
+        d="M694 1536 c-10 -26 4 -48 28 -44 17 2 23 10 23 28 0 18 -6 26 -23 28
+-13 2 -25 -3 -28 -12z"
+      />
+      <path
+        d="M936 1525 c-12 -12 -13 -21 -6 -36 13 -23 33 -25 51 -3 9 11 10 20 3
+32 -15 23 -29 25 -48 7z"
+      />
+      <path
+        d="M1376 1375 c-8 -22 4 -45 24 -45 23 0 42 24 34 44 -8 20 -50 21 -58
+1z"
+      />
+      <path
+        d="M1214 1365 c-9 -23 3 -45 25 -45 25 0 34 14 26 40 -7 23 -43 27 -51
+5z"
+      />
+      <path
+        d="M732 1308 c-14 -14 2 -48 22 -48 20 0 37 25 30 44 -7 19 -35 21 -52
+4z"
+      />
+      <path
+        d="M922 1298 c-17 -17 -15 -48 3 -54 18 -7 45 12 45 32 0 20 -34 36 -48
+22z"
+      />
+      <path d="M485 1210 c-8 -26 6 -43 31 -38 13 2 19 12 19 28 0 34 -40 41 -50 10z" />
+      <path
+        d="M1194 1096 c-10 -26 4 -48 28 -44 17 2 23 10 23 28 0 18 -6 26 -23
+28 -13 2 -25 -3 -28 -12z"
+      />
+      <path
+        d="M637 1094 c-12 -12 -8 -41 9 -54 22 -19 54 12 38 38 -12 19 -36 27
+-47 16z"
+      />
+      <path
+        d="M964 1066 c-10 -26 4 -48 28 -44 17 2 23 10 23 28 0 18 -6 26 -23 28
+-13 2 -25 -3 -28 -12z"
+      />
+      <path
+        d="M1474 1056 c-10 -26 4 -48 28 -44 17 2 23 10 23 28 0 18 -6 26 -23
+28 -13 2 -25 -3 -28 -12z"
+      />
+      <path
+        d="M455 993 c-18 -18 -16 -32 9 -47 13 -9 20 -7 31 7 25 35 -10 70 -40
+40z"
+      />
+      <path d="M1124 885 c-9 -23 3 -45 25 -45 25 0 34 14 26 40 -7 23 -43 27 -51 5z" />
+      <path
+        d="M1472 848 c-15 -15 -16 -45 -2 -53 18 -11 50 6 50 25 0 25 -33 43
+-48 28z"
+      />
+      <path
+        d="M893 805 c-14 -11 -16 -18 -7 -32 17 -28 48 -23 52 8 4 32 -18 43
+-45 24z"
+      />
+      <path
+        d="M404 776 c-10 -26 4 -48 28 -44 17 2 23 10 23 28 0 18 -6 26 -23 28
+-13 2 -25 -3 -28 -12z"
+      />
+      <path d="M647 766 c-10 -26 4 -47 27 -44 15 2 21 10 21 28 0 29 -38 41 -48 16z" />
+      <path
+        d="M1139 594 c-16 -20 0 -49 27 -49 22 0 31 30 14 50 -16 19 -24 19 -41
+-1z"
+      />
+      <path d="M655 520 c-12 -20 6 -51 28 -48 31 4 31 52 0 56 -11 2 -24 -2 -28 -8z" />
+      <path
+        d="M893 513 c-18 -7 -16 -52 2 -59 18 -7 45 12 45 32 0 16 -30 33 -47
+27z"
+      />
+    </g>
+  </svg>
+);
+
+export default DotsSVG;
diff --git a/client/src/assets/Hachure.tsx b/client/src/assets/Hachure.tsx
new file mode 100644
index 0000000..2e27f04
--- /dev/null
+++ b/client/src/assets/Hachure.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+
+const HachureSVG: React.FC = () => (
+  <svg
+    version="1.0"
+    xmlns="http://www.w3.org/2000/svg"
+    width="2em"
+    height="2em"
+    viewBox="0 0 150 150"
+  >
+    <g
+      transform="translate(-35.00000,160.000000) scale(0.1000000,-0.1000000)"
+      fill="#000000"
+      stroke="none"
+    >
+      <path
+        d="M1000 1593 c-67 -7 -205 -46 -255 -70 -246 -125 -405 -384 -405 -663
+0 -205 83 -395 233 -536 90 -85 161 -128 275 -166 342 -116 722 43 887 372 58
+117 69 169 70 330 0 122 -3 155 -21 210 -72 217 -200 367 -389 456 -143 68
+-239 84 -395 67z m13 -86 c-15 -19 -147 -171 -293 -338 -146 -167 -275 -316
+-285 -331 -11 -15 -24 -28 -29 -28 -5 0 -6 38 -3 89 18 255 164 472 386 573
+50 23 163 54 244 67 5 0 -4 -14 -20 -32z m233 12 c38 -11 72 -24 76 -28 4 -3
+-5 -20 -20 -36 -15 -17 -54 -61 -87 -100 -33 -38 -62 -72 -65 -75 -7 -6 -511
+-586 -598 -688 l-63 -73 -24 53 c-13 29 -32 83 -42 119 l-17 66 25 30 c13 17
+155 180 314 363 160 183 300 346 313 361 20 25 31 29 72 29 26 0 79 -9 116
+-21z m242 -122 c28 -22 52 -42 52 -44 0 -7 -33 -48 -99 -122 -32 -36 -76 -87
+-97 -112 -22 -25 -185 -213 -363 -417 l-324 -372 -30 23 c-17 13 -50 49 -75
+80 l-44 56 18 24 c15 19 248 287 546 629 13 14 84 96 158 182 l134 155 36 -21
+c19 -12 59 -39 88 -61z m149 -161 c56 -83 61 -99 41 -120 -24 -25 -83 -91
+-143 -161 -33 -38 -109 -126 -170 -195 -60 -69 -193 -221 -294 -338 -102 -117
+-188 -212 -193 -212 -15 0 -138 58 -168 80 l-30 21 83 92 c45 51 165 189 267
+306 102 118 250 289 330 380 80 92 156 181 170 198 14 18 32 31 40 30 8 -1 38
+-38 67 -81z m110 -328 l6 -87 -59 -68 c-32 -37 -108 -124 -169 -193 -103 -118
+-241 -277 -299 -345 l-26 -30 -122 0 c-68 0 -131 3 -141 7 -15 6 13 42 160
+210 97 112 202 232 232 268 31 36 58 67 61 70 11 10 266 306 290 336 l25 31
+18 -56 c10 -31 21 -95 24 -143z m-18 -218 c-57 -205 -191 -363 -383 -450 -36
+-17 -71 -30 -78 -30 -7 0 10 24 38 53 28 28 84 90 124 137 86 100 157 182 230
+265 29 33 59 70 68 83 8 12 16 21 18 19 2 -2 -5 -37 -17 -77z"
+      />
+    </g>
+  </svg>
+);
+
+export default HachureSVG;
diff --git a/client/src/assets/None.tsx b/client/src/assets/None.tsx
new file mode 100644
index 0000000..0444413
--- /dev/null
+++ b/client/src/assets/None.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const NoneSVG: React.FC = () => (
+  <svg
+    version="1.0"
+    xmlns="http://www.w3.org/2000/svg"
+    width="2em"
+    height="2em"
+    viewBox="0 0 150 150"
+  >
+    <g
+      transform="translate(-18.000000,150.000000) scale(0.1100000,-0.1100000)"
+      fill="#000000"
+      stroke="none"
+    >
+      <path
+        d="M755 1339 c-179 -32 -302 -101 -400 -227 -89 -113 -129 -231 -129
+-377 0 -230 139 -440 355 -539 93 -43 167 -58 279 -57 348 1 620 268 620 607
+0 216 -129 428 -324 530 -130 68 -260 88 -401 63z m251 -50 c215 -66 367 -216
+418 -415 64 -249 -68 -522 -308 -634 -107 -51 -174 -63 -301 -57 -434 20 -686
+476 -468 846 46 77 141 166 223 210 68 36 210 69 306 70 37 1 90 -8 130 -20z"
+      />
+    </g>
+  </svg>
+);
+
+export default NoneSVG;
diff --git a/client/src/assets/Solid.tsx b/client/src/assets/Solid.tsx
new file mode 100644
index 0000000..4940b1d
--- /dev/null
+++ b/client/src/assets/Solid.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+const SolidSVG: React.FC = () => (
+  <svg
+    version="1.0"
+    xmlns="http://www.w3.org/2000/svg"
+    width="2em"
+    height="2em"
+    viewBox="0 0 150 150"
+  >
+    <g
+      transform="translate(-25.000000,160.000000) scale(0.1100000,-0.1100000)"
+      fill="#000000"
+      stroke="none"
+    >
+      <path
+        d="M865 1434 c-130 -19 -217 -48 -293 -95 -351 -216 -406 -707 -112
+-999 119 -118 247 -176 415 -187 107 -7 214 16 323 69 103 50 227 178 280 288
+22 47 46 109 52 139 18 77 16 224 -4 301 -39 150 -145 301 -270 381 -120 78
+-278 120 -391 103z"
+      />
+    </g>
+  </svg>
+);
+
+export default SolidSVG;
diff --git a/client/src/assets/Zigzag.tsx b/client/src/assets/Zigzag.tsx
new file mode 100644
index 0000000..fcb303d
--- /dev/null
+++ b/client/src/assets/Zigzag.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+
+const ZigzagSVG: React.FC = () => (
+  <svg
+    version="1.0"
+    xmlns="http://www.w3.org/2000/svg"
+    width="2em"
+    height="2em"
+    viewBox="0 0 150 150"
+  >
+    <g
+      transform="translate(-11.00000,160.000000) scale(0.1000000,-0.1000000)"
+      fill="#000000"
+      stroke="none"
+    >
+      <path
+        d="M810 1639 c-180 -29 -295 -83 -416 -195 -108 -101 -198 -277 -219
+-433 -5 -40 -14 -60 -36 -80 -22 -20 -27 -30 -19 -41 9 -13 13 -11 30 10 l20
+25 0 -50 c0 -27 10 -88 21 -135 12 -47 21 -93 21 -103 -1 -10 6 -21 14 -24 8
+-3 14 -10 14 -16 0 -6 20 -43 45 -82 51 -83 165 -195 248 -244 62 -36 213 -91
+252 -91 17 0 23 -4 19 -14 -3 -7 1 -16 10 -19 8 -3 17 0 19 7 4 9 38 15 109
+19 56 3 125 13 152 21 69 22 72 21 41 -20 -22 -28 -25 -38 -14 -44 18 -12 21
+-8 58 53 25 39 46 59 84 80 121 63 241 189 306 322 95 192 96 452 3 643 -47
+96 -82 144 -158 218 -58 57 -95 82 -176 122 -57 28 -131 58 -164 67 -67 16
+-176 18 -264 4z m-10 -107 c-180 -159 -517 -468 -532 -486 -29 -37 -31 -10 -4
+72 46 136 124 249 230 329 97 73 185 107 366 142 3 0 -24 -25 -60 -57z m281
+36 c79 -21 92 -30 65 -45 -8 -4 -45 -37 -83 -73 -345 -331 -686 -652 -678
+-640 5 8 52 78 106 155 121 176 305 446 373 547 51 77 51 78 95 78 24 0 79
+-10 122 -22z m237 -120 c28 -21 52 -42 52 -47 0 -4 -17 -23 -37 -41 -72 -65
+-479 -455 -641 -615 -89 -88 -167 -161 -172 -163 -5 -2 34 54 86 125 52 70
+179 247 283 393 104 146 216 302 248 346 l58 82 35 -21 c19 -11 59 -38 88 -59z
+m-494 60 c-5 -7 -67 -98 -139 -203 -193 -280 -379 -556 -395 -587 -7 -16 -16
+-28 -20 -28 -12 0 -31 104 -36 195 l-5 90 162 145 c89 80 223 202 298 272 75
+70 137 127 139 127 2 1 0 -5 -4 -11z m250 -100 c-5 -7 -51 -71 -104 -143 -146
+-197 -551 -765 -557 -781 -9 -23 -25 -12 -64 45 -49 71 -76 131 -62 139 6 4
+93 86 194 183 462 443 594 568 597 569 2 0 0 -6 -4 -12z m394 -123 c28 -43 52
+-83 52 -89 0 -6 -80 -85 -177 -176 -98 -91 -277 -261 -399 -377 -123 -117
+-225 -213 -229 -213 -3 0 20 35 53 78 58 77 486 666 576 795 27 37 53 66 60
+64 6 -2 35 -39 64 -82z m-261 -122 c-80 -106 -204 -278 -445 -613 -84 -118
+-159 -221 -166 -227 -9 -10 -22 -6 -61 21 -28 19 -66 48 -85 65 l-35 31 30 26
+c45 40 499 477 675 651 85 83 156 150 158 148 2 -2 -30 -47 -71 -102z m358
+-107 c8 -43 15 -101 15 -130 l0 -53 -97 -84 c-305 -263 -413 -357 -460 -401
+-28 -26 -54 -48 -57 -48 -3 0 47 73 112 163 65 89 146 204 182 255 36 51 98
+138 138 195 41 56 88 123 105 150 17 26 34 44 39 39 5 -5 15 -43 23 -86z
+m-167 -53 c-47 -62 -368 -512 -481 -675 l-67 -97 -38 6 c-59 9 -192 53 -192
+63 0 6 3 10 8 10 7 0 48 37 167 149 39 36 151 142 250 236 99 93 227 215 285
+272 57 56 106 100 108 98 2 -2 -16 -30 -40 -62z m84 -295 c-49 -72 -170 -259
+-227 -350 -31 -50 -43 -58 -148 -94 -72 -24 -217 -43 -217 -28 1 15 38 55 48
+52 9 -3 294 238 502 423 47 43 87 75 89 74 1 -2 -19 -37 -47 -77z m98 77 c0
+-18 -69 -179 -98 -228 -36 -61 -177 -216 -187 -205 -4 3 20 46 53 95 88 131
+202 310 208 328 6 14 24 22 24 10z"
+      />
+    </g>
+  </svg>
+);
+
+export default ZigzagSVG;
diff --git a/client/src/assets/ZigzagLine.tsx b/client/src/assets/ZigzagLine.tsx
new file mode 100644
index 0000000..cec7ca1
--- /dev/null
+++ b/client/src/assets/ZigzagLine.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+const ZigzagLineSVG: React.FC = () => (
+  <svg
+    version="1.0"
+    xmlns="http://www.w3.org/2000/svg"
+    width="2em"
+    height="2em"
+    viewBox="0 0 150 150"
+  >
+    <g
+      transform="translate(-20.000000,165.000000) scale(0.11200000,-0.11200000)"
+      fill="#000000"
+      stroke="none"
+    >
+      <path
+        d="M775 1446 c-148 -21 -234 -53 -336 -123 -66 -46 -159 -150 -196 -218
+-86 -163 -87 -376 -3 -533 60 -111 171 -216 295 -277 99 -48 173 -66 300 -72
+169 -8 317 33 452 125 121 82 218 220 253 361 15 57 15 193 0 256 -15 69 -71
+182 -114 232 -33 37 -36 47 -36 102 0 49 -3 61 -16 61 -13 0 -15 -8 -9 -50 l7
+-50 -71 52 c-154 116 -335 161 -526 134z m320 -73 c102 -36 159 -70 229 -134
+42 -39 56 -58 56 -79 l0 -28 -115 -7 c-93 -6 -115 -10 -119 -24 -3 -9 -2 -61
+3 -116 5 -55 8 -101 6 -103 -1 -2 -51 -7 -110 -12 -59 -4 -111 -12 -116 -17
+-4 -4 -5 -57 -1 -116 4 -60 5 -110 2 -112 -3 -1 -54 -6 -113 -10 -70 -4 -110
+-11 -113 -19 -3 -7 -1 -59 4 -117 5 -57 8 -105 8 -106 -1 -1 -50 -5 -109 -9
+-106 -7 -107 -7 -144 21 -60 44 -102 86 -144 142 -22 29 -39 54 -39 56 0 2 48
+7 106 10 58 4 110 10 116 13 7 4 8 46 3 119 l-7 113 99 7 c54 3 105 7 113 8
+12 2 15 22 13 120 -1 64 2 117 5 117 139 10 205 19 214 28 15 15 0 245 -16
+239 -6 -3 -10 -8 -10 -13 1 -5 4 -54 8 -110 l7 -101 -62 -7 c-34 -3 -83 -6
+-109 -6 -26 0 -52 -6 -58 -12 -6 -9 -7 -49 -1 -117 6 -73 6 -107 -2 -111 -6
+-4 -56 -10 -111 -13 -56 -4 -104 -10 -108 -14 -4 -4 -3 -57 2 -117 4 -60 7
+-110 5 -112 -2 -2 -52 -5 -112 -6 l-110 -3 -23 69 c-45 134 -24 298 54 428 43
+71 154 175 231 215 112 60 224 83 378 79 91 -3 124 -8 190 -33z m365 -312 c33
+-68 50 -142 50 -220 l0 -58 -37 -7 c-21 -3 -68 -6 -104 -6 -43 0 -70 -5 -77
+-13 -8 -9 -9 -48 -4 -120 9 -125 21 -113 -122 -121 -49 -3 -93 -9 -99 -15 -5
+-5 -5 -47 1 -107 5 -55 8 -100 7 -102 -7 -10 -152 -32 -210 -32 -77 0 -218 29
+-280 56 l-40 18 88 7 c48 3 92 10 98 16 6 6 6 50 1 117 -4 59 -5 109 -2 111 3
+1 54 6 113 10 70 4 110 11 113 19 3 7 1 59 -4 117 -5 57 -8 105 -7 106 0 1 52
+5 113 9 133 8 126 0 114 146 -9 111 -12 107 88 108 97 2 135 12 138 39 l4 23
+15 -22 c9 -13 28 -48 43 -79z m44 -328 c-41 -169 -152 -308 -315 -393 -42 -22
+-82 -40 -88 -40 -7 0 -11 32 -11 94 l0 94 110 7 c130 9 124 1 112 145 -5 52
+-8 96 -7 98 1 1 42 6 91 11 49 4 95 9 102 10 9 1 10 -7 6 -26z"
+      />
+    </g>
+  </svg>
+);
+
+export default ZigzagLineSVG;
diff --git a/client/src/components/lib/ChangeFillStyle.tsx b/client/src/components/lib/ChangeFillStyle.tsx
index b6e99eb..af580c1 100644
--- a/client/src/components/lib/ChangeFillStyle.tsx
+++ b/client/src/components/lib/ChangeFillStyle.tsx
@@ -2,6 +2,14 @@ import React from 'react';
 import { useCanvasElementStore } from '@/stores/CanvasElementsStore';
 import ToolButton from './ToolButtonSelector';
 import { CanvasElementFillStyle } from '@/types';
+import HachureSVG from '@/assets/Hachure';
+import CrossHatchedSVG from '@/assets/CrossHatched';
+import DashedSVG from '@/assets/Dashed';
+import ZigzagLineSVG from '@/assets/ZigzagLine';
+import DotsSVG from '@/assets/Dots';
+import ZigzagSVG from '@/assets/Zigzag';
+import NoneSVG from '@/assets/None';
+import SolidSVG from '@/assets/Solid';
 
 /**
  * This file defines the ChangeFillStyle component, which allows the user to select
@@ -11,15 +19,15 @@ import { CanvasElementFillStyle } from '@/types';
  * @author Eebro
  */
 
-const fillStyleMap: Record<string, string> = {
-  none: 'bg-red-500',
-  hachure: 'bg-red-500',
-  solid: 'bg-green-300',
-  zigzag: 'bg-blue-300',
-  ['cross-hatch']: 'bg-orange-500',
-  dots: 'bg-black',
-  dashed: 'bg-blue-500',
-  ['zigzag-line']: 'bg-blue-500',
+const fillStyleMap: Record<string, JSX.Element> = {
+  none: <NoneSVG />,
+  hachure: <HachureSVG />,
+  solid: <SolidSVG />,
+  zigzag: <ZigzagSVG />,
+  ['cross-hatch']: <CrossHatchedSVG />,
+  dots: <DotsSVG />,
+  dashed: <DashedSVG />,
+  ['zigzag-line']: <ZigzagLineSVG />,
 };
 
 const mapFillStyle = {
@@ -56,9 +64,7 @@ const FillStyleToolGroup = ({ tools }: { tools: CanvasElementFillStyle[] }) => {
             label={toolName}
             active={interestValue === mapFillStyle[toolName]}
           >
-            <div
-              className={'w-5 h-5 rounded-full ' + fillStyleMap[toolName]}
-            ></div>
+            {fillStyleMap[toolName]}
           </ToolButton>
         </div>
       ))}