Merge pull request #218 from DnsChanger/feat/tools-page-and-ip-info

feat: add tools page with IP info and shutdown utilities

Author: sajjadmrx

src/renderer/app.tsx

@@ -2,17 +2,18 @@ import React, { useState, useEffect, type JSX } from 'react'
 
 import { Toaster } from 'react-hot-toast'
 import type { IconType } from 'react-icons'
-import { BsPower } from 'react-icons/bs'
+import { TbTool } from 'react-icons/tb'
 import { MdOutlineExplore } from 'react-icons/md'
 import { TbSettings, TbSmartHome } from 'react-icons/tb'
+import { ToolsPage } from './pages/tools/tools.page'
 import TypesafeI18n from '../i18n/i18n-react'
 import { loadLocaleAsync } from '../i18n/i18n-util.async'
 import type { SettingInStore, Settings } from '../shared/interfaces/settings.interface'
 import { PageWrapper } from './Wrappers/pages.wrapper'
 import { ExplorePage } from './pages/explore.page'
 import { HomePage } from './pages/home.page'
 import { SettingPage } from './pages/setting.page'
-import { ShutdownPage } from './pages/shutdown.page'
+
 import { getThemeSystem, themeChanger } from './utils/theme.util'
 export let settingStore: SettingInStore = window.storePreload.get('settings')
 import ReactGA from 'react-ga4'
@@ -35,7 +36,7 @@ const pages: Page[] = [
 		icon: MdOutlineExplore,
 		name: 'Explore',
 	},
-	{ key: '/shutdown', element: <ShutdownPage />, icon: BsPower, name: 'Shutdown' },
+	{ key: '/tools', element: <ToolsPage />, icon: TbTool, name: 'Tools' },
 	{ key: '/setting', element: <SettingPage />, icon: TbSettings, name: 'Setting' },
 ]
 const queryClient = new QueryClient()
@@ -116,7 +117,7 @@ export function App() {
 									}`}
 								>
 									{React.createElement(page.icon, {
-										size: 28,
+										size: 20,
 									})}
 									<AnimatePresence mode="wait">
 										{InPath(page.key) && (

src/renderer/component/buttons/benchmark-dns-btn.component.tsx

@@ -5,12 +5,14 @@ import type { Server } from '../../../shared/interfaces/server.interface'
 import { DnsBenchmarkModalComponent } from '../modals/dns-benchmark.component'
 import Tooltip from '../tooltip/toolTip'
 import { Button } from '../button/button'
+import { cn } from '../../utils/cn'
 
 interface Props {
 	servers: Server[]
+	className?: string
 }
 
-export function BenchmarkDnsButtonComponent({ servers }: Props) {
+export function BenchmarkDnsButtonComponent({ servers, className }: Props) {
 	const [isOpenModal, setIsOpenModal] = useState<boolean>(false)
 
 	return (
@@ -19,7 +21,10 @@ export function BenchmarkDnsButtonComponent({ servers }: Props) {
 				<Button
 					size="sm"
 					onClick={() => setIsOpenModal(true)}
-					className="bg-base-200 hover:bg-base-300 rounded-xl transition-all duration-200 hover:scale-105 active:scale-95 cursor-pointer"
+					className={cn(
+						'bg-base-200 hover:bg-base-300 rounded-xl transition-all duration-200 hover:scale-105 active:scale-95 cursor-pointer',
+						className
+					)}
 				>
 					<MdSpeed className="text-base-content/80" size={15} />
 				</Button>

src/renderer/component/cards/server.card.component.tsx

@@ -151,7 +151,7 @@ export function ServerCardComponent({
 
 							<button
 								onClick={() => setMenuOpen(!menuOpen)}
-								className="p-1.5 transition-colors rounded-lg shrink-0 text-base-content/50 hover:bg-base-200 hover:text-base-content"
+								className="p-1.5 transition-colors rounded-lg shrink-0 text-base-content/50 hover:bg-base-200 hover:text-base-content cursor-pointer"
 								aria-label="More options"
 							>
 								<CiCircleMore size={18} />

src/renderer/component/explore/explore-header.component.tsx

@@ -61,7 +61,10 @@ export function ExploreHeaderComponent({
 					<IoReload size={18} />
 				</Button>
 
-				<BenchmarkDnsButtonComponent servers={filteredServers} />
+				<BenchmarkDnsButtonComponent
+					servers={filteredServers}
+					className="bg-transparent shadow-none border-0"
+				/>
 			</div>
 
 			<div className="flex items-center justify-between text-xs text-base-content/60 px-1">

src/renderer/pages/setting.page.tsx

@@ -114,7 +114,7 @@ export function SettingPage() {
 							id="startUp"
 							checked={settingState.startUp}
 							onChange={toggleStartUp}
-							icon={<VscRunAbove className="text-primary text-lg" />}
+							icon={<VscRunAbove />}
 							title="Start up"
 							description={LL.pages.settings.autoRunningTitle()}
 						/>
@@ -124,7 +124,7 @@ export function SettingPage() {
 							id="autoUP"
 							checked={settingState.autoUpdate}
 							onChange={toggleAutoUpdate}
-							icon={<MdBrowserUpdated className="text-success text-lg" />}
+							icon={<MdBrowserUpdated />}
 							title="Automatic Update"
 							description="Get updates automatically"
 						/>
@@ -134,7 +134,7 @@ export function SettingPage() {
 							id="Minimize"
 							checked={settingState.minimize_tray}
 							onChange={toggleMinimize_tray}
-							icon={<TbWindowMinimize className="text-secondary text-lg" />}
+							icon={<TbWindowMinimize />}
 							title="Minimize to Tray"
 							description="The app moves to tray in background"
 						/>
@@ -144,7 +144,7 @@ export function SettingPage() {
 							id="Analytics"
 							checked={settingState.use_analytic ?? true}
 							onChange={toggleUseAnalytic}
-							icon={<MdOutlineAnalytics className="text-accent text-lg" />}
+							icon={<MdOutlineAnalytics />}
 							title="Anonymous Analytics"
 							description="Help improve the application with anonymous usage data"
 						/>