From a6c75b97fa4959c3e42e9b793706684ea33e96dc Mon Sep 17 00:00:00 2001
From: MohanrajRK <159987765+MohanrajRK@users.noreply.github.com>
Date: Fri, 17 Jan 2025 11:27:23 +0530
Subject: [PATCH 1/2] 932646: Enhancing the UI for a More Attractive Stock
 Management Application with tailwind3.

---
 Stock-Market-Application/src/components/SmartStockPicks.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Stock-Market-Application/src/components/SmartStockPicks.tsx b/Stock-Market-Application/src/components/SmartStockPicks.tsx
index b5a161c..8b5b0c0 100644
--- a/Stock-Market-Application/src/components/SmartStockPicks.tsx
+++ b/Stock-Market-Application/src/components/SmartStockPicks.tsx
@@ -202,7 +202,7 @@ export default function SmartStockPicks(props: { myStockDm: DataManager }) {
                 queryCellInfo={queryCellInfo}
                 commandClick={commandClick}
                 pageSettings={{ pageCount: 4, pageSize: 10 }}
-                height={341}
+                height={330}
               >
                 <ColumnsDirective>
                   <ColumnDirective

From e9e20dff48695aba657395482ffdfcbfc4019854 Mon Sep 17 00:00:00 2001
From: MohanrajRK <159987765+MohanrajRK@users.noreply.github.com>
Date: Fri, 17 Jan 2025 16:49:43 +0530
Subject: [PATCH 2/2] 932646: Enhancing the UI for a More Attractive Stock
 Management Application with tailwind3.

---
 .../src/components/ClimbersFallers.tsx        |  2 +
 .../src/components/News.tsx                   | 61 +++++++++++++++++++
 .../src/components/Overview.tsx               |  2 +-
 .../src/components/SmartStockPicks.tsx        |  2 +-
 .../src/components/StockAnalysis.tsx          |  2 +-
 Stock-Market-Application/src/style.css        | 27 +++++---
 6 files changed, 83 insertions(+), 13 deletions(-)

diff --git a/Stock-Market-Application/src/components/ClimbersFallers.tsx b/Stock-Market-Application/src/components/ClimbersFallers.tsx
index e2bba07..e683b57 100644
--- a/Stock-Market-Application/src/components/ClimbersFallers.tsx
+++ b/Stock-Market-Application/src/components/ClimbersFallers.tsx
@@ -55,6 +55,7 @@ export default function ClimbersFallers() {
             allowPaging={true}
             pageSettings={{ pageCount: 4, pageSize: 7 }}
             enableHover={false}
+            height={270}
           >
             <ColumnsDirective>
               <ColumnDirective
@@ -134,6 +135,7 @@ export default function ClimbersFallers() {
             allowPaging={true}
             pageSettings={{ pageCount: 4, pageSize: 7 }}
             enableHover={false}
+            height={270}
           >
             <ColumnsDirective>
               <ColumnDirective
diff --git a/Stock-Market-Application/src/components/News.tsx b/Stock-Market-Application/src/components/News.tsx
index 55c575b..67b379b 100644
--- a/Stock-Market-Application/src/components/News.tsx
+++ b/Stock-Market-Application/src/components/News.tsx
@@ -128,6 +128,67 @@ const News = () => {
                 </div>
               </div>
             </div>
+            <div className="row">
+              <div className="row card-layout">
+                <div className="col-xs-4 col-sm-4 col-lg-4 col-md-4">
+                  <div className="e-card card7" id="basic_card">
+                    <div className="e-card-header">
+                      <div className="e-card-header-caption">
+                        <div className="e-card-header-title">
+                          Healthcare Innovation Surge
+                        </div>
+                      </div>
+                    </div>
+                    <div className="e-card-content">
+                      Healthcare companies are driving breakthroughs in biotechnology and medical devices, improving patient outcomes. This wave of innovation has translated into strong financial performance and heightened investor interest.
+                    </div>
+                    <div className="e-card-actions">
+                      <a href="https://ej2.syncfusion.com/" target="_blank" rel="noopener noreferrer">
+                        Read More
+                      </a>
+                    </div>
+                  </div>
+                </div>
+                <div className="col-xs-4 col-sm-4 col-lg-4 col-md-4">
+                  <div className="e-card card8" id="weather_card">
+                    <div className="e-card-header">
+                      <div className="e-card-header-caption">
+                        <div className="e-card-header-title">
+                          Green Energy Expansion
+                        </div>
+                      </div>
+                    </div>
+                    <div className="e-card-content">
+                      Renewable energy companies are rapidly scaling operations to meet global sustainability goals. These efforts have led to impressive stock growth, making the sector a key focus for forward-thinking investors.
+                    </div>
+                    <div className="e-card-actions">
+                      <a href="https://ej2.syncfusion.com/" target="_blank" rel="noopener noreferrer">
+                        Read More
+                      </a>
+                    </div>
+                  </div>
+                </div>
+                <div className="col-xs-4 col-sm-4 col-lg-4 col-md-4">
+                  <div className="e-card card9" id="weather_card">
+                    <div className="e-card-header">
+                      <div className="e-card-header-caption">
+                        <div className="e-card-header-title">
+                          Tech Giants Lead the Charge
+                        </div>
+                      </div>
+                    </div>
+                    <div className="e-card-content">
+                      The tech industry is at the forefront of innovation, with giants leveraging cutting-edge technologies to redefine possibilities. Investing in these companies presents promising growth opportunities as they expand into emerging markets.
+                    </div>
+                    <div className="e-card-actions">
+                      <a href="https://ej2.syncfusion.com/" target="_blank" rel="noopener noreferrer">
+                        Read More
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
diff --git a/Stock-Market-Application/src/components/Overview.tsx b/Stock-Market-Application/src/components/Overview.tsx
index 40aa612..551644f 100644
--- a/Stock-Market-Application/src/components/Overview.tsx
+++ b/Stock-Market-Application/src/components/Overview.tsx
@@ -244,7 +244,7 @@ export default function Overview(props: { changeMarquee: Function, myStockDm: Da
               enableHover={false}
               commandClick={commandClick}
               destroyed={destroyed}
-              height={341}
+              height={250}
             >
               <ColumnsDirective>
                 <ColumnDirective
diff --git a/Stock-Market-Application/src/components/SmartStockPicks.tsx b/Stock-Market-Application/src/components/SmartStockPicks.tsx
index 8b5b0c0..b904454 100644
--- a/Stock-Market-Application/src/components/SmartStockPicks.tsx
+++ b/Stock-Market-Application/src/components/SmartStockPicks.tsx
@@ -202,7 +202,7 @@ export default function SmartStockPicks(props: { myStockDm: DataManager }) {
                 queryCellInfo={queryCellInfo}
                 commandClick={commandClick}
                 pageSettings={{ pageCount: 4, pageSize: 10 }}
-                height={330}
+                height={200}
               >
                 <ColumnsDirective>
                   <ColumnDirective
diff --git a/Stock-Market-Application/src/components/StockAnalysis.tsx b/Stock-Market-Application/src/components/StockAnalysis.tsx
index 060d220..a176ca5 100644
--- a/Stock-Market-Application/src/components/StockAnalysis.tsx
+++ b/Stock-Market-Application/src/components/StockAnalysis.tsx
@@ -61,7 +61,7 @@ export default function StockAnalysis() {
       {chartData.isDataReady && (
         <div className="chart-container">
           <div className='chartHeader'>{chartData.CompanyName}</div>
-          <StockChartComponent ref={chartObj} id='stockchartdefault' primaryXAxis={{ valueType: 'DateTimeCategory', majorGridLines: { width: 0 }, majorTickLines: { color: 'transparent' }, crosshairTooltip: { enable: true } }} primaryYAxis={{ labelFormat: 'n0', lineStyle: { width: 0 }, rangePadding: 'None', majorTickLines: { height: 0 } }} chartArea={{ border: { width: 0 } }} tooltip={{ enable: true, shared: true }} crosshair={{ enable: true }}>
+          <StockChartComponent ref={chartObj} id='stockchartdefault' primaryXAxis={{ valueType: 'DateTimeCategory', majorGridLines: { width: 0 }, majorTickLines: { color: 'transparent' }, crosshairTooltip: { enable: true } }} primaryYAxis={{ labelFormat: 'n0', lineStyle: { width: 0 }, rangePadding: 'None', majorTickLines: { height: 0 } }} chartArea={{ border: { width: 0 } }} tooltip={{ enable: true, shared: true }} crosshair={{ enable: true }} height='330px'>
                     <Inject services={[DateTime, DateTimeCategory, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Export, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator]}/>
                     <StockChartSeriesCollectionDirective>
                         <StockChartSeriesDirective dataSource={chartData.data} xName='period' type='Candle' animation={{ enable: true }}/>
diff --git a/Stock-Market-Application/src/style.css b/Stock-Market-Application/src/style.css
index f7ba26a..194f971 100644
--- a/Stock-Market-Application/src/style.css
+++ b/Stock-Market-Application/src/style.css
@@ -16,13 +16,18 @@
   font-size: larger;
 }
 
+body {
+  height: 100vh;
+  margin: 0;
+}
+
 .nav {
   display: flex;
   align-items: center;
   background-color: #151e28;
   padding: 10px 20px;
   border-bottom: 1px solid #2C2C2C;
-  height: 65px;
+  height: 60px;
 }
 
 .nav-link {
@@ -309,10 +314,6 @@
   font-weight: bold;
 }
 
-.chart-container {
-  padding-top: 10px;
-}
-
 text#stockchartdefault_ChartTitle {
   fill: rgba(256, 256, 256, 1);
 }
@@ -358,10 +359,6 @@ text#stockchartdefault_ChartTitle {
   padding: 8px 16px 16px;
 }
 
-.e-card-content {
-  min-height: 120px;
-}
-
 .e-card.card1 {
   background-color: #E0F2FE;
 }
@@ -386,6 +383,16 @@ text#stockchartdefault_ChartTitle {
   background-color: #F0FDFA;
 }
 
+.e-card.card7 {
+  background-color: #FFEDD5;
+}
+.e-card.card8 {
+  background-color: #E7E5E4;
+}
+.e-card.card9 {
+  background-color: #E8EAF6;
+}
+
 .e-card .e-card-actions a,
 .e-card .e-card-actions a:hover {
   background-color: rgb(103, 80, 164);
@@ -396,7 +403,7 @@ text#stockchartdefault_ChartTitle {
 /* Know More */
 
 .control-pane .control-section.db-carousel-section {
-  height: 530px;
+  height: 400px;
   overflow-y: scroll;
 }