Notification numbers are not properly aligned

[agarciamontoro]

The numbers in the left hand side bar are not properly aligned, which is very obvious when all the numbers are the same ones, as in the following screenshot:

We need to fix the CSS so they are aligned. I'm not sure if the best way would be to assign the same width to the icons, or to align the icons and the numbers separately.

[RabsonJ]

I would love to work on this

[hanzei]

Awesome, thanks @RabsonJ 👍

[RabsonJ]

Awesome, thanks @RabsonJ 👍

Thank you! Let me get working

[RabsonJ]

@hanzei can you please give me the exact name of the file / it's location

[hanzei]

Sure @RabsonJ. The button are defined in https://github.com/mattermost/mattermost-plugin-github/blob/master/webapp/src/components/sidebar_buttons/sidebar_buttons.jsx. You might want to take a look at the getStyle method first:

mattermost-plugin-github/webapp/src/components/sidebar_buttons/sidebar_buttons.jsx

Lines 211 to 235 in 793631a

	const getStyle = makeStyleFromTheme((theme) => {
	return {
	buttonTeam: {
	color: changeOpacity(theme.sidebarText, 0.6),
	display: 'block',
	marginBottom: '10px',
	width: '100%',
	},
	buttonHeader: {
	color: changeOpacity(theme.sidebarText, 0.6),
	textAlign: 'center',
	cursor: 'pointer',
	},
	containerHeader: {
	marginTop: '10px',
	marginBottom: '5px',
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'space-around',
	padding: '0 10px',
	},
	containerTeam: {
	},
	};
	});

[JanumalaAkhilendra]

I would Like to work on this issue .

[agarciamontoro]

Go ahead, @JanumalaAkhilendra, all yours!