client/note color picker/clear color cell: fix icon alignment

Author: adoriandoran

apps/client/src/menus/custom-items/NoteColorPicker.css

@@ -32,20 +32,6 @@
     outline-offset: 2px;
 }
 
-.note-color-picker .color-cell-reset::before,
-.note-color-picker .custom-color-cell::before {
-    position: absolute;
-    display: flex;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    font-size: calc(var(--color-picker-cell-size) * 1.3);
-    justify-content: center;
-    align-items: center;
-    font-family: boxicons;
-}
-
 /*
  * RESET COLOR CELL
  */
@@ -55,18 +41,37 @@
     --outline-color: var(--note-color-picker-clear-color-cell-selection-outline-color);
 
     position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
-.note-color-picker .color-cell-reset::before {
-    content: "\ec8d";
-    mix-blend-mode: normal;
-    color: var(--note-color-picker-clear-color-cell-color);
+.note-color-picker .color-cell-reset svg {
+    width: var(--color-picker-cell-size);
+    height: var(--color-picker-cell-size);
+    fill: var(--note-color-picker-clear-color-cell-color);
 }
 
 /*
  * CUSTOM COLOR CELL
  */
 
+ .note-color-picker .custom-color-cell::before {
+    position: absolute;
+    content: "\ed35";
+    display: flex;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    font-size: calc(var(--color-picker-cell-size) * 1.3);
+    justify-content: center;
+    align-items: center;
+    font-family: boxicons;
+    font-size: 16px;
+    color: var(--foreground);
+}
+
 .note-color-picker .custom-color-cell {
     position: relative;
     display: flex;
@@ -78,10 +83,4 @@
     background-image: url(./custom-color.png);
     background-size: cover;
     --foreground: transparent;
-}
-
-.note-color-picker .custom-color-cell::before {
-    content: "\ed35";
-    color: var(--foreground);
-    font-size: 16px;
 }

apps/client/src/menus/custom-items/NoteColorPicker.tsx

@@ -74,7 +74,13 @@ export default function NoteColorPicker(props: NoteColorPickerProps) {
                    color={null}
                    isSelected={(currentColor === null)}
                    isDisabled={(note === null)}
-                   onSelect={onColorCellClicked} />
+                   onSelect={onColorCellClicked}>
+
+            {/* https://pictogrammers.com/library/mdi/icon/close/ */}
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
+            </svg>
+        </ColorCell>
 
 
         {COLOR_PALETTE.map((color) => (