feat(frontend): Added responsive profile page layout

[rohansen856]

Overview

1. This PR fixes or fixes part of #81.
2. This PR does the following: Created a responsive profile page layout in /profile route according to issue #81

Essential Checklist

• [x] The PR title starts with "Fix #bugnum: ", followed by a short, clear summary of the changes. (If this PR fixes part of an issue, prefix the title with "Fix part of #bugnum: ...".)
• [x] "Allow edits from maintainers" is checked. (See here for instructions on how to enable it.)
• [x] The PR is made from a branch that's not called "main/master".

Proof that changes are correct

PR Pointers

• If you need a review or an answer to a question, and don't have permissions to assign people, leave a comment like the following: "{{Question/comment}} @{{reviewer_username}} PTAL".
• Never force push. If you do, your PR will be closed.

[vercel[bot]]

@rohansen856 is attempting to deploy a commit to the Busify Team on Vercel.

A member of the Team first needs to authorize it.

[RISHIKESHk07]

@rohansen856 LGTM, one final thing make it such that you can navigate to the profile page from the clicking the user icon / button we have at top right corner and if you are up to it make a small animation on switching tabs (in this the highligthed yellow part is above the black line , fix that a bit according to the figma design), @Pratik2026 anything else ?

[rohansen856]

@RISHIKESHk07 of course. i will make the necessary changes and get back to you soon. as for the animation part... is it ok to be a sliding animation of the bottom yellow bar?

[rohansen856]

@RISHIKESHk07 is this alright:?

https://github.com/bsoc-bitbyte/busify/assets/108976786/55989fc4-ef08-499a-bdb3-e729194c1fd2

[Pratik2026]

@rohansen856, we are already using @mui/icons-material library for importing icons. Please replace all the SVG code with corresponding mui-icons. It's not a good practice to include the whole svg code in a file.

[Pratik2026]

@rohansen856, Also please remove the non-relevant screenshots from the PR description & update them with the new ones (keep at most 2 Screenshots)

[rohansen856]

@Pratik2026 is this alright? removed the unnecessary null user check from the file i have removed the style from the global file updated the icons from material ui applied different color to the disabled tab i have also created a css file named animation.css in the profile page directory for the animation. If you have any other change suggestions please tell.

[rohansen856]

@rohansen856, Also please remove the non-relevant screenshots from the PR description & update them with the new ones (keep at most 2 Screenshots)

I have updated the pr screenshots to the latest design

[Pratik2026]

@rohansen856 LGTM, one final thing make it such that you can navigate to the profile page from the clicking the user icon / button we have at top right corner and if you are up to it make a small animation on switching tabs (in this the highligthed yellow part is above the black line , fix that a bit according to the figma design), @Pratik2026 anything else ?

@rohansen856 I think here @RISHIKESHk07 meant to say that we have to make it such that we can navigate to the profile page by clicking on the view profile option which appears when we click on top right button. Please make the changes accordingly.

[Pratik2026]

Also, the changes regarding the font-weight still remain unaddressed. Please do that as well along with the above one.

[rohansen856]

@Pratik2026 i have updated the fontweight and the issue with redirecting in the latest comment. thank you.

[Pratik2026]

merged, thanks for contributing @rohansen856

[rohansen856]

@Pratik2026 the pleasure is all mine!