@colijnit/transaction 301.1.9 → 301.1.11

package/lib/component/delivery-planning-main/component/delivery-planning-overview/component/delivery-planning-overview-tile/component/delivery-planning-tile-status/style/_material-definition.scss

@@ -0,0 +1,12 @@
+$tp-delivery-planning-tile-status-bar-height: 24px !default;
+$tp-delivery-planning-tile-status-bar-min-width: 90px !default;
+$tp-delivery-planning-tile-status-bar-border-radius: 0 !default;
+$tp-delivery-planning-tile-status-bar-font-size: $tp-font-size !default;
+$tp-delivery-planning-tile-status-bar-color: #FFF !default;
+$tp-delivery-planning-tile-status-volume-color: #1A73E8 !default;
+$tp-delivery-planning-tile-status-volume-background: rgba($tp-delivery-planning-tile-status-volume-color, 0.4) !default;
+$tp-delivery-planning-tile-status-time-color: #1A73E8 !default;
+$tp-delivery-planning-tile-status-time-background: rgba($tp-delivery-planning-tile-status-time-color, 0.4) !default;
+$tp-delivery-planning-tile-status-overload-color: $tp-color-negative-value !default;
+$tp-delivery-planning-tile-status-label-font-size: $tp-font-size-small !default;
+$tp-delivery-planning-tile-status-label-marker-color: #ccc !default;

package/lib/component/delivery-planning-main/component/delivery-planning-overview/component/delivery-planning-overview-tile/style/_layout.scss

