diff --git a/frontend/playwright/ui/specs/versions.spec.js b/frontend/playwright/ui/specs/versions.spec.js index 8d26c10c5..93b883a18 100644 --- a/frontend/playwright/ui/specs/versions.spec.js +++ b/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(); }); diff --git a/frontend/src/app/main/data/workspace/versions.cljs b/frontend/src/app/main/data/workspace/versions.cljs index a9de40a13..0808c6f47 100644 --- a/frontend/src/app/main/data/workspace/versions.cljs +++ b/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) diff --git a/frontend/src/app/main/ui/components/context_menu_a11y.scss b/frontend/src/app/main/ui/components/context_menu_a11y.scss index ea8a89cc5..a2ced28ce 100644 --- a/frontend/src/app/main/ui/components/context_menu_a11y.scss +++ b/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; diff --git a/frontend/src/app/main/ui/dashboard/sidebar.scss b/frontend/src/app/main/ui/dashboard/sidebar.scss index 22a0a3c9c..0f7dc1345 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.scss +++ b/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 { diff --git a/frontend/src/app/main/ui/static.scss b/frontend/src/app/main/ui/static.scss index 0a509f016..aff796cee 100644 --- a/frontend/src/app/main/ui/static.scss +++ b/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 {