contain exercise within exercise-box container

uclaacm · Oct 31, 2023 · c99d880 · c99d880
1 parent 8d4f7a2
commit c99d880
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 22 deletions.
diff --git a/src/components/shared/ExerciseSide.tsx b/src/components/shared/ExerciseSide.tsx
@@ -21,9 +21,9 @@ function ExerciseSide({ incrementExercise }: ExerciseSideProps): JSX.Element {
   type availableExercises = 'axis' | 'congrats' | 'graph' | 'unitcircle';
 
   const exercises: availableExercises[] = [
+    'unitcircle',
     'axis',
     'graph',
-    'unitcircle',
     'congrats',
   ];
   let curExercise;
@@ -132,19 +132,21 @@ function ExerciseSide({ incrementExercise }: ExerciseSideProps): JSX.Element {
     );
   } else if (exercises[completeExercises] === 'unitcircle') {
     curExercise = (
-      <div>
-        <UnitCircleExercise
-          turtleAngle={1}
-          markers={['A', '', 'B']}
-          labels={['B', 'C', 'D']}
-        />
-        <UnitCircleInput
-          nextExercise={() => {
-            setCompleteExercises(completeExercises + 1);
-            incrementExercise();
-            return;
-          }}
-        />
+      <div className="exercise-box">
+        <div>
+          <UnitCircleExercise
+            turtleAngle={1}
+            markers={['A', '', 'B']}
+            labels={['B', 'C', 'D']}
+          />
+          <UnitCircleInput
+            nextExercise={() => {
+              setCompleteExercises(completeExercises + 1);
+              incrementExercise();
+              return;
+            }}
+          />
+        </div>
       </div>
     );
   }

diff --git a/src/styles/Exercises/UnitCircleExercise.scss b/src/styles/Exercises/UnitCircleExercise.scss
@@ -1,22 +1,31 @@
 .circle-container {
+  // display: flex;
+  // flex-direction: row;
+  // justify-content: center;
+  // margin: 25% 10% 15%;
+  // position: relative;
+  // width: calc(550px + 1vw);
+  align-items: center;
+  align-self: center;
   display: flex;
   flex-direction: row;
+  height: calc(150px + 1vw);
   justify-content: center;
-  margin: 25% 10% 15%;
-  position: relative;
-  width: calc(550px + 1vw);
+  margin: 2%;
+  max-width: 100%;
+  width: 50%;
 }
 
 .circle {
   position: relative;
-  width: 100%;
+  width: 70%;
 }
 
 .turtle {
   bottom: calc(0.15 * 100%);
   left: calc(0.46 * 100%);
   position: absolute;
-  width: 10%;
+ // width: 10%;
 }
 
 .circle-exercise {

diff --git a/src/styles/Exercises/UnitCircleInput.scss b/src/styles/Exercises/UnitCircleInput.scss
@@ -54,7 +54,7 @@
   background-color: colors.$input-grey;
 }
 
-/*#unitcircle-check-button {
+#unitcircleinput-check-button {
   @include font-styles();
   background-color: colors.$primary-green;
   border: hidden;
@@ -72,9 +72,9 @@
   align-self: center;
 }
 
-.unitcircle-check-button-container {
+.unitcircleinput-check-button-container {
   align-self: center;
-}*/
+}
 
 .instruction {
   @include font-styles();