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

- 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:
2025-11-22 19:49:02 +01:00
parent c986c1215a
commit ea9d79f671
16 changed files with 3268 additions and 783 deletions

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%);
}

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;