Add MUI theme config to fix Sidebar and Tabs color

[debsmita1]

Which issue(s) does this PR fix

• Fixes https://issues.redhat.com/browse/RHIDP-1165 , https://issues.redhat.com/browse/RHIDP-1164

Selected Tab (dark theme)

Tab when hovered (dark theme)

Selected Tab (light theme)

Tab when hovered (light theme)

Nav when hovered (light theme)

Nav when hovered (dark theme)

[changeset-bot]

🦋 Changeset detected

Latest commit: 12f07a1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
app	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

The image is available at: quay.io/janus-idp/backstage-showcase:pr-960!

[janus-idp]

backstage-showcase Tests on commit fb09139 finished successfully.
View test log

[invincibleJai]

/cc @ShiranHi
/cc @jerolimov

[ShiranHi]

Thank you @debsmita1!, I have few comments

1. Tabs (I compared the screenshots with the design here)
   I think we don't display the gray background color when hovering over the tab or when it's selected

2. Navigation (I compared the screenshots with the design here)
   We shouldn't display the underline below the text when hovering

3. In dark mode, the blue color appears brighter. We use the same main color in both scenarios, both for the tab line color and the blue line on the navigation

[debsmita1]

Thank you @debsmita1!, I have few comments

1. Tabs (I compared the screenshots with the design here)
   I think we don't display the gray background color when hovering over the tab or when it's selected

The tabs component that you see being used in plugins is a Backstage’s HeaderTab component
 and the hover color is the same as the background color of the app.

    tabRoot: {
      '&:hover': {
        backgroundColor: theme.palette.background.default,
        color: theme.palette.text.primary,
      },
    },

2. Navigation (I compared the screenshots with the design here)
   We shouldn't display the underline below the text when hovering

Similarly, the nav component is Backstage's SidebarItem component and there's no prop available that allows removing the underline

3. In dark mode, the blue color appears brighter. We use the same main color in both scenarios, both for the tab line color and the blue line on the navigation

Fixed it, using '#0066CC' as mentioned in the slide

[github-actions]

The image is available at: quay.io/janus-idp/backstage-showcase:pr-960!

[github-actions]

The image is available at: quay.io/janus-idp/backstage-showcase:pr-960!

[ShiranHi]

The tabs component that you see being used in plugins is a Backstage’s HeaderTab component
 and the hover color is the same as the background color of the app.

Can we do the same? so the hover color will be the same to the background?

Similarly, the nav component is Backstage's SidebarItem component and there's no prop available that allows removing the underline

I am not sure why we have that underline on the navigation when hovering, on the Backstage demo env they don't show any underline when hovering

[debsmita1]

The tabs component that you see being used in plugins is a Backstage’s HeaderTab component
> and the hover color is the same as the background color of the app.

Can we do the same? so the hover color will be the same to the background?

So an example to show you what happens if I change the background default color (theme.palette.background.default)

In the light theme, if I have to match the hover color to the selected tab color it will look like this

dark theme would look like

Similarly, the nav component is Backstage's SidebarItem component and there's no prop available that allows removing the underline

I am not sure why we have that underline on the navigation when hovering, on the Backstage demo env they don't show any underline when hovering

Fixed it, the underline was added by us. Thank you sharing the backstage demo

Screen.Recording.2024-02-14.at.12.03.20.PM.mov

[github-actions]

The image is available at: quay.io/janus-idp/backstage-showcase:pr-960!

[gashcrumb]

This looks really good! The only thing that's bugging me is the border line under the tabs, for both light and dark it there's a margin on the left-hand side leaving a space but on the right-hand side of the page there's no space. I tried capturing a more narrow window to help highlight this:

Shows up better in dark mode and I think maybe the border color could be too bright in this variant also:

[debsmita1]

This looks really good! The only thing that's bugging me is the border line under the tabs, for both light and dark it there's a margin on the left-hand side leaving a space but on the right-hand side of the page there's no space. I tried capturing a more narrow window to help highlight this:

Shows up better in dark mode and I think maybe the border color could be too bright in this variant also:

@gashcrumb The HeaderTab component adds this padding on the left

const useStyles = makeStyles(
  theme => ({
    tabsWrapper: {
      gridArea: 'pageSubheader',
      backgroundColor: theme.palette.background.paper,
      paddingLeft: theme.spacing(3), <--------
      minWidth: 0,
    },
    ...

and the createUnifiedTheme util doesn't expose any option to update the spacing

[gashcrumb]

@gashcrumb The HeaderTab component adds this padding on the left
and the createUnifiedTheme util doesn't expose any option to update the spacing

I don't know if maybe trying to override it using something like this could work, but if you like this could be investigated later as a separate thing.

[debsmita1]

@gashcrumb The HeaderTab component adds this padding on the left
and the createUnifiedTheme util doesn't expose any option to update the spacing

I don't know if maybe trying to override it using something like this could work, but if you like this could be investigated later as a separate thing.

This worked! Thank you @gashcrumb !!

[github-actions]

The image is available at: quay.io/janus-idp/backstage-showcase:pr-960!

[ShiranHi]

looks good @debsmita1 ! 🙂

[christoph-jerolimov]

I have two small improvement ideas.

@invincibleJai I'm also fine to get this in now and improve this later. Feel free to add approval, it's def. the right direction and btw it will create a conflict with #957

/lgtm

[invincibleJai]

Thanks @jerolimov

@debsmita1 PTAL at open comments and would be nice if we could handle those in the same PR. LMK

[christoph-jerolimov]

Looks good 👍

/lgtm
/approve

[invincibleJai]

/approve

[christoph-jerolimov]

/retest

[christoph-jerolimov]

/lgtm

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[kadel]

/lgtm
it was just update with main branch

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: invincibleJai, jerolimov, kadel

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS [invincibleJai,kadel]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[github-actions]

The image is available at: quay.io/janus-idp/backstage-showcase:pr-960!