Signup page fixes

[gorkem-bwl]

1. Signup > Email section description shows key instead of a value ("commonEmail")
2. Same applies for authRegisterTerms and authRegisterPrivacy
3. Fix the button height to 34px (which is our button component default height)
4. When I go to "Enter your personal details" page the focus is on Surname, not name.

[rajmahajan3196]

I can work in it, please assign it to me

[gorkem-bwl]

Thanks Raj - assigned! :)

[rajmahajan3196]

I have completed all of the work except "3. Fix the button height to 34px (which is our button component default height)"

Is this a place where a default height is maintained for signup buttons?
Pages/Auth/Index.css

or should I edit the specific button? example:
Register/Step One/Index.jsx

[gorkem-bwl]

I believe it's under components, but I'll leave it to core devs to respond here.

[rajmahajan3196]

Can we tag some core devs here?

[Br0wnHammer]

Hey @rajmahajan3196, how can I help?

All the buttons have the same height. There is no specific signup button. You can check it under:
Utils/Theme/globalTheme.js

[rajmahajan3196]

In task 3, its mentioned to make the button height to 34px. Below is my hypothesis on what is happening, please let me know if my understanding is accurate.

To fix the height of buttons in signup pages, the height is defined in Pages/Auth/Index.css line 37

.auth button:not(.MuiIconButton-root) -> Targets all elements inside an element with the .auth class which is in Register.jsx.

But if the viewport width becomes less than 800px, the button height becomes 36px because the height condition is inside @media (max-width: 800px) { Pages/Auth/Index.css line 96

In Globaltheme.js, a height of 34px for 'MuiButton' is mentioned but I don't think it is taking priority over above conditions, so it's never 34px.

Do you want me to proceed with changing the button height in index.css for all widths?

Width>800px:

Width<800px:

[Br0wnHammer]

In task 3, its mentioned to make the button height to 34px. Below is my hypothesis on what is happening, please let me know if my understanding is accurate.

To fix the height of buttons in signup pages, the height is defined in Pages/Auth/Index.css line 37

.auth button:not(.MuiIconButton-root) -> Targets all elements inside an element with the .auth class which is in Register.jsx.

But if the viewport width becomes less than 800px, the button height becomes 36px because the height condition is inside @media (max-width: 800px) { Pages/Auth/Index.css line 96

In Globaltheme.js, a height of 34px for 'MuiButton' is mentioned but I don't think it is taking priority over above conditions, so it's never 34px.

Do you want me to proceed with changing the button height in index.css for all widths?

Width>800px: Width<800px:

@gorkem-bwl, your views on this?

[Br0wnHammer]

@rajmahajan3196, you are thinking in the right direction. We can change this to 34px. That should do the trick. As this occurs on the login page as well.

.auth button:not(.MuiIconButton-root),
.auth .field .MuiInputBase-root:has(input) {
	height: 38px;
}

@media (max-width: 800px)
	.auth button:not(.MuiIconButton-root),
	.auth .field .MuiInputBase-root:has(input) {
		height: 36px;
	}