From 403fd2f5a0a28aa6629c27c40643dbe82ef5cc40 Mon Sep 17 00:00:00 2001
From: qinluhe <qinluhe.twodog@gmail.com>
Date: Wed, 24 Jul 2024 12:30:00 +0800
Subject: [PATCH] fix: modified some copy

---
 .../src/components/_shared/scroller/AFScroller.tsx   |  2 ++
 .../publish/header/duplicate/Duplicate.tsx           |  2 +-
 .../publish/header/duplicate/SelectWorkspace.tsx     |  2 +-
 .../publish/header/duplicate/SpaceList.tsx           |  2 +-
 frontend/appflowy_web_app/src/styles/app.scss        | 12 ++++++++++++
 frontend/appflowy_web_app/src/styles/mixin.scss      | 11 +++++++++++
 frontend/resources/translations/en.json              |  1 +
 7 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/frontend/appflowy_web_app/src/components/_shared/scroller/AFScroller.tsx b/frontend/appflowy_web_app/src/components/_shared/scroller/AFScroller.tsx
index bdb17db832..7d40983507 100644
--- a/frontend/appflowy_web_app/src/components/_shared/scroller/AFScroller.tsx
+++ b/frontend/appflowy_web_app/src/components/_shared/scroller/AFScroller.tsx
@@ -29,6 +29,8 @@ export const AFScroller = React.forwardRef(
             ref.current = scrollEl;
           }
         }}
