Congrats page can be called without lessonside on the side if it's th…

…e first exercise, but there is a problem when it gets called after other exercises since the lessonside gets called previously. It is also not reactive to the page size.

src/components/App.tsx

@@ -1,5 +1,4 @@
 import { useState, useEffect } from 'react';
-import CongratsPage from './shared/Congratulations';
 import ExerciseSide from './shared/ExerciseSide';
 import LessonSide from './shared/LessonSide/LessonSide';
 import '../assets/WestwoodSans-Regular.ttf';
@@ -24,10 +23,14 @@ function App(): JSX.Element {
     }
   };
 
-  if (exerciseCount == 5) {
+  // change this to be max exercise
+  if (exerciseCount == 0) {
     return (
       <main>
-        <CongratsPage />
+        <ExerciseSide
+          ExercisesNum={exerciseCount}
+          incrementExercise={() => setExerciseCount(exerciseCount + 1)}
+        />
       </main>
     );
   }

src/components/shared/ExerciseSide.tsx

@@ -4,6 +4,7 @@ import '../../styles/ExerciseSide.scss';
 
 //import AxisExercise from './Exercises/AxisExercise';
 //import AxisInput from './Exercises/AxisInputs';
+import CongratsPage from './Congratulations';
 import AxisParent from './Exercises/AxisParent';
 import GraphExercise from './Exercises/GraphExercise';
 import GraphInput from './Exercises/GraphInput';
@@ -26,17 +27,17 @@ ExerciseSideProps): JSX.Element {
   const [displayExercise, setDisplayExercise] = useState(0);
 
   type availableExercises =
-    | 'axis'
     | 'congrats'
+    | 'axis'
     | 'graph0'
     | 'unitcircle'
     | 'graph1';
 
   const exercises: availableExercises[] = [
-    'unitcircle',
+    'congrats',
     'axis',
     'graph0',
-    'congrats',
+    'unitcircle',
   ];
   let curExercise;
 
@@ -241,6 +242,8 @@ ExerciseSideProps): JSX.Element {
         </div>
       </div>
     );
+  } else if (exercises[displayExercise] === 'congrats') {
+    return (curExercise = <CongratsPage></CongratsPage>);
   }
 
   return (

src/styles/Congratulations.scss

@@ -10,8 +10,10 @@
 
 #congrats-page-container {
   background-color: colors.$primary-green;
-  flex-grow: 1;
+  display: flex;
   height: 100%;
+  width: 100%;
+  position: relative;
 }
 
 #turtle-logo {
@@ -34,27 +36,28 @@
 #turtle-image {
   display: inline-block;
   vertical-align: middle;
-  //float:left;
 }
 
 .speech-bubble {
   padding-left: 12.816vw;
-  padding-right: 16.463vw;
+  padding-right: 18.463vw;
   padding-top: 6vh;
   position: absolute;
+  height: auto;
+  width: auto;
 }
 
 #speech-bubble-image {
   height: auto;
-  width: 94%;
+  width: 75%;
 }
 
 #congratsTxt {
   color: colors.$primary-green;
   font-family: 'PT Sans', sans-serif;
-  font-size: 5vw;
+  font-size: 4vw;
   font-weight: bold;
-  left: 54%;
+  left: 52%;
   position: absolute;
   top: 26%;
   transform: translate(-64%, -26%);
@@ -63,7 +66,7 @@
 #blurb {
   color: colors.$primary-green;
   font-family: 'PT Sans', sans-serif;
-  font-size: 3.8vw;
+  font-size: 2.8vw;
   font-weight: bold;
   left: 50%;
   position: absolute;
@@ -81,6 +84,7 @@
 
 #turtle-picture {
   width: 14vw;
+  padding-left: 6vw;
 }
 
 #cat-img {
@@ -99,6 +103,8 @@
   font-weight: bold;
   position: absolute;
   right: 10vw;
+  height: auto;
+  width: auto;
 }
 
 #rectangle1 {