Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Header and minor ui changes #654

Merged
merged 3 commits into from
Aug 29, 2023
Merged

Header and minor ui changes #654

merged 3 commits into from
Aug 29, 2023

Conversation

apollo1291
Copy link
Contributor

@apollo1291 apollo1291 commented Jun 24, 2023

Adds the Header component (nav bar at the top of the page)

Note: we don't automatically generate profile pictures for new accounts, so the alt text shows in the image below. We should either generate this in the backend (#327 has some work on this), or display a default profile picture. I've added this onto our roadmap

Testing:

  • The hamburger menu (left side of header) should appear at small widths, and the side bar should disappear. The hamburger menu's dropdown should contain all the items from the side bar.
    • When logged out, there should be a Log in option at the bottom of the dropdown.
  • When logged in, the profile image should always appear in the right side of the header. Clicking the profile image triggers a dropdown with 2 options: Your profile, and Sign out
  • When logged out, there should be a Log in and Register button in the right side of the header. The Log in button will disappear at small window widths.

image
image
image
image

@acrantel acrantel changed the base branch from main to frontend2 June 25, 2023 01:22
frontend2/src/components/Header.tsx Outdated Show resolved Hide resolved
frontend2/src/components/Header.tsx Outdated Show resolved Hide resolved
frontend2/src/components/Header.tsx Outdated Show resolved Hide resolved
@acrantel
Copy link
Member

acrantel commented Jul 2, 2023

Copy link
Member

@acrantel acrantel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks for tackling this! headers are super complicated

I put this in comments but wanted to mention it here; images should live in the frontend2/public directory. When you want to reference it in code, you just need to use /<image_name_with_extension> to display it

Also please make sure to run npm run format so that your code is formatted :)

frontend2/src/components/BaseCard.tsx Outdated Show resolved Hide resolved
frontend2/src/components/Header.tsx Outdated Show resolved Hide resolved
frontend2/src/components/Header.tsx Outdated Show resolved Hide resolved
frontend2/src/components/Header.tsx Outdated Show resolved Hide resolved
frontend2/src/components/Header.tsx Outdated Show resolved Hide resolved
frontend2/src/components/Header.tsx Outdated Show resolved Hide resolved
frontend2/src/components/Header.tsx Outdated Show resolved Hide resolved
consistency

responsive header

update header

remove chatgpt comments
@acrantel acrantel changed the title Basecard header Header and minor ui changes Aug 28, 2023
Copy link
Contributor

@lowtorola lowtorola left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! 🎉

@acrantel acrantel merged commit 075ca13 into frontend2 Aug 29, 2023
3 checks passed
@acrantel acrantel deleted the basecard-header branch August 29, 2023 20:58
acrantel added a commit that referenced this pull request Oct 3, 2023
Co-authored-by: Serena Li <serena.li.usa@gmail.com>
acrantel added a commit that referenced this pull request Feb 8, 2024
Co-authored-by: Serena Li <serena.li.usa@gmail.com>
acrantel added a commit that referenced this pull request Feb 8, 2024
Co-authored-by: Serena Li <serena.li.usa@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants