Skip to content

Commit

Permalink
Merge pull request #918 from cornell-dti/ui_fixes_n_bugz
Browse files Browse the repository at this point in the history 
UI fixes n bugz
  • Loading branch information
@rgu0114
rgu0114 authored Dec 26, 2024
2 parents bc9c3bf + 4ad0f21 commit ae91711
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 62 deletions.
44 changes: 19 additions & 25 deletions src/components/includes/TopBarNotifications.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,24 +107,35 @@ const TopBarNotifications = (

return (
<div ref={dropdownRef}>
<div className="notifications__top" onClick={() => iconClicked()}>
<div className="notifications__top" style={{ cursor: "grab" }} onClick={() => iconClicked()}>
<img
className="notifications__icon"
src={countdownZero && hasWrapped ? ribbonNotif : notification}
alt="Notification icon"
/>
{!hasViewed &&
<img
className="notifications__indicator"
src={notif}
alt="Notification indicator"
/>
}
{!hasViewed && <img className="notifications__indicator" src={notif} alt="Notification indicator" />}
</div>
<div
className={`notifications__dropdown notifications__${dropped ? "visible" : "hidden"}`}
onClick={(e) => e.stopPropagation()}
>
{/* Additional notification when countdownZero is true */}
{hasWrapped && countdownZero && (
<div
onClick={() => handleNotifClick()}
className="notifications__notification"
style={{ backgroundColor: "#DBE8FD", borderRadius: "8px", cursor: "grab" }}
>
<div className="notification__header">
<div className="notification__title">Queue Me In Wrapped</div>
</div>
<div className="notification__content">
Queue Me In Wrapped has been added to your notifications queue.
You can revisit your office
hour statistics any time by clicking here!
</div>
</div>
)}
{notifications === undefined || (notifications.length === 0 && !countdownZero) ? (
<div className="notification__placeholder">You do not have any notifications</div>
) : (
Expand All @@ -147,23 +158,6 @@ const TopBarNotifications = (
</div>
))
)}
{/* Additional notification when countdownZero is true */}
{hasWrapped && countdownZero && (
<div
onClick={() => handleNotifClick()}
className="notifications__notification"
style={{ backgroundColor: "#DBE8FD", borderRadius: "8px" }}
>
<div className="notification__header">
<div className="notification__title">Queue Me In Wrapped</div>
</div>
<div className="notification__content">
Queue Me In Wrapped has been added to your notifications queue.
You can revisit your office
hour statistics any time by clicking here!
</div>
</div>
)}
</div>
</div>
);
Expand Down
11 changes: 5 additions & 6 deletions src/components/includes/Wrapped.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -252,7 +252,7 @@ const Wrapped= (props: Props): JSX.Element => {
const userDoc = await usersRef.doc(studentData.favTaId).get();

let taNameExists = false;

if (userDoc.exists) {
const taData = userDoc.data() as { firstName: string; lastName: string };
setTaName(taData);
Expand Down Expand Up @@ -513,13 +513,12 @@ const Wrapped= (props: Props): JSX.Element => {
const Visits = () => (
<div>
<div className="visit">

<div style={{ display: "flex", justifyContent: "flex-end", fontWeight: "bold" }}>
<div className="visit top-text">
YOU WORKED SO HARD THIS YEAR!
</div>
<div className="visit mid-text">
<Typography variant="h3">
<Typography variant="h3" style={{ fontSize: "27px" }} >
WITH...
</Typography>
</div>
Expand All @@ -539,15 +538,15 @@ const Wrapped= (props: Props): JSX.Element => {
<div
className="visit bottom-text"
>
<Typography variant="h3">
<Typography variant="h3" style={{ fontSize: "27px" , width: "189px" }}>
{wrappedData.numVisits === 1 ? "VISIT " : "VISITS " }
TO OFFICE HOURS
</Typography>
</div>
</div>
</div>
</div>
)
);

const TimeSpent = () => (
<>
Expand Down Expand Up @@ -785,7 +784,7 @@ const Wrapped= (props: Props): JSX.Element => {
style={{ position: "absolute", top: "0.2rem", right: "0.2rem", color: "#FFFFFF" }}
onClick={props.onClose}
>
<CloseIcon />
<CloseIcon style={{ fontSize: "larger" }} />
</IconButton>
</div>
</div>
Expand Down
73 changes: 42 additions & 31 deletions src/styles/Wrapped.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,19 +45,22 @@
}



.navigateStageVisible {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
height: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, 0);
transition: 0.5s;
border-radius: 100%;
border-radius: 100%;
&:hover {
background-color: rgba(0,0,0, 0.05);
}
Expand All @@ -73,6 +76,9 @@
.MuiSvgIcon-root {
margin-left: 6px;
}
.MuiSvgIcon-root {
margin-left: 6px;
}
}

.next {
Expand Down Expand Up @@ -128,49 +134,48 @@
&.top-text{
position: absolute;
top: 3rem;
left: 0rem;
left: -3.3rem;
font-size: 35px;
font-weight: 600;
color: #080680;
}

&.mid-text{
position:absolute;
top: 6.7rem;
left: -18.67rem;
top: 7.7rem;
left: -20.2rem;
font-size: 27px;
}

&.num-visits{
position: absolute;
bottom: 13rem;
left: -6rem;
font-size: 24rem;
top: 260px;
left: 140px;
font-size: 297px;
width: 336px;
color: #FFA3A3;
opacity: 0.88;
z-index: 0,
}

&.couple{
width: 12rem;
width: 166px;
position: absolute;
right: 11rem;
right: 9rem;
bottom: 12rem;
}

&.girl{
width: 6rem;
width: 68px;
position: absolute;
right: 6rem;
right: 7rem;
bottom: 9rem;
}

&.bottom-text{
position: absolute;
bottom: 5rem;
right: 4rem;
left: 527px;
top: 320px;
font-weight: bold;
width: 300px;
text-align: left;
}
}
Expand All @@ -180,7 +185,7 @@
position: absolute;
top: 3rem;
left: 3rem;
font-weight: 600;
font-weight: 500;
font-size: 27px;
}

Expand All @@ -205,19 +210,21 @@
position: absolute;
bottom: 7.5rem;
right: 3rem;
font-weight: 600;
font-weight: 500;
font-size: 27px;
text-align: right;
font-weight: bold;
width: 300px;
}

&.bottom-text{
position: absolute;
bottom: 5rem;
right: 3rem;
font-weight: 600;
font-weight: 500;
font-size: 27px;
text-align: right;
font-weight: bold;
width: 300px;
}
&.smallGirl{
Expand All @@ -240,15 +247,17 @@
align-items: baseline;
}
&.text{
font-weight: bold;
font-size: 2rem;
font-weight: 500;
font-size: 27px;
margin-bottom: 2rem;
line-height: 2.5rem;
text-align: left;
font-size: 35px;
}
&.personalityType {
font-family: "Roboto";
font-weight: 700;
font-size: 35px;
color: #080680;
text-transform: uppercase;
}
Expand All @@ -274,7 +283,7 @@
}

