From 6d9695e411b6e330b6d9a312ce718710f4eed7de Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Tue, 11 Jan 2022 16:54:37 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E6=82=AC=E6=B5=AE=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/JumpToBottomButton.js | 14 ++++++--------
 components/JumpToTopButton.js    |  2 +-
 components/TocDrawerButton.js    |  6 ++----
 layouts/BaseLayout.js            |  2 +-
 4 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/components/JumpToBottomButton.js b/components/JumpToBottomButton.js
index 877233a5..2d7d3417 100644
--- a/components/JumpToBottomButton.js
+++ b/components/JumpToBottomButton.js
@@ -1,5 +1,4 @@
 import BLOG from '@/blog.config'
-import { useGlobal } from '@/lib/global'
 import { faArrowDown } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React, { useEffect, useState } from 'react'
@@ -18,7 +17,6 @@ const JumpToBottomButton = ({ showPercent = false }) => {
     return <></>
   }
 
-  const { locale } = useGlobal()
   const [show, switchShow] = useState(false)
   const [percent, changePercent] = useState(0)
   const scrollListener = () => {
@@ -47,12 +45,12 @@ const JumpToBottomButton = ({ showPercent = false }) => {
     return () => document.removeEventListener('scroll', scrollListener)
   }, [show])
 
-  return (<div onClick={() => scrollToBottom()}>
-        <div className='dark:text-gray-200 transform hover:scale-150 text-xs duration-200' title={locale.POST.TOP} >
-          <FontAwesomeIcon icon={faArrowDown} />
-        </div>
-          {showPercent && (<div className='w-10 text-xs dark:text-gray-200'>{percent}</div>)}
-      </div>)
+  return (<div className='flex space-x-1 transform hover:scale-105 text-xs duration-200 py-2 px-3' onClick={scrollToBottom} >
+    <div className='dark:text-gray-200' >
+      <FontAwesomeIcon icon={faArrowDown} />
+    </div>
+    {showPercent && (<div className='text-xs dark:text-gray-200 block lg:hidden'>{percent}%</div>)}
+  </div>)
 }
 
 export default JumpToBottomButton
diff --git a/components/JumpToTopButton.js b/components/JumpToTopButton.js
index c95c3111..f72ee0fa 100644
--- a/components/JumpToTopButton.js
+++ b/components/JumpToTopButton.js
@@ -17,7 +17,7 @@ const JumpToTopButton = ({ showPercent = true, percent }) => {
     return <></>
   }
   const { locale } = useGlobal()
-  return (<div className='flex space-x-1 transform hover:scale-105 text-xs duration-200' onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
+  return (<div className='flex space-x-1 transform hover:scale-105 text-xs duration-200 py-2 px-3' onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
         <div className='dark:text-gray-200' title={locale.POST.TOP} >
           <FontAwesomeIcon icon={faArrowUp} />
         </div>
diff --git a/components/TocDrawerButton.js b/components/TocDrawerButton.js
index 5f2db1f1..e828290e 100644
--- a/components/TocDrawerButton.js
+++ b/components/TocDrawerButton.js
@@ -16,10 +16,8 @@ const TocDrawerButton = (props) => {
     return <></>
   }
   const { locale } = useGlobal()
-  return (<div onClick={props.onClick} className={'cursor-pointer'}>
-      <div className='dark:text-gray-200 text-center transform hover:scale-150 duration-200 text-xs flex justify-center items-center' title={locale.POST.TOP} >
-        <FontAwesomeIcon icon={faListOl}/>
-      </div>
+  return (<div onClick={props.onClick} className='px-3 py-2 cursor-pointer dark:text-gray-200 text-center transform hover:scale-150 duration-200 text-xs flex justify-center items-center' title={locale.POST.TOP} >
+    <FontAwesomeIcon icon={faListOl}/>
   </div>)
 }
 
diff --git a/layouts/BaseLayout.js b/layouts/BaseLayout.js
index d4b5b572..7418b0c4 100644
--- a/layouts/BaseLayout.js
+++ b/layouts/BaseLayout.js
@@ -97,7 +97,7 @@ const BaseLayout = ({
       </main>
 
       <div className='right-4 lg:right-2 bottom-2 fixed justify-end z-20  rounded font-sans'>
-      <div className={(show ? 'animate__animated ' : 'hidden') + ' px-3 py-2 animate__fadeInUp glassmorphism justify-center duration-500  animate__faster flex space-x-2 items-center cursor-pointer '}>
+      <div className={(show ? 'animate__animated ' : 'hidden') + ' animate__fadeInUp glassmorphism justify-center duration-500  animate__faster flex space-x-2 items-center cursor-pointer '}>
         <JumpToTopButton percent={percent}/>
         <JumpToBottomButton />
         <FloatDarkModeButton/>