feat: Replace button elements with Button component for consistency

Author: medyo

src/features/settings/components/AddSearchEngine.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { isValidURL } from 'src/utils/UrlUtils'
 
 import { TiPlus } from 'react-icons/ti'
+import { Button } from 'src/components/Elements'
 import { useUserPreferences } from 'src/stores/preferences'
 
 export const AddSearchEngine = () => {
@@ -45,9 +46,9 @@ export const AddSearchEngine = () => {
             placeholder="https://google.com?q="
           />
           <div>
-            <button onClick={onAddSearchEngine}>
-              <TiPlus /> Add
-            </button>
+            <Button startIcon={<TiPlus />} size="small" onClick={onAddSearchEngine}>
+              Add
+            </Button>
           </div>
         </div>
         {RssInputFeedback && (

src/features/settings/components/GeneralSettings/DNDSettings.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import Select, { SingleValue } from 'react-select'
+import { Button } from 'src/components/Elements'
 import { trackDNDEnable } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
 import { diffBetweenTwoDatesInMinutes } from 'src/utils/DateUtils'
@@ -101,7 +102,9 @@ export const DNDSettings = () => {
             />
           </div>
 
-          <button onClick={onApplyClicked}>Apply</button>
+          <Button size="small" onClick={onApplyClicked}>
+            Apply
+          </Button>
         </div>
         {timeoutLabel() && (
           <div className="settingHint">

src/features/settings/components/GeneralSettings/generalSettings.css

@@ -35,10 +35,12 @@
 .rssButton {
   background-color: #ee802f;
   color: white;
+  &:hover {
+    background-color: #f99147;
+    color: white;
+  }
 }
-.rssButton:hover {
-  opacity: 0.9;
-}
+
 .settingContent {
   width: 100%;
   flex: 1;

src/features/settings/components/RssSetting.tsx

@@ -5,6 +5,7 @@ import { identifyUserCards, trackRssSourceAdd } from 'src/lib/analytics'
 import { isValidURL } from 'src/utils/UrlUtils'
 
 import { BsRssFill } from 'react-icons/bs'
+import { Button } from 'src/components/Elements'
 import { useUserPreferences } from 'src/stores/preferences'
 import { SupportedCardType } from 'src/types'
 
@@ -78,9 +79,13 @@ export const RssSetting = () => {
             <BeatLoader color={'#A9B2BD'} loading={isRssInputLoading} size={6} />
           ) : (
             <div>
-              <button className="rssButton" onClick={onRssAddClick}>
-                <BsRssFill /> Add
-              </button>
+              <Button
+                startIcon={<BsRssFill />}
+                size="small"
+                className="rssButton"
+                onClick={onRssAddClick}>
+                Add
+              </Button>
             </div>
           )}
         </div>