🎉 Show changed assets when updating libraries

frontend/resources/styles/main/partials/modal.scss

@@ -723,6 +723,22 @@
             color: $color-primary;
             background: $color-black;
           }
+
+          &.btn-gray {
+            background: $color-gray-10;
+            border-color: $color-gray-10;
+            color: $color-black;
+            cursor: unset;
+
+            &:hover {
+              color: $color-black;
+            }
+          }
+
+          &.btn-warning {
+            background: $color-warning;
+            border-color: $color-warning;
+          }
         }
       }
     }
@@ -791,6 +807,67 @@
         }
       }
     }
+
+    .libraries-updates {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+      grid-gap: $size-5;
+      font-size: $fs12;
+      margin-top: $size-4;
+
+      .libraries-updates-item {
+        display: flex;
+        align-items: center;
+
+        &:not(:first-child) {
+          margin-top: $size-2;
+        }
+
+        & svg {
+          background-color: $color-canvas;
+          border-radius: $br4;
+          border: 2px solid transparent;
+          height: 24px;
+          width: 24px;
+          min-height: 24px;
+          min-width: 24px;
+          margin-right: $size-2;
+        }
+
+        & .color-bullet {
+          margin-right: $size-2;
+        }
+
+        & .typography-sample {
+          margin-right: $size-2;
+        }
+
+        & .name-block {
+          color: $color-gray-20;
+          width: calc(100% - 24px - #{$size-2});
+
+          &.ellipsis {
+            padding-left: calc(24px + #{$size-2});
+          }
+        }
+
+        & .item-name {
+          display: block;
+          margin: 0;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+      }
+    }
+
+    .libraries-updates-see-all {
+      margin-top: $size-2;
+      text-align: right;
+      cursor: pointer;
+      color: $color-info;
+      text-decoration: underline;
+    }
   }
 }
 

frontend/resources/styles/main/partials/project-bar.scss

@@ -34,7 +34,8 @@
     }
 
     .btn-primary,
-    .btn-warning {
+    .btn-warning,
+    .btn-danger {
       font-size: $fs12;
       margin-bottom: 0.5rem;
       padding: 8px $size-2;

frontend/resources/styles/main/partials/share-link.scss

@@ -70,7 +70,8 @@
             }
             .btn-primary,
             .btn-secondary,
-            .btn-warning {
+            .btn-warning,
+            .btn-danger {
               width: 126px;
               margin-bottom: 0px;