Position of sign in/out button

[sillytsundere]

Description

Position of sign in/out button was moved to top right of screen above the app name.Design choice made by developers. The size of the sign in/out button was also changed. Size was made slightly larger for desktop and a bit larger for mobile device to aid user experience and ability to click button.

Type of Changes

styling, accessibility

Updates

Before

After

Testing Steps / QA Criteria

• git pull
• git checkout sign-out-btn-style
• npm ci
• npm run start
• from any page in the app observe the new location of the sign in/out button at the top right of the header
• sign in/out functionality still works

[github-actions]

Visit the preview URL for this PR (updated for commit df0b3c9):

https://tcl-73-smart-shopping-list--pr47-sign-out-btn-style-nvqhk1qd.web.app

_{(expires Fri, 12 Apr 2024 03:24:27 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 99eed22fcca8bd9874e77f7b7f7d1eeb554a1666}

[rachelspencer]

Looks great Paige! I think this location will make it better on mobile. Maybe we could remove the media query and have the button on desktop the same as on mobile?

[sillytsundere]

@rachelspencer i thought it looked a little small on desktop, at least it just looks sUPER small and far away on my second monitor, but i'll look at it on my laptop screen and you're right it could probably just be the same for both. I'll make that change

[jaguilar89]

This is a good change. We could perhaps add the theme button right below it?

But I also had an idea for a menu button that renders when signed in, in which the theme button and the sign out button could be contained.

Proof of concept:

Screen.Recording.2024-04-02.at.3.42.55.PM.mov

@sillytsundere @rachelspencer @trushmi thoughts??

[sillytsundere]

@jaguilar89 that looks great, I don't know if we need to make a new menu for it, but i think we should get this and the other PR's merged before we continue making any more changes. That way we can see how the final app is going to look, and identify what still needs to be done after seeing how all our implemented changes work together. I do think we'll need to style its position with the theme toggle though. @trushmi and @rachelspencer thoughts?

[trushmi]

@jaguilar89 that looks great, I don't know if we need to make a new menu for it, but i think we should get this and the other PR's merged before we continue making any more changes. That way we can see how the final app is going to look, and identify what still needs to be done after seeing how all our implemented changes work together. I do think we'll need to style its position with the theme toggle though. @trushmi and @rachelspencer thoughts?

I find @jaguilar89's idea very interesting and worth discussing! For now, I agree with @sillytsundere to check how the final app is going to look after we merge our changes and then discuss the menu button.

[trushmi]

Looks good! Great job @sillytsundere !

[rachelspencer]

Yeah sounds good @sillytsundere @trushmi @jaguilar89! I think the sign in button should match the other Radix button themes, this will be easily achieved by replacing the html button with the Radix Button component.

I think we all have the same idea, lets see how all these merges look and tackle some tweaks after!

[polly89]

Love the new location. Great job!