Merge pull request #5429 from penpot/palba-bugfixing-01

🐛 Palba bugfixing 01

frontend/playwright/ui/specs/versions.spec.js

@@ -71,4 +71,7 @@ test("Save and restore version", async ({ page }) => {
   );
 
   await page.getByRole("button", { name: "Restore" }).click();
+
+  // check that the history panel is closed after restore
+  await expect(page.getByRole("tab", { name: "design" })).toBeVisible();
 });

frontend/src/app/main/data/workspace/versions.cljs

@@ -126,7 +126,8 @@
     ptk/WatchEvent
     (watch [_ _ _]
       (rx/concat
-       (rx/of ::dwp/force-persist)
+       (rx/of ::dwp/force-persist
+              (dw/remove-layout-flag :document-history))
        (->> (rx/from-atom refs/persistence-state {:emit-current-value? true})
             (rx/filter #(or (nil? %) (= :saved %)))
             (rx/take 1)

frontend/src/app/main/ui/components/context_menu_a11y.scss

@@ -18,6 +18,7 @@
     opacity: $op-10;
     visibility: visible;
   }
+
   &.fixed {
     position: fixed;
   }
@@ -35,8 +36,9 @@
     border: $s-2 solid var(--panel-border-color);
     background-color: var(--menu-background-color);
     overflow: auto;
+
     & .separator {
-      height: $s-12;
+      border-top: solid $s-1 var(--color-background-quaternary);
     }
 
     &.min-width {
@@ -45,6 +47,7 @@
 
     .context-menu-item {
       display: flex;
+
       .context-menu-action {
         @include bodySmallTypography;
         display: flex;
@@ -56,12 +59,15 @@
         border-radius: $br-8;
         white-space: nowrap;
         color: var(--menu-foreground-color);
+
         &.submenu {
           display: flex;
           align-items: center;
           justify-content: space-between;
+
           .submenu-icon {
             margin-left: 0.5rem;
+
             svg {
               @extend .button-icon-small;
               stroke: var(--menu-foreground-color);
@@ -76,6 +82,7 @@
           background: none;
           border: none;
           cursor: pointer;
+
           .submenu-icon-back svg {
             @extend .button-icon-small;
             stroke: var(--menu-foreground-color);
@@ -83,27 +90,34 @@
           }
         }
       }
+
       &:hover .context-menu-action {
         background-color: var(--menu-background-color-hover);
         text-decoration: none;
         color: var(--menu-foreground-color);
+
         &.submenu .submenu-icon svg {
           stroke: var(--menu-foreground-color);
         }
+
         &.submenu-back .submenu-icon-back svg {
           stroke: var(--menu-foreground-color);
         }
       }
+
       &:focus {
         outline: none;
       }
+
       &:focus-visible {
         outline: none;
+
         .context-menu-action {
           border: 1px solid var(--menu-border-color-focus);
           background-color: var(--menu-background-color-focus);
           text-decoration: none;
           color: var(--menu-foreground-color-focus);
+
           &.submenu .submenu-icon svg {
             stroke: var(--menu-foreground-color-focus);
           }
@@ -113,15 +127,18 @@
           }
         }
       }
+
       &.selected {
         .context-menu-action {
           justify-content: space-between;
           color: var(--menu-foreground-color-focus);
         }
+
         .selected-icon {
           @extend .button-tag;
           border-radius: $br-8;
           height: 100%;
+
           svg {
             @extend .button-icon-small;
             stroke: var(--menu-foreground-color-focus);
@@ -129,6 +146,7 @@
         }
       }
     }
+
     .is-selected .context-menu-action {
       padding-left: $s-28;
       background-image: url(/images/icons/tick.svg);
@@ -138,6 +156,7 @@
       font-weight: $fw700;
     }
   }
+
   &.is-selectable {
     .context-menu-action {
       padding-left: 1.5rem;

frontend/src/app/main/ui/dashboard/sidebar.scss

@@ -78,6 +78,7 @@
 // This icon still use the old svg
 .penpot-icon {
   @include flexCenter;
+
   svg {
     fill: var(--icon-foreground);
     width: $s-24;
@@ -138,6 +139,7 @@
 .action {
   --sidebar-action-icon-color: var(--icon-foreground);
   --sidebar-icon-backgroun-color: var(--color-background-secondary);
+
   &:hover {
     --sidebar-action-icon-color: var(--color-background-secondary);
     --sidebar-icon-backgroun-color: var(--color-accent-primary);
@@ -175,6 +177,7 @@
   right: $s-2;
   top: $s-52;
   max-height: $s-480;
+
   &:not(.teams-dropdown) {
     min-width: $s-160;
   }
@@ -204,8 +207,10 @@
 
 .sidebar-nav-item {
   cursor: pointer;
+
   &:hover {
     background-color: var(--sidebar-element-background-color-hover);
+
     span {
       color: var(--sidebar-element-foreground-color-hover);
     }
@@ -213,6 +218,7 @@
 
   &.current {
     background-color: var(--sidebar-element-background-color-selected);
+
     .element-title {
       color: var(--sidebar-element-foreground-color-selected);
     }
@@ -228,6 +234,7 @@
   padding: $s-8 $s-8 $s-8 $s-24;
   font-weight: $fw400;
   width: 100%;
+
   &:hover {
     text-decoration: none;
   }
@@ -293,6 +300,7 @@
     outline: none;
     border: $s-1 solid var(--search-bar-input-border-color-focus);
   }
+
   ::placeholder {
     color: var(--search-bar-placeholder-foreground-color);
   }
@@ -370,6 +378,7 @@
 
 .profile-separator {
   height: $s-6;
+  border-top: solid $s-1 var(--color-background-quaternary);
 }
 
 .item-with-icon {

frontend/src/app/main/ui/static.scss

@@ -318,7 +318,7 @@
 
     hr {
       margin: $s-20 0;
-      border-top: solid 1px var(--modal-separator-backogrund-color);
+      border-top: solid $s-1 var(--modal-separator-backogrund-color);
     }
 
     .separator {