Skip to content

Commit e9e20df

Browse files
MohanrajRKMohanrajRK
committed
932646: Enhancing the UI for a More Attractive Stock Management Application with tailwind3.
1 parent a6c75b9 commit e9e20df

File tree

6 files changed

+83
-13
lines changed

6 files changed

+83
-13
lines changed

‎Stock-Market-Application/src/components/ClimbersFallers.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ export default function ClimbersFallers() {
5555
allowPaging={true}
5656
pageSettings={{ pageCount: 4, pageSize: 7 }}
5757
enableHover={false}
58+
height={270}
5859
>
5960
<ColumnsDirective>
6061
<ColumnDirective
@@ -134,6 +135,7 @@ export default function ClimbersFallers() {
134135
allowPaging={true}
135136
pageSettings={{ pageCount: 4, pageSize: 7 }}
136137
enableHover={false}
138+
height={270}
137139
>
138140
<ColumnsDirective>
139141
<ColumnDirective

‎Stock-Market-Application/src/components/News.tsx

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,67 @@ const News = () => {
128128
</div>
129129
</div>
130130
</div>
131+
<div className="row">
132+
<div className="row card-layout">
133+
<div className="col-xs-4 col-sm-4 col-lg-4 col-md-4">
134+
<div className="e-card card7" id="basic_card">
135+
<div className="e-card-header">
136+
<div className="e-card-header-caption">
137+
<div className="e-card-header-title">
138+
Healthcare Innovation Surge
139+
</div>
140+
</div>
141+
</div>
142+
<div className="e-card-content">
143+
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.
144+
</div>
145+
<div className="e-card-actions">
146+
<a href="https://ej2.syncfusion.com/" target="_blank" rel="noopener noreferrer">
147+
Read More
148+
</a>
149+
</div>
150+
</div>
151+
</div>
152+
<div className="col-xs-4 col-sm-4 col-lg-4 col-md-4">
153+
<div className="e-card card8" id="weather_card">
154+
<div className="e-card-header">
155+
<div className="e-card-header-caption">
156+
<div className="e-card-header-title">
157+
Green Energy Expansion
158+
</div>
159+
</div>
160+
</div>
161+
<div className="e-card-content">
162+
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.
163+
</div>
164+
<div className="e-card-actions">
165+
<a href="https://ej2.syncfusion.com/" target="_blank" rel="noopener noreferrer">
166+
Read More
167+
</a>
168+
</div>
169+
</div>
170+
</div>
171+
<div className="col-xs-4 col-sm-4 col-lg-4 col-md-4">
172+
<div className="e-card card9" id="weather_card">
173+
<div className="e-card-header">
174+
<div className="e-card-header-caption">
175+
<div className="e-card-header-title">
176+
Tech Giants Lead the Charge
177+
</div>
178+
</div>
179+
</div>
180+
<div className="e-card-content">
181+
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.
182+
</div>
183+
<div className="e-card-actions">
184+
<a href="https://ej2.syncfusion.com/" target="_blank" rel="noopener noreferrer">
185+
Read More
186+
</a>
187+
</div>
188+
</div>
189+
</div>
190+
</div>
191+
</div>
131192
</div>
132193
</div>
133194
</div>

‎Stock-Market-Application/src/components/Overview.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -244,7 +244,7 @@ export default function Overview(props: { changeMarquee: Function, myStockDm: Da
244244
enableHover={false}
245245
commandClick={commandClick}
246246
destroyed={destroyed}
247-
height={341}
247+
height={250}
248248
>
249249
<ColumnsDirective>
250250
<ColumnDirective

‎Stock-Market-Application/src/components/SmartStockPicks.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,7 @@ export default function SmartStockPicks(props: { myStockDm: DataManager }) {
202202
queryCellInfo={queryCellInfo}
203203
commandClick={commandClick}
204204
pageSettings={{ pageCount: 4, pageSize: 10 }}
205-
height={330}
205+
height={200}
206206
>
207207
<ColumnsDirective>
208208
<ColumnDirective

‎Stock-Market-Application/src/components/StockAnalysis.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export default function StockAnalysis() {
6161
{chartData.isDataReady && (
6262
<div className="chart-container">
6363
<div className='chartHeader'>{chartData.CompanyName}</div>
64-
<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 }}>
64+
<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'>
6565
<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]}/>
6666
<StockChartSeriesCollectionDirective>
6767
<StockChartSeriesDirective dataSource={chartData.data} xName='period' type='Candle' animation={{ enable: true }}/>

‎Stock-Market-Application/src/style.css

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,18 @@
1616
font-size: larger;
1717
}
1818

19+
body {
20+
height: 100vh;
21+
margin: 0;
22+
}
23+
1924
.nav {
2025
display: flex;
2126
align-items: center;
2227
background-color: #151e28;
2328
padding: 10px 20px;
2429
border-bottom: 1px solid #2C2C2C;
25-
height: 65px;
30+
height: 60px;
2631
}
2732

2833
.nav-link {
@@ -309,10 +314,6 @@
309314
font-weight: bold;
310315
}
311316

312-
.chart-container {
313-
padding-top: 10px;
314-
}
315-
316317
text#stockchartdefault_ChartTitle {
317318
fill: rgba(256, 256, 256, 1);
318319
}
@@ -358,10 +359,6 @@ text#stockchartdefault_ChartTitle {
358359
padding: 8px 16px 16px;
359360
}
360361

361-
.e-card-content {
362-
min-height: 120px;
363-
}
364-
365362
.e-card.card1 {
366363
background-color: #E0F2FE;
367364
}
@@ -386,6 +383,16 @@ text#stockchartdefault_ChartTitle {
386383
background-color: #F0FDFA;
387384
}
388385

386+
.e-card.card7 {
387+
background-color: #FFEDD5;
388+
}
389+
.e-card.card8 {
390+
background-color: #E7E5E4;
391+
}
392+
.e-card.card9 {
393+
background-color: #E8EAF6;
394+
}
395+
389396
.e-card .e-card-actions a,
390397
.e-card .e-card-actions a:hover {
391398
background-color: rgb(103, 80, 164);
@@ -396,7 +403,7 @@ text#stockchartdefault_ChartTitle {
396403
/* Know More */
397404

398405
.control-pane .control-section.db-carousel-section {
399-
height: 530px;
406+
height: 400px;
400407
overflow-y: scroll;
401408
}
402409

0 commit comments

Comments
 (0)