Update the ExerciseReportCard design

garageScript · Dec 11, 2022 · f4b0d6a · f4b0d6a
1 parent 57eee89
commit f4b0d6a
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 23 deletions.
diff --git a/components/ExerciseCard/ExerciseCard.tsx b/components/ExerciseCard/ExerciseCard.tsx
@@ -105,7 +105,7 @@ const ExerciseCard = ({
           </div>
         </>
       )}
-      <ExerciseReportCard exerciseId={exerciseId} answerShown={answerShown} />
+      <ExerciseReportCard exerciseId={exerciseId} />
     </section>
   )
 }

diff --git a/components/ExerciseReportCard/ExerciseReportCard.test.js b/components/ExerciseReportCard/ExerciseReportCard.test.js
@@ -35,7 +35,7 @@ describe('ExerciseReportCard Component', () => {
 
     render(
       <MockedProvider mocks={mocks}>
-        <ExerciseReportCard exerciseId={1} answerShown={true} />
+        <ExerciseReportCard exerciseId={1} />
       </MockedProvider>
     )
 
@@ -54,7 +54,7 @@ describe('ExerciseReportCard Component', () => {
 
     render(
       <MockedProvider mocks={mocks}>
-        <ExerciseReportCard exerciseId={1} answerShown={false} />
+        <ExerciseReportCard exerciseId={1} />
       </MockedProvider>
     )
 

diff --git a/components/ExerciseReportCard/ExerciseReportCard.tsx b/components/ExerciseReportCard/ExerciseReportCard.tsx
@@ -85,10 +85,9 @@ const Body = ({
 
 type Props = {
   exerciseId: number
-  answerShown: boolean
 }
 
-const ExerciseReportCard = ({ exerciseId, answerShown }: Props) => {
+const ExerciseReportCard = ({ exerciseId }: Props) => {
   const [reportMode, setReportMode] = useState(false)
   const [description, setDescription] = useState('')
   const [flagExercise, { data, loading, error }] = useFlagExerciseMutation({
@@ -98,11 +97,9 @@ const ExerciseReportCard = ({ exerciseId, answerShown }: Props) => {
     }
   })
 
-  const marginOnExpand = answerShown ? 'mt-5' : ''
-
   if (data && !loading) {
     return (
-      <div className={`${styles.container} ${marginOnExpand}`}>
+      <div className={styles.container}>
         <h6>Reported a mistake in this exercise</h6>
         <p className="mb-0">
           We appreciate your input. We will shortly investigate the problem that
@@ -113,17 +110,20 @@ const ExerciseReportCard = ({ exerciseId, answerShown }: Props) => {
   }
 
   return (
-    <div className={marginOnExpand}>
+    <div>
       {reportMode ? (
-        <Body
-          data={data}
-          loading={loading}
-          error={error}
-          description={description}
-          setDescription={setDescription}
-          flagExercise={flagExercise}
-          setReportMode={setReportMode}
-        />
+        <>
+          <hr />
+          <Body
+            data={data}
+            loading={loading}
+            error={error}
+            description={description}
+            setDescription={setDescription}
+            flagExercise={flagExercise}
+            setReportMode={setReportMode}
+          />
+        </>
       ) : (
         <Button
           className={`${btnStyles.newButton} ${styles.container__reportBtn}`}

diff --git a/components/ExerciseReportCard/exerciseReportCard.module.scss b/components/ExerciseReportCard/exerciseReportCard.module.scss
@@ -1,7 +1,6 @@
 @use '../../scss/colors.module.scss';
 
 .container {
-  max-width: 400px;
   background-color: hsl(0, 0%, 96%);
   padding: 20px;
   border: 1px solid hsl(0, 0%, 84%);
@@ -21,8 +20,7 @@
 }
 
 .container__btns__container {
-  display: grid;
-  row-gap: 8px;
+  display: flex;
+  column-gap: 10px;
   margin-top: 18px;
-  width: 100%;
 }
diff --git a/stories/components/ExerciseReportCard.stories.tsx b/stories/components/ExerciseReportCard.stories.tsx
@@ -34,7 +34,7 @@ export const Basic = () => {
           }
         ]}
       >
-        <ExerciseReportCard exerciseId={1} answerShown={false} />
+        <ExerciseReportCard exerciseId={1} />
       </MockedProvider>
     </div>
   )
-Original file line number
+Diff line change
@@ Expand Up / @@ -105,7 +105,7 @@ const ExerciseCard = ({ @@
               </div>
             </>
           )}
-          <ExerciseReportCard exerciseId={exerciseId} answerShown={answerShown} />
+          <ExerciseReportCard exerciseId={exerciseId} />
         </section>
       )
     }
@@ Expand Down @@