From 06ccc82cb89769ddd64a078a3d46294c3f6b71d5 Mon Sep 17 00:00:00 2001
From: MohanrajRK <159987765+MohanrajRK@users.noreply.github.com>
Date: Thu, 9 Jan 2025 15:26:34 +0530
Subject: [PATCH] 932646: Enhancing the UI for a More Attractive Stock
 Management Application with tailwind3.

---
 .../src/components/MyPortfolio.tsx            |  4 +--
 .../src/components/Overview.tsx               | 16 +++++++--
 .../src/components/SmartStockPicks.tsx        | 18 ++++++++--
 Stock-Market-Application/src/style.css        | 34 ++++++++++++++-----
 4 files changed, 57 insertions(+), 15 deletions(-)

diff --git a/Stock-Market-Application/src/components/MyPortfolio.tsx b/Stock-Market-Application/src/components/MyPortfolio.tsx
index 1c9f712..9713ef2 100644
--- a/Stock-Market-Application/src/components/MyPortfolio.tsx
+++ b/Stock-Market-Application/src/components/MyPortfolio.tsx
@@ -236,14 +236,14 @@ export default function MyPortfolio(props: { changeMarquee: Function, myStockDm:
                       title: 'Remove from Wishlist',
                       buttonOption: {
                         iconCss: 'removemywishlist e-icons',
-                        cssClass: 'e-flat',
+                        cssClass: 'e-warning',
                       },
                     },
                     {
                       title: 'Analysis',
                       buttonOption: {
                         iconCss: 'analysis e-icons',
-                        cssClass: 'e-flat',
+                        cssClass: 'e-primary',
                       },
                     },
                   ]}
