Allow users to customize their planner cross-out marking color

[michaelgira23]

Instead of having a single bright red for each event, allow users to change the planner crosses on a planner-wide basis "to complete [Sarah's] aesthetic" (Niesen).

[andrewcode-create]

In order to change this, I would need to add a user setting for what color to cross out with. How would I do that?

[michaelgira23]

There's two ways we could do this. First, we have a single setting for the user's document that represents the hex code for the crossout color. This could apply to all classes at the same time.

Alternatively, we could add another property in an individual class document that represents the crossout color. The latter has the advantage that the user has fine-grained control over the crossout color for each class color, but it might be more complicated for the user to configure and may require more development work on the frontend to enable configuring it.

Both would likely require modifying the backend

[GrantBaum]

I can take care of this, its seems pretty easy. Here's how I would approach it:

• JS file that associates a color's hex code with the name of that color. (const blue = #0000FF)

• After setting the available colors, function grabs the input of a dropdown menu by name (blue) and spits out a hex code (#0000FF)

• Allow the API to read this and save it wherever we keep the API preferences

• Use the API to alter frontend based on the users preferred hex code, or color.

All the API stuff is kind of beyond me, but I'm sure I could write the JS file in 20 minuites. I'll get started, meanwhile @michaelgira23 whenever you're available next could we maybe have a quick chat about implementing this with the API? Thanks.

[michaelgira23]

Sure thing, happy to get on a call. To allow users more customizability, we can also use the color picker component that we already have for picking out the class base colors. But I like the color dropdown too.