Feature/new login page

[hannyle]

Description

• Introducing new Login page based on the design and switching to CSC Color scheme and font styles.
• Updating new components with MUI v.5 and Typescript

Related issues

Closes #363 and #531

Type of change

• New feature (non-breaking change which adds functionality)
• This change requires a documentation update (this needs a follow up PR)

Changes Made

• Switched our current color theme to CSC color system and update its typescript file theme.d.ts
• Imported the new font Museo Sans to match with CSC Design system and declare in typescript file font.d.ts
• Rewrote the whole Login page and some parts of Navigation bar (for Login page) according to the new UI design, with new version of MUI 5 and typescript
• Updated cypress tests

Testing

• Integration Tests

[lilachic]

LGTM. Noticed that with narrow window the banner image is cut from right side thus it does not fill the container all the way to the top at at right side

.

[rquazi]

looks good to me :)

[hannyle]

LGTM. Noticed that with narrow window the banner image is cut from right side thus it does not fill the container all the way to the top at at right side .

This is actually more about how we decide the UI would look like on different screens. To have the exact look the best way would be having different banner images responsively for different screen sizes, but I have made a temporary fix for now, we may come up with a better solution later.