diff --git a/Stock-Market-Application/src/components/Overview.tsx b/Stock-Market-Application/src/components/Overview.tsx
index 40d25d9..40aa612 100644
--- a/Stock-Market-Application/src/components/Overview.tsx
+++ b/Stock-Market-Application/src/components/Overview.tsx
@@ -175,6 +175,17 @@ export default function Overview(props: { changeMarquee: Function, myStockDm: Da
       let query: Query = new Query().where(Predicate.or(predicates));
       (props.myStockDm as any).persistQuery = query;
       props.myStockDm.setPersistData({} as any, 'myStocks', query);
+      if (myWishList.length) {
+        const myWishlistIcon = args.target.querySelector('.addmywishlist');
+        if (myWishlistIcon) {
+          myWishlistIcon.classList.remove('addmywishlist');
+          myWishlistIcon.classList.add('addedmywishlist');
+        }
+        if (args.target.classList.contains('e-primary')) {
+          args.target.classList.remove('e-primary');
+          args.target.classList.add('e-success');
+        }
+      }
     }
     if (args.target!.querySelector('.analysis')) {
       navigate('/stock_analysis', {
@@ -233,6 +244,7 @@ export default function Overview(props: { changeMarquee: Function, myStockDm: Da
               enableHover={false}
               commandClick={commandClick}
               destroyed={destroyed}
+              height={341}
             >
               <ColumnsDirective>
                 <ColumnDirective
@@ -308,14 +320,14 @@ export default function Overview(props: { changeMarquee: Function, myStockDm: Da
                       title: 'Add to Wishlist',
                       buttonOption: {
                         iconCss: 'addmywishlist e-icons',
-                        cssClass: 'e-flat',
+                        cssClass: 'e-primary' ,
                       },
                     },
                     {
                       title: 'Analysis',
                       buttonOption: {
                         iconCss: 'analysis e-icons',
-                        cssClass: 'e-flat',
+                        cssClass: 'e-primary',
                       },
                     },
                   ]}
diff --git a/Stock-Market-Application/src/components/SmartStockPicks.tsx b/Stock-Market-Application/src/components/SmartStockPicks.tsx
index 9523989..b5a161c 100644
--- a/Stock-Market-Application/src/components/SmartStockPicks.tsx
+++ b/Stock-Market-Application/src/components/SmartStockPicks.tsx
@@ -159,6 +159,17 @@ export default function SmartStockPicks(props: { myStockDm: DataManager }) {
       let query: Query = new Query().where(Predicate.or(predicates));
       (props.myStockDm as any).persistQuery = query;
       props.myStockDm.setPersistData({} as any, 'myStocks', query);
+      if (myWishList.length) {
+        const myWishlistIcon = args.target.querySelector('.addmywishlist');
+        if (myWishlistIcon) {
+          myWishlistIcon.classList.remove('addmywishlist');
+          myWishlistIcon.classList.add('addedmywishlist');
+        }
+        if (args.target.classList.contains('e-primary')) {
+          args.target.classList.remove('e-primary');
+          args.target.classList.add('e-success');
+        }
+      }
     }
     if (args.target!.querySelector('.analysis')) {
       navigate('/stock_analysis', {
@@ -190,7 +201,8 @@ export default function SmartStockPicks(props: { myStockDm: DataManager }) {
                 created={onGridCreated}
                 queryCellInfo={queryCellInfo}
                 commandClick={commandClick}
-                pageSettings={{pageSize: 10}}
+                pageSettings={{ pageCount: 4, pageSize: 10 }}
+                height={341}
               >
                 <ColumnsDirective>
                   <ColumnDirective
@@ -265,14 +277,14 @@ export default function SmartStockPicks(props: { myStockDm: DataManager }) {
                         title: 'Add to Wishlist',
                         buttonOption: {
                           iconCss: 'addmywishlist e-icons',
-                          cssClass: 'e-flat',
+                          cssClass: 'e-primary',
                         },
                       },
                       {
                         title: 'Analysis',
                         buttonOption: {
                           iconCss: 'analysis e-icons',
-                          cssClass: 'e-flat',
+                          cssClass: 'e-primary',
                         },
                       },
                     ]}
diff --git a/Stock-Market-Application/src/style.css b/Stock-Market-Application/src/style.css
index b2df360..f7ba26a 100644
--- a/Stock-Market-Application/src/style.css
+++ b/Stock-Market-Application/src/style.css
@@ -3,6 +3,10 @@
   content: '\e805';
 }
 
+.addedmywishlist.e-icons::before {
+  content: '\e774';
+}
+
 .removemywishlist.e-icons::before {
   content: '\e87f';
 }
@@ -18,6 +22,7 @@
   background-color: #151e28;
   padding: 10px 20px;
   border-bottom: 1px solid #2C2C2C;
+  height: 65px;
 }
 
 .nav-link {
@@ -27,7 +32,6 @@
   padding: 8px 15px;
   margin: 0 5px;
   border-radius: 4px;
-  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 .nav-link.active {
@@ -196,7 +200,6 @@
 /* main content */
 
 .main-content {
-  min-height: 600px;
   background-color: #FFFFFF;
   color: #000000;
   padding: 20px;
@@ -206,7 +209,7 @@
 
 .stock-content-area {
   padding-left: 20px;
-  min-height: 450px;
+  min-height: 300px;
   background-color: #FFFFFF;
   border-radius: 4px;
 }
@@ -275,6 +278,7 @@
 .section1,
 .section2 {
   display: inline-block;
+  max-height: calc(100% - 30px);
 }
 
 .section1,
@@ -347,6 +351,7 @@ text#stockchartdefault_ChartTitle {
 .e-card .e-card-content {
   color: #333;
   padding: 0 16px 16px 16px;
+  max-height: 60px;
 }
 
 .e-card .e-card-actions {
@@ -390,12 +395,15 @@ text#stockchartdefault_ChartTitle {
 
 /* Know More */
 
+.control-pane .control-section.db-carousel-section {
+  height: 530px;
+  overflow-y: scroll;
+}
+
 .db-carousel-section .carousel-sample {
   border-radius: 0.5em;
   margin: 0 auto 2em;
   max-width: 1000px;
-  height: 550px;
-  padding-top: 10px;
 }
 
 .db-carousel {
@@ -443,19 +451,22 @@ text#stockchartdefault_ChartTitle {
 
 @media screen and (min-width: 700px) {
   .e-card-content {
-    min-height: 200px;
+    min-height: 160px;
+    max-height: 170px;
   }
 }
 
 @media screen and (min-width: 800px) {
   .e-card-content {
-    min-height: 150px;
+    min-height: 130px;
+    max-height: 140px;
   }
 }
 
 @media screen and (min-width: 900px) {
   .e-card-content {
-    min-height: 130px;
+    min-height: 110px;
+    max-height: 120px;
   }
 }
 
@@ -467,6 +478,13 @@ text#stockchartdefault_ChartTitle {
   }
 }
 
+@media screen and (max-width: 850px) {
+  .nav-link.active,
+  .nav-link:hover {
+    background-color: transparent;
+  }
+}
+
 @media only screen and (max-width: 700px) {
 
   /* Overview */