From f154f24f881a889bad3d76a54a85087376551858 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Fri, 17 Dec 2021 14:38:01 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E9=98=B4=E5=BD=B1=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BlogPostListScroll.js  |  2 +-
 components/FloatDarkModeButton.js | 33 ++++++++++++++++++++++++-------
 components/JumpToTopButton.js     |  4 ++--
 components/SideArea.js            | 12 +++++------
 components/StickyBar.js           |  2 +-
 components/TocDrawerButton.js     |  6 +++---
 6 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/components/BlogPostListScroll.js b/components/BlogPostListScroll.js
index 2d9f2224..7b85dad3 100644
--- a/components/BlogPostListScroll.js
+++ b/components/BlogPostListScroll.js
@@ -64,7 +64,7 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory,
         <div onClick={() => {
           handleGetMore()
         }}
-             className='w-full my-4 py-4 bg-gray-200 text-center cursor-pointer dark:bg-gray-700 dark:text-gray-200'
+             className='w-full my-4 py-4  text-center cursor-pointer glassmorphism dark:text-gray-200'
         > {hasMore ? '继续加载' : '加载完了😰'} </div>
       </div>
     </div>
diff --git a/components/FloatDarkModeButton.js b/components/FloatDarkModeButton.js
index 06ed046d..6d4632a4 100644
--- a/components/FloatDarkModeButton.js
+++ b/components/FloatDarkModeButton.js
@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react'
-import DarkModeButton from './DarkModeButton'
+import { loadUserThemeFromCookies, saveTheme, useGlobal } from '@/lib/global'
+import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 let windowTop = 0
 export default function FloatDarkModeButton () {
@@ -18,12 +20,29 @@ export default function FloatDarkModeButton () {
     return () => document.removeEventListener('scroll', scrollListener)
   })
 
+  const { changeTheme } = useGlobal()
+  const userTheme = loadUserThemeFromCookies()
+  // 用户手动设置主题
+  const handleChangeDarkMode = () => {
+    const newTheme = userTheme === 'light' ? 'dark' : 'light'
+    saveTheme(newTheme)
+    changeTheme(newTheme)
+  }
+
   return (
-      <div
-        className={(show ? 'animate__fadeInRight ' : 'hidden lg:block') + ' animate__animated animate__faster shadow-card fixed right-5 bottom-36 py-1.5 px-2.5 rounded-full' +
-      '  text-black shadow-card dark:border-gray-500 glassmorphism dark:bg-gray-700 dark:text-gray-200'}
-      >
-        <DarkModeButton />
-      </div>
+    <div
+      onClick={handleChangeDarkMode}
+      className={
+        (show ? 'animate__fadeInRight ' : 'hidden lg:block') +
+        ' px-3.5 py-3 animate__animated animate__faster shadow-card fixed right-5 bottom-36 z-10 duration-200 text-xs cursor-pointer rounded-xl' +
+        ' text-black shadow-card dark:border-gray-500 glassmorphism dark:bg-gray-700 dark:text-gray-200'
+      }
+    >
+      <FontAwesomeIcon
+        icon={userTheme === 'dark' ? faSun : faMoon}
+        id="darkModeButton"
+        className="hover:scale-150 transform duration-200"
+      />
+    </div>
   )
 }
diff --git a/components/JumpToTopButton.js b/components/JumpToTopButton.js
index 2d708f27..1e6d375d 100644
--- a/components/JumpToTopButton.js
+++ b/components/JumpToTopButton.js
@@ -42,9 +42,9 @@ const JumpToTopButton = ({ targetRef, showPercent = true }) => {
 
   return (<div id='jump-to-top' className='right-5 fixed flex bottom-48 duration-500 z-20'>
       <div onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
-        className={(show ? '' : 'hidden') + ' animate__fadeInRight animate__animated animate__faster shadow-card rounded-full glassmorphism py-1 cursor-pointer '}>
+        className={(show ? '' : 'hidden') + ' animate__fadeInRight animate__animated animate__faster shadow-card rounded-xl glassmorphism py-1 cursor-pointer '}>
         <div className='text-center'>
-        <div className='w-10 dark:text-gray-200 transform hover:scale-125 duration-200 text-xs' title={locale.POST.TOP} >
+        <div className='w-10 dark:text-gray-200 transform hover:scale-150 duration-200 text-xs' title={locale.POST.TOP} >
           <FontAwesomeIcon icon={faArrowUp} />
         </div>
           {showPercent && (<div className='w-10 text-xs dark:text-gray-200'>{percent}</div>)}
diff --git a/components/SideArea.js b/components/SideArea.js
index 98728f09..6e59963e 100644
--- a/components/SideArea.js
+++ b/components/SideArea.js
@@ -27,7 +27,7 @@ const SideArea = ({ title, tags, currentTag, post, posts, categories, currentCat
   const { locale } = useGlobal()
   return <aside id='sidebar' className='w-72 z-10 scroll-hidden h-full'>
 
-    <section className='hidden lg:block bg-white dark:bg-gray-800 rounded-xl py-8 shadow-lg'>
+    <section className='hidden lg:block bg-white dark:bg-gray-800 rounded-xl hover:shadow-2xl duration-200 py-8 shadow-lg'>
       <InfoCard />
     </section>
 
@@ -35,7 +35,7 @@ const SideArea = ({ title, tags, currentTag, post, posts, categories, currentCat
 
       {/* <hr className='dark:border-gray-700 mt-5 py-1' /> */}
 
-      <section className='hidden lg:block mt-5 py-4 rounded-xl shadow-lg bg-white dark:bg-gray-800'>
+      <section className='hidden lg:block mt-5 py-4 rounded-xl shadow-lg bg-white dark:bg-gray-800  hover:shadow-2xl duration-200'>
         <MenuButtonGroup allowCollapse={true} />
         <div className='px-5 pt-2'>
            <SearchInput currentTag={currentTag} currentSearch={currentSearch} />
@@ -44,7 +44,7 @@ const SideArea = ({ title, tags, currentTag, post, posts, categories, currentCat
 
       {/* 最新文章 */}
       {posts && (
-        <section className='rounded-xl shadow-lg py-4 mt-5 bg-white dark:bg-gray-800'>
+        <section className='rounded-xl shadow-lg py-4 mt-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
           <div className='text-sm pb-2 px-5  flex flex-nowrap justify-between'>
             <div className='font-light text-gray-600  dark:text-gray-200'><FontAwesomeIcon icon={faArchive} className='mr-2' />{locale.COMMON.LATEST_POSTS}</div>
           </div>
@@ -54,7 +54,7 @@ const SideArea = ({ title, tags, currentTag, post, posts, categories, currentCat
 
       {/* 分类  */}
       {categories && (
-        <section className='rounded-xl shadow-lg py-4 mt-5 bg-white dark:bg-gray-800'>
+        <section className='rounded-xl shadow-lg py-4 mt-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
           <div className='text-sm px-5 flex flex-nowrap justify-between font-light'>
             <div className='pb-1 text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-2' />{locale.COMMON.CATEGORY}</div>
             <Link href='/category' passHref>
@@ -69,7 +69,7 @@ const SideArea = ({ title, tags, currentTag, post, posts, categories, currentCat
 
       {/* 标签云  */}
       {tags && (
-        <section className='rounded-xl shadow-lg py-4 mt-5 bg-white dark:bg-gray-800'>
+        <section className='rounded-xl shadow-lg py-4 mt-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
           <div className='text-sm pb-1 px-5 flex flex-nowrap justify-between font-light dark:text-gray-200'>
             <div className='text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faTags} className='mr-2'/>{locale.COMMON.TAGS}</div>
             <Link href='/tag' passHref>
@@ -86,7 +86,7 @@ const SideArea = ({ title, tags, currentTag, post, posts, categories, currentCat
     </div>
 
     {post && (
-      <section id='left-toc' className='sticky pb-20 top-6 rounded-xl shadow-lg bg-white dark:bg-gray-800'>
+      <section id='left-toc' className='sticky pb-20 top-6 rounded-xl shadow-lg bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
         <div className='border-b text-2xl bg-white text-black rounded-t-xl dark:border-gray-700 dark:bg-gray-700 dark:text-white py-6 px-6'>
           {locale.COMMON.TABLE_OF_CONTENTS}
         </div>
diff --git a/components/StickyBar.js b/components/StickyBar.js
index 0e3be97b..48e2f81c 100644
--- a/components/StickyBar.js
+++ b/components/StickyBar.js
@@ -14,7 +14,7 @@ const StickyBar = ({ children }) => {
           <div className='z-30 absolute h-12 left-0 flex'>
             <div className='pr-6 md:ml-5 -line-x-opacity'/>
           </div>
-          <div id='tag-container' className="max-w-xs md:max-w-lg xl:max-w-2xl 2xl:max-w-5xl 3xl:max-w-6xl">
+          <div id='tag-container' className="md:pl-3  max-w-xs md:max-w-lg xl:max-w-2xl 2xl:max-w-5xl 3xl:max-w-6xl">
               { children }
           </div>
           <div className='z-30 absolute h-12 right-0 flex'>
diff --git a/components/TocDrawerButton.js b/components/TocDrawerButton.js
index e3c0f159..6fe83074 100644
--- a/components/TocDrawerButton.js
+++ b/components/TocDrawerButton.js
@@ -30,9 +30,9 @@ const TocDrawerButton = (props) => {
   })
 
   return (
-    <div id='toc-drawer-button' className='right-5 fixed bottom-60 duration-500 z-40' onClick={props.onClick}>
-        <div className={(show ? 'animate__fadeInRight' : 'hidden') + ' py-3 px-3.5 animate__animated glassmorphism rounded-full cursor-pointer shadow-card' }>
-            <div className='dark:text-gray-200 text-center transform hover:scale-125 duration-200 text-xs' title={locale.POST.TOP} >
+    <div id='toc-drawer-button' className='right-5 fixed bottom-60 duration-500 z-40'>
+        <div onClick={props.onClick} className={(show ? 'animate__fadeInRight' : 'hidden') + ' py-3 px-3.5 animate__animated glassmorphism rounded-xl cursor-pointer shadow-card' }>
+            <div className='dark:text-gray-200 text-center transform hover:scale-150 duration-200 text-xs' title={locale.POST.TOP} >
               <FontAwesomeIcon icon={faListOl} />
             </div>
         </div>