From 4932e18553c9ed27c0f7acd30cec93d98919f7b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= Date: Fri, 3 Apr 2026 15:29:54 +0300 Subject: [PATCH] feat: initialize renderer application with theme, global styles, and core UI components --- src/renderer/src/App.tsx | 80 +----------- .../src/components/MariaDbDatabaseManager.tsx | 2 - src/renderer/src/main.tsx | 32 +---- src/renderer/src/styles/GlobalStyles.tsx | 114 ++++++++++++++++++ src/renderer/src/styles/theme.ts | 30 +++++ 5 files changed, 150 insertions(+), 108 deletions(-) create mode 100644 src/renderer/src/styles/GlobalStyles.tsx create mode 100644 src/renderer/src/styles/theme.ts diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx index 5648df4..6c1ed5d 100644 --- a/src/renderer/src/App.tsx +++ b/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([]) 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 { - + + = ({ 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 = ({ version text: t('mariadb_manager.delete_user_confirm', { user: `${user}@${host}` }), icon: 'warning', showCancelButton: true, - confirmButtonColor: '#d33', background: '#1e1e1e', color: '#fff' }) diff --git a/src/renderer/src/main.tsx b/src/renderer/src/main.tsx index fc8eefd..8785b85 100644 --- a/src/renderer/src/main.tsx +++ b/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' - -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', - }, - }, - }, - }, -}) +import { theme } from './styles/theme' // Error Boundary for better debugging class ErrorBoundary extends React.Component<{ children: React.ReactNode }, { hasError: boolean, error: any }> { diff --git a/src/renderer/src/styles/GlobalStyles.tsx b/src/renderer/src/styles/GlobalStyles.tsx new file mode 100644 index 0000000..15654e6 --- /dev/null +++ b/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 +} + +export default GlobalStyles diff --git a/src/renderer/src/styles/theme.ts b/src/renderer/src/styles/theme.ts new file mode 100644 index 0000000..0476ece --- /dev/null +++ b/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', + }, + }, + }, + }, +})