Merge pull request #116 from UoaWDCC/102_rich-text-bug

102 Rich Text Bug

next/components/blocks/ContentBlock.tsx

@@ -9,6 +9,6 @@ export default function ContentBlock({ props }: { props: any }) {
     case "content-block.content-block":
       return ImageWithText({ props });
     case "content-block.centered-paragraph":
-      return RichText({ props });
+      return RichText({ text: props });
   }
 }

next/components/blocks/RichText.module.css

@@ -0,0 +1,14 @@
+/* Space everything out */
+.reactMarkdown * + * {
+  margin: 0.5em;
+}
+
+.reactMarkdown h1 {
+  font-size: x-large;
+  font-weight: 600;
+}
+
+.reactMarkdown h2 {
+  font-size: large;
+}
+

next/components/blocks/RichText.tsx

@@ -1,8 +1,6 @@
-import React from "react";
 import ReactMarkdown from "react-markdown";
+import style from "./RichText.module.css";
 
-const RichText = ({ props }: any) => {
-  return <ReactMarkdown>{props.text}</ReactMarkdown>;
-};
-
-export default RichText;
+export default function RichText({ text }: { text: string }) {
+  return <ReactMarkdown className={style.reactMarkdown}>{text}</ReactMarkdown>;
+}

next/components/home/Blob.tsx

@@ -1,19 +1,12 @@
-import { ReactNode } from "react";
-import RichText from "../blocks/RichText";
-
 type BlobProps = {
-  children: ReactNode;
+  children: React.ReactNode;
   className?: string;
 };
 
 export default function Blob({ children, className = "" }: BlobProps) {
-  // If children is a string, render it as a RichText component
-  const richChildren = <RichText props={{ text: children }} />;
-  children = children instanceof String ? richChildren : children;
-
   return (
     <div
-      className={`block rounded-3xl text-blue-950 text-lg p-8 [&_:is(h1, h2, h3)]:text-xl [&_:is(h1, h2, h3)]:font-bold ${className}`}
+      className={`block rounded-3xl text-[#014788] text-lg p-8 ${className}`}
     >
       {children}
     </div>

next/components/home/HomePageBlob.module.css

@@ -1,14 +1,3 @@
-.button {
-  margin-top: 15px;
-  padding: 12px 25px;
-  background-color: #47c2ff;
-  color: #003366;
-  font-size: 18 px;
-  border: none;
-  border-radius: 45px;
-  cursor: pointer;
-}
-
 /* mobile responsiveness */
 @media screen and (max-width: 768px) {
   .container {

next/components/home/HomePageBlob.tsx

@@ -17,10 +17,14 @@ export default function HomePageBlobs({ blob1, blob2, blob3 }: Props) {
       <Blob className="bg-white col-start-8 col-span-4">{blob1}</Blob>
       <ConnectorBlob className="col-start-10 col-end-12 justify-self-center hidden md:block" />
       <Blob className="bg-white col-start-10 col-span-4">
-        <RichText props={{ text: blob2 }} />
-        <button className={styles.button}>JOIN US NOW</button>
+        <RichText text={blob2} />
+        <button className="bg-[#92E0FE] rounded-full py-2 px-12 font-bold">
+          JOIN US NOW
+        </button>
+      </Blob>
+      <Blob className="bg-[#ffaa00] row-start-4 col-start-2 col-span-4">
+        <RichText text={blob3} />
       </Blob>
-      <Blob className="bg-[#ffaa00] text-black row-start-4 col-start-2 col-span-4">{blob3}</Blob>
     </div>
   );
 }