@@ -1,8 +1,18 @@
 @include export-module('cc-delivery-planning-overview-tile-layout') {
-  @import "../../delivery-planning-overview-tile-settings-popup/style/material";
   .co-delivery-planning-overview-tile {
     &.disabled {
-      opacity: 0.2;
+      // Fade what is on the tile, but keep its buttons (settings, warnings) readable and clickable:
+      // an opacity on the whole tile would apply to those buttons too.
+      .delivery-planning-overview-tile-wrapper {
+        border-color: $tp-delivery-planning-overview-tile-disabled-border-color;
+
+        .header-tile-wrapper,
+        co-delivery-planning-tile-status,
+        .planning-short-line-wrapper,
+        co-collapsible {
+          opacity: $tp-delivery-planning-overview-tile-disabled-opacity;
+        }
+      }
     }
 
     display: flex;
@@ -26,20 +36,33 @@
     }
 
     .delivery-planning-overview-tile-wrapper {
-      padding: 15px;
-      border: 1px solid #DCE4EA;
-      border-radius: 4px;
+      padding: $tp-delivery-planning-overview-tile-padding;
+      background: $tp-delivery-planning-overview-tile-background;
+      border: $tp-delivery-planning-overview-tile-border;
+      border-radius: $tp-delivery-planning-overview-tile-border-radius;
       width: 100%;
 
       &.selected {
-        border: 1px solid rgba($color-action, 0.5);
+        border: $tp-delivery-planning-overview-tile-selected-border;
       }
 
       .planning-wrapper {
         .status-wrapper {
           .co-icon {
-            width: 20px;
-            height: 20px;
+            width: $tp-delivery-planning-overview-tile-status-icon-size;
+            height: $tp-delivery-planning-overview-tile-status-icon-size;
+          }
+
+          .warning-icon {
+            box-sizing: border-box;
+            padding: $tp-delivery-planning-overview-tile-warning-icon-padding;
+            border-radius: 50%;
+            background: $tp-delivery-planning-overview-tile-warning-icon-background;
+            cursor: pointer;
+
+            svg, path {
+              fill: $tp-delivery-planning-overview-tile-warning-icon-color;
+            }
           }
         }
 
@@ -59,12 +82,12 @@
           gap: 5px;
           cursor: pointer;
           span {
-            font-weight: bold;
-            font-size: 14px;
+            font-weight: $tp-delivery-planning-overview-tile-title-font-weight;
+            font-size: $tp-delivery-planning-overview-tile-title-font-size;
           }
           co-icon {
-            width: 20px;
-            height: 20px;
+            width: $tp-delivery-planning-overview-tile-title-icon-size;
+            height: $tp-delivery-planning-overview-tile-title-icon-size;
           }
         }
         .truck-header-tile {
@@ -74,15 +97,15 @@
           justify-content: end;
           gap: 0.5em;
           .co-icon {
-            width: 40px;
-            height: 40px;
+            width: $tp-delivery-planning-overview-tile-truck-icon-size;
+            height: $tp-delivery-planning-overview-tile-truck-icon-size;
 
             path.fa-secondary {
-              fill: #000;
-              opacity: 0.2;
+              fill: $tp-delivery-planning-overview-tile-truck-icon-secondary-color;
+              opacity: $tp-delivery-planning-overview-tile-truck-icon-secondary-opacity;
             }
             path.fa-primary {
-              fill: #1a73e8;
+              fill: $tp-delivery-planning-overview-tile-truck-icon-primary-color;
             }
           }
         }
@@ -94,11 +117,11 @@
         gap: 10px;
         justify-content: start;
         span {
-          font-size: 12px;
+          font-size: $tp-delivery-planning-overview-tile-header-button-font-size;
         }
         .button-text {
           &.selected {
-            color: #1A73E8;
+            color: $tp-delivery-planning-overview-tile-header-button-selected-color;
             padding-bottom: 0.25em;
             border-bottom-style: solid;
             border-bottom-width: 1px;
@@ -107,17 +130,17 @@
         }
       }
       .route-start-wrapper {
-        background-color: #F5F5FA;
+        background-color: $tp-delivery-planning-overview-tile-route-background;
         padding: 10px;
         display: flex;
         flex-direction: row;
         gap: 1em;
         span {
-          color: $color-action-accent;
+          color: $tp-delivery-planning-overview-tile-route-color;
           text-align: center;
         }
         .first-route, .second-route {
-          border-right: 1px solid #6E7694;
+          border-right: $tp-delivery-planning-overview-tile-route-divider;
           padding-right: 1em;
         }
       }
@@ -154,11 +177,11 @@
     }
 
     .normal-drop-zone.is-active::after {
-      background: #3b82f6; /* or your theme primary */
+      background: $tp-delivery-planning-overview-tile-drop-zone-active-line-color;
     }
 
     .normal-drop-zone.is-active {
-      background: rgba(59, 130, 246, 0.08);
+      background: $tp-delivery-planning-overview-tile-drop-zone-active-background;
     }
     .co-hour-scheduling-expandable {
       .scheduled-objects {
@@ -167,7 +190,7 @@
             .planning-line-wrapper {
               background: transparent;
               &.active-lines {
-                background: #F5F5FC;
+                background: $tp-delivery-planning-overview-tile-scheduled-line-active-background;
               }
             }
           }

package/lib/component/delivery-planning-main/component/delivery-planning-overview/component/delivery-planning-overview-tile/style/_material-definition.scss

@@ -1,4 +1,26 @@
-$status-first-colour: #1A73E8;
-$status-second-colour: #1A73E8;
-$status-overload-colour: #C1002A;
-$color-action-accent: #8083A3;
+$tp-delivery-planning-overview-tile-padding: 15px !default;
+$tp-delivery-planning-overview-tile-background: transparent !default;
+$tp-delivery-planning-overview-tile-border: 1px solid $tp-color-border !default;
+$tp-delivery-planning-overview-tile-border-radius: 4px !default;
+$tp-delivery-planning-overview-tile-selected-border: 1px solid rgba($tp-color-action, 0.5) !default;
+$tp-delivery-planning-overview-tile-disabled-border-color: rgba($tp-color-border, 0.2) !default;
+$tp-delivery-planning-overview-tile-disabled-opacity: 0.2 !default;
+$tp-delivery-planning-overview-tile-status-icon-size: 20px !default;
+$tp-delivery-planning-overview-tile-warning-icon-background: #F2A900 !default;
+$tp-delivery-planning-overview-tile-warning-icon-color: #fff !default;
+$tp-delivery-planning-overview-tile-warning-icon-padding: 3px !default;
+$tp-delivery-planning-overview-tile-title-font-size: $tp-font-size-big !default;
+$tp-delivery-planning-overview-tile-title-font-weight: bold !default;
+$tp-delivery-planning-overview-tile-title-icon-size: 20px !default;
+$tp-delivery-planning-overview-tile-truck-icon-size: 40px !default;
+$tp-delivery-planning-overview-tile-truck-icon-primary-color: #1a73e8 !default;
+$tp-delivery-planning-overview-tile-truck-icon-secondary-color: #000 !default;
+$tp-delivery-planning-overview-tile-truck-icon-secondary-opacity: 0.2 !default;
+$tp-delivery-planning-overview-tile-header-button-font-size: $tp-font-size !default;
+$tp-delivery-planning-overview-tile-header-button-selected-color: $tp-color-action !default;
+$tp-delivery-planning-overview-tile-route-background: #F5F5FA !default;
+$tp-delivery-planning-overview-tile-route-color: #8083A3 !default;
+$tp-delivery-planning-overview-tile-route-divider: 1px solid #6E7694 !default;
+$tp-delivery-planning-overview-tile-drop-zone-active-line-color: #3b82f6 !default;
+$tp-delivery-planning-overview-tile-drop-zone-active-background: rgba(59, 130, 246, 0.08) !default;
+$tp-delivery-planning-overview-tile-scheduled-line-active-background: $tp-default-background-accent !default;

package/lib/component/delivery-planning-main/component/delivery-planning-overview/component/delivery-planning-overview-tile/style/material.scss

@@ -1,4 +1,4 @@
-
 @import "./material-definition";
+@import "../../delivery-planning-overview-tile-settings-popup/style/material";
 @import "./layout";
 @import "./theme";

package/lib/component/delivery-planning-main/component/delivery-planning-overview/component/delivery-planning-overview-tile-settings-popup/style/_layout.scss

@@ -19,21 +19,21 @@
         gap: 1em;
       }
       .co-icon {
-        width: 40px;
-        height: 40px;
+        width: $tp-delivery-planning-overview-tile-settings-popup-header-icon-size;
+        height: $tp-delivery-planning-overview-tile-settings-popup-header-icon-size;
 
         &.small {
-          width: 20px;
-          height: 20px;
+          width: $tp-delivery-planning-overview-tile-settings-popup-header-icon-small-size;
+          height: $tp-delivery-planning-overview-tile-settings-popup-header-icon-small-size;
         }
 
         path.fa-secondary {
-          fill: #000;
-          opacity: 0.2;
+          fill: $tp-delivery-planning-overview-tile-settings-popup-header-icon-secondary-color;
+          opacity: $tp-delivery-planning-overview-tile-settings-popup-header-icon-secondary-opacity;
         }
 
         path.fa-primary {
-          fill: #1a73e8;
+          fill: $tp-delivery-planning-overview-tile-settings-popup-header-icon-primary-color;
         }
       }
     }
