Fix figure margins

source-academy · Jun 16, 2021 · 70f2be2 · 70f2be2
1 parent f0ada7b
commit 70f2be2
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/src/features/sicp/parser/ParseJson.tsx b/src/features/sicp/parser/ParseJson.tsx
@@ -116,7 +116,7 @@ const handleFigure = (obj: JsonType, refs: React.MutableRefObject<{}>) => (
   <div ref={ref => (refs.current[obj['id']!] = ref)} className="sicp-figure">
     {handleImage(obj, refs)}
     {obj['captionName'] && (
-      <h5>
+      <h5 className="sicp-caption">
         {obj['captionName']}
         {parseArr(obj['captionBody']!, refs)}
       </h5>
@@ -127,7 +127,7 @@ const handleFigure = (obj: JsonType, refs: React.MutableRefObject<{}>) => (
 const handleImage = (obj: JsonType, refs: React.MutableRefObject<{}>) => {
   if (obj['src']) {
     return (
-      <div className={'sicp-figure'}>
+      <div>
         {obj['src'] && (
           <img
             src={Constants.interactiveSicpUrl + obj['src']}

diff --git a/src/styles/_sicp.scss b/src/styles/_sicp.scss
@@ -180,8 +180,12 @@ $sicp-background-color: #ffffff;
   }
 
   .sicp-figure {
-    margin: auto;
-    text-align: center;
+    margin: 45px auto 25px auto;
+
+    > .sicp-caption {
+      margin: 15px auto;
+      text-align: center;
+    }
   }
 
   // text container