implement clearer UX for transparent color in color picker (#4111)

* implement clearer ui for transparent color in color picker

* svg to inherit color instead of filling gray for better visibility

* clean up: remove unnecessary classnames utility

---------

Co-authored-by: Leslie Yip <[email protected]>

Author: junnjiee

website/src/img/icons/transparent.svg

@@ -90,7 +90,6 @@ $arrow-height: 1.5rem;
 
   // Add a cross mark to indicate the currently selected color
   &.selected::after {
-    content: '✕';
     position: absolute;
     top: 0;
     right: 0;
@@ -139,3 +138,11 @@ $arrow-height: 1.5rem;
     );
   }
 }
+.transparentIcon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 1rem;
+  height: 1rem;
+  transform: translate(-50%, -50%);
+}

website/src/views/components/ColorPicker.scss

@@ -6,6 +6,7 @@ import _ from 'lodash';
 import { ColorIndex } from 'types/timetables';
 import { NUM_DIFFERENT_COLORS, TRANSPARENT_COLOR_INDEX } from 'utils/colors';
 
+import TransparentIcon from 'img/icons/transparent.svg';
 import styles from './ColorPicker.scss';
 
 type Props = {
@@ -64,7 +65,11 @@ const ColorPicker = memo<Props>((props) => {
               className={classnames(styles.option, `color-${index}`, {
                 [styles.selected]: index === color,
               })}
-            />
+            >
+              {index === color && (
+                <TransparentIcon className={styles.transparentIcon} fill="currentColor" />
+              )}
+            </button>
           ))}
         </div>
       </div>