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

feat: redesign warning dialog — lock icon + title on same row

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Aditya
2026-03-21 00:30:08 +05:30
co-authored by Claude Opus 4.6
parent 0d1429515a
commit 693ffed397
2 changed files with 149 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/home/warning-dialog/warning-dialog.component.html
+36 -7
View File
@@ -6,10 +6,39 @@
file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->
<h1 mat-dialog-title>{{ 'labels.text.' + title | translate }}</h1>
<mat-dialog-content>{{ 'labels.text.Warning message' | translate }}</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-raised-button color="primary" mat-dialog-close (click)="dialogRef.close()">
{{ 'labels.buttons.' + buttonText | translate }}
</button>
</mat-dialog-actions>
<div class="warn-dialog">
<!-- Icon + Header -->
<div class="warn-header">
<div class="warn-header__icon-wrap">
<i class="fa fa-lock"></i>
</div>
<span class="warn-header__title">Security Information</span>
</div>
<!-- Content -->
<mat-dialog-content class="warn-body">
<p class="warn-body__text">{{ 'labels.text.Warning message' | translate }}</p>
<div class="warn-body__meta">
<div class="warn-body__meta-item">
<i class="fa fa-lock"></i>
<span>SSL/TLS 256-bit Encrypted</span>
</div>
<div class="warn-body__meta-item">
<i class="fa fa-check-circle"></i>
<span>ISO 27001 Certified</span>
</div>
<div class="warn-body__meta-item">
<i class="fa fa-university"></i>
<span>RBI Regulated Entity</span>
</div>
</div>
</mat-dialog-content>
<!-- Actions -->
<mat-dialog-actions class="warn-actions" align="end">
<button mat-flat-button color="primary" class="warn-actions__btn" mat-dialog-close (click)="dialogRef.close()">
<i class="fa fa-check warn-actions__btn-icon"></i>
{{ 'labels.buttons.' + buttonText | translate }}
</button>
</mat-dialog-actions>
</div>
src/app/home/warning-dialog/warning-dialog.component.scss
+113
View File
@@ -5,3 +5,116 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
$primary: #1a73e8;
$primary-light: #e8f0fe;
$amber: #f9ab00;
$amber-light: #fef7e0;
$gray-50: #f8f9fa;
$gray-100: #f1f3f4;
$gray-200: #e8eaed;
$gray-500: #9aa0a6;
$gray-700: #5f6368;
$gray-900: #202124;
$white: #fff;
.warn-dialog {
display: flex;
flex-direction: column;
max-width: 480px;
}
// Header
.warn-header {
display: flex;
align-items: center;
gap: 14px;
padding: 20px 24px 14px;
border-bottom: 1px solid $gray-200;
&__icon-wrap {
width: 42px;
height: 42px;
border-radius: 10px;
background: $amber-light;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
i {
font-size: 20px;
color: $amber;
}
}
&__title {
margin: 0 !important;
padding: 0 !important;
font-size: 17px !important;
font-weight: 700 !important;
color: $gray-900;
letter-spacing: -0.2px;
line-height: 1.2;
}
}
// Body
.warn-body {
padding: 18px 24px !important;
overflow: visible !important;
max-height: none !important;
&__text {
font-size: 13.5px;
line-height: 1.65;
color: $gray-700;
margin: 0 0 16px;
}
&__meta {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
&__meta-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
color: $gray-500;
background: $gray-50;
padding: 5px 10px;
border-radius: 6px;
border: 1px solid $gray-100;
i {
font-size: 12px;
color: #34a853;
}
}
}
// Actions
.warn-actions {
padding: 12px 24px 18px !important;
border-top: 1px solid $gray-200;
margin: 0 !important;
&__btn {
border-radius: 8px !important;
font-size: 13px !important;
font-weight: 600 !important;
padding: 0 24px !important;
height: 38px !important;
letter-spacing: 0.2px;
box-shadow: 0 1px 3px rgba($primary, 0.3) !important;
}
&__btn-icon {
margin-right: 6px;
font-size: 12px;
}
}