Merge pull request #3558 from penpot/hiru-show-assets-to-update

🎉 Show changed assets when updating libraries

frontend/resources/styles/common/framework.scss

@@ -62,6 +62,16 @@
 }
 
 .btn-warning {
+  @extend %btn;
+  background: $color-warning;
+  color: $color-white;
+  &:hover {
+    background: $color-warning-dark;
+    color: $color-white;
+  }
+}
+
+.btn-danger {
   @extend %btn;
   background: $color-danger;
   color: $color-white;
@@ -1093,6 +1103,15 @@ input[type="range"]:focus::-ms-fill-upper {
         }
       }
     }
+
+    .link {
+      background: none;
+      border: none;
+      color: $color-info;
+      display: inline;
+      margin: 0;
+      text-decoration: underline;
+    }
   }
 
   .btn-close {
@@ -1215,7 +1234,7 @@ input[type="range"]:focus::-ms-fill-upper {
     top: 70px;
     left: 0;
     right: 0;
-    width: 35rem;
+    width: 40rem;
     margin-left: auto;
     margin-right: auto;
     z-index: 20;

frontend/resources/styles/common/refactor/basic-rules.scss

@@ -104,6 +104,23 @@
   }
 }
 
+.button-warning {
+  @include buttonStyle;
+  @include flexCenter;
+  background-color: var(--button-warning-background-color-rest);
+  border: $s-1 solid var(--button-warning-border-color-rest);
+  color: var(--button-warning-foreground-color-rest);
+}
+
+.button-disabled {
+  @include buttonStyle;
+  @include flexCenter;
+  background-color: var(--button-disabled-background-color-rest);
+  border: $s-1 solid var(--button-disabled-border-color-rest);
+  color: var(--button-disabled-foreground-color-rest);
+  cursor: unset;
+}
+
 .button-tag {
   @include buttonStyle;
   @include flexCenter;
@@ -147,6 +164,14 @@
   stroke-width: 1.33px;
 }
 
+.link {
+  background: unset;
+  border: none;
+  color: var(--link-foreground-color);
+  cursor: pointer;
+  text-decoration: none;
+}
+
 .asset-element {
   @include titleTipography;
   display: flex;

frontend/resources/styles/common/refactor/design-tokens.scss

@@ -60,9 +60,19 @@
   --button-tertiary-border-color-focus: var(--color-accent-primary);
   --button-tertiary-foreground-color-focus: var(--color-foreground-primary);
 
+  --button-warning-background-color-rest: var(--warning-color);
+  --button-warning-border-color-rest: var(--warning-color);
+  --button-warning-foreground-color-rest: var(--color-background-secondary);
+
+  --button-disabled-background-color-rest: var(--color-background-disabled);
+  --button-disabled-border-color-rest: var(--color-background-disabled);
+  --button-disabled-foreground-color-rest: var(--color-foreground-disabled);
+
   --icon-foreground: var(--color-foreground-secondary);
   --icon-foreground-hover: var(--color-foreground-primary);
 
+  --link-foreground-color: var(--color-accent-primary);
+
   --tab-background-color-hover: var(--color-background-primary);
   --tab-background-color-selected: var(--color-background-quaternary);
   --tab-foreground-color: var(--color-foreground-secondary);

frontend/resources/styles/common/refactor/mixins.scss

@@ -15,6 +15,7 @@
   background: none;
   cursor: pointer;
 }
+
 @mixin removeInputStyle {
   border: none;
   background: none;

frontend/resources/styles/common/refactor/themes/default-theme.scss

@@ -10,8 +10,10 @@
   --color-background-tertiary: var(--dark-gray-3);
   --color-background-quaternary: var(--dark-gray-4);
   --color-background-subtle: var(--dark-gray-2-30);
+  --color-background-disabled: var(--off-white);
   --color-foreground-primary: var(--white);
   --color-foreground-secondary: var(--off-white);
+  --color-foreground-disabled: var(--dark-gray-4);
   --color-accent-primary: var(--green);
   --color-accent-primary-muted: var(--green-30);
   --color-accent-secondary: var(--lilac);

frontend/resources/styles/common/refactor/themes/light-theme.scss

@@ -10,8 +10,10 @@
   --color-background-tertiary: var(--light-gray-3);
   --color-background-quaternary: var(--light-gray-4);
   --color-background-subtle: var(--light-gray-2-30); //Whatch this¡¡
+  --color-background-disabled: var(--light-gray-4);
   --color-foreground-primary: var(--black);
   --color-foreground-secondary: var(--off-black);
+  --color-foreground-disabled: var(--light-gray-1);
   --color-accent-primary: var(--purple);
   --color-accent-primary-muted: var(--purple-30);
   --color-accent-secondary: var(--blue);

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

@@ -723,6 +723,19 @@
             color: $color-primary;
             background: $color-black;
           }
+
+          &.item-update {
+            background: $color-warning;
+            border-color: $color-warning;
+            color: $color-black;
+
+            &.disabled {
+              background: $color-gray-10;
+              border-color: $color-gray-10;
+              color: $color-black;
+              cursor: unset;
+            }
+          }
         }
       }
     }
@@ -791,6 +804,71 @@
         }
       }
     }
+
+    .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;
+      direction: rtl;
+      & input {
+        border: none;
+        color: $color-info;
+        cursor: pointer;
+        margin-bottom: 0;
+        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;