CardView - demo fixes (DevExpress#30194)

Author: pomahtri

apps/demos/Demos/CardView/ColumnChooser/Angular/app/app.component.css

@@ -23,7 +23,7 @@
 }
 
 .option > .dx-selectbox {
-  width: 150px;
+  width: 200px;
   display: inline-block;
   vertical-align: middle;
 }

apps/demos/Demos/CardView/ColumnChooser/React/styles.css

@@ -23,7 +23,7 @@
 }
 
 .option > .dx-selectbox {
-  width: 150px;
+  width: 200px;
   display: inline-block;
   vertical-align: middle;
 }

apps/demos/Demos/CardView/ColumnChooser/ReactJs/styles.css

@@ -23,7 +23,7 @@
 }
 
 .option > .dx-selectbox {
-  width: 150px;
+  width: 200px;
   display: inline-block;
   vertical-align: middle;
 }

apps/demos/Demos/CardView/ColumnChooser/Vue/App.vue

@@ -152,7 +152,7 @@ const allowColumnReordering = ref(false);
   }
 
   .option > .dx-selectbox {
-    width: 150px;
+    width: 200px;
     display: inline-block;
     vertical-align: middle;
   }

apps/demos/Demos/CardView/ColumnChooser/jQuery/styles.css

@@ -23,7 +23,7 @@
 }
 
 .option > .dx-selectbox {
-  width: 150px;
+  width: 200px;
   display: inline-block;
   vertical-align: middle;
 }

apps/demos/Demos/CardView/Overview/Angular/app/app.component.css

@@ -1,10 +1,10 @@
-.footer {
+.card-footer {
   display: flex;
   padding: 12px;
   gap: 8px;
 }
 
-.footer > * {
+.card-footer > * {
   flex-grow: 1;
   width: 100%
 }
@@ -14,12 +14,16 @@
   align-items: center;
 }
 
-.status--ok {
+.status--salaried {
   color: var(--dx-color-success);
 }
 
-.status--warning {
-  color: var(--dx-color-warning);
+.status--commission {
+  color: #f7630c;
+}
+
+.status--terminated {
+  color: var(--dx-color-danger);
 }
 
 .indicator {

apps/demos/Demos/CardView/Overview/Angular/app/app.component.html

@@ -49,16 +49,17 @@
     <div
       *dxTemplate="let params of 'statusTemplate'"
       class="status"
-      [class.status--ok]="params.field.value === 'Salaried'"
-      [class.status--warning]="params.field.value !== 'Salaried'"
+      [class.status--salaried]="params.field.value === 'Salaried'"
+      [class.status--commission]="params.field.value === 'Commission'"
+      [class.status--terminated]="params.field.value === 'Terminated'"
     >
       <span class="indicator"></span>
       <span>{{ params.field.value }}</span>
     </div>
     <div *dxTemplate="let params of 'emailTemplate'">
       <a href="mailto:{{ params.field.value }}">{{ params.field.text }}</a>
     </div>
-    <div *dxTemplate="let params of 'footerTemplate'" class="footer">
+    <div *dxTemplate="let params of 'footerTemplate'" class="card-footer">
       <dx-button
         text="Call"
         icon="tel"