[Rec-IM] bracket v2

[amos-cha]

gordon-cs/gordon-360-api#1057

OLD

NEW

New component contains these new features:

• interactive drag-able SVG
• time details
• match details links to the match
• winners can be traced through the entire bracket
• responsive hover/coloring
• team names are links to the team page

TODO

• gordon colors
• lightmode

Current Style

All colors are currently hard coded out of selected colors from theme.ts. However, all attempts at using gordon's colors would result in absolute disaster visual results. Moreover, the package does not allow customization of the connector color despite the docs and examples showing that it "should" be possible. This is a package bug and I looked into how the custom theme is combined with the default theme, but the connector is statically set in a file called /src/settings.ts which prevents customization. This results in further visual issues while trying to have dynamic color switches. Furthermore, the base colors are very aesthetic but they clash far too much with light mode, which is why I made the switchup to using Gordon Blue as the base. An issue will have to be made later on for transitioning the Color theme to something more 'sustainable'. But for now, this is a the fix I have come up with.

EDIT COLORS

After consultation, we've decided that greys were simply more consistent and minimalist. Gordon Blue color theme is still in the codebase if we every choose to use it, but the greys provide a more elegant transition that matches both themes.