From 4d19729740a9efd99c30ed07dedce4b5d70dea4e Mon Sep 17 00:00:00 2001
From: SeeLey Wang <zdlp@sina.cn>
Date: Fri, 20 Sep 2024 21:27:59 +0800
Subject: [PATCH] update with auto scroll

---
 .../src/app/[locale]/cases/page.tsx           |  4 ++-
 zbook_frontend/src/app/[locale]/page.tsx      |  7 ++++-
 .../(dashboards)/dashboard/@visitors/page.tsx |  6 +++-
 .../src/components/DialogComponent.tsx        |  8 +++++-
 .../src/components/TableOfContent.tsx         | 28 +++++++++++--------
 .../src/components/charts/AreaUserChart.tsx   |  6 +++-
 .../details/ListAdminCommentElement.tsx       | 10 +++++--
 .../details/ListCommentReportElement.tsx      |  4 ++-
 .../elements/details/ListElementCard.tsx      |  6 +++-
 .../elements/details/ListSessionElement.tsx   | 10 +++++--
 .../elements/details/ListUserElement.tsx      |  6 +++-
 .../src/components/home/FooterForHome.tsx     |  6 +++-
 .../src/components/home/MainTabGroup.tsx      |  6 +++-
 .../loadings/UserSideBarLoading.tsx           |  6 +++-
 14 files changed, 87 insertions(+), 26 deletions(-)

