Closes #2433: Customize the dashboard so it looks like it belongs to Telescope

[suhhee1011]

Issue This PR Addresses

FIxes #2433.

Type of Change

• UI: Change which improves UI

Description

This issue was changing the UI of the Dash board page from default one from "Material Dashboard 2" to "Telescope".
The following parts are that I changed.

• use the Telescope logo
• use the Telescope favicon
• Change "Material Dashboard 2" to "Telescope Dashboard"
• Get rid of the "Upgrade to Pro" button
• Get rid of copyright and other links in the footer
• Change the primary color from reddish/purple to use the primary Telescope color

Screenshot for the changed UI of Dash board

Checklist

• Quality: This PR builds and passes our npm test and works locally
• Tests: This PR includes thorough tests or an explanation of why it does not
• Screenshots: This PR includes screenshots or GIFs of the changes made or an explanation of why it does not (if applicable)
• Documentation: This PR includes updated/added documentation to user exposed functionality or configuration variables are added/changed or an explanation of why it does not(if applicable)

[gitpod-io]

[humphd]

Can you rebase this so it pics up the changes in index.html?

[humphd]

I like where this is going. I wonder if the dark black background is too much with our blue?

cc @PedroFonsecaDEV

[menghif]

Looks great! 😀

[menghif]

One more thing, there is scrolling in the sidebar when it's not needed.

[mqnguyen5]

I was working on #2461 and was having the same issue about the CSS styles override. The dashboard and the Build log all use the same side nav, so I was wondering if I should I only focus on changing the Build log UI to look like the old Dashboard UI first, and when this one get's merged, update the CSS to match with the Telescope color scheme.

@humphd what do you think?

[mqnguyen5]

Also, I believe the reason that causes scrolling is because of this:

.navbar-vertical.navbar-expand-xs .navbar-collapse {
    display: block;
    overflow: auto;
    height: calc(100vh - 360px); --> this is causing scrolling
}

We can remove the scrollbar by removing the height property here, but overriding height like @suhhee1011 didn't seems to be working. @menghif any thoughts on this?

[menghif]

@mqnguyen5 I tried your suggestion to fix the scroll issue and it did not fix the problem. The issue goes away when removing the classes "collapse navbar-collapse" from here:

telescope/src/api/status/public/index.html

Line 63 in 8970973

<div class="collapse navbar-collapse w-auto max-height-vh-100" id="sidenav-collapse-main">

I'm not sure if that's a good way to approach it though.

[mqnguyen5]

@menghif I'll keep looking to see if I can find anything else. Thanks for the comment!

[humphd]

This is failing prettier, please setup your env correctly and/or run npm run prettier.

Can we get an updated screenshot of what this looks like? What's left to do on this?

[Andrewnt219]

Tested on local, working great. Can you move style.css into the public/css folder, name it site.css and update its <link />?

[menghif]

One last thing, what happened to the "Dashboard" button?

We should have "Dashboard" and then underneath "Build Log"

EDIT: this can be changed in a future issue

[humphd]

@suhhee1011 these can get deleted:

[humphd]

What's the status of this?

[suhhee1011]

Almost done with editing by comment I will update pr in a hour :)

[Andrewnt219]

Look great, just some clean-up work.

[Andrewnt219]

Nice, it's good to merge.

[humphd]

Please update the following:

• Remove Tables, Billing, Virtual Reality, RTL, Notifications.
• Change the text of "Account Pages" to "Telescope Links"
• You repeat all the Telescope links twice. Get rid of the second set.

[suhhee1011]

[PedroFonsecaDEV]

I like where this is going. I wonder if the dark black background is too much with our blue?

cc @PedroFonsecaDEV

@humphd
Sorry, I got here too late.
But I like it; I don't see any problems with the colour.
I really like where all of the UI/UX work is heading.
Amazing.