Edit Modal Message, add fix to CourseCheckBox

components/notifications/NewSubscriptionsLimitModal.tsx

@@ -2,6 +2,7 @@ import React, { ReactElement } from 'react';
 import Modal from '../Modal';
 import X from '../icons/X.svg';
 import Boston from '../icons/boston.svg';
+import CryingHusky3 from '../icons/crying-husky-3.svg';
 
 interface NewSubscriptionsLimitModalProps {
   visible: boolean;
@@ -24,12 +25,15 @@ export default function NewSubscriptionsLimitModal({
               <X />
             </button>
           </div>
-          <Boston />
-          <span className="phone-modal__header">Notifications are up!</span>
+          <CryingHusky3 />
+          <span className="phone-modal__header">Notifications Issues</span>
 
           <span className="phone-modal__label">
-            We{`'`}re limiting users to 12 subscriptions at a time to keep
-            SearchNEU running for our growing NEU community.
+            We found issues with unsubscribing from notifications.
+          </span>
+          <span className="phone-modal__label">
+            We are very sorry about the inconvenience this causes, and are
+            working to deploy fixes ASAP. Thank you!
           </span>
         </div>
       </div>

components/panels/CourseCheckBox.tsx

@@ -85,7 +85,8 @@ export default function CourseCheckBox({
       <div className="signUpSwitch toggle">
         <div className="notifSwitch">
           <input
-            disabled={notificationsLimitReached()}
+            //disabled={notificationsLimitReached()}
+            disabled={checked ? false : notificationsLimitReached()}
             checked={checked}
             onChange={onCheckboxClick}
             className="react-switch-checkbox"
@@ -94,26 +95,43 @@ export default function CourseCheckBox({
           />
           <label
             //className={`react-switch-label ${NOTIFICATIONS_ARE_DISABLED && 'disabledButton'}`}
-            className={`react-switch-label ${notificationsLimitReached()}`}
+            className={`react-switch-label ${
+              //notificationsLimitReached()
+              !checked && notificationsLimitReached() && 'disabledButton'
+            }`}
             style={{
               marginTop: '0px',
               cursor: `${
-                notificationsLimitReached() ? 'not-allowed' : 'inherit'
+                //notificationsLimitReached() ? 'not-allowed' : 'inherit'
+                !checked && notificationsLimitReached()
+                  ? 'not-allowed'
+                  : 'inherit'
               }`,
             }}
             htmlFor={notifSwitchId}
           >
             <span className="react-switch-button" />
           </label>
         </div>
-        <Tooltip
-          text={
-            checked
-              ? 'Unsubscribe from notifications for this course.'
-              : 'Subscribe to notifications for this course'
-          }
-          direction={TooltipDirection.Up}
-        />
+        {checked ||
+          (!notificationsLimitReached() && (
+            <Tooltip
+              text={
+                !userInfo
+                  ? 'Sign in to subscribe for notifications.'
+                  : checked
+                  ? 'Unsubscribe from notifications for this section.'
+                  : 'Subscribe to notifications for this section'
+              }
+              direction={TooltipDirection.Up}
+            />
+          ))}
+        {!checked && notificationsLimitReached() && (
+          <Tooltip
+            text="Notification limit reached - unsubscribe to add more."
+            direction={TooltipDirection.Up}
+          />
+        )}
       </div>
       <SignUpModal
         visible={showModal}