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
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:
57
frontend/src/theme/layout.less
Normal file
57
frontend/src/theme/layout.less
Normal 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
15
frontend/src/theme/theme.less
Normal 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;
|
||||
Reference in New Issue
Block a user