From 548cb4f1465d3894954e9e806e853c146594ab58 Mon Sep 17 00:00:00 2001
From: DefectingCat <i@defect.ink>
Date: Sun, 25 Jun 2023 14:52:26 +0800
Subject: [PATCH] update toc styles

---
 components/post/post-toc.tsx | 27 ++++++++++++---------------
 styles/rua.css               |  1 -
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/components/post/post-toc.tsx b/components/post/post-toc.tsx
index 9bdb38c..7fe123b 100644
--- a/components/post/post-toc.tsx
+++ b/components/post/post-toc.tsx
@@ -14,7 +14,7 @@ interface Props {
 
 const TocItem = ({ item }: { item: SingleToc }) => {
   return (
-    <li key={item.head}>
+    <li key={item.head} className="mb-4">
       <Anchor href={item.link} external={false}>
         {item.head}
       </Anchor>
@@ -30,27 +30,24 @@ const PostToc = ({ toc, tocLength }: Props) => {
     <>
       <div
         className={clsx(
+          styles.head,
+          'bg-white pt-4 px-6',
+          'rounded-lg border border-gray-200',
+          'dark:bg-rua-gray-800 dark:border-rua-gray-600',
+          'select-none cursor-pointer',
           'rounded-lg transition-all',
           'duration-500 overflow-hidden',
-          'my-4'
+          'my-4 text-2xl'
         )}
         style={{
           maxHeight: show ? (tocLength ?? 0) * 50 + 70 : 70,
         }}
       >
-        <h2
-          className={clsx(
-            styles.head,
-            'bg-white !m-[unset] p-4',
-            'rounded-lg border border-gray-300',
-            'dark:bg-rua-gray-800 dark:border-rua-gray-600',
-            'select-none cursor-pointer',
-            'flex justify-between items-center',
-            '!text-2xl'
-          )}
+        <div
+          className={clsx('flex justify-between items-center')}
           onClick={handleClick}
         >
-          <span>What&apos;s inside?</span>
+          <span className="text-gray-500">TABLE OF CONTENTS</span>
 
           <FiChevronDown
             className={clsx(
@@ -58,9 +55,9 @@ const PostToc = ({ toc, tocLength }: Props) => {
               'transition-all duration-500'
             )}
           />
-        </h2>
+        </div>
 
-        <div className="pl-4 border-l-4 border-gray-300 toc">
+        <div className="toc text-lg">
           <ul className="!pl-[unset]">
             {toc?.map((h) => (
               <Fragment key={h.link}>
diff --git a/styles/rua.css b/styles/rua.css
index 7c8d4b1..fa19b16 100644
--- a/styles/rua.css
+++ b/styles/rua.css
@@ -93,7 +93,6 @@
 }
 
 #article .toc {
-  padding-left: 0.8em;
   @apply my-4;
 }