From 3cf4a2ab58593d3b049c69d1dd78bbfbc6422bc9 Mon Sep 17 00:00:00 2001
From: AyushShivhare79 <ayushshivhare1008@gmail.com>
Date: Tue, 20 Aug 2024 18:49:07 +0530
Subject: [PATCH 1/4] style: text-blocks

---
 apps/web/components/CodeBlock.module.css |  6 ++---
 apps/web/components/CodeBlock.tsx        | 28 ++++++++++++------------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/apps/web/components/CodeBlock.module.css b/apps/web/components/CodeBlock.module.css
index 826cfeb2..4e51963b 100644
--- a/apps/web/components/CodeBlock.module.css
+++ b/apps/web/components/CodeBlock.module.css
@@ -4,11 +4,11 @@
     font-size: 15px;
     word-wrap: break-word;
     white-space: pre-wrap;
-    background: #161b22;
+    background: #0f172a;
     overflow: auto;
     line-height: 1.6;
-    border: 1px solid #333;
-    border-left: 3px solid #e81029;
+    border: 1px solid #10b981;
+    border-left: 2px solid #b91c1c;
     color: #564;
     min-width: 200px;
     width: 800px;
diff --git a/apps/web/components/CodeBlock.tsx b/apps/web/components/CodeBlock.tsx
index 40596cca..1292b41e 100644
--- a/apps/web/components/CodeBlock.tsx
+++ b/apps/web/components/CodeBlock.tsx
@@ -17,22 +17,22 @@ export default function CodeBlock({ block }: { block: any }) {
   return (
     <div className="max-w-full relative">
       <div className={`${styles.copy_block} absolute top-2 right-2 z-10`}>
-          <button
-            className="text-gray-500 p-1 relative"
-            onClick={() => {
-              navigator.clipboard.writeText(code).then(() => {
-                setShowCopiedMessage(true);
-                setTimeout(() => {
-                  setShowCopiedMessage(false);
-                }, 2000);
-              });
-            }}
-          >
-            {showCopiedMessage ? <CopyTick /> : <CopyIcon />}
-          </button>
+        <button
+          className="text-gray-500 p-1 relative"
+          onClick={() => {
+            navigator.clipboard.writeText(code).then(() => {
+              setShowCopiedMessage(true);
+              setTimeout(() => {
+                setShowCopiedMessage(false);
+              }, 2000);
+            });
+          }}
+        >
+          {showCopiedMessage ? <CopyTick /> : <CopyIcon />}
+        </button>
       </div>
       <div className="max-w-full overflow-auto relative">
-        <pre className={`${styles.code_block} px-4 sm:px-6 md:px-8`}>
+        <pre className={`${styles.code_block} rounded-3xl px-4 sm:px-6 md:px-8`}>
           <code className="language-javascript">{code}</code>
         </pre>
       </div>

From adf841a035e95928f7473f5bdf796b5e4f910e83 Mon Sep 17 00:00:00 2001
From: AyushShivhare79 <ayushshivhare1008@gmail.com>
Date: Wed, 21 Aug 2024 01:01:42 +0530
Subject: [PATCH 2/4] feat: custom renderers

---
 apps/web/app/globals.css                 |  4 +++
 apps/web/components/Blog.tsx             |  1 +
 apps/web/components/CodeBlock.module.css |  2 +-
 apps/web/components/NotionRenderer.tsx   | 32 ++++++++++++++++++------
 apps/web/components/mcq/MCQPanel.tsx     |  1 +
 apps/web/tailwind.config.js              | 21 ++++++++++------
 6 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index 1599f5e0..f5954987 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -1,3 +1,7 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/apps/web/components/Blog.tsx b/apps/web/components/Blog.tsx
index fe75c726..14f17a6b 100644
--- a/apps/web/components/Blog.tsx
+++ b/apps/web/components/Blog.tsx
@@ -40,3 +40,4 @@ export const Blog = ({
     </div>
   );
 };
+ 
\ No newline at end of file
diff --git a/apps/web/components/CodeBlock.module.css b/apps/web/components/CodeBlock.module.css
index 4e51963b..5f3fac2e 100644
--- a/apps/web/components/CodeBlock.module.css
+++ b/apps/web/components/CodeBlock.module.css
@@ -4,7 +4,7 @@
     font-size: 15px;
     word-wrap: break-word;
     white-space: pre-wrap;
-    background: #0f172a;
+    background: #020617;
     overflow: auto;
     line-height: 1.6;
     border: 1px solid #10b981;
diff --git a/apps/web/components/NotionRenderer.tsx b/apps/web/components/NotionRenderer.tsx
index b50d9cc9..e0d6ee65 100644
--- a/apps/web/components/NotionRenderer.tsx
+++ b/apps/web/components/NotionRenderer.tsx
@@ -9,20 +9,36 @@ export const NotionRenderer = ({ recordMap }: { recordMap: any }) => {
   const { resolvedTheme } = useTheme();
 
   return (
-    <div className="w-full">
+    <div className=".notion_ w-full .notion-bg-black">
       <style>
-        {`
-          .notion-header {
-            display: none !important;
-          }
+        {` 
+            .notion-app {
+                background: #111827;
+            }
+            .notion-title{
+                font-family: open-montserrat;
+                font-size: xxx-large;
+            }
+            .notion-list li{
+                font-size: larger;
+                font-family: open-poppins 
+            }
+            .notion-text{
+                font-size: larger;
+                font-family: open-poppins 
+            }
+            .notion-header {
+                display: none !important;
+            }
+            .notion-page: {
+                padding: 0px !important;
+            }
 
-          .notion-page: {
-            padding: 0px !important;
-          }
         `}
       </style>
       <div className="rounded-full">
         <NotionRendererLib
+          className="text-red-500 "
           components={{
             Code: CodeBlock,
           }}
diff --git a/apps/web/components/mcq/MCQPanel.tsx b/apps/web/components/mcq/MCQPanel.tsx
index dcb80761..35ef19ba 100644
--- a/apps/web/components/mcq/MCQPanel.tsx
+++ b/apps/web/components/mcq/MCQPanel.tsx
@@ -33,3 +33,4 @@ const MCQPanel = ({ problem }: { problem: Problem & { notionRecordMap: any } })
 };
 
 export default MCQPanel;
+ 
\ No newline at end of file
diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js
index a619b573..b0ca9867 100644
--- a/apps/web/tailwind.config.js
+++ b/apps/web/tailwind.config.js
@@ -2,16 +2,21 @@
 module.exports = {
   darkMode: ["class"],
   content: [
-    '../../packages/ui/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './pages/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './src/**/*.{ts,tsx}',
-    './screens/**/*{.ts,tsx}',
+    "../../packages/ui/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
+    "./screens/**/*{.ts,tsx}",
   ],
   prefix: "",
   theme: {
+       fontFamily: {
+        "open-talk": ["Open Sans", " sans - serif"],
+        "open-poppins": ["Poppins", "sans-serif"],
+        "open-montserrat": ["Montserrat Alternates", "sans-serif"]
+      },
     container: {
       center: true,
       padding: "2rem",
@@ -77,4 +82,4 @@ module.exports = {
     },
   },
   plugins: [require("tailwindcss-animate")],
-}
\ No newline at end of file
+};

From 23e8eb9749acdc6490591af29437588a2933479c Mon Sep 17 00:00:00 2001
From: AyushShivhare79 <ayushshivhare1008@gmail.com>
Date: Wed, 21 Aug 2024 12:43:19 +0530
Subject: [PATCH 3/4] feat: dark-mode

---
 apps/web/components/NotionRenderer.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/web/components/NotionRenderer.tsx b/apps/web/components/NotionRenderer.tsx
index e0d6ee65..2e19ab25 100644
--- a/apps/web/components/NotionRenderer.tsx
+++ b/apps/web/components/NotionRenderer.tsx
@@ -13,8 +13,13 @@ export const NotionRenderer = ({ recordMap }: { recordMap: any }) => {
       <style>
         {` 
             .notion-app {
-                background: #111827;
-            }
+                background: #f4f4f5;
+                color: #000000
+                }  
+            .dark-mode {
+                  background: #111827;                
+                  color: #ffffff
+                }
             .notion-title{
                 font-family: open-montserrat;
                 font-size: xxx-large;

From dfc140cece9022376c7c1103ae7c369344d815ef Mon Sep 17 00:00:00 2001
From: AyushShivhare79 <ayushshivhare1008@gmail.com>
Date: Wed, 21 Aug 2024 17:11:53 +0530
Subject: [PATCH 4/4] feat(refactor & style): code-block, code-text,
 copy-button

---
 apps/web/components/CodeBlock.module.css | 36 ++--------------
 apps/web/components/CodeBlock.tsx        | 54 +++++++++++++++---------
 apps/web/components/NotionRenderer.tsx   |  6 +--
 3 files changed, 40 insertions(+), 56 deletions(-)

diff --git a/apps/web/components/CodeBlock.module.css b/apps/web/components/CodeBlock.module.css
index 5f3fac2e..4b3abd2c 100644
--- a/apps/web/components/CodeBlock.module.css
+++ b/apps/web/components/CodeBlock.module.css
@@ -1,40 +1,12 @@
 .code_block {
+    display: flex;
+    justify-content: space-between;
     position: relative;
     padding: 10px;
     font-size: 15px;
     word-wrap: break-word;
     white-space: pre-wrap;
-    background: #020617;
+    background: #111827;
     overflow: auto;
-    line-height: 1.6;
-    border: 1px solid #10b981;
-    border-left: 2px solid #b91c1c;
     color: #564;
-    min-width: 200px;
-    width: 800px;
-    display: flex;
-    justify-content: space-between;
-}
-
-.copy_block {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-}
-
-.copy_button {
-    position: relative;
-    cursor: pointer;
-    color: #fff;
-    background: gray;
-    border-radius: 0.5em;
-    padding: 2px 7px;
-    margin: 10px;
-}
-
-.copied_text {
-    background: #fff;
-    padding: 5px;
-    color: #161b22;
-    display: none;
-}
+}
\ No newline at end of file
diff --git a/apps/web/components/CodeBlock.tsx b/apps/web/components/CodeBlock.tsx
index 1292b41e..60699841 100644
--- a/apps/web/components/CodeBlock.tsx
+++ b/apps/web/components/CodeBlock.tsx
@@ -14,27 +14,39 @@ export default function CodeBlock({ block }: { block: any }) {
 
   const [showCopiedMessage, setShowCopiedMessage] = useState(false);
 
-  return (
-    <div className="max-w-full relative">
-      <div className={`${styles.copy_block} absolute top-2 right-2 z-10`}>
-        <button
-          className="text-gray-500 p-1 relative"
-          onClick={() => {
-            navigator.clipboard.writeText(code).then(() => {
-              setShowCopiedMessage(true);
-              setTimeout(() => {
-                setShowCopiedMessage(false);
-              }, 2000);
-            });
-          }}
-        >
-          {showCopiedMessage ? <CopyTick /> : <CopyIcon />}
-        </button>
-      </div>
-      <div className="max-w-full overflow-auto relative">
-        <pre className={`${styles.code_block} rounded-3xl px-4 sm:px-6 md:px-8`}>
-          <code className="language-javascript">{code}</code>
-        </pre>
+  return (  
+    <div>
+      <style>
+        {`
+          code[class*="language-"], pre[class*="language-"]{
+
+            font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;;
+            font-size: 5rem 
+            line-height: 2rem 
+          }
+        `}
+      </style>
+      <div className="max-w-full relative">
+        <div className="flex w-full justify-end pr-1 pt-1 z-10 absolute">
+          <button
+            className="text-slate-100"
+            onClick={() => {
+              navigator.clipboard.writeText(code).then(() => {
+                setShowCopiedMessage(true);
+                setTimeout(() => {
+                  setShowCopiedMessage(false);
+                }, 2000);
+              });
+            }}
+          >
+            {showCopiedMessage ? <CopyTick /> : <CopyIcon />}
+          </button>
+        </div>
+        <div className="max-w-full overflow-auto relative">
+          <pre className={`${styles.code_block} w-full rounded-md px-4 sm:px-6 md:px-8`}>
+            <code className="language-javascript">{code}</code>
+          </pre>
+        </div>
       </div>
     </div>
   );
diff --git a/apps/web/components/NotionRenderer.tsx b/apps/web/components/NotionRenderer.tsx
index 2e19ab25..30299b54 100644
--- a/apps/web/components/NotionRenderer.tsx
+++ b/apps/web/components/NotionRenderer.tsx
@@ -13,13 +13,13 @@ export const NotionRenderer = ({ recordMap }: { recordMap: any }) => {
       <style>
         {` 
             .notion-app {
-                background: #f4f4f5;
+                background: #ffffff;
                 color: #000000
                 }  
             .dark-mode {
-                  background: #111827;                
+                  background: #000000;                
                   color: #ffffff
-                }
+                  }
             .notion-title{
                 font-family: open-montserrat;
                 font-size: xxx-large;