Re #11453 - design overview upraven

src/app/view/components/captured-action/captured-action.component.css

@@ -2,6 +2,7 @@
     display: flex;
     flex-wrap: nowrap;
     flex-direction: row;
+    border-bottom: 1px dotted lightgray;
 }
 
 .dialog-container {

src/app/view/components/final-state/final-state.component.css

@@ -3,7 +3,14 @@
     flex-wrap: nowrap;
     flex-direction: row;
 
-    border-bottom: 2px ridge #E8E8E8;
+    /*border-bottom: 2px ridge #E8E8E8;*/
+
+    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15) inset;
+    padding: 10px;
+    margin-left: -8px;
+    margin-right: -8px;
+    border-bottom: none !important;
+    background-color: #E4E4E4;
 }
 
 .component {
@@ -80,7 +87,7 @@
     height: 15px;
     border-radius: 50%;
     background-color: var(--st-info);
-    color: var(--st-black);
+    color: var(--st-white);
     font-size: 10px;
     text-align: center;
     line-height: 15px;

src/app/view/components/final-state/final-state.component.html

@@ -22,10 +22,20 @@
       ">
       <!-- show only first 3 -->
       <p *ngIf="j < 3">
-        <span style="text-transform: capitalize">{{ attribute }}: </span>
+        <span *ngIf="!attribute.startsWith('style')" class="icon" style="background-color: var(--st-attribute)">
+          A
+        </span>
+          <span *ngIf="attribute.startsWith('style')" class="icon" style="background-color: var(--st-style)">
+          S
+        </span>
+
+        <span style="text-transform: capitalize">{{ attribute.replace("style.", "") }}: </span>
         <b>{{ finalState.selectedAttributes[attribute] }}</b>
       </p>
     </div>
+      <div *ngIf="Object.keys(finalState.selectedAttributes).length > 3">
+          + {{Object.keys(finalState.selectedAttributes).length - 3}} more
+      </div>
   </div>
 
   <div class="component third-component">