WEB-408: Improve Configuration Wizard UI

- Redesigned dialog layout with centered content and improved spacing
- Changed button grid to display 3 columns (33.333% each) with responsive breakpoints
- Added progress bar section with cleaner styling
- Improved button styles to match site standards (removed custom font-weight, changed Close button from stroked-warn to standard raised button)
- Enhanced visual hierarchy and professional appearance
- Responsive design for tablets and mobile devices
This commit is contained in:
Anvay
2025-11-10 23:07:00 +05:30
parent f78b7763d6
commit 77a4abc1ba
2 changed files with 90 additions and 26 deletions
@@ -0,0 +1,73 @@
.config-wizard-container {
padding: 24px;
max-width: 800px;
h1 {
margin: 0 0 24px;
text-align: center;
font-size: 28px;
font-weight: 500;
}
}
.config-wizard-actions {
padding: 16px 0 0 !important;
margin: 0 !important;
justify-content: center;
border-top: 1px solid #e0e0e0;
button {
min-width: 180px;
height: 40px;
}
}
.config-wizard-content {
padding: 0 !important;
margin-bottom: 24px;
.description {
text-align: center;
font-size: 16px;
margin: 0 0 32px;
color: #555;
}
.buttons-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 32px;
button {
flex: 1 1 calc(33.333% - 11px);
min-width: 180px;
height: 48px;
text-transform: none;
@media (width < 768px) {
flex: 1 1 calc(50% - 8px);
}
@media (width < 480px) {
flex: 1 1 100%;
}
}
}
.progress-section {
margin-top: 32px;
.progress-label {
font-size: 14px;
font-weight: 500;
margin: 0 0 12px;
color: #333;
}
mat-progress-bar {
height: 8px;
border-radius: 4px;
}
}
}