Fonts in button group components must be 13px

[gorkem-bwl]

Just like the title says, the fonts here should be 13px and not 14px

[MonishKumar-max]

@gorkem-bwl Hey can you please assign me the issue?

[gorkem-bwl]

Hello @MonishKumar-max - sure I can assign it. Thank you for your interest.

Please make sure you read this before starting.

[MonishKumar-max]

@gorkem-bwl
Can you please tell me that in what file I have to make the changes?

[romeu-maleiane]

@gorkem-bwl Hey, I would like to contribute to this issue.

[gorkem-bwl]

@gorkem-bwl Can you please tell me that in what file I have to make the changes?

Did you check components?

[MonishKumar-max]

@gorkem-bwl there are many components . I could not identify the right one. Could you please tell me the component name?

[Cihatata]

@gorkem-bwl there are many components . I could not identify the right one. Could you please tell me the component name?

https://github.com/bluewave-labs/Checkmate/blob/9e653f7f49d25c8b5e9b029101d28f63327002c9/src/Pages/Incidents/Components/OptionsHeader/index.jsx

I think you should change Options Header buttons font size @MonishKumar-max

[MonishKumar-max]

@Cihatata I have sent the issue I am facing during running npm install in discord. Nobody have replied

[Cihatata]

@Cihatata I have sent the issue I am facing during running npm install in discord. Nobody have replied

Sorry I am not a member of the discord channel @MonishKumar-max

[anushkasomani]

hello , can i be assigned on this issue. I have already familiarized myself with the project structure while working on a issue before
ETA: 1-2h

[gorkem-bwl]

Thanks @anushkasomani

[gorkem-bwl]

@anushkasomani have you been able to work on this ? :)

[anushkasomani]

@anushkasomani have you been able to work on this ? :)

hello , yeah the button is imported from material ui components and currently its set to --env-var-font-size-medium-plus: 14px; and i need to change it to --env-var-font-size-medium: 13px; ....is it okay if I mention the styling like this

<Button
						variant="group"
						filled={(dateRange === "hour").toString()}
						onClick={() => setDateRange("hour")}
						style={{ fontSize: "var(--env-var-font-size-medium)" }} 
					>

[Br0wnHammer]

@anushkasomani have you been able to work on this ? :)

hello , yeah the button is imported from material ui components and currently its set to --env-var-font-size-medium-plus: 14px; and i need to change it to --env-var-font-size-medium: 13px; ....is it okay if I mention the styling like this

<Button
						variant="group"
						filled={(dateRange === "hour").toString()}
						onClick={() => setDateRange("hour")}
						style={{ fontSize: "var(--env-var-font-size-medium)" }} 
					>

Hey @anushkasomani, we are using predefined designs on the MUI Components defined in the globalTheme.js file.
Simply use fontSize: 13px in the style props and we should be good to go.

[ajhollid]

@Br0wnHammer @anushkasomani there should be no overriding of font sizes on a page specific basis.

If the button font size is incorrect then it should be addressed at the theme level. We should not have one page with buttons having font size 13 and one page where they have font size 14.

@gorkem-bwl the base font for the entire application is meant to be 13px, correct? If so, then we should address the incorrect base font size set in the theme:

typography: {
	fontFamily: fontFamilyPrimary,
	fontSize: 14,
	h1: {
		fontSize: typographyLevels.xl,
		color: palette.primary.contrastText,
		fontWeight: 500,
	},
   ....
}

This will resolve most font size issues.

[anushkasomani]

@Br0wnHammer @anushkasomani there should be no overriding of font sizes on a page specific basis.

If the button font size is incorrect then it should be addressed at the theme level. We should not have one page with buttons having font size 13 and one page where they have font size 14.

@gorkem-bwl the base font for the entire application is meant to be 13px, correct? If so, then we should address the incorrect base font size set in the theme:

typography: {
	fontFamily: fontFamilyPrimary,
	fontSize: 14,
	h1: {
		fontSize: typographyLevels.xl,
		color: palette.primary.contrastText,
		fontWeight: 500,
	},
   ....
}

This will resolve most font size issues.

Alright, I thought we need to change the button font size for this page only.

[gorkem-bwl]

@anushkasomani hey hope all is good. How's everything with this PR? :)

[Trained-Monkey]

@gorkem-bwl hey, may I have a go with this issue.

[gorkem-bwl]

@gorkem-bwl hey, may I have a go with this issue.

Sure go ahead. When do you think you can send a pr, as we are about to make a release?