QMI Wrapped Intro Animation

src/components/includes/TopBar.tsx

@@ -15,6 +15,9 @@ import { RootState } from "../../redux/store";
 import { updateLastSent } from "../../firebasefunctions/notifications";
 import Snackbar from "./Snackbar";
 import TextNotificationModal from "./TextNotificationModal";
+import WrappedPlus from "../../media/plus.svg";
+import WrappedModal from "./WrappedAnimationModal";
+
 
 type Props = {
     courseId: string;
@@ -34,6 +37,14 @@ const TopBar = (props: Props) => {
     const [showMenu, setShowMenu] = useState(false);
     const [showTextModal, setShowTextModal] = useState<boolean>(false);
     const [image, setImage] = useState(props.user ? props.user.photoUrl : "/placeholder.png");
+    const [showWrappedModal, setShowWrappedModal] = useState<boolean>(false);
+
+
+    const whoops = () => {
+        setShowWrappedModal(true);
+    };
+
+
     const ref = React.useRef<HTMLDivElement>(null);
     const history = useHistory();
 
@@ -104,7 +115,15 @@ const TopBar = (props: Props) => {
                             <ProfessorStudentToggle courseId={props.courseId} context={props.context} />
                         )}
                     </div>
+                    {/* Temporary location for testing */}
+                    <img
+                        src={WrappedPlus}
+                        alt='Temp place for QMI Wrapped'
+                        className='QMILogoImage'
+                        onClick={whoops}
+                    />
                     <div className="rightContentWrapper">
+
                         <TopBarNotifications
                             notificationTracker={notificationTracker}
                             iconClick={() => setShowMenu(!showMenu)}
@@ -160,6 +179,10 @@ const TopBar = (props: Props) => {
                     </ul>
                 </>
             )}
+            <WrappedModal
+                showWrappedModal={showWrappedModal}
+                setShowWrappedModal={setShowWrappedModal}
+            />
             <TextNotificationModal showTextModal={showTextModal} setShowTextModal={setShowTextModal} user={user} />
             {props.snackbars.map((snackbar) => (
                 <Snackbar icon={snackbar.icon} announcement={snackbar.text} />

src/components/includes/WrappedAnimationModal.tsx

@@ -0,0 +1,71 @@
+import React, { Dispatch, SetStateAction } from 'react';
+import { Icon } from 'semantic-ui-react';
+import arrow from '../../media/arrow.svg';
+import smallPlus from '../../media/plus.svg';
+import bigPlus from '../../media/plus2.svg';
+import "../../styles/wrapped/WrappedAnimation.scss";
+
+type Props = {
+    showWrappedModal: boolean;
+    setShowWrappedModal: Dispatch<SetStateAction<boolean>>;
+};
+
+const WrappedAnimationModal = ({
+    showWrappedModal,
+    setShowWrappedModal
+}: Props) => {
+    const isShown = showWrappedModal ? 'Visible' : '';
+
+    const closeModal = () => {
+        setShowWrappedModal(false);
+    };
+
+
+    return (
+        <>
+            {showWrappedModal && (
+                <div className='WrappedModalScreen'>
+                    <div className={'WrappedModal' + isShown}>
+                        <button type='button' className='closeButton' onClick={closeModal}>
+                            <Icon name='x' />
+                        </button>
+                        <div className='qmi-container'>
+                            {/* creates first red svg circle. need linear gradient tags here 
+          since didn't import this svg.
+          make note that width and height are basically the box containing the circle,
+          so they need to be double the radius
+          */}
+                            <svg className="red-circle" width="300" height="300">
+                                {/* this creates the color gradients on the qmi logo */}
+                                <linearGradient id="red-gradient" x1="24.4251" y1="-52.6352" x2="112.279" y2="143.659" gradientUnits="userSpaceOnUse">
+                                    <stop stopColor="#FF9399" />
+                                    <stop offset="1" stopColor="#FF5A60" />
+                                </linearGradient>
+                                {/* this is the actual circle part. cx and cy are centers so shld be half of height/width. r is radius */}
+                                <circle cx='150' cy='150' r='115'> </circle>
+                            </svg>
+                            <svg className="blue-circle" width="400" height="400">
+                                <defs>
+                                    <linearGradient id="blue-gradient" x1="36.7649" y1="66.8832" x2="134.326" y2="192.278" gradientUnits="userSpaceOnUse">
+                                        <stop stopColor="#B2D9FF" />
+                                        <stop offset="1" stopColor="#78B6F4" />
+                                    </linearGradient>
+                                </defs>
+                                <circle cx='200' cy='200' r='180'> </circle>
+                            </svg>
+                            {/* imported way of using svgs, so cant adjust stroke colors */}
+                            <img src={arrow} className="arrow-circle" alt="dti arrow" />
+                            {/* made two pluses since color gradient changes and second one needs
+           to expand outside of the container. */}
+                            <img src={smallPlus} className="first-plus" alt="first plus" />
+                            <img src={bigPlus} className="sec-plus" alt="second plus" />
+                        </div>
+                    </div>
+                </div>)
+            }
+        </>
+
+    );
+};
+
+export default WrappedAnimationModal;

src/components/pages/SplitView.tsx

@@ -13,6 +13,7 @@ import { firestore } from '../../firebase';
 import { removeQuestionbyID, submitFeedback } from '../../firebasefunctions/sessionQuestion';
 import TopBar from '../includes/TopBar';
 import CalendarExportModal from '../includes/CalendarExportModal';
+
 import { RootState } from '../../redux/store';
 import { updateCourse, updateSession } from "../../redux/actions/course";
 import Browser from '../../media/browser.svg';
@@ -89,6 +90,7 @@ const SplitView = ({
     const [displayFeedbackPrompt, setDisplayFeedbackPrompt] = useState<boolean>(false);
     const [removedQuestionId, setRemovedQuestionId] = useState<string | undefined>(undefined);
     const [showCalendarModal, setShowCalendarModal] = useState<boolean>(false);
+
     const [isDayExport, setIsDayExport] = useState<boolean>(false);
     const [currentExportSessions, setCurrentExportSessions] =
         useState<FireSession[]>([{

src/styles/MessageModal.scss

@@ -1,6 +1,7 @@
 .CalendarExportModalScreen,
 .NotifModalScreen,
-.JoinErrorMessageScreen {
+.JoinErrorMessageScreen,
+.WrappedModalScreen {
   position: fixed;
   display: flex;
   align-items: center;
@@ -23,7 +24,8 @@
 
 .CalendarExportModalVisible,
 .NotificationModalVisible,
-.JoinErrorMessageVisible {
+.JoinErrorMessageVisible
+{
   width: 450px;
   height: 300px;
   border-radius: 8px;
@@ -75,6 +77,19 @@
   height: 300px;
 }
 
+@keyframes modalFadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+.WrappedModalScreen{
+  animation: 0.15s linear both modalFadeIn;
+}
+
 .CalendarExportModalScreen {
   .Title {
     font-weight: 500;