Erase all of the existing CSS from the match view page and style it from scratch. Unfortunately this is necessary as it's become a complete disaster.
Development
The branch for this issue (on the right side) comes off of main and should be merged into main in the PR.
Details
We are front end engineers. This is life.
The goal is to fix the styling of the whole match viewing page to look like the figma. Here are a few things that are immediately evident:
The mini point list and video+scoreboard need to be the same height, and together take up the whole width of the page.
The filter list should be moved into a simple button right at the top of the point list. Have it pop up the existing filter list somewhere nearby for now, we just have to get the filter list out of the way. (see button below).
Put the video and mini point list into a viewport to make sure that it works on mobile and scales down with the screen size
Make sure both point lists are not horizontally scrollable.
Fix the position of the "expand" button and change the text to "see detailed points". Use a down arrow SVG. Make it sticky to the bottom of the mini point list while the rest of the list scrolls underneath.
Make all the border radiuss, the line color and thickness, and gradients the same (the mini point list does the gradients correctly).
don't forget the video border radius
anything that's clickable should show a click hand cursor
krish1925
commented
1 month ago
Summary
Erase all of the existing CSS from the match view page and style it from scratch. Unfortunately this is necessary as it's become a complete disaster.
Development
The branch for this issue (on the right side) comes off of main and should be merged into main in the PR.
Details
We are front end engineers. This is life.
The goal is to fix the styling of the whole match viewing page to look like the figma. Here are a few things that are immediately evident: