From 62db72181c084364d955a86a975a8b18eb7d83bc Mon Sep 17 00:00:00 2001 From: NIDHI2023 Date: Sun, 22 Sep 2024 16:34:39 -0400 Subject: [PATCH 1/6] Created temporary button in top bar for wrapped animation --- src/components/includes/TopBar.tsx | 23 ++ .../includes/WrappedAnimationModal.tsx | 71 ++++++ src/components/pages/SplitView.tsx | 2 + src/media/arrow.svg | 11 + src/media/plus.svg | 9 + src/media/plus2.svg | 9 + src/styles/MessageModal.scss | 19 +- src/styles/wrapped/WrappedAnimation.scss | 203 ++++++++++++++++++ 8 files changed, 345 insertions(+), 2 deletions(-) create mode 100644 src/components/includes/WrappedAnimationModal.tsx create mode 100644 src/media/arrow.svg create mode 100644 src/media/plus.svg create mode 100644 src/media/plus2.svg create mode 100644 src/styles/wrapped/WrappedAnimation.scss diff --git a/src/components/includes/TopBar.tsx b/src/components/includes/TopBar.tsx index bfc0257a7..11f9a633d 100644 --- a/src/components/includes/TopBar.tsx +++ b/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(false); const [image, setImage] = useState(props.user ? props.user.photoUrl : "/placeholder.png"); + const [showWrappedModal, setShowWrappedModal] = useState(false); + + + const whoops = () => { + setShowWrappedModal(true); + }; + + const ref = React.useRef(null); const history = useHistory(); @@ -104,7 +115,15 @@ const TopBar = (props: Props) => { )} + {/* Temporary location for testing */} + Temp place for QMI Wrapped
+ setShowMenu(!showMenu)} @@ -160,6 +179,10 @@ const TopBar = (props: Props) => { )} + {props.snackbars.map((snackbar) => ( diff --git a/src/components/includes/WrappedAnimationModal.tsx b/src/components/includes/WrappedAnimationModal.tsx new file mode 100644 index 000000000..a62f70506 --- /dev/null +++ b/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>; +}; + +const WrappedAnimationModal = ({ + showWrappedModal, + setShowWrappedModal +}: Props) => { + const isShown = showWrappedModal ? 'Visible' : ''; + + const closeModal = () => { + setShowWrappedModal(false); + }; + + + return ( + <> + {showWrappedModal && ( +
+
+ +
+ {/* 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 + */} + + {/* this creates the color gradients on the qmi logo */} + + + + + {/* this is the actual circle part. cx and cy are centers so shld be half of height/width. r is radius */} + + + + + + + + + + + + {/* imported way of using svgs, so cant adjust stroke colors */} + dti arrow + {/* made two pluses since color gradient changes and second one needs + to expand outside of the container. */} + first plus + second plus +
+
+
) + } + + + ); +}; + +export default WrappedAnimationModal; diff --git a/src/components/pages/SplitView.tsx b/src/components/pages/SplitView.tsx index 8b5b5e04d..bab3b39f0 100644 --- a/src/components/pages/SplitView.tsx +++ b/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(false); const [removedQuestionId, setRemovedQuestionId] = useState(undefined); const [showCalendarModal, setShowCalendarModal] = useState(false); + const [isDayExport, setIsDayExport] = useState(false); const [currentExportSessions, setCurrentExportSessions] = useState([{ diff --git a/src/media/arrow.svg b/src/media/arrow.svg new file mode 100644 index 000000000..ff1c5caef --- /dev/null +++ b/src/media/arrow.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/media/plus.svg b/src/media/plus.svg new file mode 100644 index 000000000..215b3fd68 --- /dev/null +++ b/src/media/plus.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/media/plus2.svg b/src/media/plus2.svg new file mode 100644 index 000000000..acc277869 --- /dev/null +++ b/src/media/plus2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/styles/MessageModal.scss b/src/styles/MessageModal.scss index 1b6270d2d..ae205de33 100644 --- a/src/styles/MessageModal.scss +++ b/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; diff --git a/src/styles/wrapped/WrappedAnimation.scss b/src/styles/wrapped/WrappedAnimation.scss new file mode 100644 index 000000000..ee21d0fbe --- /dev/null +++ b/src/styles/wrapped/WrappedAnimation.scss @@ -0,0 +1,203 @@ +.WrappedModalVisible { + text-align: center; + background-color: whitesmoke; + height: 70vh; + width: 70vw; + overflow: hidden; + margin: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + border-radius: 8px; + + .closeButton { + z-index: 5; + align-self: flex-end; + height: 45px; + left: 74.14%; + right: 24.61%; + top: calc(50% - 45px / 2 - 209.5px); + font-size: 20px; + line-height: 48px; + color: #484848; + float: right; + outline: none; + background-color: transparent; + border: none; + } + +} + +.qmi-container { + z-index: 0; + margin-top: 2em; + background-color: whitesmoke; + position: relative; + display: flex; + width: 100%; + height: 100%; + align-content: center; + justify-content: center; +} + +/* made positons based on font-size so it should also look good for smaller screens */ +.red-circle { + position: absolute; + // top: 20%; + margin-top: 3.5em; +} + +.blue-circle { + position: absolute; +} + +/* stroke array is length of path, so circumference. recalculate if radius changes. +dashoffset is percentage to draw of the path +*/ +.red-circle circle { + stroke-dashoffset: 60%; + stroke-dasharray: 725px; + fill: transparent; + transform-origin: 50% 50%; + transform-box: fill-box; + stroke-width: 17; + transform: rotate(45deg); + stroke: #FF5A60; + animation: red-spin 5s 1.5s ease-in-out both; +} + +.blue-circle circle { + stroke-dasharray: 1135px; + fill: transparent; + transform-origin: 50% 50%; + transform-box: fill-box; + stroke-width: 20; + transform: rotate(45deg); + stroke: url(#blue-gradient); + stroke-linecap: round; + animation: blue-spin 3s 4.5s ease-out both; +} + +.arrow-circle { + position: absolute; + transform-origin: 50% 50%; + transform-box: fill-box; + // top: 25%; + margin-top: 10em; + animation: spin 6s 1.5s ease-in-out both, + fadeArrow 0.5s 8s ease-in both; +} +/* Needed two pluses since QMI plus is visibly different gradient than +QMI Wrapped background. First plus applied to logo part of animation, +second plus is used for the expanding transition into background. */ +.first-plus, +.sec-plus { + position: absolute; + // top: 25%; + margin-top: 21em; + left: 50%; + margin-left: 7em; +} + +/* controls when the pluses appear/disappear. in sync with each others delays*/ +.first-plus { + animation: appear-n-grow 1.5s 9s ease-in-out both, + disappear 0.01s 11.5s linear forwards; +} + +.sec-plus { + width: 61px; + height: 61px; + animation: disappear 11.5s linear backwards, + grow 1s 11.5s ease-in both; + overflow: clip; + +} + +@keyframes spin { + 100% { + transform: rotate(360deg) + } +} + +@keyframes disappear { + + 0%, + 100% { + opacity: 0%; + display: none; + } +} + +@keyframes grow { + 100% { + transform: scale(70); + } +} + +@keyframes fadeArrow { + 99% { + opacity: 0% + } + + 100% { + opacity: 0%; + display: none; + } +} + +@keyframes appear-n-grow { + 0% { + opacity: 0%; + transform: scale(0.5); + } + + 80% { + opacity: 100%; + transform: scale(1.2); + } + + 100% { + opacity: 100%; + transform: scale(1); + } +} + +@keyframes red-spin { + 30% { + transform: rotate(10deg); + stroke-dashoffset: 0%; + } + + 50% { + transform: rotate(10deg); + stroke-dashoffset: 0%; + } + + 75% { + transform: rotate(120deg); + stroke-dashoffset: 70%; + stroke-linecap: round; + } + + 100% { + stroke: url(#red-gradient); + transform: rotate(180deg); + stroke-linecap: round; + animation-timing-function: ease-out; + } +} + +@keyframes blue-spin { + 0% { + stroke-dashoffset: 270%; + stroke-opacity: 0%; + } + + 100% { + stroke-opacity: 100%; + stroke-dashoffset: 25%; + transform: rotate(60deg); + } +} \ No newline at end of file From 76fefb976e298d3b16803673d6cb8cea66082a6b Mon Sep 17 00:00:00 2001 From: NIDHI2023 Date: Sun, 22 Sep 2024 17:04:21 -0400 Subject: [PATCH 2/6] adjusting some sizing --- src/components/includes/WrappedAnimationModal.tsx | 1 + src/styles/wrapped/WrappedAnimation.scss | 8 +++++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/includes/WrappedAnimationModal.tsx b/src/components/includes/WrappedAnimationModal.tsx index a62f70506..8ea6eb274 100644 --- a/src/components/includes/WrappedAnimationModal.tsx +++ b/src/components/includes/WrappedAnimationModal.tsx @@ -30,6 +30,7 @@ const WrappedAnimationModal = ({
+ {/* 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, diff --git a/src/styles/wrapped/WrappedAnimation.scss b/src/styles/wrapped/WrappedAnimation.scss index ee21d0fbe..0f9888909 100644 --- a/src/styles/wrapped/WrappedAnimation.scss +++ b/src/styles/wrapped/WrappedAnimation.scss @@ -2,7 +2,7 @@ text-align: center; background-color: whitesmoke; height: 70vh; - width: 70vw; + width: 60vw; overflow: hidden; margin: 0; display: flex; @@ -19,19 +19,20 @@ right: 24.61%; top: calc(50% - 45px / 2 - 209.5px); font-size: 20px; - line-height: 48px; color: #484848; float: right; outline: none; background-color: transparent; border: none; + padding-top: 8px; + padding-right: 8px; } } .qmi-container { z-index: 0; - margin-top: 2em; + margin-top: -10px; background-color: whitesmoke; position: relative; display: flex; @@ -50,6 +51,7 @@ .blue-circle { position: absolute; + // top: 20%; } /* stroke array is length of path, so circumference. recalculate if radius changes. From af142df3eee87a42567a0891edc7edad67a8bba5 Mon Sep 17 00:00:00 2001 From: NIDHI2023 Date: Sun, 22 Sep 2024 17:19:20 -0400 Subject: [PATCH 3/6] fixed linting issues --- .../includes/WrappedAnimationModal.tsx | 21 ++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/src/components/includes/WrappedAnimationModal.tsx b/src/components/includes/WrappedAnimationModal.tsx index 8ea6eb274..d668e360a 100644 --- a/src/components/includes/WrappedAnimationModal.tsx +++ b/src/components/includes/WrappedAnimationModal.tsx @@ -38,16 +38,31 @@ const WrappedAnimationModal = ({ */} {/* this creates the color gradients on the qmi logo */} - + - {/* this is the actual circle part. cx and cy are centers so shld be half of height/width. r is radius */} + {/* this is the actual circle part. + cx and cy are centers so shld be half of height/width. r is radius */} - + From dc0edde70385ae0906970777521fd3baeebc978b Mon Sep 17 00:00:00 2001 From: NIDHI2023 Date: Mon, 7 Oct 2024 17:20:17 -0400 Subject: [PATCH 4/6] adjusted structure to frontend pr, fixed other minor issues --- src/components/includes/TopBar.tsx | 10 +++--- .../includes/WrappedAnimationModal.tsx | 33 ++++++++++--------- src/media/{ => wrapped}/arrow.svg | 0 src/media/{ => wrapped}/plus.svg | 0 src/media/{ => wrapped}/plus2.svg | 0 .../{wrapped => }/WrappedAnimation.scss | 0 6 files changed, 23 insertions(+), 20 deletions(-) rename src/media/{ => wrapped}/arrow.svg (100%) rename src/media/{ => wrapped}/plus.svg (100%) rename src/media/{ => wrapped}/plus2.svg (100%) rename src/styles/{wrapped => }/WrappedAnimation.scss (100%) diff --git a/src/components/includes/TopBar.tsx b/src/components/includes/TopBar.tsx index 11f9a633d..6bbf735aa 100644 --- a/src/components/includes/TopBar.tsx +++ b/src/components/includes/TopBar.tsx @@ -15,7 +15,7 @@ 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 WrappedPlus from "../../media/wrapped/plus.svg"; import WrappedModal from "./WrappedAnimationModal"; @@ -40,7 +40,7 @@ const TopBar = (props: Props) => { const [showWrappedModal, setShowWrappedModal] = useState(false); - const whoops = () => { + const displayWrappedModal = () => { setShowWrappedModal(true); }; @@ -115,12 +115,12 @@ const TopBar = (props: Props) => { )}
- {/* Temporary location for testing */} + {/* Temporary location for testing. Change the WrappedPlus icon also to whatever designers decide */} Temp place for QMI Wrapped
diff --git a/src/components/includes/WrappedAnimationModal.tsx b/src/components/includes/WrappedAnimationModal.tsx index d668e360a..1e94e5638 100644 --- a/src/components/includes/WrappedAnimationModal.tsx +++ b/src/components/includes/WrappedAnimationModal.tsx @@ -1,9 +1,9 @@ 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"; +import arrow from '../../media/wrapped/arrow.svg'; +import smallPlus from '../../media/wrapped/plus.svg'; +import bigPlus from '../../media/wrapped/plus2.svg'; +import "../../styles/WrappedAnimation.scss"; type Props = { showWrappedModal: boolean; @@ -38,17 +38,20 @@ const WrappedAnimationModal = ({ */} {/* this creates the color gradients on the qmi logo */} - - - - + + + + + + + {/* this is the actual circle part. cx and cy are centers so shld be half of height/width. r is radius */} diff --git a/src/media/arrow.svg b/src/media/wrapped/arrow.svg similarity index 100% rename from src/media/arrow.svg rename to src/media/wrapped/arrow.svg diff --git a/src/media/plus.svg b/src/media/wrapped/plus.svg similarity index 100% rename from src/media/plus.svg rename to src/media/wrapped/plus.svg diff --git a/src/media/plus2.svg b/src/media/wrapped/plus2.svg similarity index 100% rename from src/media/plus2.svg rename to src/media/wrapped/plus2.svg diff --git a/src/styles/wrapped/WrappedAnimation.scss b/src/styles/WrappedAnimation.scss similarity index 100% rename from src/styles/wrapped/WrappedAnimation.scss rename to src/styles/WrappedAnimation.scss From d843e7e662b211abdae603bb46edde67d3fb6faa Mon Sep 17 00:00:00 2001 From: NIDHI2023 Date: Mon, 7 Oct 2024 19:55:11 -0400 Subject: [PATCH 5/6] trying to fix yarn --- src/components/includes/TopBar.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/includes/TopBar.tsx b/src/components/includes/TopBar.tsx index 6bbf735aa..324fde735 100644 --- a/src/components/includes/TopBar.tsx +++ b/src/components/includes/TopBar.tsx @@ -115,7 +115,8 @@ const TopBar = (props: Props) => { )}
- {/* Temporary location for testing. Change the WrappedPlus icon also to whatever designers decide */} + {/* Temporary location for testing. + Change the WrappedPlus icon also to whatever designers decide */} Placeholder button for QMI Wrapped Date: Thu, 24 Oct 2024 15:27:26 -0400 Subject: [PATCH 6/6] updated speed --- src/styles/WrappedAnimation.scss | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/src/styles/WrappedAnimation.scss b/src/styles/WrappedAnimation.scss index 0f9888909..e29ec1802 100644 --- a/src/styles/WrappedAnimation.scss +++ b/src/styles/WrappedAnimation.scss @@ -66,7 +66,7 @@ dashoffset is percentage to draw of the path stroke-width: 17; transform: rotate(45deg); stroke: #FF5A60; - animation: red-spin 5s 1.5s ease-in-out both; + animation: red-spin 2s 0.5s ease-in-out both; } .blue-circle circle { @@ -78,7 +78,7 @@ dashoffset is percentage to draw of the path transform: rotate(45deg); stroke: url(#blue-gradient); stroke-linecap: round; - animation: blue-spin 3s 4.5s ease-out both; + animation: blue-spin 1.5s 1.5s ease-out both; } .arrow-circle { @@ -87,8 +87,8 @@ dashoffset is percentage to draw of the path transform-box: fill-box; // top: 25%; margin-top: 10em; - animation: spin 6s 1.5s ease-in-out both, - fadeArrow 0.5s 8s ease-in both; + animation: spin 2.5s 0.5s ease-in-out both, + fadeArrow 0.5s 3s ease-in both; } /* Needed two pluses since QMI plus is visibly different gradient than QMI Wrapped background. First plus applied to logo part of animation, @@ -104,15 +104,15 @@ second plus is used for the expanding transition into background. */ /* controls when the pluses appear/disappear. in sync with each others delays*/ .first-plus { - animation: appear-n-grow 1.5s 9s ease-in-out both, - disappear 0.01s 11.5s linear forwards; + animation: appear-n-grow 1s 3.5s ease-in-out both, + disappear 0.01s 5s linear forwards; } .sec-plus { width: 61px; height: 61px; - animation: disappear 11.5s linear backwards, - grow 1s 11.5s ease-in both; + animation: disappear 5s linear backwards, + grow 0.5s 5s ease-in both; overflow: clip; } @@ -172,20 +172,19 @@ second plus is used for the expanding transition into background. */ stroke-dashoffset: 0%; } - 50% { + 35% { transform: rotate(10deg); stroke-dashoffset: 0%; } - 75% { - transform: rotate(120deg); - stroke-dashoffset: 70%; + 40% { stroke-linecap: round; } 100% { stroke: url(#red-gradient); - transform: rotate(180deg); + transform: rotate(90deg); + stroke-dashoffset: -70%; stroke-linecap: round; animation-timing-function: ease-out; }