@@ -49,14 +49,14 @@
           padding: 0.5em;
 
           co-icon {
-            border-radius: 16px;
-            fill: black;
-            border: 1px solid black;
+            border-radius: $tp-delivery-planning-overview-tile-settings-popup-available-icon-border-radius;
+            fill: $tp-delivery-planning-overview-tile-settings-popup-available-icon-color;
+            border: $tp-delivery-planning-overview-tile-settings-popup-available-icon-border;
             background: none;
 
             &.active {
-              fill: lightgreen;
-              border: 2px solid lightgreen;
+              fill: $tp-delivery-planning-overview-tile-settings-popup-available-icon-active-color;
+              border: $tp-delivery-planning-overview-tile-settings-popup-available-icon-active-border;
             }
           }
         }

package/lib/component/delivery-planning-main/component/delivery-planning-overview/component/delivery-planning-overview-tile-settings-popup/style/_material-definition.scss

@@ -0,0 +1,10 @@
+$tp-delivery-planning-overview-tile-settings-popup-header-icon-size: 40px !default;
+$tp-delivery-planning-overview-tile-settings-popup-header-icon-small-size: 20px !default;
+$tp-delivery-planning-overview-tile-settings-popup-header-icon-primary-color: #1a73e8 !default;
+$tp-delivery-planning-overview-tile-settings-popup-header-icon-secondary-color: #000 !default;
+$tp-delivery-planning-overview-tile-settings-popup-header-icon-secondary-opacity: 0.2 !default;
+$tp-delivery-planning-overview-tile-settings-popup-available-icon-color: black !default;
+$tp-delivery-planning-overview-tile-settings-popup-available-icon-border: 1px solid black !default;
+$tp-delivery-planning-overview-tile-settings-popup-available-icon-border-radius: 16px !default;
+$tp-delivery-planning-overview-tile-settings-popup-available-icon-active-color: lightgreen !default;
+$tp-delivery-planning-overview-tile-settings-popup-available-icon-active-border: 2px solid lightgreen !default;

