marcus/mitm-webserver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: migrate from MUI to Ant Design for layout and components
All checks were successful
Build and Deploy MITM Webserver / build (push) Successful in 16s
Details

Browse Source 
- Updated package.json to remove MUI dependencies and add Ant Design.
- Refactored App component to use Ant Design's Layout, Header, Footer, and Sidebar.
- Created new Footer, Header, and Sidebar components using Ant Design.
- Removed old Header component that used MUI.
- Updated Home component to use Ant Design's Typography and Button.
- Added global styles in index.less and theme styles in theme.less and layout.less.
- Removed MUI theme configuration and replaced it with Ant Design's theming.
This commit is contained in:
malmert
2025-11-22 19:49:02 +01:00
parent c986c1215a
commit ea9d79f671
16 changed files with 3268 additions and 783 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/App.tsx
View File

@@ -1,15 +1,29 @@
import { Routes, Route } from "react-router-dom";
import "./App.css";
import Header from "./header/Header";
import Home from "./pages/Home";
import { Layout } from 'antd';
import { useState } from 'react';
import { Outlet } from 'react-router-dom';
import './App.css';
import { AppFooter } from './Layout/Footer';
import AppHeader from './Layout/Header';
import Sidebar from './Layout/Sidebar';
const { Content, Footer } = Layout;
export default function App() {
const [collapsed, setCollapsed] = useState(false);
return (
<>
<Header />
<Routes>
<Route path="/" element={<Home />} />
</Routes>
<Layout style={{ minHeight: '100vh' }}>
<AppHeader />
<Layout>
<Sidebar collapsed={collapsed} onCollapse={setCollapsed} />
<Layout style={{ padding: '24px' }}>
<Content style={{ minHeight: 'calc(100vh - 64px)' }}>
<Outlet />
</Content>
</Layout>
</Layout>
</Layout>
<AppFooter />
</>
);
}

5
frontend/src/Layout/Footer.tsx Normal file
View File

@@ -0,0 +1,5 @@
import { Footer } from 'antd/es/layout/layout';
export const AppFooter: React.FC = () => {
return <Footer>MitM Webserver App by Marcus Almert ©2025</Footer>;
};

11
frontend/src/Layout/Header.tsx Normal file
View File

@@ -0,0 +1,11 @@
import { Layout } from 'antd';
import React from 'react';
import '../theme/layout.less';
const { Header } = Layout;
const AppHeader: React.FC = () => {
return <Header>MitM Webserver</Header>;
};
export default AppHeader;

38
frontend/src/Layout/Sidebar.tsx Normal file
View File

@@ -0,0 +1,38 @@
// src/components/Sidebar.tsx
import { HomeOutlined, InfoCircleOutlined, SettingOutlined } from '@ant-design/icons';
import { Layout, Menu } from 'antd';
import React from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import '../theme/layout.less';
const { Sider } = Layout;
const menuItems = [
{ key: '/', icon: <HomeOutlined />, label: 'Home' },
{ key: '/about', icon: <InfoCircleOutlined />, label: 'About' },
{ key: '/settings', icon: <SettingOutlined />, label: 'Settings' },
];
interface SidebarProps {
collapsed: boolean;
onCollapse: (collapsed: boolean) => void;
}
const Sidebar: React.FC<SidebarProps> = ({ collapsed, onCollapse }) => {
const navigate = useNavigate();
const location = useLocation();
return (
<Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
<Menu
theme="dark"
mode="inline"
selectedKeys={[location.pathname]}
items={menuItems}
onClick={(e) => navigate(e.key)}
/>
</Sider>
);
};
export default Sidebar;

103
frontend/src/header/Header.tsx
View File

@@ -1,103 +0,0 @@
import React from "react";
import {
AppBar,
Toolbar,
Typography,
IconButton,
Drawer,
List,
ListItem,
ListItemButton,
ListItemText,
Box,
useTheme,
} from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu";
import { useNavigate, useLocation, To } from "react-router-dom";
import { Home } from "@mui/icons-material";
const pages = [
{
name: (
<span className="drawer-pages">
<Home /> Home
</span>
),
path: "/",
},
];
export default function Header() {
const [drawerOpen, setDrawerOpen] = React.useState(false);
const theme = useTheme();
const navigate = useNavigate();
const location = useLocation();
const toggleDrawer = (open: boolean) => () => setDrawerOpen(open);
const handleNavigate = (path: To) => {
navigate(path);
setDrawerOpen(false);
};
const drawerList = (
<Box
sx={{
width: 250,
height: "100%",
bgcolor: theme.palette.background.default,
color: theme.palette.text.primary,
}}
role="presentation"
onKeyDown={toggleDrawer(false)}
>
<Typography
variant="h6"
sx={{
textAlign: "center",
my: 2,
fontWeight: "bold",
color: theme.palette.primary.main,
}}
>
MitM Webserver
</Typography>
<List>
{pages.map(({ name, path }) => (
<ListItem key={name} disablePadding>
<ListItemButton
onClick={() => handleNavigate(path)}
selected={location.pathname === path}
>
<ListItemText primary={name} />
</ListItemButton>
</ListItem>
))}
</List>
</Box>
);
return (
<>
<AppBar position="fixed" color="primary" elevation={2}>
<Toolbar>
<IconButton color="inherit" edge="start" onClick={toggleDrawer(true)}>
<MenuIcon />
</IconButton>
<Typography
variant="h6"
component="div"
sx={{ flexGrow: 1, fontWeight: "bold", cursor: "pointer" }}
onClick={() => handleNavigate("/")}
>
MitM Webserver
</Typography>
</Toolbar>
</AppBar>
<Toolbar /> {/* spacing */}
<Drawer anchor="left" open={drawerOpen} onClose={toggleDrawer(false)}>
{drawerList}
</Drawer>
</>
);
}

