chore: revamp the styles customization and update to Dart Sass syntax

silviyaboteva · silviyaboteva · commit 6a489e8f45cc · 2024-11-28T10:55:09.000+02:00
diff --git a/examples/kendo-react-finance-portfolio/public/404.html b/examples/kendo-react-finance-portfolio/public/404.html
@@ -38,7 +38,7 @@
     </script>
 </head>
 
-<body>
+<body className="k-body">
 </body>
 
 </html>
diff --git a/examples/kendo-react-finance-portfolio/public/index.html b/examples/kendo-react-finance-portfolio/public/index.html
@@ -25,7 +25,7 @@
   <title>React App</title>
 </head>
 
-<body>
+<body className="k-body">
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div>
   <!--
diff --git a/examples/kendo-react-finance-portfolio/src/components/AddRemoveSymbol/AddRemoveSymbol.tsx b/examples/kendo-react-finance-portfolio/src/components/AddRemoveSymbol/AddRemoveSymbol.tsx
@@ -7,6 +7,7 @@ import { SymbolsContext } from '../../context/SymbolsContext';
 import { SectorContext } from '../../context/SectorContext';
 import { filterBy } from "@progress/kendo-data-query";
 import styles from './add.module.scss';
+import { plusIcon, trashIcon } from '@progress/kendo-svg-icons';
 
 export interface AddRemoveSymbolProps {
     className?: string;
@@ -31,6 +32,7 @@ const customItemRender = (el: any, value: any) => (
 const customValueRender = (el: any) => (
     <el.type
         {...el.props}
+        style={{paddingInline: 0}}
     >
         Add new
     </el.type>)
@@ -81,9 +83,8 @@ export const AddRemoveSymbol = (props: AddRemoveSymbolProps) => {
     return (
         <div className={classNames(props.className)}>
             <DropDownList
-                iconClassName="k-icon k-i-add k-icon-before"
-                style={{ backgroundColor: 'white', width: "110px" }}
-                className="dropdown-icon-before"
+                svgIcon={plusIcon}
+                style={{ backgroundColor: 'white', width: "110px", flexDirection: 'row-reverse' }}
                 value={null}
                 onChange={handleSymbolsAdd}
                 data={filterBy(allSymbols, {
@@ -104,7 +105,7 @@ export const AddRemoveSymbol = (props: AddRemoveSymbolProps) => {
             />
 
             &nbsp;
-            <Button iconClass='k-icon k-i-delete' fillMode={"flat"} style={{ color: '#D9534F' }} onClick={handleRemoveClick}>Remove</Button>
+            <Button svgIcon={trashIcon} fillMode={"flat"} style={{ color: '#D9534F' }} onClick={handleRemoveClick}>Remove</Button>
 
         </div>
     )
diff --git a/examples/kendo-react-finance-portfolio/src/components/AddRemoveSymbol/add.module.scss b/examples/kendo-react-finance-portfolio/src/components/AddRemoveSymbol/add.module.scss
@@ -1,25 +0,0 @@
-@import "../../styles/variables";
-
-.stock-item {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  cursor: pointer;
-  &:hover {
-      background-color: $hover-bg;
-  }
-}
-
-.stock-item-symbol {
-  line-height: 1;
-  display: block;
-  font-size: 14px;
-  color: $primary;
-}
-
-.stock-item-name {
-  line-height: 1;
-  display: block;
-
-  font-size: 11px;
-  color: $text-light;
-}
diff --git a/examples/kendo-react-finance-portfolio/src/components/Header/Header.tsx b/examples/kendo-react-finance-portfolio/src/components/Header/Header.tsx
@@ -45,7 +45,7 @@ export const Header: React.FunctionComponent<any> = () => {
             <div className="container pt-4 pb-2">
                 <div className="row">
                     <div className="col-9">
-                        <h1 className="mb-0 header-title">My Stocks Portfolio</h1>
+                        <h1 className="k-h1 mb-0 header-title">My Stocks Portfolio</h1>
                         <DropDownList
                             popupSettings={{
                                 animate: {
diff --git a/examples/kendo-react-finance-portfolio/src/components/Stock/stock.module.scss b/examples/kendo-react-finance-portfolio/src/components/Stock/stock.module.scss
@@ -1,35 +1,3 @@
-.list-item {
-  color: black;
-  &:hover {
-    text-decoration: none;
-    color: black;
-  }
-
-  &.list-item-selected {
-    font-weight: bold;
-    position: relative;
-    &::after {
-      content: "";
-      position: absolute;
-      width: 100%;
-      display: block;
-      height: 0.25rem;
-      background-color: #007bff;
-    }
-  }
-}
-
-.ddl-list-item {
-  svg path {
-    fill: #007bff;
-  }
-
-  &.k-selected {
-    svg path {
-      fill: white;
-    }
-  }
-}
 
 .stock {
   z-index: 1040;
@@ -39,5 +7,5 @@
   font-size: 14px;
   color: white;
   font-weight: bold;
-  transform: translateY(0.25rem);
+  transform: translateY(0.35rem);
 }
diff --git a/examples/kendo-react-finance-portfolio/src/components/StockList/StockList.tsx b/examples/kendo-react-finance-portfolio/src/components/StockList/StockList.tsx
@@ -14,6 +14,7 @@ import styles from './stock-list.module.scss';
 import { SectorContext } from '../../context/SectorContext';
 import { SymbolsContext } from '../../context/SymbolsContext';
 import { Symbol } from '../Stock/Symbol';
+import { classNames } from '@progress/kendo-react-common';
 
 
 export const StockList: React.FunctionComponent = () => {
@@ -106,14 +107,15 @@ export const StockList: React.FunctionComponent = () => {
         <>
             <Symbol symbol={symbol || 'SNAP'} data={data.find((i: any) => i.symbol === symbol) || data.find((i: any) => i.symbol === 'SNAP')} />
             <Grid
+                className={classNames(styles["grid"])}
                 data={processed}
                 selectedField="selected"
                 onSelectionChange={handleSelectionChange}
                 onRowClick={handleRowClick}
             >
                 <GridColumn field="selected" headerCell={_ => null} cell={CheckboxCell} width={40} />
-                <GridColumn field="symbol" title="Symbol" className={styles['symbol-cell']} width={70} locked={true} />
-                <GridColumn field="name" title="Name" className={styles['name-cell']} width={200} />
+                <GridColumn field="symbol" title="Symbol" className={styles['symbol-cell']} width={75} />
+                <GridColumn field="name" title="Name" className={styles['name-cell']} width={195} />
                 <GridColumn field="price" title="Price" className={styles['price-cell']} cell={PriceCell} headerCell={PriceHeaderCell} width={80} />
                 <GridColumn field="day_change" title="Change" cell={ChangeCell} width={80} />
                 <GridColumn field="change_pct" title="% Change" cell={ChangeCell} width={90} />
diff --git a/examples/kendo-react-finance-portfolio/src/components/StockList/stock-list.module.scss b/examples/kendo-react-finance-portfolio/src/components/StockList/stock-list.module.scss
@@ -1,12 +1,13 @@
-@import "../../styles/variables";
+$negative-value: #d9534f;
+$positive-value: #5cb85c;
 
 .symbol-cell {
-  color: $primary;
+  color: #55595c;
   font-weight: bold !important;
 }
 
 .name-cell {
-  color: $text-base;
+  color: #373a3c;
 }
 
 .price-cell {
@@ -28,3 +29,13 @@
     font-size: 11px;
   }
 }
+
+.grid thead {
+    background-color: #eceeef !important;
+    color: #55595c !important;
+    line-height: 1;
+    font-weight: bold !important;
+    & > th {
+      vertical-align: middle;
+    }
+}
diff --git a/examples/kendo-react-finance-portfolio/src/components/User/user.module.scss b/examples/kendo-react-finance-portfolio/src/components/User/user.module.scss
@@ -1,5 +1,3 @@
-@import "../../styles/variables";
-
 .wrapper-profile {
   background-color: white;
 }
@@ -16,7 +14,7 @@
 }
 
 .symbol-cell {
-    color: $primary;
+    color: #007BFF;
     font-weight: bold !important;
   }
   
@@ -30,7 +28,7 @@
       padding-bottom: 1rem;
     }
     & > td:nth-child(1) {
-      color: $text-light;
+      color: #55595C;
       font-weight: 300;
     }
     & > td:nth-child(2) {
diff --git a/examples/kendo-react-finance-portfolio/src/pages/StockPage.tsx b/examples/kendo-react-finance-portfolio/src/pages/StockPage.tsx
@@ -21,7 +21,7 @@ export const StockPage = () => {
             <Stock />
           </div>
         </div>
-        <div className={classNames("py-3")} style={{ minHeight: 600 }}>
+        <div className={classNames(styles["stock-section"], "py-3")} style={{ minHeight: 600 }}>
           <div className={"container my-3"}>
             <NavigationRow className="row justify-content-center">
               <AddRemoveSymbol
diff --git a/examples/kendo-react-finance-portfolio/src/pages/VirtualizedPage.tsx b/examples/kendo-react-finance-portfolio/src/pages/VirtualizedPage.tsx
@@ -21,10 +21,10 @@ import dateFields from "cldr-dates-full/main/es/dateFields.json";
 import { process } from "@progress/kendo-data-query";
 import orders from "./data/orders.json";
 import {
-  GridDetailRow,
   Grid,
   GridToolbar,
   GridColumn,
+  GridDetailRowProps,
 } from "@progress/kendo-react-grid";
 import { DropDownList } from "@progress/kendo-react-dropdowns";
 
@@ -51,7 +51,7 @@ orders.forEach((o: any) => {
     o.shippedDate === "NULL" ? undefined : new Date(o.shippedDate);
 });
 
-class DetailComponent extends GridDetailRow {
+class DetailComponent extends React.Component<GridDetailRowProps> {
   render() {
     const dataItem = this.props.dataItem;
     return (
diff --git a/examples/kendo-react-finance-portfolio/src/pages/stock-page.module.scss b/examples/kendo-react-finance-portfolio/src/pages/stock-page.module.scss
@@ -3,3 +3,11 @@
     order: -1;
   }
 }
+
+.stock-section {
+  background-color: #f1f2f4;
+}
+
+div[role="separator"] {
+  z-index: 1;
+}
diff --git a/examples/kendo-react-finance-portfolio/src/styles/_bootstrap.scss b/examples/kendo-react-finance-portfolio/src/styles/_bootstrap.scss
@@ -1,5 +1,5 @@
 $font-family-base: "Roboto", Helvetica, Arial, sans-serif;
-
+$headings-font-weight: bold;
 
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
diff --git a/examples/kendo-react-finance-portfolio/src/styles/_kendo.scss b/examples/kendo-react-finance-portfolio/src/styles/_kendo.scss
diff --git a/examples/kendo-react-finance-portfolio/src/styles/_typography.scss b/examples/kendo-react-finance-portfolio/src/styles/_typography.scss
diff --git a/examples/kendo-react-finance-portfolio/src/styles/_variables.scss b/examples/kendo-react-finance-portfolio/src/styles/_variables.scss
diff --git a/examples/kendo-react-finance-portfolio/src/styles/main.scss b/examples/kendo-react-finance-portfolio/src/styles/main.scss

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-@import "../../styles/variables";`
`2`		`-`
`3`	`1`	`.wrapper-profile {`
`4`	`2`	`background-color: white;`
`5`	`3`	`}`
`@@ -16,7 +14,7 @@`
`16`	`14`	`}`
`17`	`15`
`18`	`16`	`.symbol-cell {`
`19`		`- color: $primary;`
	`17`	`+ color: #007BFF;`
`20`	`18`	`font-weight: bold !important;`
`21`	`19`	`}`
`22`	`20`
`@@ -30,7 +28,7 @@`
`30`	`28`	`padding-bottom: 1rem;`
`31`	`29`	`}`
`32`	`30`	`& > td:nth-child(1) {`
`33`		`- color: $text-light;`
	`31`	`+ color: #55595C;`
`34`	`32`	`font-weight: 300;`
`35`	`33`	`}`
`36`	`34`	`& > td:nth-child(2) {`