From fefd8b4600b33b8324c707bac946cfe728819fd0 Mon Sep 17 00:00:00 2001
From: KenTandrian <kenricktan11@gmail.com>
Date: Sun, 11 Oct 2026 20:09:50 +0700
Subject: [PATCH] feat(client): update variables and configs

---
 apps/client/src/app/app.component.ts          |   2 +
 .../portfolio-summary.component.html          |  50 +++---
 .../app/components/rule/rule.component.html   |   2 +-
 .../app/components/rule/rule.component.scss   |   4 +-
 .../portfolio/x-ray/x-ray-page.component.scss |   4 +-
 apps/client/src/styles/bootstrap.scss         | 146 ++++++++++++++++--
 6 files changed, 168 insertions(+), 40 deletions(-)

diff --git a/apps/client/src/app/app.component.ts b/apps/client/src/app/app.component.ts
index fba00e1c47..c9e124723d 100644
--- a/apps/client/src/app/app.component.ts
+++ b/apps/client/src/app/app.component.ts
@@ -350,9 +350,11 @@ export class GfAppComponent implements OnInit {
     if (isDarkColorScheme(userPreferredColorScheme)) {
       this.document.body.classList.add('theme-dark');
       this.document.body.classList.remove('theme-light');
+      this.document.documentElement.setAttribute('data-bs-theme', 'dark');
     } else {
       this.document.body.classList.add('theme-light');
       this.document.body.classList.remove('theme-dark');
+      this.document.documentElement.setAttribute('data-bs-theme', 'light');
     }
 
     this.document
diff --git a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html
index 3f84d81bf6..94dfda7f1b 100644
--- a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html
+++ b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html
@@ -1,5 +1,5 @@
 <div class="container p-0">
-  <div class="flex-nowrap px-3 py-1 row">
+  <div class="d-flex px-3 py-1">
     <div class="flex-grow-1 text-truncate" i18n>Time in Market</div>
     <div class="justify-content-end">
       <gf-value
@@ -10,7 +10,7 @@
     </div>
   </div>
   @if (isLoading) {
-    <div class="flex-nowrap px-3 py-1 row">
+    <div class="d-flex px-3 py-1">
       <div class="d-flex flex-grow-1 indent-1 text-truncate">
         <ngx-skeleton-loader
           animation="pulse"
@@ -19,7 +19,7 @@
       </div>
     </div>
   } @else {
-    <div class="flex-nowrap px-3 py-1 row">
+    <div class="d-flex px-3 py-1">
       <div class="d-flex flex-grow-1 indent-1 text-truncate">
         {{ summary?.activityCount }}
         <ng-container i18n>{summary?.activityCount, plural,
@@ -39,7 +39,7 @@
   <div class="row">
     <div class="col"><hr /></div>
   </div>
-  <div class="flex-nowrap px-3 py-1 row">
+  <div class="d-flex px-3 py-1">
     <div class="flex-grow-1 text-truncate" i18n>Buy</div>
     <div class="justify-content-end">
       <gf-value
@@ -53,7 +53,7 @@
       />
     </div>
   </div>
-  <div class="flex-nowrap px-3 py-1 row">
+  <div class="d-flex px-3 py-1">
     <div class="flex-grow-1 text-truncate" i18n>Sell</div>
     <div class="justify-content-end">
       <gf-value
@@ -70,7 +70,7 @@
   <div class="row">
     <div class="col"><hr /></div>
   </div>
-  <div class="flex-nowrap px-3 py-1 row">
+  <div class="d-flex px-3 py-1">
     <div class="flex-grow-1 text-truncate" i18n>Invested Capital</div>
     <div class="justify-content-end">
       <gf-value
@@ -84,7 +84,7 @@
       />
     </div>
   </div>
-  <div class="flex-nowrap px-3 py-1 row">
+  <div class="d-flex px-3 py-1">
     <div class="flex-grow-1 text-truncate" i18n>Absolute Gross Performance</div>
     <div class="justify-content-end">
       <gf-value
@@ -98,7 +98,7 @@
       />
     </div>
   </div>
-  <div class="flex-nowrap px-3 py-1 row text-muted">
+  <div class="d-flex px-3 py-1 text-muted">
     <div class="flex-grow-1 indent-1 text-truncate" i18n>thereof Dividend</div>
     <div class="justify-content-end">
       <gf-value
@@ -112,7 +112,7 @@
       />
     </div>
   </div>
-  <div class="flex-nowrap px-3 py-1 row">
+  <div class="d-flex px-3 py-1">
     <div class="flex-grow-1 text-truncate" i18n>Fees</div>
     <div class="d-flex justify-content-end">
       @if (isNumber(summary?.fees)) {
@@ -132,7 +132,7 @@
   <div class="row">
     <div class="col"><hr /></div>
   </div>
-  <div class="flex-nowrap px-3 py-1 row">
+  <div class="d-flex px-3 py-1">
     <div class="flex-grow-1 text-truncate" i18n>Absolute Net Performance</div>
     <div class="justify-content-end">
       <gf-value
@@ -146,7 +146,7 @@
       />
     </div>
   </div>
-  <div class="flex-nowrap px-3 py-1 row">
+  <div class="d-flex px-3 py-1">
     <div class="flex-grow-1 indent-1 text-truncate">
       <ng-container i18n>Net Performance</ng-container>
       @if (
@@ -173,7 +173,7 @@
       />
     </div>
   </div>
-  <div class="flex-nowrap px-3 py-1 row text-muted">
+  <div class="d-flex px-3 py-1 text-muted">
     <div class="flex-grow-1 indent-2 text-truncate">
       <ng-container i18n>thereof Dividend Performance</ng-container>
     </div>
@@ -191,7 +191,7 @@
   <div class="row">
     <div class="col"><hr /></div>
   </div>
-  <div class="flex-nowrap px-3 py-1 row">
+  <div class="d-flex px-3 py-1">
     <div class="flex-grow-1 text-truncate" i18n>Total Assets</div>
     <div class="flex-column flex-wrap justify-content-end">
       <gf-value
@@ -206,7 +206,7 @@
       />
     </div>
   </div>
-  <div class="flex-nowrap px-3 py-1 row">
+  <div class="d-flex px-3 py-1">
     <div
       class="align-items-center d-flex flex-grow-1 indent-1"
       [class.cursor-pointer]="hasHoldingsBreakdown"
@@ -253,7 +253,7 @@
     </div>
   </div>
   @if (hasHoldingsBreakdown && isHoldingsExpanded) {
-    <div class="flex-nowrap px-3 py-1 row">
+    <div class="d-flex px-3 py-1">
       <div class="flex-grow-1 indent-2 text-truncate" i18n>Investments</div>
       <div class="flex-column flex-wrap justify-content-end">
         <gf-value
@@ -268,7 +268,7 @@
         />
       </div>
     </div>
-    <div class="flex-nowrap px-3 py-1 row">
+    <div class="d-flex px-3 py-1">
       <div class="flex-grow-1 indent-2 text-truncate" i18n>Emergency Fund</div>
       <div class="flex-column flex-wrap justify-content-end">
         <gf-value
@@ -284,7 +284,7 @@
       </div>
     </div>
   }
-  <div class="flex-nowrap px-3 py-1 row">
+  <div class="d-flex px-3 py-1">
     <div
       class="align-items-center d-flex flex-grow-1 indent-1"
       [class.cursor-pointer]="hasCashBreakdown"
@@ -331,7 +331,7 @@
     </div>
   </div>
   @if (hasCashBreakdown && isCashExpanded) {
-    <div class="flex-nowrap px-3 py-1 row">
+    <div class="d-flex px-3 py-1">
       <div class="flex-grow-1 indent-2 text-truncate" i18n>Buying Power</div>
       <div class="flex-column flex-wrap justify-content-end">
         <gf-value
@@ -346,7 +346,7 @@
         />
       </div>
     </div>
-    <div class="flex-nowrap px-3 py-1 row">
+    <div class="d-flex px-3 py-1">
       <div class="flex-grow-1 indent-2 text-truncate" i18n>Emergency Fund</div>
       <div class="flex-column flex-wrap justify-content-end">
         <gf-value
@@ -362,7 +362,7 @@
       </div>
     </div>
   }
-  <div class="flex-nowrap px-3 py-1 row">
+  <div class="d-flex px-3 py-1">
     <div class="align-items-center d-flex flex-grow-1">
       <ng-container i18n>Excluded from Analysis</ng-container>
       @if (
@@ -394,7 +394,7 @@
   <div class="row">
     <div class="col"><hr /></div>
   </div>
-  <div class="flex-nowrap px-3 py-1 row">
+  <div class="d-flex px-3 py-1">
     <div class="flex-grow-1 text-truncate" i18n>Liabilities</div>
     <div class="d-flex justify-content-end">
       @if (isNumber(summary?.liabilitiesInBaseCurrency)) {
@@ -414,7 +414,7 @@
   <div class="row">
     <div class="col"><hr /></div>
   </div>
-  <div class="flex-nowrap px-3 py-1 row">
+  <div class="d-flex px-3 py-1">
     <div class="flex-grow-1 font-weight-bold text-truncate" i18n>Net Worth</div>
     <div class="justify-content-end">
       <gf-value
@@ -428,7 +428,7 @@
       />
     </div>
   </div>
-  <div class="flex-nowrap px-3 py-1 row">
+  <div class="d-flex px-3 py-1">
     <div class="flex-grow-1 indent-1 text-truncate">
       <ng-container i18n>Annualized Performance</ng-container>
     </div>
@@ -447,7 +447,7 @@
   <div class="row">
     <div class="col"><hr /></div>
   </div>
-  <div class="flex-nowrap px-3 py-1 row">
+  <div class="d-flex px-3 py-1">
     <div class="align-items-center d-flex flex-grow-1">
       <ng-container i18n>Emergency Fund</ng-container>
       @if (
@@ -503,7 +503,7 @@
       />
     </div>
   </div>
-  <div class="flex-nowrap px-3 py-1 row">
+  <div class="d-flex px-3 py-1">
     <div class="flex-grow-1 text-truncate" i18n>Interest</div>
     <div class="justify-content-end">
       <gf-value
diff --git a/apps/client/src/app/components/rule/rule.component.html b/apps/client/src/app/components/rule/rule.component.html
index 9f256d5ae2..324bf03cff 100644
--- a/apps/client/src/app/components/rule/rule.component.html
+++ b/apps/client/src/app/components/rule/rule.component.html
@@ -1,5 +1,5 @@
 <div class="py-3">
-  <div class="align-items-center flex-nowrap no-gutters row">
+  <div class="align-items-center d-flex">
     @if (isLoading) {
       <div>
         <ngx-skeleton-loader
diff --git a/apps/client/src/app/components/rule/rule.component.scss b/apps/client/src/app/components/rule/rule.component.scss
index adb081abc4..c22b9fedba 100644
--- a/apps/client/src/app/components/rule/rule.component.scss
+++ b/apps/client/src/app/components/rule/rule.component.scss
@@ -7,11 +7,11 @@
     height: 2rem;
 
     &.okay {
-      color: var(--success);
+      color: var(--bs-success);
     }
 
     &.warn {
-      color: var(--danger);
+      color: var(--bs-danger);
     }
   }
 
diff --git a/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.scss b/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.scss
index 6b5f949b05..6d428e818d 100644
--- a/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.scss
+++ b/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.scss
@@ -7,11 +7,11 @@
     height: 2rem;
 
     &.okay {
-      color: var(--success);
+      color: var(--bs-success);
     }
 
     &.warn {
-      color: var(--danger);
+      color: var(--bs-danger);
     }
   }
 }
diff --git a/apps/client/src/styles/bootstrap.scss b/apps/client/src/styles/bootstrap.scss
index cf9d4d2e31..3fffc10382 100644
--- a/apps/client/src/styles/bootstrap.scss
+++ b/apps/client/src/styles/bootstrap.scss
@@ -1,18 +1,98 @@
 /*!
- * Bootstrap v4.6.2 (https://getbootstrap.com/)
- * Copyright 2011-2022 The Bootstrap Authors
- * Copyright 2011-2022 Twitter, Inc.
+ * Bootstrap v5.3.8 (https://getbootstrap.com/)
+ * Copyright 2011-2025 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 
+@use 'sass:map';
+
+// Configuration
 @import 'bootstrap/scss/functions';
+
+// Restore Bootstrap 4 link defaults (no underline by default)
+$link-decoration: none;
+$link-hover-decoration: underline;
+
 @import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/variables-dark';
+@import 'bootstrap/scss/maps';
 @import 'bootstrap/scss/mixins';
+@import 'bootstrap/scss/utilities';
+
+// Compatibility mappings for legacy Bootstrap 4 utility classes
+$utilities: map.merge(
+  $utilities,
+  (
+    'margin-right-compat': (
+      responsive: true,
+      property: margin-right,
+      class: mr,
+      values: map.merge(
+          $spacers,
+          (
+            auto: auto
+          )
+        )
+    ),
+    'margin-left-compat': (
+      responsive: true,
+      property: margin-left,
+      class: ml,
+      values: map.merge(
+          $spacers,
+          (
+            auto: auto
+          )
+        )
+    ),
+    'padding-right-compat': (
+      responsive: true,
+      property: padding-right,
+      class: pr,
+      values: $spacers
+    ),
+    'padding-left-compat': (
+      responsive: true,
+      property: padding-left,
+      class: pl,
+      values: $spacers
+    ),
+    'text-align-compat': (
+      responsive: true,
+      property: text-align,
+      class: text,
+      values: (
+        left: left,
+        right: right
+      )
+    ),
+    'font-weight-compat': (
+      property: font-weight,
+      class: font-weight,
+      values: (
+        bold: $font-weight-bold,
+        normal: $font-weight-normal,
+        light: $font-weight-light,
+        bolder: $font-weight-bolder,
+        lighter: $font-weight-lighter
+      )
+    ),
+    'font-style-compat': (
+      property: font-style,
+      class: font,
+      values: (
+        italic: italic
+      )
+    )
+  )
+);
+
+// Layout & components
 @import 'bootstrap/scss/root';
 @import 'bootstrap/scss/reboot';
 @import 'bootstrap/scss/type';
 @import 'bootstrap/scss/images';
-// @import 'bootstrap/scss/code';
+@import 'bootstrap/scss/containers';
 @import 'bootstrap/scss/grid';
 // @import 'bootstrap/scss/tables';
 // @import 'bootstrap/scss/forms';
@@ -20,18 +100,15 @@
 // @import 'bootstrap/scss/transitions';
 // @import 'bootstrap/scss/dropdown';
 // @import 'bootstrap/scss/button-group';
-// @import 'bootstrap/scss/input-group';
-// @import 'bootstrap/scss/custom-forms';
 // @import 'bootstrap/scss/nav';
 // @import 'bootstrap/scss/navbar';
 // @import 'bootstrap/scss/card';
+// @import 'bootstrap/scss/accordion';
 @import 'bootstrap/scss/breadcrumb';
 // @import 'bootstrap/scss/pagination';
 @import 'bootstrap/scss/badge';
-// @import 'bootstrap/scss/jumbotron';
 // @import 'bootstrap/scss/alert';
 // @import 'bootstrap/scss/progress';
-// @import 'bootstrap/scss/media';
 // @import 'bootstrap/scss/list-group';
 // @import 'bootstrap/scss/close';
 // @import 'bootstrap/scss/toasts';
@@ -40,5 +117,54 @@
 // @import 'bootstrap/scss/popover';
 // @import 'bootstrap/scss/carousel';
 // @import 'bootstrap/scss/spinners';
-@import 'bootstrap/scss/utilities';
-// @import 'bootstrap/scss/print';
+// @import 'bootstrap/scss/offcanvas';
+// @import 'bootstrap/scss/placeholders';
+
+// Helpers
+@import 'bootstrap/scss/helpers';
+
+// Utilities
+@import 'bootstrap/scss/utilities/api';
+
+// Grid & layout compatibility
+.no-gutters {
+  --bs-gutter-x: 0;
+  --bs-gutter-y: 0;
+}
+
+// Preserve BS4 flex behavior for non-col direct children of rows
+.row.flex-nowrap > :not([class*='col']) {
+  flex-shrink: 1;
+  width: auto;
+}
+
+// Maintain 1140px container max-width at >=1400px (avoiding BS5 1320px stretch)
+@media (min-width: 1400px) {
+  .container-xxl,
+  .container-xl,
+  .container-lg,
+  .container-md,
+  .container-sm,
+  .container {
+    max-width: 1140px;
+  }
+}
+
+// Badge compatibility
+.badge-pill {
+  border-radius: var(--bs-border-radius-pill, 50rem);
+}
+
+.badge-secondary {
+  background-color: var(--bs-secondary);
+}
+
+.badge-light {
+  background-color: var(--bs-light);
+  color: var(--bs-dark);
+}
+
+.badge-warning {
+  background-color: var(--bs-warning);
+  color: var(--bs-dark);
+}