diff --git a/zbook_frontend/src/app/[locale]/cases/page.tsx b/zbook_frontend/src/app/[locale]/cases/page.tsx
index f704144..355b4af 100644
--- a/zbook_frontend/src/app/[locale]/cases/page.tsx
+++ b/zbook_frontend/src/app/[locale]/cases/page.tsx
@@ -19,7 +19,9 @@ export default async function CasesPage({
   return (
     <div
       className="z-30 px-4 xl:px-12 mx-auto xl:max-w-6xl pt-10
-    overflow-y-scroll scrollbar-thin scrollbar-thumb-rounded-md scrollbar-track-rounded-md  bg-white dark:bg-gray-900"
+    overflow-y-auto scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-w-[6px]
+        scrollbar-thumb-slate-200 scrollbar-track-slate-100
+        dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]  bg-white dark:bg-gray-900"
     >
       <ListPageWrapper
         params={params}
diff --git a/zbook_frontend/src/app/[locale]/page.tsx b/zbook_frontend/src/app/[locale]/page.tsx
index 9bd64e7..0f5a9ca 100644
--- a/zbook_frontend/src/app/[locale]/page.tsx
+++ b/zbook_frontend/src/app/[locale]/page.tsx
@@ -150,7 +150,12 @@ export default async function Home() {
           <div className="relative pt-10 bg-gradient-to-t from-[#96c4a5]  to-[#ffffff] dark:from-transparent dark:via-transparent dark:to-transparent background-animate text-center">
             <div className="relative z-10">
               <div className="px-6 py-16">
-                <div className="mx-auto max-w-[22rem] md:max-w-[40rem] font-inter text-[2rem] font-bold leading-tight md:text-6xl md:leading-[1.08] space-y-2 overflow-scroll ">
+                <div
+                  className="mx-auto max-w-[22rem] md:max-w-[40rem] font-inter text-[2rem] font-bold leading-tight md:text-6xl md:leading-[1.08] space-y-2 overflow-x-auto
+                scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+              scrollbar-thumb-slate-200 scrollbar-track-slate-100
+              dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16] "
+                >
                   <h1>{t("MultiUserSection")}</h1>
                   <h1>{t("HomeSloganB")}</h1>
                 </div>
diff --git a/zbook_frontend/src/app/[locale]/workspace/[username]/(dashboards)/dashboard/@visitors/page.tsx b/zbook_frontend/src/app/[locale]/workspace/[username]/(dashboards)/dashboard/@visitors/page.tsx
index 13eb103..395f05e 100644
--- a/zbook_frontend/src/app/[locale]/workspace/[username]/(dashboards)/dashboard/@visitors/page.tsx
+++ b/zbook_frontend/src/app/[locale]/workspace/[username]/(dashboards)/dashboard/@visitors/page.tsx
@@ -89,7 +89,11 @@ export default async function AdminOverviewPage({
                   <h5 className="leading-none text-3xl font-bold text-gray-900 dark:text-white pb-2">
                     {visitors?.length ?? 0}
                   </h5>
-                  <p className="text-base font-normal text-gray-500 dark:text-gray-400 overflow-scroll">
+                  <p
+                    className="text-base font-normal text-gray-500 dark:text-gray-400 overflow-x-auto scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+                  scrollbar-thumb-slate-200 scrollbar-track-slate-100
+                  dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]"
+                  >
                     {t("VisitorRegion")}
                   </p>
                 </div>
diff --git a/zbook_frontend/src/components/DialogComponent.tsx b/zbook_frontend/src/components/DialogComponent.tsx
index b5ea7a3..c66c70c 100644
--- a/zbook_frontend/src/components/DialogComponent.tsx
+++ b/zbook_frontend/src/components/DialogComponent.tsx
@@ -22,7 +22,13 @@ export default function DialogComponent(props: DialogCompentProps) {
           leaveFrom="opacity-100 scale-100"
           leaveTo="opacity-0 scale-50"
         >
-          <div className="fixed inset-0 overflow-y-auto dark:text-slate-300 md:p-20 flex flex-col justify-start pt-4 md:justify-center lg:p-28">
+          <div
+            className="fixed inset-0 overflow-y-auto
+          scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-w-[6px]
+        scrollbar-thumb-slate-200 scrollbar-track-slate-100
+        dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]
+          dark:text-slate-300 md:p-20 flex flex-col justify-start pt-4 md:justify-center lg:p-28"
+          >
             <div className="mx-4 md:mx-[max(0px,calc(50%-25rem))] ">
               <Dialog.Panel className="flex overflow-hidden flex-col  border rounded-md md:rounded-lg bg-white/85 dark:bg-slate-800/85 border-white/85 dark:border-slate-800/85">
                 {props.children}
diff --git a/zbook_frontend/src/components/TableOfContent.tsx b/zbook_frontend/src/components/TableOfContent.tsx
index dc41dbc..3331f08 100644
--- a/zbook_frontend/src/components/TableOfContent.tsx
+++ b/zbook_frontend/src/components/TableOfContent.tsx
@@ -133,11 +133,13 @@ export default function TableOfContent(props: TableOfContentProps) {
             <a
               {...props}
               onClick={handleClick}
-              className={`group flex items-start py-1   ${hoverClass} overflow-scroll ${
-                get_act() === props.href.substring(1)
-                  ? activeClass
-                  : "dark:text-slate-400"
-              }`}
+              className={`group flex items-start py-1   ${hoverClass} overflow-x-auto scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+        scrollbar-thumb-slate-200 scrollbar-track-slate-100
+        dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16] ${
+          get_act() === props.href.substring(1)
+            ? activeClass
+            : "dark:text-slate-400"
+        }`}
             >
               {domToReact(domNode.children, html_parser_options_list)}
             </a>
@@ -147,11 +149,13 @@ export default function TableOfContent(props: TableOfContentProps) {
           <a
             {...props}
             onClick={handleClick}
-            className={`group flex items-start py-1  ${hoverClass} overflow-scroll ${
-              get_act() === props.href.substring(1)
-                ? activeClass
-                : "dark:text-slate-400"
-            }`}
+            className={`group flex items-start py-1  ${hoverClass} overflow-x-auto scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+        scrollbar-thumb-slate-200 scrollbar-track-slate-100
+        dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16] ${
+          get_act() === props.href.substring(1)
+            ? activeClass
+            : "dark:text-slate-400"
+        }`}
           >
             {domToReact(domNode.children, html_parser_options_list)}
           </a>
@@ -163,7 +167,9 @@ export default function TableOfContent(props: TableOfContentProps) {
   return (
     <RightSideBarWrapper>
       <div
-        className="fixed overflow-auto w-[16rem]"
+        className="fixed overflow-y-auto w-[16rem] scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-w-[6px]
+        scrollbar-thumb-slate-200 scrollbar-track-slate-100
+        dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]"
         style={{ height: "calc(100vh - 128px)" }}
       >
         {/* 确保父元素具有固定高度或最大高度 */}
diff --git a/zbook_frontend/src/components/charts/AreaUserChart.tsx b/zbook_frontend/src/components/charts/AreaUserChart.tsx
index 8381e9d..7b5d041 100644
--- a/zbook_frontend/src/components/charts/AreaUserChart.tsx
+++ b/zbook_frontend/src/components/charts/AreaUserChart.tsx
@@ -83,7 +83,11 @@ export default function AreaUserChart({
         <h5 className="leading-none text-3xl font-bold text-gray-900 dark:text-white pb-2">
           {t("DailyUsers")}
         </h5>
-        <div className="flex space-x-2 overflow-scroll">
+        <div
+          className="flex space-x-2 overflow-x-auto scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+        scrollbar-thumb-slate-200 scrollbar-track-slate-100
+        dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]"
+        >
           <EnableElement
             config_name="allow_login"
             label={t("allow_login")}
diff --git a/zbook_frontend/src/components/elements/details/ListAdminCommentElement.tsx b/zbook_frontend/src/components/elements/details/ListAdminCommentElement.tsx
index 9b76893..c3f1803 100644
--- a/zbook_frontend/src/components/elements/details/ListAdminCommentElement.tsx
+++ b/zbook_frontend/src/components/elements/details/ListAdminCommentElement.tsx
@@ -31,13 +31,19 @@ export default function ListAdminCommentElement({
             <div className="flex flex-col justify-begin">
               <Link href={`/workspace/${username}`} className="cursor-pointer">
                 <span
-                  className="text-sky-700 dark:text-sky-600 font-semibold text-lg whitespace-nowrap overflow-scroll
+                  className="text-sky-700 dark:text-sky-600 font-semibold text-lg whitespace-nowrap overflow-x-auto scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+                              scrollbar-thumb-slate-200 scrollbar-track-slate-100
+                              dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]
                                 hover:underline underline-offset-4 hover:text-sky-500 hover:dark:text-sky-500"
                 >
                   {username}
                 </span>
               </Link>
-              <span className=" text-slate-700 dark:text-slate-400 text-xs overflow-scroll">
+              <span
+                className=" text-slate-700 dark:text-slate-400 text-xs overflow-x-auto scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+              scrollbar-thumb-slate-200 scrollbar-track-slate-100
+              dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]"
+              >
                 {email}
               </span>
             </div>
diff --git a/zbook_frontend/src/components/elements/details/ListCommentReportElement.tsx b/zbook_frontend/src/components/elements/details/ListCommentReportElement.tsx
index 5372ab2..01500bf 100644
--- a/zbook_frontend/src/components/elements/details/ListCommentReportElement.tsx
+++ b/zbook_frontend/src/components/elements/details/ListCommentReportElement.tsx
@@ -42,7 +42,9 @@ export default function ListCommentReportElement({
                 className="cursor-pointer"
               >
                 <span
-                  className="text-sky-700 dark:text-sky-600 font-semibold text-lg whitespace-nowrap overflow-scroll
+                  className="text-sky-700 dark:text-sky-600 font-semibold text-lg whitespace-nowrap overflow-x-auto scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+                              scrollbar-thumb-slate-200 scrollbar-track-slate-100
+                              dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]
                                 hover:underline underline-offset-4 hover:text-sky-500 hover:dark:text-sky-500"
                 >
                   {t("Comment")}
diff --git a/zbook_frontend/src/components/elements/details/ListElementCard.tsx b/zbook_frontend/src/components/elements/details/ListElementCard.tsx
index c872d9b..9160951 100644
--- a/zbook_frontend/src/components/elements/details/ListElementCard.tsx
+++ b/zbook_frontend/src/components/elements/details/ListElementCard.tsx
@@ -15,7 +15,11 @@ export default function ListElementCard({
       <div className="flex-none flex justify-between items-center">
         {header}
       </div>
-      <div className="flex-1 text-slate-700 dark:text-slate-400 text-xs my-2 overflow-scroll">
+      <div
+        className="flex-1 text-slate-700 dark:text-slate-400 text-xs my-2 overflow-x-auto scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+        scrollbar-thumb-slate-200 scrollbar-track-slate-100
+        dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]"
+      >
         {content}
       </div>
       <div className="flex-none flex justify-between items-center">
diff --git a/zbook_frontend/src/components/elements/details/ListSessionElement.tsx b/zbook_frontend/src/components/elements/details/ListSessionElement.tsx
index cd5f210..d2563e1 100644
--- a/zbook_frontend/src/components/elements/details/ListSessionElement.tsx
+++ b/zbook_frontend/src/components/elements/details/ListSessionElement.tsx
@@ -33,13 +33,19 @@ export default function ListSessionElement({
             <div className="flex flex-col justify-begin">
               <Link href={`/workspace/${username}`} className="cursor-pointer">
                 <span
-                  className="text-sky-700 dark:text-sky-600 font-semibold text-lg whitespace-nowrap overflow-scroll
+                  className="text-sky-700 dark:text-sky-600 font-semibold text-lg whitespace-nowrap overflow-x-auto scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+                              scrollbar-thumb-slate-200 scrollbar-track-slate-100
+                              dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]
                                 hover:underline underline-offset-4 hover:text-sky-500 hover:dark:text-sky-500"
                 >
                   {username}
                 </span>
               </Link>
-              <span className=" text-slate-700 dark:text-slate-400 text-xs overflow-scroll">
+              <span
+                className=" text-slate-700 dark:text-slate-400 text-xs overflow-x-auto scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+              scrollbar-thumb-slate-200 scrollbar-track-slate-100
+              dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]"
+              >
                 {email}
               </span>
             </div>
diff --git a/zbook_frontend/src/components/elements/details/ListUserElement.tsx b/zbook_frontend/src/components/elements/details/ListUserElement.tsx
index cb70512..e62c4a1 100644
--- a/zbook_frontend/src/components/elements/details/ListUserElement.tsx
+++ b/zbook_frontend/src/components/elements/details/ListUserElement.tsx
@@ -55,7 +55,11 @@ export default function ListUserElement({
                   {username}
                 </span>
               </Link>
-              <span className=" text-slate-700 dark:text-slate-400 text-xs overflow-scroll">
+              <span
+                className=" text-slate-700 dark:text-slate-400 text-xs overflow-x-auto scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+              scrollbar-thumb-slate-200 scrollbar-track-slate-100
+              dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]"
+              >
                 {email}
               </span>
             </div>
diff --git a/zbook_frontend/src/components/home/FooterForHome.tsx b/zbook_frontend/src/components/home/FooterForHome.tsx
index 3ed51da..28c2778 100644
--- a/zbook_frontend/src/components/home/FooterForHome.tsx
+++ b/zbook_frontend/src/components/home/FooterForHome.tsx
@@ -120,7 +120,11 @@ export default async function FooterForHome() {
   return (
     <footer className="bg-gradient-to-b from-[#e3d5b1] pt-16  to-[#ffffff] dark:from-transparent dark:via-transparent dark:to-transparent text-slate-700 dark:text-slate-500">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-        <div className="grid grid-cols-8 gap-4 gap-x-8 px-2 py-8 overflow-scroll">
+        <div
+          className="grid grid-cols-8 gap-4 gap-x-8 px-2 py-8 overflow-x-auto scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+        scrollbar-thumb-slate-200 scrollbar-track-slate-100
+        dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]"
+        >
           {sections.map((section, index) => (
             <FooterSection
               key={index}
diff --git a/zbook_frontend/src/components/home/MainTabGroup.tsx b/zbook_frontend/src/components/home/MainTabGroup.tsx
index 65e2de1..c66049f 100644
--- a/zbook_frontend/src/components/home/MainTabGroup.tsx
+++ b/zbook_frontend/src/components/home/MainTabGroup.tsx
@@ -42,7 +42,11 @@ export default function MainTabGroup() {
   return (
     <div className="max-w-5xl mx-auto py-24 px-2 md:px-4 pb-2 md:pb-4">
       <Tab.Group>
-        <Tab.List className="flex space-x-1 p-1 max-w-xl lg:max-w-2xl mx-auto border border-[#65b1e8]/50 rounded-full overflow-scroll">
+        <Tab.List
+          className="flex space-x-1 p-1 max-w-xl lg:max-w-2xl mx-auto border border-[#65b1e8]/50 rounded-full overflow-x-auto scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+        scrollbar-thumb-slate-200 scrollbar-track-slate-100
+        dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]"
+        >
           {categories.map(({ label, icon: Icon }, index) => (
             <Tab
               key={index}
diff --git a/zbook_frontend/src/components/loadings/UserSideBarLoading.tsx b/zbook_frontend/src/components/loadings/UserSideBarLoading.tsx
index 7c222b4..455276a 100644
--- a/zbook_frontend/src/components/loadings/UserSideBarLoading.tsx
+++ b/zbook_frontend/src/components/loadings/UserSideBarLoading.tsx
@@ -22,7 +22,11 @@ export default function UserSideBarLoading({
         </div>
         <div className="h-4 bg-gradient-to-b from-white dark:from-slate-900"></div>
       </div>
-      <div className="absolute inset-0 z-10 overflow-auto pb-10 pt-32 lg:pt-24 px-4">
+      <div
+        className="absolute inset-0 z-10 overflow-y-auto scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-w-[6px]
+        scrollbar-thumb-slate-200 scrollbar-track-slate-100
+        dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16] pb-10 pt-32 lg:pt-24 px-4"
+      >
         <div className="animate-pulse">
           <div className="flex flex-col items-center justify-center">
             <LoadingElement className="h-24 rounded-full w-24 my-2" />