feat(client): add background animation for description of first challenge (#44519)

* initial

* Apply suggestions from code review

* Update client/src/templates/Challenges/classic/editor.css

client/src/templates/Challenges/classic/MultifileEditor.js

@@ -34,6 +34,7 @@ const propTypes = {
   }),
   theme: PropTypes.string,
   title: PropTypes.string,
+  showProjectPreview: PropTypes.bool,
   usesMultifileEditor: PropTypes.bool,
   visibleEditors: PropTypes.shape({
     scriptjs: PropTypes.bool,
@@ -68,7 +69,8 @@ const MultifileEditor = props => {
     resizeProps,
     title,
     visibleEditors: { stylescss, indexhtml, scriptjs, indexjsx },
-    usesMultifileEditor
+    usesMultifileEditor,
+    showProjectPreview
   } = props;
   const editorTheme = theme === 'night' ? 'vs-dark-custom' : 'vs-custom';
   // TODO: the tabs mess up the rendering (scroll doesn't work properly and
@@ -130,6 +132,7 @@ const MultifileEditor = props => {
                     theme={editorTheme}
                     title={title}
                     usesMultifileEditor={usesMultifileEditor}
+                    showProjectPreview={showProjectPreview}
                   />
                 </ReflexElement>
               );

client/src/templates/Challenges/classic/editor.css

@@ -1,6 +1,3 @@
-#description {
-  background: var(--secondary-background);
-}
 .monaco-editor .margin-view-overlays .line-numbers,
 .monaco-editor .margin-view-overlays .myLineDecoration + .line-numbers {
   color: var(--primary-color);
@@ -48,6 +45,23 @@
   max-width: 700px;
 }
 
+.description-highlighter {
+  background-color: var(--secondary-background);
+  opacity: 1;
+  animation-name: example;
+  animation-duration: 2s;
+  animation-delay: 0.5s;
+}
+
+@keyframes example {
+  from {
+    background-color: var(--highlight-background);
+  }
+  to {
+    background-color: var(--secondary-background);
+  }
+}
+
 #description p:last-child {
   margin: 0px;
 }

client/src/templates/Challenges/classic/editor.tsx

@@ -42,7 +42,8 @@ import {
   submitChallenge,
   initTests,
   isResettingSelector,
-  stopResetting
+  stopResetting,
+  isProjectPreviewModalOpenSelector
 } from '../redux';
 
 import './editor.css';
@@ -76,6 +77,8 @@ interface EditorProps {
   tests: Test[];
   theme: Themes;
   title: string;
+  showProjectPreview: boolean;
+  previewOpen: boolean;
   updateFile: (object: {
     fileKey: FileKey;
     editorValue: string;
@@ -104,6 +107,7 @@ const mapStateToProps = createSelector(
   canFocusEditorSelector,
   consoleOutputSelector,
   isDonationModalOpenSelector,
+  isProjectPreviewModalOpenSelector,
   isResettingSelector,
   userSelector,
   challengeTestsSelector,
@@ -111,11 +115,13 @@ const mapStateToProps = createSelector(
     canFocus: boolean,
     output: string[],
     open,
+    previewOpen: boolean,
     isResetting: boolean,
     { theme = Themes.Default }: { theme: Themes },
     tests: [{ text: string; testString: string }]
   ) => ({
     canFocus: open ? false : canFocus,
+    previewOpen,
     isResetting,
     output,
     theme,
@@ -895,6 +901,18 @@ const Editor = (props: EditorProps): JSX.Element => {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.challengeFiles, props.isResetting]);
+
+  useEffect(() => {
+    const { showProjectPreview, previewOpen } = props;
+    if (!previewOpen && showProjectPreview) {
+      const description = document.getElementsByClassName(
+        'description-container'
+      )[0];
+      description.classList.add('description-highlighter');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.previewOpen]);
+
   useEffect(() => {
     const { output } = props;
     const { model, insideEditDecId } = dataRef.current;

client/src/templates/Challenges/classic/show.tsx

@@ -342,6 +342,9 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
 
   renderEditor() {
     const {
+      pageContext: {
+        projectPreview: { showProjectPreview }
+      },
       challengeFiles,
       data: {
         challengeNode: {
@@ -365,6 +368,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
           resizeProps={this.resizeProps}
           title={title}
           usesMultifileEditor={usesMultifileEditor}
+          showProjectPreview={showProjectPreview}
         />
       )
     );