0
frontend/src/index.css → frontend/src/index.less
View File

23
frontend/src/main.tsx
View File

@@ -1,21 +1,20 @@
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.js";
import { ConfigProvider } from 'antd';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App.js';
import './index.less';
import './theme/theme.less';
import { ThemeProvider, createTheme } from "@mui/material/styles";
import { BrowserRouter } from "react-router-dom";
import theme from "./theme";
const rootElement = document.getElementById("root");
const rootElement = document.getElementById('root');
if (rootElement) {
createRoot(rootElement).render(
<StrictMode>
<ThemeProvider theme={theme}>
<ConfigProvider theme={{}}>
<BrowserRouter>
<App />
</BrowserRouter>
</ThemeProvider>
</StrictMode>
</ConfigProvider>
</StrictMode>,
);
}

14
frontend/src/pages/Home.tsx
View File

@@ -1,14 +1,10 @@
import { Container, Typography, Button } from "@mui/material";
import { Button, Typography } from 'antd';
export default function Home() {
return (
<Container style={{ textAlign: "center", marginTop: "4rem" }}>
<Typography variant="h4" gutterBottom>
🚀 Hello MUI + React
</Typography>
<Button variant="contained" color="primary">
Klick mich!
</Button>
</Container>
<>
<Typography>🚀 Hello MUI + React</Typography>
<Button color="primary">Klick mich!</Button>
</>
);
}

111
frontend/src/theme.tsx
View File

@@ -1,111 +0,0 @@
import { createTheme } from "@mui/material/styles";
const theme = createTheme({
palette: {
mode: "light",
// === Primary colors (blue shades) ===
primary: {
main: "#1976d2", // medium blue
light: "#63a4ff", // light blue
dark: "#004ba0", // deep blue
contrastText: "#ffffff",
},
// === Secondary colors (gray shades) ===
secondary: {
main: "#737373", // neutral medium gray
light: "#bfbfbf", // lighter gray
dark: "#404040", // darker gray
contrastText: "#ffffff",
},
// === Background colors ===
background: {
default: "#f9f9f9", // soft gray-white for page background
paper: "#ffffff", // white for cards, modals, etc.
},
// === Text colors ===
text: {
primary: "#262626", // almost black
secondary: "#737373", // muted gray
},
// === Divider ===
divider: "#d9d9d9",
},
typography: {
fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
h1: { fontWeight: 700, fontSize: "2.5rem", color: "#262626" },
h2: { fontWeight: 600, fontSize: "2rem", color: "#262626" },
h3: { fontWeight: 600, fontSize: "1.75rem", color: "#262626" },
body1: { fontSize: "1rem", lineHeight: 1.6, color: "#262626" },
button: {
textTransform: "none",
fontWeight: 500,
color: "#ffffff",
},
},
shape: {
borderRadius: 10,
},
components: {
MuiAppBar: {
styleOverrides: {
root: {
backgroundColor: "#1976d2", // primary main
color: "#ffffff",
},
},
},
MuiButton: {
styleOverrides: {
root: {
borderRadius: 8,
textTransform: "none",
fontWeight: 500,
"&:hover": {
backgroundColor: "#004ba0", // darker blue
},
},
},
},
MuiPaper: {
styleOverrides: {
root: {
borderRadius: 0,
backgroundColor: "#ffffff",
color: "#262626",
boxShadow:
"0px 2px 8px rgba(0, 0, 0, 0.05), 0px 1px 2px rgba(0, 0, 0, 0.1)",
},
},
},
MuiDrawer: {
styleOverrides: {
paper: {
backgroundColor: "#f0f0f0", // subtle gray drawer background
color: "#262626",
},
},
},
MuiListItemButton: {
styleOverrides: {
root: {
"&.Mui-selected": {
backgroundColor: "#e0e0e0",
"&:hover": {
backgroundColor: "#d0d0d0",
},
},
},
},
},
},
});
export default theme;

57
frontend/src/theme/layout.less Normal file
View File

@@ -0,0 +1,57 @@
@import "theme.less";
html, body, #root {
height: 100%;
min-width: 100%;
margin: 0;
padding: 0;
}
body {
background-color: @body-background;
color: @text-color;
}
.ant-layout {
background: @body-background;
}
.ant-layout-header {
background: @layout-header-background;
color: @text-color;
font-size: @font-size-header;
position: sticky;
top: 0px;
left: 0px;
overflow: auto;
}
.ant-layout-content {
background: @component-background;
min-height: calc(100vh - 64px - 70px); // header + footer height
}
.ant-layout-sider{
li span{ font-size: @font-size-slider;}
height: calc(100vh - 64px - 70px);
background: @component-background;
top: 64px;
overflow: auto;
position: sticky;
}
.ant-layout-footer {
background: @component-background;
color: @text-color-secondary;
text-align: center;
width: auto;
}
.ant-menu-dark {
background: @menu-dark-bg;
color: @text-color;
}
.ant-menu-dark .ant-menu-item-selected {
background-color: darken(@primary-color, 10%);
}

15
frontend/src/theme/theme.less Normal file
View File

@@ -0,0 +1,15 @@
// Dark theme colors
@primary-color: #1DA57A;
@text-color: #ffffff;
@text-color-secondary: #bfbfbf;
@heading-color: #ffffff;
@body-background: #141414;
@component-background: #1f1f1f;
@border-color-base: #434343;
@border-radius-base: 8px;
@font-size-base: 14px;
@menu-dark-bg: #1f1f1f;
@menu-dark-submenu-bg: #1a1a1a;
@layout-header-background: #1f1f1f;
@font-size-header: 24px;
@font-size-slider: 18px;