You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Currently, we have two components that represent the visual header for the home pages: photoHeader.tsx and adminPhotoHeader.tsx. They should look the same; so, in this ticket, we're going to use the adminPhotoHeader in both places.
First, move the contents of adminPhotoHeader.tsx to photoHeader.tsx, and delete the old adminPhotoHeader.tsx file. Go into student-home.tsx and admin-home.tsx and use this new component in both places.
Then, update the sizing on the photo header. Right now, the photo header has a "fixed height" of "200px", but stretches and resizes on resize of the page (while the translucent white overlay stays the same height). We'd like to change it so that the photo header is always 150px; and, so that the translucent white overlay is always half the height of the overall header (75px).
Then, we'd like to fix a few of the visual details in the photo header's profile section.
Currently, the profile image stretches to fit its square frame. Change this so that the image isn't stretched, but simply cropped on overflow.
Make the "Name" and "email" text a little bit bigger! Name as text-lg and email as text-md should be good.
Finally, hooking up the photoHeader's profile section! Right now, photoHeader takes name, email, and image props to represent a given Student or Admin's account information. This information is pulled from the session user, validated in a getServerSideProps() function in admin-home.tsx. We'd like to copy this work into student-home.tsx.
Copy the full definition of function getServerSideProps in admin-home.tsx into student-home.tsx: starting at line 300 (export const getServerSideProps = async (...) to line 366 (return { props: { ... }, }; };). Remove the check for the user's admin status, so that non-admin users aren't rerouted to the home page on accessing student-home.
Then, reference admin-home.tsx for guidance on how to pass values name, email, and image into your photoHeader component on the student page!
The text was updated successfully, but these errors were encountered:
🎯 due Monday, April 8th
Currently, we have two components that represent the visual header for the home pages:
photoHeader.tsx
andadminPhotoHeader.tsx
. They should look the same; so, in this ticket, we're going to use theadminPhotoHeader
in both places.adminPhotoHeader.tsx
tophotoHeader.tsx
, and delete the oldadminPhotoHeader.tsx
file. Go intostudent-home.tsx
andadmin-home.tsx
and use this new component in both places.Then, we'd like to fix a few of the visual details in the photo header's profile section.
text-lg
and email astext-md
should be good.Finally, hooking up the photoHeader's profile section! Right now, photoHeader takes
name
,email
, andimage
props to represent a given Student or Admin's account information. This information is pulled from the sessionuser
, validated in agetServerSideProps()
function inadmin-home.tsx
. We'd like to copy this work intostudent-home.tsx
.getServerSideProps
inadmin-home.tsx
intostudent-home.tsx
: starting at line300
(export const getServerSideProps = async (...
) to line366
(return { props: { ... }, }; };
). Remove the check for the user's admin status, so that non-admin users aren't rerouted to the home page on accessingstudent-home
.admin-home.tsx
for guidance on how to pass valuesname
,email
, andimage
into yourphotoHeader
component on the student page!The text was updated successfully, but these errors were encountered: