refactor: Replace button elements with CircleButton and Button components in Header and BookmarkSettings

Author: medyo

src/components/Layout/Header.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { BsFillBookmarksFill, BsFillGearFill, BsMoonFill } from 'react-icons/bs'
 import { CgTab } from 'react-icons/cg'
-import { FaUserLarge } from 'react-icons/fa6'
+import { FaUser } from 'react-icons/fa'
 import { IoMdSunny } from 'react-icons/io'
 import { MdDoDisturbOff } from 'react-icons/md'
 import { RxArrowLeft } from 'react-icons/rx'
@@ -14,6 +14,7 @@ import { Changelog } from 'src/features/changelog'
 import { identifyUserTheme, trackDNDDisable, trackThemeSelect } from 'src/lib/analytics'
 import { useBookmarks } from 'src/stores/bookmarks'
 import { useUserPreferences } from 'src/stores/preferences'
+import { Button, CircleButton } from '../Elements'
 
 export const Header = () => {
   const { openAuthModal, user, isConnected } = useAuth()
@@ -78,37 +79,37 @@ export const Header = () => {
           <Changelog />
         </span>
         <SearchBar />
-        <div className="extras">
+        <div className="buttonsFlex extras">
           {isDNDModeActive() && (
-            <button className="extraBtn extraTextBtn" onClick={() => onUnpauseClicked()}>
+            <Button onClick={onUnpauseClicked} className="dndButton">
               <MdDoDisturbOff />
-              &nbsp;Unpause
-            </button>
+              Unpause
+            </Button>
           )}
-          <button aria-label="Open settings" className="extraBtn" onClick={onSettingsClick}>
+
+          <CircleButton onClick={onSettingsClick}>
             <BsFillGearFill />
-          </button>
-          <button
-            aria-label="Toggle theme"
-            className="extraBtn darkModeBtn"
-            onClick={onThemeChange}>
+          </CircleButton>
+          <CircleButton onClick={onThemeChange} variant="darkfocus">
             {themeIcon}
-          </button>
-          <Link to="/settings/bookmarks" className="extraBtn" aria-label="Open bookmarks">
-            <>
-              <BsFillBookmarksFill />
-              <BookmarksBadgeCount />
-            </>
-          </Link>
-          {isConnected() ? (
-            <Link to="/settings/profile" aria-label="Open profile">
+          </CircleButton>
+          <CircleButton onClick={() => navigate('/settings/bookmarks')}>
+            <BsFillBookmarksFill />
+          </CircleButton>
+          <CircleButton
+            onClick={() => {
+              if (isConnected()) {
+                navigate('/settings/profile')
+              } else {
+                openAuthModal()
+              }
+            }}>
+            {isConnected() ? (
               <img className="profileImage" src={user?.imageURL} />
-            </Link>
-          ) : (
-            <button aria-label="open login" className="extraBtn" onClick={openAuthModal}>
-              <FaUserLarge />
-            </button>
-          )}
+            ) : (
+              <FaUser style={{ fontSize: '1.2em' }} />
+            )}
+          </CircleButton>
         </div>
         {location.pathname === '/' ? (
           <UserTags />

src/features/settings/components/BookmarkSettings/BookmarkSettings.tsx

@@ -2,7 +2,7 @@ import { useRef } from 'react'
 import { BiBookmarkMinus } from 'react-icons/bi'
 import { RiFileDownloadFill, RiFileUploadFill } from 'react-icons/ri'
 import toast from 'react-simple-toasts'
-import { CardLink } from 'src/components/Elements'
+import { Button, CardLink, CircleButton } from 'src/components/Elements'
 import { SettingsContentLayout } from 'src/components/Layout/SettingsContentLayout'
 import { SUPPORTED_CARDS } from 'src/config/supportedCards'
 import { BookmarkedPost } from 'src/features/bookmarks'
@@ -115,7 +115,7 @@ export const BookmarkSettings = () => {
         title="Bookmarks"
         description="Find all your bookmarks here. You can remove a bookmark by clicking on the remove icon."
         actions={
-          <>
+          <div className="buttonsFlex">
             <input
               type="file"
               id="file"
@@ -124,14 +124,14 @@ export const BookmarkSettings = () => {
               className="hidden"
               onChange={handleFileChange}
             />
-            <button className="extraBtn extraTextBtn" onClick={() => importBookmarks()}>
+            <Button onClick={importBookmarks} className="dndButton">
               <RiFileUploadFill />
-              &nbsp;Import
-            </button>
-            <button className="extraBtn" onClick={() => exportBookmarks()}>
+              Import
+            </Button>
+            <CircleButton onClick={() => exportBookmarks()}>
               <RiFileDownloadFill />
-            </button>
-          </>
+            </CircleButton>
+          </div>
         }>
         <div className="bookmarks">
           {userBookmarks.map((bm) => (