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`}>