package/lib/component/delivery-planning-main/component/delivery-planning-overview/style/_layout.scss

@@ -1,7 +1,12 @@
 @include export-module('cc-delivery-planning-overview-layout') {
-  @import "../component/delivery-planning-overview-popup/style/material";
   .co-delivery-planning-overview {
 
+    .planning-warnings {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
     .delivery-planning-wrapper {
       pointer-events: auto;
       &.employee-view {
@@ -32,12 +37,12 @@
           }
           @media screen and (max-width: 1280px) {
             .weekday-value {
-              font-size: 14px;
+              font-size: $tp-delivery-planning-overview-weekday-font-size-medium;
             }
           }
           @media screen and (max-width: 960px) {
             .weekday-value {
-              font-size: 12px;
+              font-size: $tp-delivery-planning-overview-weekday-font-size-small;
             }
           }
         }
@@ -98,14 +103,14 @@
     right: 10px;
     gap: 5px;
     co-icon {
-      fill: black;
+      fill: $tp-delivery-planning-overview-view-mode-icon-color;
       cursor: pointer;
-      padding: 5px;
-      width: 30px;
-      height: 30px;
+      padding: $tp-delivery-planning-overview-view-mode-icon-padding;
+      width: $tp-delivery-planning-overview-view-mode-icon-size;
+      height: $tp-delivery-planning-overview-view-mode-icon-size;
       &.active {
-        background: $color-action;
-        fill: white;
+        background: $tp-delivery-planning-overview-view-mode-icon-active-background;
+        fill: $tp-delivery-planning-overview-view-mode-icon-active-color;
       }
     }
   }

package/lib/component/delivery-planning-main/component/delivery-planning-overview/style/_material-definition.scss

@@ -1 +1,7 @@
-$color-action: #1A73E8;
+$tp-delivery-planning-overview-weekday-font-size-medium: 14px !default;
+$tp-delivery-planning-overview-weekday-font-size-small: 12px !default;
+$tp-delivery-planning-overview-view-mode-icon-size: 30px !default;
+$tp-delivery-planning-overview-view-mode-icon-padding: 5px !default;
+$tp-delivery-planning-overview-view-mode-icon-color: black !default;
+$tp-delivery-planning-overview-view-mode-icon-active-background: $tp-color-action !default;
+$tp-delivery-planning-overview-view-mode-icon-active-color: white !default;

package/lib/component/delivery-planning-main/component/delivery-planning-overview/style/material.scss

@@ -1,4 +1,5 @@
 @import "../../../../../style/mixin";
 @import "./_material-definition";
+@import "../component/delivery-planning-overview-popup/style/material";
 @import "./_layout";
 @import "./_theme";

package/lib/component/delivery-planning-main/component/delivery-planning-selection/style/_layout.scss

@@ -21,22 +21,22 @@
         }
       }
       .planning-title {
-        font-weight: bold;
-        font-size: 18px;
+        font-weight: $tp-delivery-planning-selection-title-font-weight;
+        font-size: $tp-delivery-planning-selection-title-font-size;
         padding: 0 10px;
       }
       co-icon {
-        background: #f5f5fa;
-        border-radius: 100%;
-        width: 25px;
-        height: 25px;
+        background: $tp-delivery-planning-selection-icon-background;
+        border-radius: $tp-delivery-planning-selection-icon-border-radius;
+        width: $tp-delivery-planning-selection-icon-size;
+        height: $tp-delivery-planning-selection-icon-size;
         transition: 0.25s ease-in-out;
         transform: rotate(0deg);
       }
 
       .options-wrapper {
         z-index: 999;
-        background-color: white;
+        background-color: $tp-delivery-planning-selection-options-background;
       }
     }
   }

package/lib/component/delivery-planning-main/component/delivery-planning-selection/style/_material-definition.scss

@@ -0,0 +1,6 @@
+$tp-delivery-planning-selection-title-font-size: 18px !default;
+$tp-delivery-planning-selection-title-font-weight: bold !default;
+$tp-delivery-planning-selection-icon-size: 25px !default;
+$tp-delivery-planning-selection-icon-background: #f5f5fa !default;
+$tp-delivery-planning-selection-icon-border-radius: 100% !default;
+$tp-delivery-planning-selection-options-background: white !default;

package/lib/component/delivery-planning-main/style/_layout.scss