&.top-text{
font-weight: bold;
font-weight: 500;
font-size: 27px;
margin-bottom: 2rem;
line-height: 2.5rem;
Expand All @@ -284,6 +293,7 @@
&.taName {
font-family: "Roboto";
font-weight: 700;
font-size: 35px;
color: #080680;
text-transform: uppercase;
text-align: left;
Expand All @@ -308,18 +318,19 @@

&.top-text{
position: absolute;
top: 3rem;
left: 3rem;
font-size: 30px;
top: 3.5rem;
left: 2.7rem;
font-size: 35px;
font-weight: 600;
color: #080680;
}

&.mid-text{
position: absolute;
top: 9rem;
left:3rem;
font-weight: 700;
font-size: 29px;
font-weight: 500;
font-size: 27px;
}
&.num{
position: absolute;
Expand All @@ -343,8 +354,8 @@
position: absolute;
top: 26rem;
right: 2rem;
font-weight: 700;
font-size: 29px;
font-weight: 500;
font-size: 27px;
width: 414px;
text-align: right;
}
Expand All @@ -355,7 +366,7 @@
position: absolute;
top: 3.5rem;
left: 3.5rem;
font-weight: bold;
font-weight: 500;
font-size: 27px;
}
&.num{
Expand All @@ -371,7 +382,7 @@
position: absolute;
bottom: 7.5rem;
right: 5rem;
font-weight: bold;
font-weight: 500;
font-size: 27px;
text-align: right;
width: 300px;
Expand Down Expand Up @@ -501,14 +512,14 @@
font-size: 35px;
}
&.center-text {
font-weight: 600;
font-weight: 500;
width: 279px;
height: 71px;
position: absolute;
top: 195px;
left: 270px;
line-height: 40px;
font-size: 27px;
font-size: 35px;
}
}

Expand Down

0 comments on commit ae91711

Please sign in to comment.