allow choosing of no color

website/src/utils/colors.ts

@@ -5,6 +5,7 @@ import { ColorMapping } from 'types/reducers';
 import { ModuleCode } from 'types/modules';
 
 export const NUM_DIFFERENT_COLORS = 8;
+export const TRANSPARENT_COLOR_INDEX = -1;
 
 function generateInitialColors(): ColorIndex[] {
   return range(NUM_DIFFERENT_COLORS);

website/src/views/components/ColorPicker.scss

@@ -35,7 +35,7 @@ $arrow-height: 1.5rem;
   &.hidden {
     background: none;
   }
-  
+
   &.ta {
     clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
   }
@@ -106,3 +106,36 @@ $arrow-height: 1.5rem;
   border: 0;
   border-radius: 0;
 }
+
+
+.transparentColor {
+  position: relative;
+  border: 2px solid #ccc;
+  background: white;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 1px;
+    right: 1px;
+    bottom: 1px;
+    left: 1px;
+    background: repeating-linear-gradient(
+      45deg,
+      #ccc,
+      #ccc 2px,
+      transparent 2px,
+      transparent 6px
+    );
+  }
+
+  &:hover::before {
+    background: repeating-linear-gradient(
+      45deg,
+      darken(#ccc, 15%),
+      darken(#ccc, 15%) 2px,
+      transparent 2px,
+      transparent 6px
+    );
+  }
+}

website/src/views/components/ColorPicker.test.tsx

@@ -78,7 +78,13 @@ test('should return the color index of the selected color', () => {
 });
 
 test('should allow a falsy color index to be selected', () => {
-  const { wrapper, onChooseColor } = makeColorPicker();
+  const { wrapper, onChooseColor } = makeColorPicker(1);
   findPopup(wrapper).find('button').first().simulate('click');
   expect(onChooseColor).toHaveBeenCalledWith(0);
 });
+
+test('should set color to transparent when clicking already selected color', () => {
+  const { wrapper, onChooseColor } = makeColorPicker(1);
+  findPopup(wrapper).find('button').at(1).simulate('click');
+  expect(onChooseColor).toHaveBeenCalledWith(-1);
+});

website/src/views/components/ColorPicker.tsx

@@ -4,8 +4,8 @@ import Downshift, { ChildrenFunction } from 'downshift';
 import _ from 'lodash';
 
 import { ColorIndex } from 'types/timetables';
+import { NUM_DIFFERENT_COLORS, TRANSPARENT_COLOR_INDEX } from 'utils/colors';
 
-import { NUM_DIFFERENT_COLORS } from 'utils/colors';
 import styles from './ColorPicker.scss';
 
 type Props = {
@@ -42,10 +42,15 @@ const ColorPicker = memo<Props>((props) => {
           {...getToggleButtonProps({
             title: label,
           })}
-          className={classnames('btn btn-block hoverable', `color-${color}`, styles.moduleColor, {
-            [styles.hidden]: isHidden,
-            [styles.ta]: isTa,
-          })}
+          className={classnames(
+            'btn btn-block hoverable',
+            color === TRANSPARENT_COLOR_INDEX ? styles.transparentColor : `color-${color}`,
+            styles.moduleColor,
+            {
+              [styles.hidden]: isHidden,
+              [styles.ta]: isTa,
+            },
+          )}
         />
         <div
           className={classnames(styles.palette, { [styles.isClosed]: !isOpen })}
@@ -54,7 +59,7 @@ const ColorPicker = memo<Props>((props) => {
           {_.range(NUM_DIFFERENT_COLORS).map((index: ColorIndex) => (
             <button
               type="button"
-              {...getItemProps({ item: index })}
+              {...getItemProps({ item: index === color ? TRANSPARENT_COLOR_INDEX : index })}
               key={index}
               className={classnames(styles.option, `color-${index}`, {
                 [styles.selected]: index === color,

website/src/views/timetable/TimetableCell.scss

@@ -34,6 +34,7 @@ $cell-opacity: 0.5;
 
 .transparentCell {
   border-width: 0 0 0 0;
+  color: inherit;
   background-color: rgba(0, 0, 0, 0);
 }
 

website/src/views/timetable/TimetableCell.tsx

@@ -14,6 +14,7 @@
   getLessonIdentifier,
   LESSON_TYPE_ABBREV,
 } from 'utils/timetables';
+import { TRANSPARENT_COLOR_INDEX } from 'utils/colors';
 import elements from 'views/elements';
 import Tooltip from 'views/components/Tooltip/Tooltip';
 import { Minus, Plus } from 'react-feather';
@@ -108,7 +109,9 @@
     styles.baseCell,
     getLessonIdentifier(lesson),
     elements.lessons,
-    transparent ? styles.transparentCell : [styles.coloredCell, `color-${lesson.colorIndex}`],
+    transparent || lesson.colorIndex === TRANSPARENT_COLOR_INDEX
+      ? styles.transparentCell
+      : [styles.coloredCell, `color-${lesson.colorIndex}`],
     {
       hoverable: !!onClick,
       [styles.clickable]: !!onClick,