@@ -1,5 +1,4 @@
 @include export-module('cc-delivery-planning-main-layout') {
-  @import "../component/delivery-planning-overview/style/material";
   .co-delivery-planning {
     .row {
       .co-delivery-planning-main {

package/lib/component/delivery-planning-main/style/material.scss

@@ -1,4 +1,5 @@
 @import "../../../style/mixin";
 @import "./_material-definition";
+@import "../component/delivery-planning-overview/style/material";
 @import "./_layout";
 @import "./_theme";

package/lib/component/shared/transaction-article-text/style/_layout.scss

@@ -84,6 +84,7 @@
           }
           p {
             margin-bottom: 5px;
+            min-height: $tp-co-transaction-article-text-dialog-content-editor-paragraph-min-height;
           }
         }
         &.active {
@@ -257,7 +258,7 @@
         gap: $tp-co-transaction-article-text-popup-dialog-footer-button-wrapper-gap;
       }
     }
-    .close-button {
+    .close-button, .delete-button {
       height: $tp-co-transaction-article-text-popup-close-button-size;
       width: $tp-co-transaction-article-text-popup-close-button-size;
       border-color: $tp-co-transaction-article-text-popup-button-border-color;

package/lib/component/shared/transaction-article-text/style/_material-definition.scss

@@ -13,6 +13,7 @@ $tp-co-transaction-article-text-dialog-content-gap: 10px !default;
 $tp-co-transaction-article-text-dialog-content-textarea-height: 150px !default;
 $tp-co-transaction-article-text-dialog-content-editor-margin: 10px 0 !default;
 $tp-co-transaction-article-text-dialog-content-editor-min-height: 150px !default;
+$tp-co-transaction-article-text-dialog-content-editor-paragraph-min-height: 10px !default;
 $tp-co-transaction-article-text-dialog-content-editor-textarea-padding: 0 40px 10px 10px !default;
 $tp-co-transaction-article-text-dialog-content-editor-wysiwyg-padding: 10px 40px 10px 10px !default;
 $tp-co-transaction-article-text-documents-header-margin: 20px 0 0 0 !default;

package/lib/component/transaction-header/transaction-header-popup/style/_layout.scss

@@ -328,6 +328,9 @@
         .checkout-prefix-name, relation-customer-titles {
           flex: 1;
         }
+        .checkout-prefix-name {
+          min-width: 169px;
+        }
       }
     }
 

package/lib/component/transaction-line-interbranch-receive-goods/style/_layout.scss

@@ -1,78 +1,78 @@
-@include export-module('co-transaction-line-interbranch-receive-goods-layout') {
-  .co-transaction-line-interbranch-receive-goods {
-    .columns-wrapper {
-      display: flex;
-    }
-
-    .co-input-number-picker {
-      width: 140px;
-    }
-
-    .details-column {
-      width: 45%;
-      display: flex;
-      flex-direction: column;
-
-      .transaction-line-totals-amount {
-        margin: 5px;
-      }
-
-      //.amount-number-picker {
-      //  height: 40px;
-      //  margin: 5px;
-      //}
-    }
-
-    .header-wrapper {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin: $tp-co-transaction-line-receive-goods-title-margin;
-
-      .details-header {
-        font-size: $tp-co-transaction-line-receive-goods-title-font-size;
-        font-weight: bold;
-      }
-    }
-
-    .divider-wrapper {
-      display: flex;
-      width: 10%;
-      justify-content: center;
-      visibility: hidden;
-
-      .divider {
-        border-left: 1px solid;
-        border-color: $tp-color-border;
-        margin: 5px; // $tp-co-transaction-request-details-input-margin;
-      }
-    }
-
-    .details-input {
-      margin: 5px; // $tp-co-transaction-request-details-input-margin;
-    }
-
-    .location-wrapper {
-      position: relative;
-
-      .co-transaction-button {
-        width: auto;
-        margin: 5px;
-      }
-    }
-    .disabled {
-      cursor: default;
-      opacity: 0.6;
-    }
-    .clickable {
-      cursor: pointer;
-    }
-
-    .warehouse-buttons {
-      width: 100%;
-      .co-transaction-button {
-        width: 100%;
-      }
-    }
-  }
-}
+@include export-module('co-transaction-line-interbranch-receive-goods-layout') {
+  .co-transaction-line-interbranch-receive-goods {
+    .columns-wrapper {
+      display: flex;
+    }
+
+    .co-input-number-picker {
+      width: 140px;
+    }
+
+    .details-column {
+      width: 45%;
+      display: flex;
+      flex-direction: column;
+
+      .transaction-line-totals-amount {
+        margin: 5px;
+      }
+
+      //.amount-number-picker {
+      //  height: 40px;
+      //  margin: 5px;
+      //}
+    }
+
+    .header-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin: $tp-co-transaction-line-receive-goods-title-margin;
+
+      .details-header {
+        font-size: $tp-co-transaction-line-receive-goods-title-font-size;
+        font-weight: bold;
+      }
+    }
+
+    .divider-wrapper {
+      display: flex;
+      width: 10%;
+      justify-content: center;
+      visibility: hidden;
+
+      .divider {
+        border-left: 1px solid;
+        border-color: $tp-color-border;
+        margin: 5px; // $tp-co-transaction-request-details-input-margin;
+      }
+    }
+
+    .details-input {
+      margin: 5px; // $tp-co-transaction-request-details-input-margin;
+    }
+
+    .location-wrapper {
+      position: relative;
+
+      .co-transaction-button {
+        width: auto;
+        margin: 5px;
+      }
+    }
+    .disabled {
+      cursor: default;
+      opacity: 0.6;
+    }
+    .clickable {
+      cursor: pointer;
+    }
+
+    .warehouse-buttons {
+      width: 100%;
+      .co-transaction-button {
+        width: 100%;
+      }
+    }
+  }
+}

