From b4a7ff62ccba8a6c7964eacb098dd36590bac565 Mon Sep 17 00:00:00 2001
From: meta-d <meta.digital.cloud@gmail.com>
Date: Sun, 18 Feb 2024 20:52:39 +0800
Subject: [PATCH] feat: indicator market page dark theme

---
 .../features/indicator/_indicator-theme.scss  |  2 +-
 .../indicator/market/market.component.html    |  2 +-
 .../indicator/market/market.component.scss    | 43 ++++++++++++++++---
 .../indicator/viewer/viewer.component.html    |  2 +-
 4 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/apps/cloud/src/app/features/indicator/_indicator-theme.scss b/apps/cloud/src/app/features/indicator/_indicator-theme.scss
index 78c495cf6..f3f84a001 100644
--- a/apps/cloud/src/app/features/indicator/_indicator-theme.scss
+++ b/apps/cloud/src/app/features/indicator/_indicator-theme.scss
@@ -11,7 +11,7 @@
 
   .pac-indicator-market {
     .ngm-tree-select {
-      background-color: mat.get-color-from-palette($background, card);
+      // background-color: mat.get-color-from-palette($background, card);
 
       .mat-tree.ngm-tree-select__panel {
         overflow-y: auto;
diff --git a/apps/cloud/src/app/features/indicator/market/market.component.html b/apps/cloud/src/app/features/indicator/market/market.component.html
index eed3d4d3e..767bc518d 100644
--- a/apps/cloud/src/app/features/indicator/market/market.component.html
+++ b/apps/cloud/src/app/features/indicator/market/market.component.html
@@ -24,7 +24,7 @@
 </div>
 
 <mat-drawer-container autosize class="flex-1 m-2 mt-0">
-  <mat-drawer #drawer class="border rounded-xl" mode="side" [(opened)]="sideMenuOpened" ngmResizer [resizerWidth]="272">
+  <mat-drawer #drawer mode="side" [(opened)]="sideMenuOpened" ngmResizer [resizerWidth]="272">
     <div class="flex justify-start items-start gap-2 p-4">
       <label class="w-10 shrink-0">{{ 'PAC.INDICATOR.Types' | translate: {Default: 'Types'} }}</label>
       <ngm-tags class="flex-1" selectable [tags]="[
diff --git a/apps/cloud/src/app/features/indicator/market/market.component.scss b/apps/cloud/src/app/features/indicator/market/market.component.scss
index 1715b6dee..f9e70f13f 100644
--- a/apps/cloud/src/app/features/indicator/market/market.component.scss
+++ b/apps/cloud/src/app/features/indicator/market/market.component.scss
@@ -1,13 +1,44 @@
+@use '@angular/material/core/tokens/token-utils';
+@use '@angular/material/core/style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$global-prefix: ngm;
+$prefix: (ngm, indicator-market);
+$prefix-color: (#{$prefix}, color);
+
+@function get-unthemable-tokens() {
+  @return (
+    primary-container-rounded: var(--#{$global-prefix}-primary-container-rounded)
+  );
+}
+
+@function get-color-tokens() {
+  @return (
+    color-surface: var(--#{$global-prefix}-color-surface),
+  );
+}
+
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+    get-unthemable-tokens(),
+    get-color-tokens(),
+  );
+}
+
+@include token-utils.use-tokens($prefix, get-token-slots()) {
+  .mat-drawer-content {
+    background-color: var(#{token-utils.get-token-variable(color-surface)});
+    border-top-left-radius: var(#{token-utils.get-token-variable(primary-container-rounded)});
+    border-top-right-radius: var(#{token-utils.get-token-variable(primary-container-rounded)});
+    @apply flex overflow-hidden; // for rounded corner overflow-visible;
+  }
+}
+
 :host {
   flex: 1;
   max-width: 100%;
   display: flex;
   flex-direction: column;
-}
 
-.mat-drawer.mat-drawer-side {
-  border-color: var(--mat-divider-color);
+  @include token-utils.create-token-values($prefix, get-token-slots());
 }
-.mat-drawer-content {
-  @apply overflow-hidden;
-}
\ No newline at end of file
diff --git a/apps/cloud/src/app/features/indicator/viewer/viewer.component.html b/apps/cloud/src/app/features/indicator/viewer/viewer.component.html
index f01d8761a..2d8a54ee1 100644
--- a/apps/cloud/src/app/features/indicator/viewer/viewer.component.html
+++ b/apps/cloud/src/app/features/indicator/viewer/viewer.component.html
@@ -21,7 +21,7 @@
     </ol>
 </nav>
 
-<div *ngIf="indicator() as indicator" class="flex-1 px-8 py-4 flex flex-col gap-4 overflow-auto bg-slate-50 dark:bg-slate-50/10">
+<div *ngIf="indicator() as indicator" class="flex-1 px-8 py-4 flex flex-col gap-4 overflow-auto">
     <mat-card class="p-4 flex gap-4 text-lg">
         <div class="flex gap-4 text-lg">
             <div class="text-right">