Improve Gradebook UI/UX

[damianhxy]

• Assessment headers are generally unreadable -> need a way to delete unused columns (persistently) and easily reformat the remaining columns
• Right-click menu entries are grayed even though they're not disabled

[KesterTan]

• Grayed out column when a user right-clicks is too long, not intuitive
• Need a way to indicate whether a current column is active/inactive and which column (since there can be multiple with the same name) is linked to which button in the grey column
• Version should also displayed/not displayed together with their corresponding assessment, its not very intuitive to not display an assessment and display the attributed version without an assessment

[KesterTan]

• The grey color is not inclusive for people who are visually impaired because of the low contrast
• Changes are not sticky when the page is refreshed.
• Having multiple columns labelled version is confusing.

[KesterTan]

Consider:

• Slick.Plugins.HeaderButtons to allow for resize of columns.
• Use ticks like in this example or this to make menu more intuitive, should also change the background color. We can also add an option to save the config to make this sticky.
• Adding a dropdown at each row which when clicked will bring up a popup about data attributed to that row.
• Group version and assessment name together like this so that each version is grouped with its corresponding assessment. I think we can also consider grouping the assessments and labs together.