package/lib/component/transaction-line-interbranch-receive-goods/style/_material-definition.scss

@@ -1,2 +1,2 @@
-$tp-co-transaction-line-receive-goods-title-font-size: 12px !default;
-$tp-co-transaction-line-receive-goods-title-margin: 0 0 10px 5px !default;
+$tp-co-transaction-line-receive-goods-title-font-size: 12px !default;
+$tp-co-transaction-line-receive-goods-title-margin: 0 0 10px 5px !default;

package/lib/component/transaction-line-interbranch-receive-goods/style/_theme.scss

@@ -1,4 +1,4 @@
-@include export-module('co-transaction-line-interbranch-receive-goods-theme') {
-  .co-transaction-line-interbranch-receive-goods {
-  }
-}
+@include export-module('co-transaction-line-interbranch-receive-goods-theme') {
+  .co-transaction-line-interbranch-receive-goods {
+  }
+}

package/lib/component/transaction-line-interbranch-receive-goods/style/material.scss

@@ -1,4 +1,4 @@
-@import "../../../style/mixin";
-@import "./_material-definition";
-@import "./_layout";
-@import "./_theme";
+@import "../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";

package/lib/component/transaction-line-side-panel/style/_material-definition.scss

@@ -77,3 +77,5 @@ $tp-transaction-line-side-forms-input-box-shadow: inset 0 0 0 2px #1A73E8;
 
 $tp-transaction-line-side-forms-collapsible-padding: 0 0 20px 0 !default;
 $tp-transaction-line-side-forms-co-form-gap: 15px !default;
+
+$tp-transaction-line-side-panel-panel-stock-dialog-width: 1200px !default;

package/lib/component/transaction-line-side-panel-article-details/style/_layout.scss

@@ -15,6 +15,9 @@
     z-index: 999;
     box-shadow: $tp-transaction-line-side-panel-box-shadow;
     background: $tp-transaction-line-side-panel-background;
+    border-width: $tp-transaction-line-side-panel-border-width;
+    border-style: solid;
+    border-color: $tp-transaction-line-side-panel-border-color;
   }
 
   .transaction-line-side-panel-header {
@@ -57,7 +60,7 @@
     border-width: $tp-transaction-line-side-panel-panel-nav-bar-border-width;
   }
   .default-details-wrapper {
-    background-color: #f8f8fa;
+
     padding: 30px;
     border: solid #fff;
     border-width: 0 0 5px;
@@ -118,6 +121,13 @@
           font-weight: 700;
           margin: 10px 0;
           color: #000;
+          display: flex;
+          gap: 10px;
+          .co-icon {
+            width: 16px;
+            height: 16px;
+            cursor: pointer;
+          }
         }
       }
 
@@ -201,4 +211,9 @@
       }
     }
   }
+  .co-transaction-article-stock-dialog {
+    .co-dialog-wrapper {
+      width: $tp-transaction-line-side-panel-panel-stock-dialog-width;
+    }
+  }
 }