diff --git a/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js b/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js index eba4e66d69..b471131095 100644 --- a/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js +++ b/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js @@ -814,6 +814,18 @@ test.describe("Dashboard headers", () => { await expect(header(page)).toHaveScreenshot(shot); }); + test("Libraries page and search placeholder", async ({ page }) => { + const dashboardPage = new DashboardPage(page); + await dashboardPage.setupDashboardFull(); + await dashboardPage.goToLibraries(); + await expect(page).toHaveScreenshot(shot); + + await dashboardPage.goToSearch(); + const placeholder = page.locator("[class*='grid-empty-placeholder']"); + await expect(placeholder).toBeVisible(); + await expect(placeholder).toHaveScreenshot(shot); + }); + test("Account header", async ({ page }) => { const dashboardPage = new DashboardPage(page); await dashboardPage.goToDashboard(); diff --git a/frontend/src/app/main/ui/dashboard/libraries.scss b/frontend/src/app/main/ui/dashboard/libraries.scss index eb77ed0444..e5555cfb9b 100644 --- a/frontend/src/app/main/ui/dashboard/libraries.scss +++ b/frontend/src/app/main/ui/dashboard/libraries.scss @@ -4,17 +4,13 @@ // // Copyright (c) KALEIDOS SUBSIDIARY SL -@use "refactor/common-refactor.scss" as deprecated; +@use "ds/_borders.scss" as *; @use "dashboard/common/header"; .dashboard-container { flex: 1 0 0; - margin-right: deprecated.$s-16; + margin-inline-end: var(--sp-l); overflow-y: auto; - width: 100%; - border-top: deprecated.$s-1 solid var(--color-background-quaternary); - - &.dashboard-projects { - user-select: none; - } + inline-size: 100%; + border-block-start: $b-1 solid var(--color-background-quaternary); } diff --git a/frontend/src/app/main/ui/dashboard/search.cljs b/frontend/src/app/main/ui/dashboard/search.cljs index 492b1942b3..06393173cc 100644 --- a/frontend/src/app/main/ui/dashboard/search.cljs +++ b/frontend/src/app/main/ui/dashboard/search.cljs @@ -68,19 +68,25 @@ (empty? search-term) [:div {:class (stl/css :grid-empty-placeholder :search)} [:div {:class (stl/css :icon)} - [:> icon* {:icon-id i/search :size "xl"}]] + [:> icon* {:icon-id i/search + :size "xl" + :class (stl/css :search-icon)}]] [:div {:class (stl/css :text)} (tr "dashboard.type-something")]] (nil? result) [:div {:class (stl/css :grid-empty-placeholder :search)} [:div {:class (stl/css :icon)} - [:> icon* {:icon-id i/search :size "xl"}]] + [:> icon* {:icon-id i/search + :size "xl" + :class (stl/css :search-icon)}]] [:div {:class (stl/css :text)} (tr "dashboard.searching-for" search-term)]] (empty? result) [:div {:class (stl/css :grid-empty-placeholder :search)} [:div {:class (stl/css :icon)} - [:> icon* {:icon-id i/search :size "xl"}]] + [:> icon* {:icon-id i/search + :size "xl" + :class (stl/css :search-icon)}]] [:div {:class (stl/css :text)} (tr "dashboard.no-matches-for" search-term)]] :else diff --git a/frontend/src/app/main/ui/dashboard/search.scss b/frontend/src/app/main/ui/dashboard/search.scss index a6f6543d91..ad7569e52d 100644 --- a/frontend/src/app/main/ui/dashboard/search.scss +++ b/frontend/src/app/main/ui/dashboard/search.scss @@ -4,25 +4,17 @@ // // Copyright (c) KALEIDOS SUBSIDIARY SL -@use "refactor/common-refactor.scss" as deprecated; +@use "ds/_borders.scss" as *; +@use "ds/_sizes.scss" as *; @use "dashboard/common/header"; @use "./placeholder"; .dashboard-container { flex: 1 0 0; - margin-right: deprecated.$s-16; + margin-inline-end: var(--sp-l); overflow-y: auto; - width: 100%; - border-top: deprecated.$s-1 solid var(--color-background-quaternary); - - &.dashboard-projects { - user-select: none; - } - - &.dashboard-shared { - width: calc(100vw - deprecated.$s-320); - margin-right: deprecated.$s-52; - } + inline-size: 100%; + border-block-start: $b-1 solid var(--color-background-quaternary); } .grid-empty-placeholder.search { @@ -30,18 +22,16 @@ display: flex; justify-content: center; flex-direction: column; - height: deprecated.$s-200; + block-size: $sz-200; background: transparent; - border: deprecated.$s-1 solid var(--color-background-quaternary); - border-radius: deprecated.$br-8; + border: $b-1 solid var(--color-background-quaternary); + border-radius: $br-8; .text { color: var(--color-foreground-primary); } - - .icon svg { - stroke: var(--color-foreground-secondary); - width: deprecated.$s-32; - height: deprecated.$s-32; - } +} + +.search-icon { + color: var(--color-foreground-secondary); }