CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

WEB-408: Improve Configuration Wizard UI

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files
src/app/configuration-wizard/configuration-wizard.component.html
+17 -26
View File
@@ -1,48 +1,39 @@
<h1 mat-dialog-title>{{ 'labels.heading.Welcome to Mifos' | translate }}</h1>
<div class="config-wizard-container">
<h1 mat-dialog-title>{{ 'labels.heading.Welcome to Mifos' | translate }}</h1>
<mat-dialog-content>
<h3 class="mw600">{{ 'labels.heading.Configure Mifos Organization Needs' | translate }}</h3>
<mat-dialog-content class="config-wizard-content">
<p class="description">{{ 'labels.heading.Configure Mifos Organization Needs' | translate }}</p>
<mat-grid-list cols="3" rowHeight="50px">
<mat-grid-tile>
<div class="buttons-grid">
<button mat-raised-button color="primary" [mat-dialog-close]="{ show: 1 }">
{{ 'labels.buttons.Home Screen Tour' | translate }}
</button>
</mat-grid-tile>
<mat-grid-tile>
<button mat-raised-button color="primary" [mat-dialog-close]="{ show: 2 }">
{{ 'labels.buttons.Setup Organization' | translate }}
</button>
</mat-grid-tile>
<mat-grid-tile>
<button mat-raised-button color="primary" [mat-dialog-close]="{ show: 3 }">
{{ 'labels.buttons.Setup System' | translate }}
</button>
</mat-grid-tile>
<mat-grid-tile>
<button mat-raised-button color="primary" [mat-dialog-close]="{ show: 4 }">
{{ 'labels.buttons.Setup Accounting' | translate }}
</button>
</mat-grid-tile>
<mat-grid-tile>
<button mat-raised-button color="primary" [mat-dialog-close]="{ show: 5 }">
{{ 'labels.buttons.Setup Products' | translate }}
</button>
</mat-grid-tile>
<mat-grid-tile>
<button mat-raised-button color="primary" [mat-dialog-close]="{ show: 6 }">
{{ 'labels.buttons.Setup Funds and Reports' | translate }}
</button>
</mat-grid-tile>
</mat-grid-list>
</div>
<h3>{{ 'labels.heading.Progress Bar' | translate }} : 0%</h3>
<div class="progress-section">
<h3 class="progress-label">{{ 'labels.heading.Progress Bar' | translate }}: 0%</h3>
<mat-progress-bar mode="determinate" value="0"></mat-progress-bar>
</div>
</mat-dialog-content>
<mat-progress-bar mode="determinate" value="0"></mat-progress-bar>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-raised-button color="warn" [mat-dialog-close]="{ show: 0 }">
{{ 'labels.buttons.Close Config. Wizard' | translate }}
</button>
</mat-dialog-actions>
<mat-dialog-actions class="config-wizard-actions">
<button mat-raised-button color="warn" [mat-dialog-close]="{ show: 0 }">
{{ 'labels.buttons.Close Config. Wizard' | translate }}
</button>
</mat-dialog-actions>
</div>
src/app/configuration-wizard/configuration-wizard.component.scss
+73
View File
@@ -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;
}
}
}