Add link to subscriptions page

sandboxnu · Apr 14, 2024 · 2bc4f6f · 2bc4f6f
1 parent 52b628e
commit 2bc4f6f
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 26 deletions.
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -1,7 +1,7 @@
 import { merge } from 'lodash';
 import Head from 'next/head';
 import Link from 'next/link';
-import { useRouter } from 'next/router';
+import { NextRouter, useRouter } from 'next/router';
 import React, {
   ReactElement,
   useCallback,
@@ -58,21 +58,20 @@ type HeaderProps = {
 };
 
 type DropdownMenuWrapperProps = {
-  splashPage?: boolean;
   userInfo: UserInfo | null;
   onSignOut: () => void;
   onSignIn: (token: string) => void;
 };
 
 export const DropdownMenuWrapper = ({
-  splashPage = false,
   userInfo,
   onSignOut,
   onSignIn,
 }: DropdownMenuWrapperProps): ReactElement => {
   const [showModal, setShowModal] = useState(false);
   const [showMenuDropdown, setShowMenuDropdown] = useState(false);
   const dropdownRef = useRef(null);
+  const router = useRouter();
 
   useEffect(() => {
     const handleCloseDropdown = (event: Event): void => {
@@ -96,23 +95,29 @@ export const DropdownMenuWrapper = ({
     setShowMenuDropdown(!showMenuDropdown);
   };
 
-  // Commented out until subscription page is finalized
-  // const subscriptionPage = (): void => {
-  //   router.push('/subscriptions');
-  // };
-
   const DropDownMenu = (): ReactElement => {
     return (
       <div className="user-menu">
-        <div
-          ref={dropdownRef}
-          className={
-            splashPage ? 'user-menu__splash-page' : 'user-menu__icon-wrapper'
-          }
-          onClick={toggleMenuDropdown}
-        >
-          {splashPage && <>Logged In</>}
-          <IconUser className="user-menu__icon" />
+        <div className={'user-menu__icon-wrapper'}>
+          <>
+            {userInfo && !macros.isMobile && (
+              <button
+                onClick={() => router.push('/subscriptions')}
+                className="user-menu__button"
+              >
+                Notifications
+              </button>
+            )}
+            {/* Still need to create FAQ page */}
+            {/* <button>FAQ</button> */}
+          </>
+          <div
+            className="user-menu__icon"
+            ref={dropdownRef}
+            onClick={toggleMenuDropdown}
+          >
+            <IconUser />
+          </div>
         </div>
 
         {showMenuDropdown && (

diff --git a/components/ResultsPage/SemesterDropdown.tsx b/components/ResultsPage/SemesterDropdown.tsx
@@ -46,8 +46,8 @@ function SemesterDropdown({
             className={'DropdownFilter__input'}
             tabIndex={0}
             type="text"
-            value={currentText}
-          />
+            defaultValue={currentText}
+          ></input>
           <DropdownArrow
             aria-label="Dropdown arrow"
             className={`DropdownFilter__icon ${getDropdownStatus()}`}

diff --git a/pages/[campus]/[termId].tsx b/pages/[campus]/[termId].tsx
@@ -75,7 +75,6 @@ export default function Home(): ReactElement {
           </a>
           <div className="signInButtonContainer">
             <DropdownMenuWrapper
-              splashPage={true}
               userInfo={userInfo}
               onSignIn={onSignIn}
               onSignOut={onSignOut}

diff --git a/styles/pages/_Results.scss b/styles/pages/_Results.scss
@@ -224,18 +224,28 @@ $SIDEBAR_WIDTH: 268px;
   position: relative;
   justify-content: flex-end;
 
-  &__icon-wrapper {
+  &__button {
     display: flex;
+    padding: 13px 12px;
+    align-items: center;
+    cursor: pointer;
+    background: none;
+    border: none;
+    // text
+    color: Colors.$NEU9;
+
+    font-family: Lato;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 14px;
   }
 
-  &__splash-page {
+  &__icon-wrapper {
     display: inline-flex;
-    background: Colors.$White;
-    cursor: pointer;
     align-items: center;
-    border-radius: 8px;
+    justify-content: center;
     gap: 12px;
-    padding: 4px 12px;
   }
 
   &__icon {