truncgit/multiphp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ümit Tunç
2026-04-03 15:29:54 +03:00
parent 62d59d94c8
commit 4932e18553
5 changed files with 150 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/src/App.tsx
+4 -76
View File
@@ -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={{
'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'
}
}} />
<GlobalStyles />
<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
-2
View File
@@ -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 -30
View File
@@ -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 }> {
src/renderer/src/styles/GlobalStyles.tsx
+114
View File
@@ -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
+30
View File
@@ -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',
},
},
},
},
})