TreeView ContextMenu Integration demo: add requested changes after designer review (DevExpress#30295)

Author: EugeniyKiyashko

apps/demos/Demos/TreeView/ContextMenuIntegration/Angular/app/app.component.css

@@ -11,19 +11,18 @@
 ::ng-deep .log-container {
   padding: 20px;
   margin-left: 20px;
-  font-size: 115%;
-  font-weight: bold;
+  font-weight: 600;
   background-color: rgba(191, 191, 191, 0.15);
-  height: 100%;
 }
 
-::ng-deep .log-container .dx-icon-clock {
-  position: relative;
-  top: 1px;
+::ng-deep .log-container > div:first-child {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
 }
 
-::ng-deep #log {
-  margin-top: 10px;
+::ng-deep .log-container .dx-icon-clock {
+  font-size: var(--dx-font-size-icon);
 }
 
 ::ng-deep #log .dx-empty-message {

apps/demos/Demos/TreeView/ContextMenuIntegration/Angular/app/app.component.html

@@ -9,7 +9,10 @@
   </dx-tree-view>
 
   <div class="log-container">
-    <div><i class="icon dx-icon-clock"></i>&nbsp;Operations log:</div>
+    <div>
+      <i class="icon dx-icon-clock"></i>
+      <span>&nbsp;Operations log:</span>
+    </div>
     <dx-list
       id="log"
       [width]="400"

apps/demos/Demos/TreeView/ContextMenuIntegration/React/App.tsx

@@ -70,7 +70,8 @@ const App = () => {
       />
       <div className="log-container">
         <div>
-          <i className="icon dx-icon-clock"></i>&nbsp;Operations log:
+          <i className="icon dx-icon-clock"></i>
+          <span>&nbsp;Operations log:</span>
         </div>
         <List
           id="log"

apps/demos/Demos/TreeView/ContextMenuIntegration/React/styles.css

@@ -11,19 +11,18 @@
 .log-container {
   padding: 20px;
   margin-left: 20px;
-  font-size: 115%;
-  font-weight: bold;
+  font-weight: 600;
   background-color: rgba(191, 191, 191, 0.15);
-  height: 100%;
 }
 
-.log-container .dx-icon-clock {
-  position: relative;
-  top: 1px;
+.log-container > div:first-child {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
 }
 
-#log {
-  margin-top: 10px;
+.log-container .dx-icon-clock {
+  font-size: var(--dx-font-size-icon);
 }
 
 #log .dx-empty-message {

apps/demos/Demos/TreeView/ContextMenuIntegration/ReactJs/App.js

@@ -63,7 +63,8 @@ const App = () => {
       />
       <div className="log-container">
         <div>
-          <i className="icon dx-icon-clock"></i>&nbsp;Operations log:
+          <i className="icon dx-icon-clock"></i>
+          <span>&nbsp;Operations log:</span>
         </div>
         <List
           id="log"

apps/demos/Demos/TreeView/ContextMenuIntegration/ReactJs/styles.css

@@ -11,19 +11,18 @@
 .log-container {
   padding: 20px;
   margin-left: 20px;
-  font-size: 115%;
-  font-weight: bold;
+  font-weight: 600;
   background-color: rgba(191, 191, 191, 0.15);
-  height: 100%;
 }
 
-.log-container .dx-icon-clock {
-  position: relative;
-  top: 1px;
+.log-container > div:first-child {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
 }
 
-#log {
-  margin-top: 10px;
+.log-container .dx-icon-clock {
+  font-size: var(--dx-font-size-icon);
 }
 
 #log .dx-empty-message {

apps/demos/Demos/TreeView/ContextMenuIntegration/Vue/App.vue

@@ -9,7 +9,10 @@
       @item-context-menu="treeViewItemContextMenu"
     />
     <div class="log-container">
-      <div><i class="icon dx-icon-clock"/>&nbsp;Operations log:</div>
+      <div>
+        <i class="icon dx-icon-clock"/>
+        <span>&nbsp;Operations log:</span>
+      </div>
       <DxList
         id="log"
         show-scrollbar="always"
@@ -97,19 +100,18 @@ function contextMenuItemClick(e) {
   padding: 20px;
   margin-left: 20px;
   background-color: rgba(191, 191, 191, 0.15);
-  font-size: 115%;
-  font-weight: bold;
+  font-weight: 600;
   position: relative;
-  height: 100%;
 }
 
-.log-container .dx-icon-clock {
-  position: relative;
-  top: 1px;
+.log-container > div:first-child {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
 }
 
-#log {
-  margin-top: 10px;
+.log-container .dx-icon-clock {
+  font-size: var(--dx-font-size-icon);
 }
 
 #log .dx-empty-message {

apps/demos/Demos/TreeView/ContextMenuIntegration/jQuery/index.html

@@ -17,7 +17,10 @@
       <div class="form">
         <div id="treeview"></div>
         <div class="log-container">
-          <div><i class="icon dx-icon-clock"></i>&nbsp;Operations log:</div>
+          <div>
+            <i class="icon dx-icon-clock"></i>
+            <span>&nbsp;Operations log:</span>
+          </div>
           <div id="log"></div>
         </div>
         <div id="contextMenu"></div>

apps/demos/Demos/TreeView/ContextMenuIntegration/jQuery/styles.css

@@ -11,19 +11,18 @@
 .log-container {
   padding: 20px;
   margin-left: 20px;
-  font-size: 115%;
-  font-weight: bold;
+  font-weight: 600;
   background-color: rgba(191, 191, 191, 0.15);
-  height: 100%;
 }
 
-.log-container .dx-icon-clock {
-  position: relative;
-  top: 1px;
+.log-container > div:first-child {
+  display: inline-flex;
+  align-items: center;
+  margin-bottom: 10px;
 }
 
-#log {
-  margin-top: 10px;
+.log-container .dx-icon-clock {
+  font-size: var(--dx-font-size-icon);
 }
 
 #log .dx-empty-message {