feat: initialize renderer application with theme, global styles, and core UI components

src/renderer/src/App.tsx

@@ -16,7 +16,6 @@ import {
     Toolbar,
     IconButton,
     Divider,
-    GlobalStyles,
     Tooltip,
     Container,
     Paper,
@@ -53,7 +52,6 @@ import {
     Dashboard as DashboardIcon,
     Folder as ProjectIcon,
     Settings as SettingsIcon,
-    Language as LanguageIcon,
     Storage as DbIcon,
     Dns as ServerIcon,
     Code as PhpIcon,
@@ -79,6 +77,7 @@ import {
 import Swal from 'sweetalert2'
 import { useTranslation } from 'react-i18next'
 import { supportedLngs } from './i18n'
+import GlobalStyles from './styles/GlobalStyles'
 import MariaDbImportWizard from './components/MariaDbImportWizard'
 import MariaDbExportWizard from './components/MariaDbExportWizard'
 import MariaDbDatabaseManager from './components/MariaDbDatabaseManager'
@@ -163,7 +162,7 @@ function App(): JSX.Element {
 
     // Log States
     const [logDialogOpen, setLogDialogOpen] = useState(false)
-    const [selectedService, setSelectedService] = useState('')
+    const [selectedService] = useState('')
     const [logs, setLogs] = useState<string[]>([])
     const [pmaInstalled, setPmaInstalled] = useState(false)
     const [pmaLoading, setPmaLoading] = useState(false)
@@ -390,14 +389,6 @@ function App(): JSX.Element {
         }
     }, [logs, logDialogOpen])
 
-    const handleOpenNginxConfig = async () => {
-        if (window.api && window.api.invoke) {
-            const config = await window.api.invoke('nginx:config:get')
-            setNginxConfig(config)
-            setIsNginxConfigOpen(true)
-        }
-    }
-
     const handleSaveNginxConfig = async () => {
         if (window.api && window.api.invoke) {
             const result = await window.api.invoke('nginx:config:save', nginxConfig)
@@ -606,8 +597,6 @@ function App(): JSX.Element {
             text: t('projects.delete_confirm'),
             icon: 'warning',
             showCancelButton: true,
-            confirmButtonColor: '#ff4444',
-            cancelButtonColor: '#3085d6',
             confirmButtonText: t('common.yes_delete'),
             cancelButtonText: t('common.cancel'),
             background: '#1e1e1e',
@@ -622,14 +611,6 @@ function App(): JSX.Element {
         }
     }
 
-    const handleOpenProcessList = async (id: string) => {
-        setSelectedMariaDbId(id)
-        setIsProcessListOpen(true)
-        if (window.api && window.api.invoke) {
-            await fetchProcessList(id)
-        }
-    }
-
     const handleTestNginxConfig = async () => {
         if (window.api && window.api.invoke) {
             const result = await window.api.invoke('nginx:config:test')
@@ -689,7 +670,6 @@ function App(): JSX.Element {
                     icon: 'success',
                     background: '#1e1e1e',
                     color: '#fff',
-                    confirmButtonColor: '#153E5E',
                     customClass: { popup: 'swal2-dark-popup' }
                 })
                 setIsProjectNginxConfigOpen(false)
@@ -781,8 +761,6 @@ function App(): JSX.Element {
             title: t('mariadb_process_monitor.kill_confirm'),
             icon: 'warning',
             showCancelButton: true,
-            confirmButtonColor: '#d33',
-            cancelButtonColor: '#3085d6',
             confirmButtonText: t('mariadb_process_monitor.kill_btn'),
             cancelButtonText: t('common.cancel'),
             background: '#1a1d21',
@@ -866,58 +844,8 @@ function App(): JSX.Element {
                 </DialogActions>
             </Dialog>
 
-            <GlobalStyles styles={{
+            <GlobalStyles />
-                'html, body, #root': {
+
-                    margin: 0,
-                    padding: 0,
-                    height: '100%',
-                    width: '100%',
-                    overflow: 'hidden',
-                },
-                '*::-webkit-scrollbar': {
-                    width: '8px',
-                    height: '8px',
-                },
-                '*::-webkit-scrollbar-track': {
-                    background: 'rgba(0, 0, 0, 0.1)',
-                },
-                '*::-webkit-scrollbar-thumb': {
-                    background: '#153E5E',
-                    borderRadius: '10px',
-                    border: '2px solid rgba(0, 0, 0, 0.1)',
-                },
-                '*::-webkit-scrollbar-thumb:hover': {
-                    background: '#1a4d75',
-                },
-                '.swal2-container': {
-                    zIndex: '9999 !important'
-                },
-                '.swal-title-small': {
-                    fontSize: '1rem !important',
-                    fontWeight: '800 !important',
-                    letterSpacing: '1px !important',
-                    color: '#fff !important',
-                    marginTop: '10px !important'
-                },
-                '@keyframes swalLoadingDots': {
-                    '0%': { opacity: 0.3, transform: 'scale(0.8)' },
-                    '50%': { opacity: 1, transform: 'scale(1.2)' },
-                    '100%': { opacity: 0.3, transform: 'scale(0.8)' }
-                },
-                '.swal2-loading-dots': {
-                    animation: 'swalLoadingDots 1.4s infinite ease-in-out'
-                },
-                '.nginx-error-container': {
-                    textAlign: 'left !important',
-                    fontFamily: 'monospace !important',
-                    fontSize: '0.8rem !important',
-                    whiteSpace: 'pre-wrap !important',
-                    backgroundColor: 'rgba(0,0,0,0.2) !important',
-                    padding: '10px !important',
-                    borderRadius: '5px !important',
-                    border: '1px solid rgba(255,255,255,0.1) !important'
-                }
-            }} />
             <Box sx={{ display: 'flex', height: '100vh', width: '100vw', overflow: 'hidden', backgroundImage: 'radial-gradient(circle at 50% 0%, #153E5E 0%, #121212 100%)', bgcolor: 'transparent' }}>
                 <AppBar
                     position="fixed"

src/renderer/src/components/MariaDbDatabaseManager.tsx

@@ -113,7 +113,6 @@ const MariaDbDatabaseManager: React.FC<MariaDbDatabaseManagerProps> = ({ version
             text: t('mariadb_manager.delete_db_confirm', { db: dbName }),
             icon: 'warning',
             showCancelButton: true,
-            confirmButtonColor: '#d33',
             background: '#1e1e1e',
             color: '#fff'
         })
@@ -167,7 +166,6 @@ const MariaDbDatabaseManager: React.FC<MariaDbDatabaseManagerProps> = ({ version
             text: t('mariadb_manager.delete_user_confirm', { user: `${user}@${host}` }),
             icon: 'warning',
             showCancelButton: true,
-            confirmButtonColor: '#d33',
             background: '#1e1e1e',
             color: '#fff'
         })

src/renderer/src/main.tsx

@@ -2,38 +2,10 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
 import i18n from './i18n'
-import { ThemeProvider, createTheme } from '@mui/material/styles'
+import { ThemeProvider } from '@mui/material/styles'
 import CssBaseline from '@mui/material/CssBaseline'
 import { I18nextProvider } from 'react-i18next'
-
+import { theme } from './styles/theme'
-const theme = createTheme({
-    palette: {
-        mode: 'dark',
-        primary: {
-            main: '#4A7CA3',
-        },
-        secondary: {
-            main: '#153E5E',
-        },
-        background: {
-            default: '#121212',
-            paper: '#1e1e1e',
-        },
-        text: {
-            primary: '#ffffff',
-            secondary: 'rgba(255, 255, 255, 0.7)',
-        },
-    },
-    components: {
-        MuiPaper: {
-            styleOverrides: {
-                root: {
-                    backgroundImage: 'none',
-                },
-            },
-        },
-    },
-})
 
 // Error Boundary for better debugging
 class ErrorBoundary extends React.Component<{ children: React.ReactNode }, { hasError: boolean, error: any }> {

src/renderer/src/styles/GlobalStyles.tsx

@@ -0,0 +1,114 @@
+import { GlobalStyles as MuiGlobalStyles } from '@mui/material'
+
+const styles = {
+    'html, body, #root': {
+        margin: 0,
+        padding: 0,
+        height: '100%',
+        width: '100%',
+        overflow: 'hidden',
+    },
+    '*::-webkit-scrollbar': {
+        width: '8px',
+        height: '8px',
+    },
+    '*::-webkit-scrollbar-track': {
+        background: 'rgba(0, 0, 0, 0.1)',
+    },
+    '*::-webkit-scrollbar-thumb': {
+        background: '#153E5E',
+        borderRadius: '10px',
+        border: '2px solid rgba(0, 0, 0, 0.1)',
+    },
+    '*::-webkit-scrollbar-thumb:hover': {
+        background: '#1a4d75',
+    },
+    '.swal2-container': {
+        zIndex: '9999 !important'
+    },
+    '.swal2-popup': {
+        borderRadius: '16px !important',
+        background: '#1a1d21 !important',
+        border: '1px solid rgba(255,255,255,0.1) !important',
+        boxShadow: '0 24px 48px rgba(0,0,0,0.5) !important'
+    },
+    '.swal2-title': {
+        color: '#fff !important',
+        fontSize: '1.25rem !important',
+        fontWeight: '800 !important'
+    },
+    '.swal2-html-container': {
+        color: 'rgba(255,255,255,0.7) !important',
+        fontSize: '0.9rem !important'
+    },
+    '.swal2-confirm': {
+        backgroundColor: '#4A7CA3 !important',
+        color: '#fff !important',
+        borderRadius: '8px !important',
+        padding: '10px 24px !important',
+        fontSize: '0.8rem !important',
+        fontWeight: '700 !important',
+        textTransform: 'uppercase !important',
+        letterSpacing: '0.5px !important',
+        boxShadow: 'none !important',
+        '&:hover': {
+            backgroundColor: '#5a8cb3 !important'
+        }
+    },
+    '.swal2-cancel': {
+        backgroundColor: 'rgba(255,255,255,0.05) !important',
+        color: 'rgba(255,255,255,0.7) !important',
+        borderRadius: '8px !important',
+        padding: '10px 24px !important',
+        fontSize: '0.8rem !important',
+        fontWeight: '700 !important',
+        textTransform: 'uppercase !important',
+        letterSpacing: '0.5px !important',
+        '&:hover': {
+            backgroundColor: 'rgba(255,255,255,0.1) !important',
+            color: '#fff !important'
+        }
+    },
+    '.swal2-input': {
+        backgroundColor: 'rgba(0,0,0,0.2) !important',
+        border: '1px solid rgba(255,255,255,0.1) !important',
+        borderRadius: '8px !important',
+        color: '#fff !important',
+        fontSize: '0.9rem !important',
+        '&:focus': {
+            border: '1px solid #4A7CA3 !important',
+            boxShadow: '0 0 0 2px rgba(74, 124, 163, 0.2) !important'
+        }
+    },
+    '.swal-title-small': {
+        fontSize: '1rem !important',
+        fontWeight: '800 !important',
+        letterSpacing: '1px !important',
+        color: '#fff !important',
+        marginTop: '10px !important'
+    },
+    '@keyframes swalLoadingDots': {
+        '0%': { opacity: 0.3, transform: 'scale(0.8)' },
+        '50%': { opacity: 1, transform: 'scale(1.2)' },
+        '100%': { opacity: 0.3, transform: 'scale(0.8)' }
+    },
+    '.swal2-loading-dots': {
+        animation: 'swalLoadingDots 1.4s infinite ease-in-out'
+    },
+    '.nginx-error-container': {
+        textAlign: 'left !important',
+        fontFamily: 'monospace !important',
+        fontSize: '0.8rem !important',
+        whiteSpace: 'pre-wrap !important',
+        backgroundColor: 'rgba(0,0,0,0.2) !important',
+        padding: '10px !important',
+        borderRadius: '5px !important',
+        border: '1px solid rgba(255,255,255,0.1) !important'
+    }
+}
+
+export const GlobalStyles = () => {
+    return <MuiGlobalStyles styles={styles} />
+}
+
+export default GlobalStyles

src/renderer/src/styles/theme.ts

@@ -0,0 +1,30 @@
+import { createTheme } from '@mui/material/styles'
+
+export const theme = createTheme({
+    palette: {
+        mode: 'dark',
+        primary: {
+            main: '#4A7CA3',
+        },
+        secondary: {
+            main: '#153E5E',
+        },
+        background: {
+            default: '#121212',
+            paper: '#1e1e1e',
+        },
+        text: {
+            primary: '#ffffff',
+            secondary: 'rgba(255, 255, 255, 0.7)',
+        },
+    },
+    components: {
+        MuiPaper: {
+            styleOverrides: {
+                root: {
+                    backgroundImage: 'none',
+                },
+            },
+        },
+    },
+})