From 693ffed397cbd8f7dc2b88a1897cfadfa16a218f Mon Sep 17 00:00:00 2001
From: Aditya <dev.work@lincpay.co.in>
Date: Sat, 21 Mar 2026 00:30:08 +0530
Subject: [PATCH] =?UTF-8?q?feat:=20redesign=20warning=20dialog=20=E2=80=94?=
 =?UTF-8?q?=20lock=20icon=20+=20title=20on=20same=20row?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../warning-dialog.component.html             |  43 +++++--
 .../warning-dialog.component.scss             | 113 ++++++++++++++++++
 2 files changed, 149 insertions(+), 7 deletions(-)

diff --git a/src/app/home/warning-dialog/warning-dialog.component.html b/src/app/home/warning-dialog/warning-dialog.component.html
index 3ed08cb05..aa180feea 100644
--- a/src/app/home/warning-dialog/warning-dialog.component.html
+++ b/src/app/home/warning-dialog/warning-dialog.component.html
@@ -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>
diff --git a/src/app/home/warning-dialog/warning-dialog.component.scss b/src/app/home/warning-dialog/warning-dialog.component.scss
index af9f4c075..b65a7366b 100644
--- a/src/app/home/warning-dialog/warning-dialog.component.scss
+++ b/src/app/home/warning-dialog/warning-dialog.component.scss
@@ -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;
+  }
+}