946147: Update Stock Market Use Case Sample Based on UX Review.

Author: MohanrajRK

Stock-Market-Application/src/components/MyPortfolio.tsx

@@ -242,8 +242,7 @@ export default function MyPortfolio(props: { changeMarquee: Function, myStockDm:
                     {
                       title: 'Analysis',
                       buttonOption: {
-                        iconCss: 'analysis e-icons',
-                        cssClass: 'e-primary',
+                        iconCss: 'analysis e-icons'
                       },
                     },
                   ]}

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

@@ -89,6 +89,24 @@ export default function Overview(props: { changeMarquee: Function, myStockDm: Da
         iconEle!.classList.add('e-chevron-down-double');
       }
     }
+    if (args.column!.field === 'High') {
+      let iconEle = args.cell!.querySelector('.e-icons');
+      iconEle!.classList.add('e-arrow-up');
+      let valueEle = args.cell!.querySelector('.high');
+      if (valueEle) {
+        let value = parseFloat(valueEle.innerHTML);
+        valueEle.innerHTML = Number.isInteger(value) ? value.toString() : value.toFixed(2);
+      }
+    }
+    if (args.column!.field === 'Low') {
+      let iconEle = args.cell!.querySelector('.e-icons');
+      iconEle!.classList.add('e-arrow-down');
+      let valueEle = args.cell!.querySelector('.low');
+      if (valueEle) {
+        let value = parseFloat(valueEle.innerHTML);
+        valueEle.innerHTML = Number.isInteger(value) ? value.toString() : value.toFixed(2);
+      }
+    }
     if (
       args.column!.field === 'Last' ||
       args.column!.field === 'ChangeInValue' ||
@@ -303,12 +321,14 @@ export default function Overview(props: { changeMarquee: Function, myStockDm: Da
                 <ColumnDirective
                   field="High"
                   format="N2"
+                  template="<span class='high'> ${High} </span ><span class='e-icons'></span>"
                   textAlign="Center"
                   width="80"
                 ></ColumnDirective>
                 <ColumnDirective
                   field="Low"
                   format="N2"
+                  template="<span class='low'> ${Low} </span ><span class='e-icons'></span>"
                   textAlign="Center"
                   width="80"
                 ></ColumnDirective>
@@ -330,8 +350,7 @@ export default function Overview(props: { changeMarquee: Function, myStockDm: Da
                     {
                       title: 'Analysis',
                       buttonOption: {
-                        iconCss: 'analysis e-icons',
-                        cssClass: 'e-primary',
+                        iconCss: 'analysis e-icons'
                       },
                     },
                   ]}

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

@@ -271,12 +271,14 @@ export default function SmartStockPicks(props: { myStockDm: DataManager }) {
                   <ColumnDirective
                     field="High"
                     format="N2"
+                    template="<span class='high'> ${High} </span ><span class='e-icons'></span>"
                     textAlign="Right"
                     width="70"
                   ></ColumnDirective>
                   <ColumnDirective
                     field="Low"
                     format="N2"
+                    template="</span><span class='low'> ${Low} </span ><span class='e-icons'>"
                     textAlign="Right"
                     width="70"
                   ></ColumnDirective>
@@ -298,8 +300,7 @@ export default function SmartStockPicks(props: { myStockDm: DataManager }) {
                       {
                         title: 'Analysis',
                         buttonOption: {
-                          iconCss: 'analysis e-icons',
-                          cssClass: 'e-primary',
+                          iconCss: 'analysis e-icons'
                         },
                       },
                     ]}

Stock-Market-Application/src/style.css

@@ -254,16 +254,23 @@ body {
 
 .e-grid td.e-rowcell.e-pos:not(.e-editedbatchcell):not(.e-updatedtd),
 .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-pos:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
-.e-grid td.e-rowcell.e-pos .e-icons {
+.e-grid td.e-rowcell.e-pos .e-icons,
+.e-grid td.e-rowcell .e-icons.e-arrow-up {
   color: #00a653;
 }
 
 .e-grid td.e-rowcell.e-neg:not(.e-editedbatchcell):not(.e-updatedtd),
 .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-neg:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
-.e-grid td.e-rowcell.e-neg .e-icons {
+.e-grid td.e-rowcell.e-neg .e-icons,
+.e-grid td.e-rowcell .e-icons.e-arrow-down {
   color: #ff3740;
 }
 
+.e-grid td.e-rowcell .e-icons.e-arrow-up,
+.e-grid td.e-rowcell .e-icons.e-arrow-down {
+  vertical-align: middle;
+}
+
 .e-grid .e-gridheader .e-sortfilter .e-headercelldiv {
   padding: 0 20px 0 8px;
 }
@@ -353,10 +360,17 @@ text#stockchartdefault_ChartTitle {
 
 .e-card .e-card-content {
   color: #333;
-  padding: 0 16px 16px 16px;
   max-height: 60px;
 }
 
+.row .e-card .e-card-header {
+  border-bottom-color: rgba(0, 0, 0, 0.15);
+}
+
+.row .e-card .e-card-actions {
+  border-top-color: rgba(0, 0, 0, 0.15);
+}
+
 .e-card .e-card-actions {
   padding: 8px 16px 16px;
 }
@@ -414,6 +428,7 @@ text#stockchartdefault_ChartTitle {
   justify-content: center;
   padding: 1rem;
   margin-top: 15px;
+  gap: 20px;
 }
 
 .kb-carousel .e-carousel-items .e-carousel-item .product-container .heading {
@@ -499,7 +514,7 @@ text#stockchartdefault_ChartTitle {
 
 @media screen and (min-width: 900px) {
   .e-card-content {
-    min-height: 110px;
+    min-height: 130px;
     max-height: 120px;
   }
 }