+        renderTrackHorizontal={(props) => <div {...props} className='appflowy-scrollbar-track-horizontal' />}
+        renderTrackVertical={(props) => <div {...props} className='appflowy-scrollbar-track-vertical' />}
         renderThumbHorizontal={(props) => <div {...props} className='appflowy-scrollbar-thumb-horizontal' />}
         renderThumbVertical={(props) => <div {...props} className='appflowy-scrollbar-thumb-vertical' />}
         {...(overflowXHidden && {
diff --git a/frontend/appflowy_web_app/src/components/publish/header/duplicate/Duplicate.tsx b/frontend/appflowy_web_app/src/components/publish/header/duplicate/Duplicate.tsx
index e1e13b3996..7a0aebab92 100644
--- a/frontend/appflowy_web_app/src/components/publish/header/duplicate/Duplicate.tsx
+++ b/frontend/appflowy_web_app/src/components/publish/header/duplicate/Duplicate.tsx
@@ -20,7 +20,7 @@ function Duplicate() {
   return (
     <>
       <Button onClick={handleClick} size={'small'} variant={'outlined'} color={'inherit'}>
-        {t('button.duplicate')}
+        {t('publish.saveThisPage')}
       </Button>
       <LoginModal redirectTo={url} open={loginOpen} onClose={handleLoginClose} />
       <DuplicateModal open={duplicateOpen} onClose={handleDuplicateClose} />
diff --git a/frontend/appflowy_web_app/src/components/publish/header/duplicate/SelectWorkspace.tsx b/frontend/appflowy_web_app/src/components/publish/header/duplicate/SelectWorkspace.tsx
index 2702156b58..2b849b49e4 100644
--- a/frontend/appflowy_web_app/src/components/publish/header/duplicate/SelectWorkspace.tsx
+++ b/frontend/appflowy_web_app/src/components/publish/header/duplicate/SelectWorkspace.tsx
@@ -73,7 +73,7 @@ function SelectWorkspace({ value, onChange, workspaceList }: SelectWorkspaceProp
         <div className={'flex max-h-[360px] w-[360px] flex-col gap-1 p-2'}>
           <div className={'w-full px-3 py-2 text-sm font-medium text-text-caption'}>{email}</div>
           <Divider />
-          <div className={'flex flex-1 flex-col overflow-y-auto overflow-x-hidden'}>
+          <div className={'appflowy-scroller flex flex-1 flex-col overflow-y-auto overflow-x-hidden'}>
             {workspaceList.map((workspace) => {
               const isSelected = workspace.id === selectedWorkspace?.id;
 
diff --git a/frontend/appflowy_web_app/src/components/publish/header/duplicate/SpaceList.tsx b/frontend/appflowy_web_app/src/components/publish/header/duplicate/SpaceList.tsx
index 393b044c5a..c052f243a2 100644
--- a/frontend/appflowy_web_app/src/components/publish/header/duplicate/SpaceList.tsx
+++ b/frontend/appflowy_web_app/src/components/publish/header/duplicate/SpaceList.tsx
@@ -54,7 +54,7 @@ function SpaceList({ spaceList, value, onChange }: SpaceListProps) {
   return (
     <div className={'flex max-h-[260px] w-[360px] flex-col gap-2 overflow-hidden'}>
       <div className={'text-sm text-text-caption'}>{t('publish.addTo')}</div>
-      <div className={'flex w-full flex-1 flex-col gap-1 overflow-y-auto overflow-x-hidden'}>
+      <div className={'appflowy-scroller flex w-full flex-1 flex-col gap-1 overflow-y-auto overflow-x-hidden'}>
         {spaceList.map((space) => {
           const isSelected = value === space.id;
 
diff --git a/frontend/appflowy_web_app/src/styles/app.scss b/frontend/appflowy_web_app/src/styles/app.scss
index f69936e2e6..af89332833 100644
--- a/frontend/appflowy_web_app/src/styles/app.scss
+++ b/frontend/appflowy_web_app/src/styles/app.scss
@@ -24,6 +24,7 @@ body {
   }
 
   @apply bg-bg-body text-text-title;
+
   &[data-os="windows"]:not([data-browser="firefox"]) {
     .appflowy-custom-scroller {
       @include mixin.hidden-scrollbar
@@ -45,12 +46,23 @@ body {
 }
 
 
+.appflowy-scroller {
+  @include mixin.scrollbar-style;
+
+}
+
+
 .appflowy-scrollbar-thumb-horizontal, .appflowy-scrollbar-thumb-vertical {
   background-color: var(--scrollbar-thumb);
   border-radius: 4px;
   opacity: 60%;
 }
 
+.appflowy-scrollbar-track-horizontal, .appflowy-scrollbar-track-vertical {
+  background-color: var(--scrollbar-track);
+
+}
+
 .icon {
   font-family: 'Apple Color Emoji', 'Noto Color Emoji', 'Segoe UI Emoji', 'Twemoji Mozilla', sans-serif;
 }
diff --git a/frontend/appflowy_web_app/src/styles/mixin.scss b/frontend/appflowy_web_app/src/styles/mixin.scss
index 50ef277fe2..6881ea3c00 100644
--- a/frontend/appflowy_web_app/src/styles/mixin.scss
+++ b/frontend/appflowy_web_app/src/styles/mixin.scss
@@ -1,3 +1,13 @@
+
+::-webkit-scrollbar-thumb:hover {
+  border-radius: 4px;
+  background-color: var(--scrollbar-thumb);
+}
+
+::-webkit-scrollbar-track:hover {
+  background-color: var(--scrollbar-track);
+}
+
 @mixin hidden-scrollbar {
   &::-webkit-scrollbar {
     display: none;
@@ -7,6 +17,7 @@
   scrollbar-width: none; // For Firefox
 }
 
+
 @mixin scrollbar-style {
   ::-webkit-scrollbar, &::-webkit-scrollbar {
     width: 8px;
diff --git a/frontend/resources/translations/en.json b/frontend/resources/translations/en.json
index 840a3d878c..fc9a52feb0 100644
--- a/frontend/resources/translations/en.json
+++ b/frontend/resources/translations/en.json
@@ -2135,6 +2135,7 @@
     "mustSelectPrimaryDatabase": "The primary view must be selected",
     "noDatabaseSelected": "No database selected, please select at least one database.",
     "unableToDeselectPrimaryDatabase": "Unable to deselect primary database",
+    "saveThisPage": "Save this page",
     "duplicateTitle": "Where would you like to add",
     "selectWorkspace": "Select a workspace",
     "addTo": "Add to",