From f55883b4f867dbdb8dac8df01cc635a4cc3de10d Mon Sep 17 00:00:00 2001
From: Shubham Kumar <shubham.24bcs10320@sst.scaler.com>
Date: Wed, 17 Sep 2025 13:35:26 +0530
Subject: [PATCH] Fix: Align 'Transfer Funds' text properly (#2661)

---
 .../general-tab/general-tab.component.scss    | 162 ++++++++++++++++++
 1 file changed, 162 insertions(+)

diff --git a/src/app/savings/savings-account-view/general-tab/general-tab.component.scss b/src/app/savings/savings-account-view/general-tab/general-tab.component.scss
index 9133cc4bc..b695cfc76 100644
--- a/src/app/savings/savings-account-view/general-tab/general-tab.component.scss
+++ b/src/app/savings/savings-account-view/general-tab/general-tab.component.scss
@@ -70,3 +70,165 @@ $color: #e2e4ec;
     width: $bar;
   }
 }
+
+.general-tab-container {
+  padding: 16px 20px;
+  width: 100%;
+  box-sizing: border-box;
+  position: relative;
+  background-color: var(--background-color, #f8f9fa);
+  color: var(--text-color, #333);
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
+
+  .page-header {
+    margin-bottom: 24px;
+    padding: 16px 0;
+    position: relative;
+    border-bottom: 1px solid var(--border-color, #e9ecef);
+
+    .header-title {
+      font-size: 1.75rem;
+      font-weight: 600;
+      margin: 0 0 8px;
+      line-height: 1.2;
+      color: var(--primary-color, #007bff);
+      position: relative;
+    }
+
+    .header-subtitle {
+      font-size: 0.95rem;
+      margin: 0;
+      line-height: 1.4;
+      color: var(--text-secondary, #6c757d);
+      position: relative;
+    }
+  }
+
+  .content-wrapper {
+    position: relative;
+    width: 100%;
+  }
+
+  .account-info-card {
+    background: var(--card-background, #fff);
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    max-width: 600px;
+    transition:
+      box-shadow 0.3s ease,
+      background-color 0.3s ease;
+
+    .card-header {
+      padding: 16px 20px;
+      background: var(--card-header-bg, #f8f9fa);
+      border-bottom: 1px solid var(--border-color, #e9ecef);
+      position: relative;
+
+      h3 {
+        margin: 0;
+        font-size: 1.1rem;
+        font-weight: 600;
+        line-height: 1.3;
+        color: var(--text-color, #333);
+      }
+    }
+
+    .card-content {
+      padding: 20px;
+      position: relative;
+
+      .info-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        padding: 10px 0;
+        border-bottom: 1px solid var(--border-light, #f1f3f4);
+        position: relative;
+        min-height: 24px;
+
+        &:last-child {
+          border-bottom: none;
+        }
+
+        .label {
+          font-weight: 500;
+          color: var(--text-secondary, #6c757d);
+          flex: 0 0 auto;
+          margin-right: 16px;
+          white-space: nowrap;
+          line-height: 1.4;
+        }
+
+        .value {
+          font-weight: 600;
+          color: var(--text-color, #333);
+          text-align: right;
+          flex: 1 1 auto;
+          line-height: 1.4;
+
+          &.currency {
+            color: var(--success-color, #28a745);
+            font-size: 1.05rem;
+          }
+        }
+      }
+    }
+  }
+}
+
+// Dark mode styles
+[data-theme='dark'] .general-tab-container,
+.dark-theme .general-tab-container {
+  --background-color: #1a1a1a;
+  --text-color: #e9ecef;
+  --text-secondary: #adb5bd;
+  --primary-color: #4dabf7;
+  --card-background: #2d3748;
+  --card-header-bg: #374151;
+  --border-color: #4a5568;
+  --border-light: #2d3748;
+  --success-color: #68d391;
+}
+
+// Responsive adjustments for mobile
+@media (width <= 768px) {
+  .general-tab-container {
+    padding: 12px 16px;
+
+    .page-header {
+      margin-bottom: 20px;
+      padding: 12px 0;
+
+      .header-title {
+        font-size: 1.5rem;
+      }
+
+      .header-subtitle {
+        font-size: 0.9rem;
+      }
+    }
+
+    .account-info-card {
+      .card-header {
+        padding: 14px 16px;
+      }
+
+      .card-content {
+        padding: 16px;
+
+        .info-row {
+          padding: 8px 0;
+
+          .label {
+            margin-right: 12px;
+          }
+        }
+      }
+    }
+  }
+}