chore: update chip styling

Author: yanmariomenev

examples-standalone/kendoangular-landing-page/src/app/components/grid/dynamic-grid.component.css

@@ -21,6 +21,38 @@
 .green {
     color: #278200;
 }
+
 .k-grid .k-table-row.k-table-alt-row {
     background-color: transparent;
 }
+
+.status-chip-filled,
+.status-chip-filled:hover {
+    background-color: rgb(0, 88, 233);
+    border-color: var(--kendo-color-info-emphasis, #4082ef);
+    color: rgb(255, 255, 255);
+}
+
+.status-chip-open,
+.status-chip-open:hover {
+    background-color: rgb(40, 133, 0);
+    border-color: var(--kendo-color-success-emphasis, #37b400);
+    color: rgb(255, 255, 255);
+}
+
+.status-chip-rejected,
+.status-chip-rejected:hover {
+    background-color: rgb(235, 23, 0);
+    border-color: var(--kendo-color-error-emphasis, #d51923);
+    color: rgb(255, 255, 255);
+}
+.k-chip {
+    width: 45px;
+    height: 10px;
+}
+.k-chip-content {
+    justify-content: center;
+    font-weight: 400;
+    font-size: 10px;
+    font-family: 'Roboto', sans-serif;
+}

examples-standalone/kendoangular-landing-page/src/app/components/grid/dynamic-grid.component.html

@@ -115,9 +115,11 @@
                 <strong>{{ column.title }}</strong>
             </ng-template>
             <ng-template kendoGridCellTemplate let-dataItem="dataItem">
-                <kendo-chip rounded="full" [themeColor]="getThemeColor(dataItem.status)">{{
-                    dataItem.status
-                }}</kendo-chip>
+                <kendo-chip 
+                    rounded="full" 
+                    [class]="'status-chip-' + dataItem.status.toLowerCase()">
+                    {{ dataItem.status }}
+                </kendo-chip>
             </ng-template>
         </kendo-grid-column>
     </kendo-grid>

examples-standalone/kendoangular-landing-page/src/app/components/grid/dynamic-grid.component.ts

@@ -107,19 +107,6 @@ export class DynamicGridComponent implements OnInit, OnDestroy {
         this.dataService.updateRefreshInterval(event);
     }
 
-    public getThemeColor(status: string): ChipThemeColor {
-        switch (status) {
-            case 'Filled':
-                return 'info';
-            case 'Open':
-                return 'success';
-            case 'Rejected':
-                return 'error';
-            default:
-                return 'base';
-        }
-    }
-
     public getAssetTypeIcon(assetType: string): SafeHtml {
         if (assetType === 'Real Estate') {
             return this.domSanitizer.bypassSecurityTrustHtml(realEstateIcon);