refactor(credits): add scrollable content (#670)

ubilabs · Oct 6, 2020 · 870a269 · 870a269
1 parent b110ba1
commit 870a269
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 18 deletions.
diff --git a/src/scripts/components/main/attributions/attributions.styl b/src/scripts/components/main/attributions/attributions.styl
@@ -5,9 +5,16 @@
   flex-direction: column
   justify-content: center
   width: 50%
-  color: $textDefault
+  height: 100%
   font-family: NotesEsa
 
+.credits
+  overflow-y: scroll
+  margin: emCalc(10px) 0
+  height: 80%
+  color: $textDefault
+  font-family: Arial, Helvetica, sans-serif
+
   h1
     display: flex
     justify-content: space-between

diff --git a/src/scripts/components/main/attributions/attributions.tsx b/src/scripts/components/main/attributions/attributions.tsx
@@ -9,23 +9,25 @@ const Attributions: FunctionComponent = () => {
 
   return (
     <div className={styles.attributions}>
-      <ReactMarkdown
-        source={intl.formatMessage({id: 'attributionDescription'})}
-        linkTarget="_blank"
-        allowedTypes={[
-          'heading',
-          'text',
-          'paragraph',
-          'break',
-          'strong',
-          'emphasis',
-          'image',
-          'imageReference',
-          'list',
-          'listItem',
-          'link'
-        ]}
-      />
+      <div className={styles.credits}>
+        <ReactMarkdown
+          source={intl.formatMessage({id: 'attributionDescription'})}
+          linkTarget="_blank"
+          allowedTypes={[
+            'heading',
+            'text',
+            'paragraph',
+            'break',
+            'strong',
+            'emphasis',
+            'image',
+            'imageReference',
+            'list',
+            'listItem',
+            'link'
+          ]}
+        />
+      </div>
     </div>
   );
 };