0.0.50 w route card

static/v2/css/widgets/w_route_card.css

@@ -43,11 +43,19 @@
     --route-date-data-justify: center;
     --route-date-data-margin: 4px 0 0 0;
 
+    --card-splitter-bg: #E6E6E6;
+
     background: var(--route-card-bg);
     margin: var(--route-card-margin);
     box-shadow: var(--route-card-box_shadow);
     border-radius: 10px;
     color: var(--route-text-color);
+    &.highlighted{
+        --route-card-bg: linear-gradient(90deg, #FBED96 0%, #ABECD6 100%), #FFFFFF;
+        --card-splitter-bg: #FFF;
+        --route-text-container-bg: #FFFFFF;
+        --route-text-img-filter: unset;
+    }
     .route_card_info_data{
         position: relative;
         .route_card_text_img{
@@ -93,7 +101,7 @@
                 .card_splitter{
                     height: 22px;
                     width: 2px;
-                    background: #E6E6E6;
+                    background: var(--card-splitter-bg);
                 }
                 .card_owner_type{
                     &.mover{

static/v2/js/widgets/w_route_card.js

@@ -103,6 +103,11 @@ function highlightRoute(el) {
         data_type: 'json',
         success: (res) => {
 
+            $parent.classList.add('highlighted');
+            $('.route_btn[data-action="highlight"]').each((i, el) => {
+                el.dataset.actions_count = res.remains_route_highlight_count;
+                el.querySelector('.route_btn_data').innerHTML = el.querySelector('.route_btn_data').innerHTML.split(':')[0] + `: ${res.remains_route_highlight_count}`;
+            })
         }, error: (res) => {
 
         }