116 feature update congratulations page (#133)

* Fix congratulations page * Fix congratulations page * Fixed exerciseCount in App.tsx to 4 --------- Co-authored-by: Sanjna <[email protected]>
uclaacm · Nov 25, 2024 · 4111436 · 4111436
1 parent 9f4be28
commit 4111436
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 84 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -27,7 +27,7 @@ function App(): JSX.Element {
   return (
     <div>
       <main>
-        {exerciseCount < 7 ? (
+        {exerciseCount < 4 ? (
           <>
             <LessonSide
               levelNum={exerciseCount + 1}

diff --git a/src/components/shared/Congratulations.tsx b/src/components/shared/Congratulations.tsx
@@ -1,6 +1,4 @@
 import '../../styles/Congratulations.scss';
-import cat from '../../assets/cat.svg';
-import dog from '../../assets/dog.svg';
 import encouragingTurtle from '../../assets/EncouragingTurtle-Solo.svg';
 import speechBubble from '../../assets/speechBubble.svg';
 import penPalsLogo from '../../assets/turtleLogo.svg';
@@ -25,26 +23,12 @@ function CongratsPage(): JSX.Element {
             id="speech-bubble-image"
           />
           <div id="congratsTxt">CONGRATULATIONS!</div>
-          <div id="blurb">
-            You have come out of your shell and learned the basics of Turtle.{' '}
-          </div>
         </div>
       </div>
 
       <div id="encouraging-turtle-congratulations">
         <img src={encouragingTurtle} alt="turtle image" id="turtle-picture" />
       </div>
-
-      <div id="next">
-        <div id="tryNext">Try these next!</div>
-        <div id="rectangle1">
-          <img src={cat} alt="cat image" id="cat-img" />
-        </div>
-
-        <div id="rectangle2">
-          <img src={dog} alt="dog image" id="dog-img" />
-        </div>
-      </div>
     </section>
   );
 }

diff --git a/src/styles/Congratulations.scss b/src/styles/Congratulations.scss
@@ -10,9 +10,9 @@
 
 #congrats-page-container {
   background-color: colors.$primary-green;
-  display: flex;
+  // display: flex;
   height: 100%;
-  position: relative;
+  // position: relative;
   width: 100%;
 }
 
@@ -40,93 +40,37 @@
 
 .speech-bubble {
   height: auto;
-  padding-left: 12.816vw;
-  padding-right: 18.463vw;
-  padding-top: 6vh;
-  position: absolute;
+  margin-left: 18vw;
+  margin-right: 18vw;
+  // position: absolute;
   width: auto;
 }
 
 #speech-bubble-image {
   height: auto;
-  width: 75%;
+  width: 100%;
 }
 
 #congratsTxt {
   color: colors.$primary-green;
   font-family: 'PT Sans', sans-serif;
   font-size: 4vw;
   font-weight: bold;
-  left: 52%;
+  left: 50vw;
   position: absolute;
   top: 26%;
-  transform: translate(-64%, -26%);
-}
-
-#blurb {
-  color: colors.$primary-green;
-  font-family: 'PT Sans', sans-serif;
-  font-size: 2.8vw;
-  font-weight: bold;
-  left: 50%;
-  position: absolute;
-  top: 55%;
-  transform: translate(-55%, -45%);
+  transform: translate(-50%, -60%);
 }
 
 #encouraging-turtle-congratulations {
-  bottom: 3vh;
+  // bottom: 3vh;
   height: 13.69vh;
-  left: 2vh;
-  position: absolute;
+  // left: 2vh;
+  // position: absolute;
   width: 24vw;
 }
 
 #turtle-picture {
   padding-left: 6vw;
   width: 14vw;
 }
-
-#cat-img {
-  width: 12vh;
-}
-
-#dog-img {
-  width: 12vh;
-}
-
-#tryNext {
-  bottom: 20.5vh;
-  color: colors.$text-white;
-  font-family: 'PT Sans', sans-serif;
-  font-size: 4vh;
-  font-weight: bold;
-  height: auto;
-  position: absolute;
-  right: 10vw;
-  width: auto;
-}
-
-#rectangle1 {
-  background: #e5e5e5;
-  border-radius: 1.48vh;
-  bottom: 3vh;
-  box-shadow: 0.12px 0.12px 0.5px rgba(0, 0, 0, 0.25);
-  float: right;
-  height: 14.46vh;
-  position: absolute;
-  right: 2.8vh;
-  text-align: center;
-  width: 26.2vh;
-}
-
-#rectangle2 {
-  background: #e5e5e5;
-  border-radius: 1.48vh;
-  bottom: 3vh;
-  box-shadow: 0.12px 0.12px 0.5px rgba(0, 0, 0, 0.25);
-  height: 14.46vh;
-  position: absolute;
-  right: 31vh;
-  width: 26.2vh;
-}