From 0c56b308f79aa8c3e5a398fa0978479deeb16378 Mon Sep 17 00:00:00 2001
From: Dhairya Majmudar <2022kuec2045@iiitkota.ac.in>
Date: Fri, 24 May 2024 13:51:58 +0530
Subject: [PATCH] improving design

---
 components/StyledMarkdown.tsx | 37 +++++++++++++++++------------------
 1 file changed, 18 insertions(+), 19 deletions(-)

diff --git a/components/StyledMarkdown.tsx b/components/StyledMarkdown.tsx
index 84c6eefce..1ac998532 100644
--- a/components/StyledMarkdown.tsx
+++ b/components/StyledMarkdown.tsx
@@ -495,7 +495,7 @@ const StyledMarkdownBlock = ({ markdown }: { markdown: string }) => {
                 const fullMarkdown = useContext(FullMarkdownContext);
                 if (!fullMarkdown) return null;
                 return (
-                  <div className='text-blue-500 mt-3 bg-slate-50 dark:bg-slate-900 pt-6 pb-3 pr-3 rounded-l border-l-blue-400 border-l-[3px]'>
+                  <div className='text-blue-500 mt-3 bg-slate-50 dark:bg-slate-900 pt-6 pb-3 pr-3 border-dotted border-l-blue-400 border-l-[3px]'>
                     <TableOfContentMarkdown
                       markdown={fullMarkdown}
                       depth={depth}
@@ -532,10 +532,7 @@ export function TableOfContentMarkdown({
                   href={`#${slug}`}
                   className='block cursor-pointer mb-3 text-sm leading-4 ml-[-0.40rem] text-slate-700 font-bold hover:text-blue-500'
                 >
-                  <span
-                    className='mr-1 text-blue-400'
-                    style={{ fontSize: '1.5em' }}
-                  >
+                  <span className='mr-1 text-blue-400 text-[1.5em]'>
                     &#9679;
                   </span>
                   {children}
@@ -553,12 +550,7 @@ export function TableOfContentMarkdown({
               
                   font-bold hover:text-blue-500'
                 >
-                  <span
-                    className='mr-1 text-blue-400'
-                    style={{ fontSize: '1em' }}
-                  >
-                    &#9679;
-                  </span>
+                  <span className='mr-1 text-blue-400 text-[1em]'>&#9679;</span>
                   {children}
                 </a>
               );
@@ -573,9 +565,15 @@ export function TableOfContentMarkdown({
                     return (
                       <a
                         href={`#${slug}`}
-                        className='block cursor-pointer mb-3 text-sm leading-4 ml-[-0.15rem] hover:text-blue-500'
+                        className='flex flex-row items-center cursor-pointer mb-3 text-sm leading-4 ml-[-0.15rem] hover:text-blue-500'
                       >
-                        <span className='mr-1 text-blue-400'>&#8212;</span>
+                        <span className='text-blue-400 text-[0.35em] ml-1'>
+                          &#9679; &#9679; &#9679; &#9679;
+                        </span>
+                        <span className='mr-1 text-blue-400 text-[0.75em]'>
+                          &#9679;
+                        </span>
+
                         {children}
                       </a>
                     );
@@ -590,15 +588,16 @@ export function TableOfContentMarkdown({
                     return (
                       <a
                         href={`#${slug}`}
-                        className='block cursor-pointer mb-3 text-sm leading-4 ml-[-0.15rem] hover:text-blue-500'
+                        className='flex flex-row items-center cursor-pointer mb-3 text-sm leading-4 ml-[-0.15rem] hover:text-blue-500'
                       >
-                        <span className='mr-1 text-blue-400'></span>
-                        <span className='ml-[-0.25rem] mr-1 text-blue-400'>
-                          &#8212;
+                        <span className='text-blue-400 text-[0.35em] ml-1'>
+                          &#9679; &#9679; &#9679; &#9679; &#9679; &#9679;
+                          &#9679; &#9679; &#9679; &#9679; &#9679;
                         </span>
-                        <span className='ml-[-0.25rem] mr-1 text-blue-400'>
-                          &#8212;
+                        <span className='mr-1 text-blue-400 text-[0.75em]'>
+                          &#9679;
                         </span>
+
                         {children}
                       </a>
                     );