Merge pull request #916 from cornell-dti/eric/fix_ui

Fixed UI Bugs for QMI Wrapped
cornell-dti · Dec 19, 2024 · bee32f5 · bee32f5
2 parents 2b9f742 + df76936
commit bee32f5
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 37 deletions.
diff --git a/src/components/includes/TopBarNotifications.tsx b/src/components/includes/TopBarNotifications.tsx
@@ -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>
                 ) : (
@@ -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>
     );

diff --git a/src/components/includes/Wrapped.tsx b/src/components/includes/Wrapped.tsx
@@ -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>
@@ -540,7 +539,7 @@ const Wrapped= (props: Props): JSX.Element => {
                 </div>
             </div>
         </div>
-    )
+    );
 
     const TimeSpent = () => (
         <>

diff --git a/src/styles/Wrapped.scss b/src/styles/Wrapped.scss
@@ -180,8 +180,8 @@
     position: absolute;
     top: 3rem;
     left: 3rem;
-    font-weight: 600;
-    font-size: 27px;
+    font-size: 35px;
+    font-weight: bold;
   }
 
   &.nums-container{
@@ -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{
@@ -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";
@@ -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;
@@ -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;
   }
 }