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.

Sign up for GitHub

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

Fixed UI Bugs for QMI Wrapped #916

Merged
merged 4 commits into from
Dec 19, 2024
Merged

Fixed UI Bugs for QMI Wrapped #916

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0c4f5fc
Fixed UI Bugs
EricWeng23 Dec 9, 2024
32fc4b7
numVisits & small css fixes from Nidhi's pr
rgu0114 Dec 19, 2024
91c3b36
Merge branch 'master' into eric/fix_ui
rgu0114 Dec 19, 2024
df76936
keep pinned top notif
rgu0114 Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 18 additions & 24 deletions src/components/includes/TopBarNotifications.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,18 +113,29 @@ const TopBarNotifications = (
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" }}
>
<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
5 changes: 2 additions & 3 deletions src/components/includes/Wrapped.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -506,13 +506,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={{ fontWeight: 700 }}>
WITH...
</Typography>
</div>
Expand Down Expand Up @@ -540,7 +539,7 @@ const Wrapped= (props: Props): JSX.Element => {
</div>
</div>
</div>
)
);

const TimeSpent = () => (
<>
Expand Down
20 changes: 10 additions & 10 deletions src/styles/Wrapped.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,8 +180,8 @@
position: absolute;
top: 3rem;
left: 3rem;
font-weight: 600;
font-size: 27px;
font-size: 35px;
font-weight: bold;
}

&.nums-container{
Expand All @@ -205,19 +205,19 @@
position: absolute;
bottom: 7.5rem;
right: 3rem;
font-weight: 600;
font-size: 27px;
font-size: 35px;
text-align: right;
font-weight: bold;
width: 300px;
}

&.bottom-text{
position: absolute;
bottom: 5rem;
right: 3rem;
font-weight: 600;
font-size: 27px;
font-size: 35px;
text-align: right;
font-weight: bold;
width: 300px;
}
&.smallGirl{
Expand All @@ -241,10 +241,10 @@
}
&.text{
font-weight: bold;
font-size: 2rem;
margin-bottom: 2rem;
line-height: 2.5rem;
text-align: left;
font-size: 35px;
}
&.personalityType {
font-family: "Roboto";
Expand Down Expand Up @@ -275,7 +275,7 @@

&.top-text{
font-weight: bold;
font-size: 27px;
font-size: 35px;
margin-bottom: 2rem;
line-height: 2.5rem;
text-align: left;
Expand Down Expand Up @@ -501,14 +501,14 @@
font-size: 35px;
}
&.center-text {
font-weight: 600;
font-weight: bold;
width: 279px;
height: 71px;
position: absolute;
top: 195px;
left: 270px;
line-height: 40px;
font-size: 27px;
font-size: 35px;
}
}

Expand Down
Loading