feat: responsive style for text description

Author: anton-karlovskiy

src/components/CodeArea/style.module.css

@@ -15,12 +15,11 @@
  */
 
 .root {
-  background-color: #272822;
   font-size: 16px;
 }
 
 @media only screen and (max-width: 600px) {
-  .root{
+  .root {
     font-size: 8px;
   }
 }

src/components/TextDescription/index.js

@@ -19,12 +19,13 @@ import React from 'react';
 import GitHubMarkdownWrapper from 'hoc/GitHubMarkdownWrapper';
 import ReactMarkdownWithRenderers from 'components/ReactMarkdownWithRenderers';
 import { reactLoadingPatterns } from 'utils/data/concepts';
+import styles from './style.module.css';
 
 const TextDescription = ({ selectedPatternId }) => {
   const pattern = reactLoadingPatterns.find(reactLoadingPattern => reactLoadingPattern.id === selectedPatternId);
 
   return (
-    <GitHubMarkdownWrapper>
+    <GitHubMarkdownWrapper className={styles['code-font']}>
       <ReactMarkdownWithRenderers source={pattern.textDescription} />
     </GitHubMarkdownWrapper>
   );

src/components/TextDescription/style.module.css

@@ -0,0 +1,10 @@
+
+.code-font pre {
+  font-size: 16px;
+}
+
+@media only screen and (max-width: 600px) {
+  .code-font pre {
+    font-size: 8px;
+  }
+}

src/hoc/GitHubMarkdownWrapper/index.js

@@ -16,12 +16,13 @@
 
 import React from 'react';
 import 'github-markdown-css';
+import clsx from 'clsx';
 
 import './style.css';
 
-const GitHubMarkdownWrapper = ({ children }) => {
+const GitHubMarkdownWrapper = ({ children, className }) => {
   return (
-    <div className='markdown-body'>
+    <div className={clsx('markdown-body', className)}>
       {children}
     </div>
     );