fix code styling on homepage

tinacms · Aug 4, 2023 · c1f22a6 · c1f22a6
1 parent 2a38135
commit c1f22a6
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 18 deletions.
diff --git a/components/blocks/Features.tsx b/components/blocks/Features.tsx
@@ -2,6 +2,8 @@ import { Actions } from './Actions'
 import { Container } from './Container'
 import { Prism } from '../styles/Prism'
 import { tinaField } from 'tinacms/dist/react'
+import DocsRichText from '../styles/DocsRichText'
+import styled from 'styled-components'
 
 export function FeatureBlock({ data, index }) {
   const isReversed = index % 2 === 1
@@ -72,17 +74,19 @@ export function FeatureBlock({ data, index }) {
                       'em',
                   }}
                 >
-                  <div className="p-2 [&>pre]:!bg-transparent">
-                    <Prism
-                      lang={
-                        data.media[0].language
-                          ? data.media[0].language
-                          : 'javascript'
-                      }
-                      theme="nightOwl"
-                      value={data.media[0].code}
-                    />
-                  </div>
+                  <CodeWrapper>
+                    <div className="[&>pre]:!bg-transparent [&>pre]:!border-none">
+                      <Prism
+                        lang={
+                          data.media[0].language
+                            ? data.media[0].language
+                            : 'javascript'
+                        }
+                        theme="nightOwl"
+                        value={data.media[0].code}
+                      />
+                    </div>
+                  </CodeWrapper>
                 </div>
               </div>
             )}
@@ -198,3 +202,7 @@ export const FeatureVideo = ({ src, className = '' }) => {
     </video>
   )
 }
+
+const CodeWrapper = styled.div`
+  ${DocsRichText}
+`
diff --git a/components/blocks/Story.tsx b/components/blocks/Story.tsx
@@ -3,6 +3,8 @@ import { useInView } from 'react-intersection-observer'
 import { Container } from './Container'
 import { Actions } from './Actions'
 import { Prism } from '../styles/Prism'
+import styled from 'styled-components'
+import DocsRichText from 'components/styles/DocsRichText'
 
 const features = [
   {
@@ -227,13 +229,17 @@ const Pane = ({ data, position, ...props }) => {
                   1.25 * (data.file.textScale ? data.file.textScale : 1) + 'em',
               }}
             >
-              <div className="p-2 [&>pre]:!bg-transparent">
-                <Prism
-                  lang={data.file.language ? data.file.language : 'javascript'}
-                  theme="nightOwl"
-                  value={data.file.code}
-                />
-              </div>
+              <CodeWrapper>
+                <div className="[&>pre]:!bg-transparent [&>pre]:!border-none">
+                  <Prism
+                    lang={
+                      data.file.language ? data.file.language : 'javascript'
+                    }
+                    theme="nightOwl"
+                    value={data.file.code}
+                  />
+                </div>
+              </CodeWrapper>
             </div>
           </div>
         )}
@@ -500,3 +506,7 @@ export function StoryBlock({ data, index }) {
     </>
   )
 }
+
+const CodeWrapper = styled.div`
+  ${DocsRichText}
+`