Added badge to settings button to display the extension state

Increased popup height
Fixed page head padding

dist/assets/MainPage.js

@@ -1 +1 @@
-import{j as a}from"./index.js";const o=({children:x})=>a.jsx("div",{className:"flex flex-col max-h-[476px] max-w-[450px] overflow-scroll p-4 pt-0",children:x});export{o as default};
+import{j as a}from"./index.js";const o=({children:x})=>a.jsx("div",{className:"flex flex-col max-h-[518px] max-w-[450px] overflow-scroll p-4 pt-0",children:x});export{o as default};

src/components/MainPage.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 const MainPage = ({ children }) => {
     return (
-        <div className="flex flex-col max-h-[476px] max-w-[450px] overflow-scroll p-4 pt-0">
+        <div className="flex flex-col max-h-[518px] max-w-[450px] overflow-scroll p-4 pt-0">
             {children}
         </div>
     );

src/components/PageHead.jsx

@@ -19,7 +19,7 @@ const PageHead = ({ darkMode, toggleDarkMode }) => {
     const [title, pageIcon, tooltipText] = pageData[location.pathname] || [];
 
     return (
-        <div className={`relative flex justify-between items-center w-full px-[18px] py-2 pb-1 ${darkMode ? 'bg-[#1a1c1e]' : 'bg-[#fff]'} shadow-pageHead`}>
+        <div className={`relative flex justify-between items-center w-full px-[22px] py-2 pb-1 ${darkMode ? 'bg-[#1a1c1e]' : 'bg-[#fff]'} shadow-pageHead`}>
             <div className='flex flex-row items-center gap-2'>
                 <img src={pageIcon} width={22} height={22} />
                 <Text className='font-medium select-none'>

src/components/SettingsButton.jsx

@@ -1,13 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Dropdown, Switch } from '@nextui-org/react';
+import { Badge, Dropdown, Switch } from '@nextui-org/react';
 import { SunIcon, MoonIcon } from '../constants/icons';
 import LanguageIcon from '@mui/icons-material/Language';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import ThumbUpAltIcon from '@mui/icons-material/ThumbUpAlt';
 import CoffeeIcon from '@mui/icons-material/Coffee';
-import StopIcon from '@mui/icons-material/Stop';
-import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import CircleIcon from '@mui/icons-material/Circle';
 import { getSwitchStates, updateSwitchState } from '../constants/popup';
 
 const SettingsButton = ({ darkMode, toggleDarkMode }) => {
@@ -46,9 +45,19 @@ const SettingsButton = ({ darkMode, toggleDarkMode }) => {
         <div className={`${darkMode ? 'text-[#e9e9e9]' : 'text-[#3b3b3b]'} cursor-pointer`}>
             <Dropdown closeOnSelect={false} placement="bottom-right">
 
-                <Dropdown.Trigger>
-                    <i className='bi bi-gear text-[22px] hover:text-[#3694ff] transition-colors duration-200'></i>
-                </Dropdown.Trigger>
+                <Badge
+                    content=""
+                    color={`${mainState ? 'success' : 'error'}`}
+                    placement="bottom-left"
+                    shape="circle"
+                    variant="dot"
+                    size="md"
+                    verticalOffset="10%"
+                    className='cursor-default'>
+                    <Dropdown.Trigger>
+                        <i className='bi bi-gear text-[22px] hover:text-[#3694ff] transition-colors duration-200 cursor-pointer'></i>
+                    </Dropdown.Trigger>
+                </Badge>
 
                 <Dropdown.Menu
                     css={{ border: `1px solid ${darkMode ? '#2f2f2f' : '#dbdbdb'}`, borderRadius: '16px', padding: '4px' }}
@@ -68,8 +77,8 @@ const SettingsButton = ({ darkMode, toggleDarkMode }) => {
                                 checked={mainState}
                                 onChange={updateSwitch}
                                 size="xs"
-                                iconOn={<PlayArrowIcon className={`${darkMode ? 'text-[#5086c3]' : 'text-[#3694ff]'}`} />}
-                                iconOff={<StopIcon className='text-[#df8080]' />}
+                                iconOn={<CircleIcon className='text-[#17C964]' />}
+                                iconOff={<CircleIcon className='text-[#F31260]' />}
                             />
                         </div>
                     </Dropdown.Item>

src/index.css

@@ -47,10 +47,10 @@
 body {
     font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
     font-size: 14px;
-    width: 450px;
     min-width: 450px !important;
-    min-height: 550px !important;
-    max-height: 550px !important;
+    max-width: 450px !important;
+    min-height: 590px !important;
+    max-height: 590px !important;
     overflow: scroll;
     background-color: var(--nextui-colors-background);
 }
@@ -63,10 +63,6 @@ p {
     border-top: 1px solid;
 }
 
-/* .switch-container:last-of-type {
-    border-bottom: 1px solid
-} */
-
 .nextui-modal-body .added {
     font-size: 14px;
     font-weight: 600;

src/views/Disabled.jsx

@@ -4,7 +4,7 @@ import { plug } from '../assets';
 
 const Disabled = ({ darkMode }) => {
     return (
-        <div className='flex flex-col justify-center items-center text-center w-full mt-[15%]'>
+        <div className='flex flex-col justify-center items-center text-center w-full mt-[25%]'>
             <img src={plug} width={64} height={64} />
 
             <Text className={`text-[22px] mb-3`}>

src/views/SupportPage.jsx

@@ -4,7 +4,7 @@ import { support } from '../assets';
 
 const StatsPage = ({ darkMode }) => {
     return (
-        <div className='flex flex-col justify-center items-center text-center w-full mt-[15%]'>
+        <div className='flex flex-col justify-center items-center text-center w-full mt-[25%]'>
             <img src={support} width={64} height={64} />
 
             <Text className={`text-[22px] mb-3`}>