adjustment component code example

react-a11y · Aug 24, 2024 · dedf2c2 · dedf2c2
1 parent 3586ae6
commit dedf2c2
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/src/components/Code/index.tsx b/src/components/Code/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useEffect, useRef } from 'react';
 import hljs from 'highlight.js';
 import 'highlight.js/scss/atom-one-light.scss';
@@ -10,7 +11,9 @@ function ModalInstall(props: any) {
   }, [props.children]);
 
   return (
-    <code ref={codeRef} className={`language-${props.language}`}>{props.children}</code>
+    <div className="code-wrapper">
+      <code ref={codeRef} className={`language-${props.language}`}>{props.children}</code>
+    </div>
   );
 }
 

diff --git a/src/components/ModalInstall/style.scss b/src/components/ModalInstall/style.scss
@@ -26,15 +26,15 @@
   h2:first-of-type {
     margin-top: 0;
   }
-  code:last-of-type {
-    margin-bottom: 0;
+  h2, h3 {
+    margin: 2rem 0;
   }
-  code {
-    padding: 1rem;
+  .type {
     background: #fff;
     color: #000;
-    white-space: pre;
     border-radius: 8px;
+    padding: .5rem;
+    margin-right: 1rem;
   }
 }
 

diff --git a/src/index.scss b/src/index.scss
@@ -29,7 +29,7 @@ body.modal-active {
 
 .code-wrapper {
   color: var(--color-text);
-  background: var(--vtl-background);
+  background: #fff;
   padding: 1rem;
   border-radius: 10px;
   display: inline-block;