mirror of
https://github.com/penpot/penpot.git
synced 2026-10-28 21:40:34 +00:00
♻️ Use DS buttons and icons in the dashboard team pages (#12531)
* ♻️ Use DS buttons and icons in the dashboard team pages The team pages (members, invitations, webhooks and settings) and their modals move off the deprecated icons and raw buttons: - The member and webhook row menus become ghost DS icon buttons named "Options", with aria-expanded. - The member and invitation role selectors become buttons with aria-haspopup and aria-expanded, and use the DS arrow icon. They were divs; one carried a role and an id repeated on every row. - The four modal close buttons become ghost DS icon buttons named "Close"; the class that places them goes on the tooltip wrapper. - "Create webhook" becomes a DS primary button. - The webhook status, team image and settings icons use the DS icons. The invitation checkbox tick stays until the checkbox migration. A visual test covers the role and row menus, the resend and webhook modals and the team image overlay. AI-assisted-by: claude-opus-5-5 * ♻️ Move dashboard team styles to logical properties and DS tokens The remaining legacy color aliases resolve to their DS tokens, physical offsets and margins become logical properties, and the DS typography module is used without a namespace. Four selectors that team.cljs does not use are commented out with a TODO. refactor/ stays only for component-family placeholders: %input-checkbox and %checkbox-icon (checkboxes) and %modal-* (modals). The shared dashboard header styles (common-dashboard) are used by ten dashboard modules and move in their own change. No visual change. AI-assisted-by: claude-opus-5-5 * 🐛 Open the team row menus below their button The member and webhook row menus were placed from the bottom of their cell with a fixed offset, so their position depended on the menu height and the button height. The two-item webhook menu covered its button, the member menu covered the lower part of it, and the taller DS icon button moved both 3px down. They now open 4px below the button. AI-assisted-by: claude-opus-5-5 * 🔥 Remove unused styles from the dashboard team pages The SCSS refactor left four rules commented out with a TODO because team.cljs does not use them. CSS modules scope the classes to this module and no other source uses them, so they go: .dashboard-top-cta, .error-notification, .empty-invitations-buttons and .invitations-dropdown. No visual change. AI-assisted-by: claude-opus-5-5 * 🐛 Find the member role selector as a button in the dashboard test The "Bug 9443" test looked for the member role selector as a combobox. The selector is now a button with aria-haspopup, so the test failed in CI. It now looks for a button named "Admin", and checks that the owner has no such button. AI-assisted-by: claude-opus-5-5
This commit is contained in:
Eva Marco
GitHub
parent
deb5771248
commit
29e79edc66
@ -131,9 +131,9 @@ test("Bug 9443, Admin can not demote owner", async ({ page }) => {
|
||||
await dashboardPage.goToSecondTeamMembersSection();
|
||||
|
||||
await expect(page.getByRole("heading", { name: "Members" })).toBeVisible();
|
||||
await expect(page.getByRole("combobox", { name: "Admin" })).toBeVisible();
|
||||
await expect(page.getByRole("button", { name: "Admin" })).toBeVisible();
|
||||
await expect(page.getByText("Owner")).toBeVisible();
|
||||
await expect(page.getByRole("combobox", { name: "Owner" })).toHaveCount(0);
|
||||
await expect(page.getByRole("button", { name: "Owner" })).toHaveCount(0);
|
||||
});
|
||||
|
||||
test("Bug 9927, Don't show the banner to invite team members if the user has dismissed it", async ({
|
||||
|
||||
@ -514,3 +514,90 @@ test.describe("Dashboard sidebar controls", () => {
|
||||
).toHaveScreenshot(shot);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Team pages controls", () => {
|
||||
const shot = { maxDiffPixelRatio: 0, threshold: 0 };
|
||||
|
||||
// The row menu button: a raw button with the menu-btn class before the DS
|
||||
// migration, a DS icon button named "Options" after it.
|
||||
const openRowMenu = (page) => {
|
||||
const rows = page.locator("[class*='table-rows']");
|
||||
return rows
|
||||
.locator("[class*='menu-btn']")
|
||||
.or(rows.getByRole("button", { name: "Options" }))
|
||||
.first()
|
||||
.click();
|
||||
};
|
||||
|
||||
test("Members role and actions menus", async ({ page }) => {
|
||||
const dashboardPage = new DashboardPage(page);
|
||||
await dashboardPage.setupDashboardFull();
|
||||
// Han Solo owns the team; the logged-in user is an admin.
|
||||
await dashboardPage.mockRPC(
|
||||
"get-team-members?team-id=*",
|
||||
"dashboard/get-team-members-admin.json",
|
||||
);
|
||||
await dashboardPage.goToSecondTeamMembersSection();
|
||||
await expect(page.getByText("role")).toBeVisible();
|
||||
|
||||
await page.locator("[class*='has-priv']").first().click();
|
||||
await expect(page.locator("[class*='roles-dropdown']")).toBeVisible();
|
||||
await expect(page).toHaveScreenshot(shot);
|
||||
|
||||
await page.keyboard.press("Escape");
|
||||
await page.mouse.click(10, 700);
|
||||
await openRowMenu(page);
|
||||
await expect(page.locator("[class*='actions-dropdown']")).toBeVisible();
|
||||
await expect(page).toHaveScreenshot(shot);
|
||||
});
|
||||
|
||||
test("Invitations role menu and resend modal", async ({ page }) => {
|
||||
const dashboardPage = new DashboardPage(page);
|
||||
await dashboardPage.setupDashboardFull();
|
||||
await dashboardPage.setupTeamInvitations();
|
||||
await dashboardPage.goToSecondTeamInvitationsSection();
|
||||
await expect(page.getByText("test1@mail.com")).toBeVisible();
|
||||
|
||||
await page.locator("[class*='has-priv']").first().click();
|
||||
await expect(page.locator("[class*='roles-dropdown']")).toBeVisible();
|
||||
await expect(page).toHaveScreenshot(shot);
|
||||
|
||||
await page.mouse.click(10, 700);
|
||||
await page.getByText("test1@mail.com").click();
|
||||
await page.getByRole("button", { name: "Resend invitation" }).click();
|
||||
await expect(page.getByText("Resend invitations")).toBeVisible();
|
||||
await page.mouse.move(10, 700);
|
||||
await expect(page).toHaveScreenshot(shot);
|
||||
});
|
||||
|
||||
test("Webhooks actions menu and modal", async ({ page }) => {
|
||||
const dashboardPage = new DashboardPage(page);
|
||||
await dashboardPage.setupDashboardFull();
|
||||
await dashboardPage.setupTeamWebhooks();
|
||||
await dashboardPage.goToSecondTeamWebhooksSection();
|
||||
await expect(page.getByText("https://www.google.com")).toBeVisible();
|
||||
|
||||
await openRowMenu(page);
|
||||
await expect(
|
||||
page.locator("[class*='webhook-actions-dropdown']"),
|
||||
).toBeVisible();
|
||||
await expect(page).toHaveScreenshot(shot);
|
||||
|
||||
await page.mouse.click(10, 700);
|
||||
await page.getByText("Create webhook").click();
|
||||
await expect(page.getByText("Payload URL")).toBeVisible();
|
||||
await page.mouse.move(10, 700);
|
||||
await expect(page).toHaveScreenshot(shot);
|
||||
});
|
||||
|
||||
test("Team settings image overlay", async ({ page }) => {
|
||||
const dashboardPage = new DashboardPage(page);
|
||||
await dashboardPage.setupDashboardFull();
|
||||
await dashboardPage.setupTeamSettings();
|
||||
await dashboardPage.goToSecondTeamSettingsSection();
|
||||
await expect(page.getByText("TEAM INFO")).toBeVisible();
|
||||
|
||||
await page.locator("[class*='team-icon']").hover();
|
||||
await expect(page.locator("[class*='team-icon']")).toHaveScreenshot(shot);
|
||||
});
|
||||
});
|
||||
|
||||
@ -52,33 +52,6 @@
|
||||
[cuerdas.core :as str]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(def ^:private arrow-icon
|
||||
(deprecated-icon/icon-xref :arrow (stl/css :arrow-icon)))
|
||||
|
||||
(def ^:private menu-icon
|
||||
(deprecated-icon/icon-xref :menu (stl/css :menu-icon)))
|
||||
|
||||
(def ^:private organization-menu-icon
|
||||
(deprecated-icon/icon-xref :menu (stl/css :organization-menu-icon)))
|
||||
|
||||
(def ^:private warning-icon
|
||||
(deprecated-icon/icon-xref :msg-warning (stl/css :warning-icon)))
|
||||
|
||||
(def ^:private success-icon
|
||||
(deprecated-icon/icon-xref :msg-success (stl/css :success-icon)))
|
||||
|
||||
(def ^:private image-icon
|
||||
(deprecated-icon/icon-xref :img (stl/css :image-icon)))
|
||||
|
||||
(def ^:private user-icon
|
||||
(deprecated-icon/icon-xref :user (stl/css :user-icon)))
|
||||
|
||||
(def ^:private document-icon
|
||||
(deprecated-icon/icon-xref :document (stl/css :document-icon)))
|
||||
|
||||
(def ^:private group-icon
|
||||
(deprecated-icon/icon-xref :group (stl/css :group-icon)))
|
||||
|
||||
(mf/defc header*
|
||||
{::mf/wrap [mf/memo]}
|
||||
[{:keys [section team profile]}]
|
||||
@ -323,8 +296,11 @@
|
||||
[:div {:class (stl/css :modal-restricted-header)}
|
||||
[:h2 {:class (stl/css :modal-restricted-title)}
|
||||
(tr "modals.invite-restricted-members.title")]
|
||||
[:button {:class (stl/css :modal-close-btn)
|
||||
:on-click modal/hide!} deprecated-icon/close]]
|
||||
[:> icon-button* {:variant "ghost"
|
||||
:tooltip-class (stl/css :modal-close-btn)
|
||||
:aria-label (tr "labels.close")
|
||||
:icon i/close
|
||||
:on-click modal/hide!}]]
|
||||
|
||||
[:div {:class (stl/css :modal-restricted-content)}
|
||||
[:p (tr "modals.invite-restricted-members.description")]
|
||||
@ -409,13 +385,14 @@
|
||||
on-hide (mf/use-fn #(reset! show? false))]
|
||||
[:*
|
||||
(if (and can-change-rol not-superior (not (and is-you is-owner)))
|
||||
[:div {:class (stl/css :rol-selector :has-priv)
|
||||
:role "combobox"
|
||||
:aria-labelledby "role-label-id"
|
||||
:on-click on-show}
|
||||
[:span {:class (stl/css :rol-label)
|
||||
:id "role-label-id"} role]
|
||||
arrow-icon]
|
||||
[:button {:class (stl/css :rol-selector :has-priv)
|
||||
:type "button"
|
||||
:aria-haspopup "listbox"
|
||||
:aria-expanded @show?
|
||||
:on-click on-show}
|
||||
[:span {:class (stl/css :rol-label)} role]
|
||||
[:> icon* {:icon-id i/arrow-down
|
||||
:class (stl/css :arrow-icon)}]]
|
||||
[:div {:class (stl/css :rol-selector)}
|
||||
[:span {:class (stl/css :rol-label)} role]])
|
||||
|
||||
@ -451,9 +428,12 @@
|
||||
|
||||
(when (or is-you? (and can-delete? (not (and is-owner? (not owner?)))))
|
||||
[:*
|
||||
[:button {:class (stl/css :menu-btn)
|
||||
:on-click on-show}
|
||||
menu-icon]
|
||||
[:> icon-button* {:variant "ghost"
|
||||
:aria-label (tr "labels.options")
|
||||
:aria-haspopup "menu"
|
||||
:aria-expanded @show?
|
||||
:icon i/menu
|
||||
:on-click on-show}]
|
||||
|
||||
[:& dropdown {:show @show? :on-close on-hide :dropdown-id (str "member-actions-" (:id member))}
|
||||
[:ul {:class (stl/css :actions-dropdown)}
|
||||
@ -691,10 +671,14 @@
|
||||
|
||||
[:*
|
||||
(if (and can-invite (= status :pending))
|
||||
[:div {:class (stl/css :rol-selector :has-priv)
|
||||
:on-click on-show}
|
||||
[:button {:class (stl/css :rol-selector :has-priv)
|
||||
:type "button"
|
||||
:aria-haspopup "listbox"
|
||||
:aria-expanded @show?
|
||||
:on-click on-show}
|
||||
[:span {:class (stl/css :rol-label)} label]
|
||||
arrow-icon]
|
||||
[:> icon* {:icon-id i/arrow-down
|
||||
:class (stl/css :arrow-icon)}]]
|
||||
[:div {:class (stl/css :rol-selector)}
|
||||
[:span {:class (stl/css :rol-label)} label]])
|
||||
|
||||
@ -872,8 +856,11 @@
|
||||
(tr "dashboard.invitation-modal.title.delete-invitations")
|
||||
(tr "dashboard.invitation-modal.title.resend-invitations"))]
|
||||
|
||||
[:button {:class (stl/css :modal-close-btn)
|
||||
:on-click modal/hide!} deprecated-icon/close]]
|
||||
[:> icon-button* {:variant "ghost"
|
||||
:tooltip-class (stl/css :modal-close-btn)
|
||||
:aria-label (tr "labels.close")
|
||||
:icon i/close
|
||||
:on-click modal/hide!}]]
|
||||
|
||||
[:div {:class (stl/css :modal-invitation-content)}
|
||||
[:p
|
||||
@ -1000,8 +987,11 @@
|
||||
[:h2 {:class (stl/css :modal-select-organization-title)}
|
||||
title]
|
||||
|
||||
[:button {:class (stl/css :modal-close-btn)
|
||||
:on-click modal/hide!} deprecated-icon/close]]
|
||||
[:> icon-button* {:variant "ghost"
|
||||
:tooltip-class (stl/css :modal-close-btn)
|
||||
:aria-label (tr "labels.close")
|
||||
:icon i/close
|
||||
:on-click modal/hide!}]]
|
||||
|
||||
(when text
|
||||
[:div {:class (stl/css :modal-content :modal-select-organization-text)} text])
|
||||
@ -1380,8 +1370,11 @@
|
||||
(tr "modals.edit-webhook.title")
|
||||
(tr "modals.create-webhook.title"))]
|
||||
|
||||
[:button {:class (stl/css :modal-close-btn)
|
||||
:on-click modal/hide!} deprecated-icon/close]]
|
||||
[:> icon-button* {:variant "ghost"
|
||||
:tooltip-class (stl/css :modal-close-btn)
|
||||
:aria-label (tr "labels.close")
|
||||
:icon i/close
|
||||
:on-click modal/hide!}]]
|
||||
|
||||
[:div {:class (stl/css :modal-content)}
|
||||
[:div {:class (stl/css :fields-row)}
|
||||
@ -1422,8 +1415,10 @@
|
||||
(tr "labels.webhooks")]
|
||||
[:> i18n/tr-html* {:class (stl/css :hero-desc)
|
||||
:content (tr "dashboard.webhooks.description")}]
|
||||
[:button {:class (stl/css :hero-btn)
|
||||
:on-click #(st/emit! (modal/show :webhook {}))}
|
||||
[:> button* {:variant "primary"
|
||||
:type "button"
|
||||
:class (stl/css :hero-btn)
|
||||
:on-click #(st/emit! (modal/show :webhook {}))}
|
||||
(tr "dashboard.webhooks.create")]])
|
||||
|
||||
(mf/defc webhook-actions*
|
||||
@ -1434,9 +1429,12 @@
|
||||
on-hide (mf/use-fn #(reset! show? false))]
|
||||
(if can-edit
|
||||
[:*
|
||||
[:button {:class (stl/css :menu-btn)
|
||||
:on-click on-show}
|
||||
menu-icon]
|
||||
[:> icon-button* {:variant "ghost"
|
||||
:aria-label (tr "labels.options")
|
||||
:aria-haspopup "menu"
|
||||
:aria-expanded @show?
|
||||
:icon i/menu
|
||||
:on-click on-show}]
|
||||
[:& dropdown {:show @show? :on-close on-hide :dropdown-id "webhook-actions"}
|
||||
[:ul {:class (stl/css :webhook-actions-dropdown)}
|
||||
[:li {:on-click on-edit
|
||||
@ -1502,8 +1500,10 @@
|
||||
[:div {:class (stl/css :table-field :last-delivery)
|
||||
:title last-delivery-text}
|
||||
(if (nil? error-code)
|
||||
success-icon
|
||||
warning-icon)]
|
||||
[:> icon* {:icon-id i/msg-success
|
||||
:class (stl/css :success-icon)}]
|
||||
[:> icon* {:icon-id i/msg-warning
|
||||
:class (stl/css :warning-icon)}])]
|
||||
[:div {:class (stl/css :table-field :uri)}
|
||||
[:div (dm/str (:uri webhook))]]
|
||||
[:div {:class (stl/css :table-field :active)}
|
||||
@ -1657,7 +1657,9 @@
|
||||
(when can-edit
|
||||
[:button {:class (stl/css :update-overlay)
|
||||
:on-click on-image-click}
|
||||
image-icon])
|
||||
[:> icon* {:icon-id i/img
|
||||
:size "l"
|
||||
:class (stl/css :image-icon)}]])
|
||||
[:img {:class (stl/css :team-image)
|
||||
:src (cfg/resolve-team-photo-url team)}]
|
||||
(when can-edit
|
||||
@ -1688,7 +1690,8 @@
|
||||
:type "button"
|
||||
:class (stl/css-case :organization-options-btn (not show-organization-options-menu?) :organization-options-btn-open show-organization-options-menu?)
|
||||
:on-click on-show-options-click}
|
||||
organization-menu-icon
|
||||
[:> icon* {:icon-id i/menu
|
||||
:class (stl/css :organization-menu-icon)}]
|
||||
|
||||
[:& dropdown {:show show-organization-options-menu? :on-close close-organization-options-menu :dropdown-id "organization-options"}
|
||||
[:ul {:class (stl/css :organization-dropdown)
|
||||
@ -1720,7 +1723,8 @@
|
||||
(str (:name owner) " (" (tr "labels.owner") ")")]]
|
||||
|
||||
[:div {:class (stl/css :block-content)}
|
||||
user-icon
|
||||
[:> icon* {:icon-id i/user
|
||||
:class (stl/css :user-icon)}]
|
||||
[:span {:class (stl/css :block-text)}
|
||||
(tr "dashboard.num-of-members" (count members))]]]
|
||||
|
||||
@ -1729,12 +1733,14 @@
|
||||
(tr "dashboard.team-projects")]
|
||||
|
||||
[:div {:class (stl/css :block-content)}
|
||||
group-icon
|
||||
[:> icon* {:icon-id i/group
|
||||
:class (stl/css :group-icon)}]
|
||||
[:span {:class (stl/css :block-text)}
|
||||
(tr "labels.num-of-projects" (i18n/c (dec (:projects stats))))]]
|
||||
|
||||
[:div {:class (stl/css :block-content)}
|
||||
document-icon
|
||||
[:> icon* {:icon-id i/document
|
||||
:class (stl/css :document-icon)}]
|
||||
[:span {:class (stl/css :block-text)}
|
||||
(tr "labels.num-of-files" (i18n/c (:files stats)))]]]
|
||||
|
||||
|
||||
@ -4,10 +4,13 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS SUBSIDIARY SL
|
||||
|
||||
// refactor/ stays for the component-family placeholders: %input-checkbox
|
||||
// and %checkbox-icon (checkboxes, #12380) and %modal-* (modals). The shared
|
||||
// dashboard header (common-dashboard) moves in its own change.
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "common/refactor/common-dashboard";
|
||||
@use "ds/_utils.scss" as *;
|
||||
@use "ds/typography.scss" as t;
|
||||
@use "ds/typography.scss" as *;
|
||||
@use "ds/_sizes.scss" as *;
|
||||
@use "ds/_borders.scss" as *;
|
||||
@use "ds/mixins.scss" as *;
|
||||
@ -44,7 +47,7 @@
|
||||
}
|
||||
|
||||
.block-label {
|
||||
@include t.use-typography("headline-small");
|
||||
@include use-typography("headline-small");
|
||||
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
@ -75,11 +78,9 @@
|
||||
align-items: center;
|
||||
block-size: $sz-16;
|
||||
inline-size: $sz-16;
|
||||
color: transparent;
|
||||
fill: none;
|
||||
stroke-width: $b-1;
|
||||
margin: 0 auto;
|
||||
stroke: var(--color-foreground-secondary);
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
.team-icon {
|
||||
@ -98,8 +99,8 @@
|
||||
|
||||
.team-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
border-radius: 50%;
|
||||
inline-size: $sz-120;
|
||||
block-size: $sz-120;
|
||||
@ -114,8 +115,8 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
block-size: 100%;
|
||||
inline-size: 100%;
|
||||
z-index: var(--z-index-set);
|
||||
@ -124,17 +125,8 @@
|
||||
}
|
||||
|
||||
.image-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
block-size: $sz-16;
|
||||
inline-size: $sz-16;
|
||||
color: transparent;
|
||||
fill: none;
|
||||
stroke-width: $b-1;
|
||||
min-inline-size: $sz-24;
|
||||
min-block-size: $sz-24;
|
||||
stroke: var(--color-foreground-primary);
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
// TEAM MEMBERS PAGE
|
||||
@ -150,11 +142,6 @@
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.dashboard-team-members.dashboard-top-cta {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.team-members {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
@ -164,7 +151,7 @@
|
||||
}
|
||||
|
||||
.table-header {
|
||||
@include t.use-typography("headline-small");
|
||||
@include use-typography("headline-small");
|
||||
|
||||
display: grid;
|
||||
align-items: center;
|
||||
@ -184,7 +171,7 @@
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
max-inline-size: $sz-1000;
|
||||
margin-top: var(--sp-l);
|
||||
margin-block-start: var(--sp-l);
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
@ -250,23 +237,23 @@
|
||||
.member-name,
|
||||
.member-email {
|
||||
@include text-ellipsis;
|
||||
@include t.use-typography("body-large");
|
||||
@include use-typography("body-large");
|
||||
}
|
||||
|
||||
.member-email {
|
||||
@include t.use-typography("body-small");
|
||||
@include use-typography("body-small");
|
||||
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
.you {
|
||||
color: var(--color-foreground-secondary);
|
||||
margin-left: px2rem(6);
|
||||
margin-inline-start: px2rem(6);
|
||||
}
|
||||
|
||||
// ROL INFO
|
||||
.rol-selector {
|
||||
@include t.use-typography("body-medium");
|
||||
@include use-typography("body-medium");
|
||||
|
||||
position: relative;
|
||||
display: grid;
|
||||
@ -282,6 +269,9 @@
|
||||
}
|
||||
|
||||
.has-priv {
|
||||
border: none;
|
||||
color: inherit;
|
||||
text-align: start;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -302,13 +292,13 @@
|
||||
background-color: var(--color-background-tertiary);
|
||||
border: $b-2 solid var(--color-background-quaternary);
|
||||
margin: 0;
|
||||
bottom: calc(-1 * px2rem(76));
|
||||
inset-block-end: calc(-1 * px2rem(76));
|
||||
inline-size: fit-content;
|
||||
min-inline-size: $sz-160;
|
||||
}
|
||||
|
||||
.rol-dropdown-item {
|
||||
@include t.use-typography("body-small");
|
||||
@include use-typography("body-small");
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -325,24 +315,6 @@
|
||||
}
|
||||
|
||||
// MEMBER ACTIONS
|
||||
.menu-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
block-size: $sz-16;
|
||||
inline-size: $sz-16;
|
||||
color: transparent;
|
||||
fill: none;
|
||||
stroke-width: $b-1;
|
||||
stroke: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.menu-btn {
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.input-checkbox {
|
||||
// TODO: remove this extended class.
|
||||
@extend %input-checkbox;
|
||||
@ -363,15 +335,17 @@
|
||||
background-color: var(--color-background-tertiary);
|
||||
border: $b-2 solid var(--color-background-quaternary);
|
||||
margin: 0;
|
||||
bottom: calc(-1 * var(--sp-xxxl));
|
||||
right: 0;
|
||||
left: unset;
|
||||
|
||||
// Opens below the button, whatever the menu and button heights.
|
||||
inset-block-start: calc(100% + var(--sp-xs));
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: unset;
|
||||
inline-size: fit-content;
|
||||
min-inline-size: $sz-160;
|
||||
}
|
||||
|
||||
.action-dropdown-item {
|
||||
@include t.use-typography("body-small");
|
||||
@include use-typography("body-small");
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -409,21 +383,17 @@
|
||||
}
|
||||
|
||||
.invitations-actions {
|
||||
@include t.use-typography("body-medium");
|
||||
@include use-typography("body-medium");
|
||||
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
gap: var(--sp-l);
|
||||
color: var(--title-foreground-color);
|
||||
color: var(--color-foreground-secondary);
|
||||
block-size: $sz-40;
|
||||
margin-block-end: px2rem(36);
|
||||
}
|
||||
|
||||
.error-notification {
|
||||
margin-block-end: var(--sp-xxl);
|
||||
}
|
||||
|
||||
.table-row-invitations {
|
||||
grid-template-columns: 43% 1fr $sz-88 var(--sp-xxl);
|
||||
align-items: center;
|
||||
@ -431,7 +401,7 @@
|
||||
|
||||
.empty-invitations {
|
||||
inline-size: 100%;
|
||||
margin-top: var(--sp-l);
|
||||
margin-block-start: var(--sp-l);
|
||||
border: $b-1 solid var(--color-background-quaternary);
|
||||
border-radius: $br-8;
|
||||
color: var(--color-foreground-secondary);
|
||||
@ -439,11 +409,6 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-invitations-buttons {
|
||||
inline-size: fit-content;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.no-permission-text {
|
||||
max-inline-size: $sz-512;
|
||||
margin: auto;
|
||||
@ -468,18 +433,13 @@
|
||||
|
||||
.field-email {
|
||||
@include text-ellipsis;
|
||||
@include t.use-typography("body-large");
|
||||
@include use-typography("body-large");
|
||||
|
||||
display: flex;
|
||||
gap: var(--sp-l);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.invitations-dropdown {
|
||||
bottom: calc(-1 * px2rem(112));
|
||||
right: calc(-1 * var(--sp-xl));
|
||||
}
|
||||
|
||||
// WEBHOOKS SECTION
|
||||
.dashboard-team-webhooks {
|
||||
display: grid;
|
||||
@ -515,7 +475,7 @@
|
||||
}
|
||||
|
||||
.webhooks-hero {
|
||||
@include t.use-typography("body-medium");
|
||||
@include use-typography("body-medium");
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
@ -527,24 +487,20 @@
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
@include t.use-typography("title-large");
|
||||
@include use-typography("title-large");
|
||||
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.hero-desc {
|
||||
@include t.use-typography("body-large");
|
||||
@include use-typography("body-large");
|
||||
|
||||
color: var(--color-foreground-secondary);
|
||||
margin-bottom: 0;
|
||||
margin-block-end: 0;
|
||||
max-inline-size: $sz-512;
|
||||
}
|
||||
|
||||
.hero-btn {
|
||||
// TODO: Remove this extended class using a DS component
|
||||
@extend %button-primary;
|
||||
|
||||
block-size: $sz-32;
|
||||
max-inline-size: $sz-512;
|
||||
}
|
||||
|
||||
@ -584,14 +540,16 @@
|
||||
background-color: var(--color-background-tertiary);
|
||||
border: $b-2 solid var(--color-background-quaternary);
|
||||
margin: 0;
|
||||
right: calc(-1 * var(--sp-l));
|
||||
bottom: calc(-1 * $sz-40);
|
||||
inset-inline-end: calc(-1 * var(--sp-l));
|
||||
|
||||
// Opens below the button, whatever the menu and button heights.
|
||||
inset-block-start: calc(100% + var(--sp-xs));
|
||||
inline-size: fit-content;
|
||||
min-inline-size: $sz-160;
|
||||
}
|
||||
|
||||
.webhook-dropdown-item {
|
||||
@include t.use-typography("body-small");
|
||||
@include use-typography("body-small");
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -613,10 +571,8 @@
|
||||
align-items: center;
|
||||
block-size: $sz-16;
|
||||
inline-size: $sz-16;
|
||||
color: transparent;
|
||||
fill: none;
|
||||
stroke-width: $b-1;
|
||||
stroke: var(--color-accent-success);
|
||||
color: var(--color-accent-success);
|
||||
}
|
||||
|
||||
.warning-icon {
|
||||
@ -625,10 +581,8 @@
|
||||
align-items: center;
|
||||
block-size: $sz-16;
|
||||
inline-size: $sz-16;
|
||||
color: transparent;
|
||||
fill: none;
|
||||
stroke-width: $b-1;
|
||||
stroke: var(--color-accent-warning);
|
||||
color: var(--color-accent-warning);
|
||||
}
|
||||
|
||||
// INVITE MEMBERS MODAL
|
||||
@ -641,22 +595,22 @@
|
||||
max-block-size: $sz-512;
|
||||
box-shadow: var(--el-shadow-dark);
|
||||
position: fixed;
|
||||
top: px2rem(72);
|
||||
right: var(--sp-m);
|
||||
left: unset;
|
||||
inset-block-start: px2rem(72);
|
||||
inset-inline-end: var(--sp-m);
|
||||
inset-inline-start: unset;
|
||||
inline-size: $sz-400;
|
||||
padding: var(--sp-xxxl);
|
||||
background-color: var(--color-background-primary);
|
||||
z-index: var(--z-index-set);
|
||||
|
||||
&.hero {
|
||||
top: px2rem(216);
|
||||
right: var(--sp-xxxl);
|
||||
inset-block-start: px2rem(216);
|
||||
inset-inline-end: var(--sp-xxxl);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-team-container-workspace {
|
||||
top: $sz-40;
|
||||
inset-block-start: $sz-40;
|
||||
z-index: var(--z-index-set);
|
||||
}
|
||||
|
||||
@ -687,11 +641,8 @@
|
||||
align-items: center;
|
||||
block-size: $sz-16;
|
||||
inline-size: $sz-16;
|
||||
color: transparent;
|
||||
fill: none;
|
||||
stroke-width: $b-1;
|
||||
stroke: var(--color-foreground-secondary);
|
||||
transform: rotate(90deg);
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
@ -711,12 +662,12 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-block-start: 0;
|
||||
block-size: 100%;
|
||||
inline-size: 100%;
|
||||
z-index: var(--z-index-set);
|
||||
background-color: var(--overlay-color);
|
||||
background-color: var(--color-overlay-default);
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
@ -732,27 +683,29 @@
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
margin-bottom: var(--sp-xxl);
|
||||
margin-block-end: var(--sp-xxl);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include t.use-typography("title-small");
|
||||
@include use-typography("title-small");
|
||||
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
// Tooltip wrapper of the modal close buttons: it places them in the corner.
|
||||
.modal-close-btn {
|
||||
// TODO remove extended class creating a modal component
|
||||
@extend %modal-close-btn-base;
|
||||
position: absolute;
|
||||
inset-block-start: var(--sp-s);
|
||||
inset-inline-end: var(--sp-xs);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include t.use-typography("body-small");
|
||||
@include use-typography("body-small");
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-xxl);
|
||||
margin-bottom: var(--sp-xxl);
|
||||
margin-block-end: var(--sp-xxl);
|
||||
}
|
||||
|
||||
.fields-row {
|
||||
@ -762,7 +715,7 @@
|
||||
}
|
||||
|
||||
.select-title {
|
||||
@include t.use-typography("body-small");
|
||||
@include use-typography("body-small");
|
||||
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
@ -790,7 +743,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@include t.use-typography("body-large");
|
||||
@include use-typography("body-large");
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
@ -815,7 +768,7 @@
|
||||
|
||||
span {
|
||||
@extend %checkbox-icon;
|
||||
@include t.use-typography("body-small");
|
||||
@include use-typography("body-small");
|
||||
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
@ -823,7 +776,7 @@
|
||||
input {
|
||||
margin: 0;
|
||||
|
||||
@include t.use-typography("body-small");
|
||||
@include use-typography("body-small");
|
||||
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
@ -842,13 +795,13 @@
|
||||
}
|
||||
|
||||
.modal-invitation-title {
|
||||
@include t.use-typography("headline-large");
|
||||
@include use-typography("headline-large");
|
||||
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.modal-invitation-content {
|
||||
@include t.use-typography("body-medium");
|
||||
@include use-typography("body-medium");
|
||||
|
||||
overflow: auto;
|
||||
color: var(--color-foreground-secondary);
|
||||
@ -877,13 +830,13 @@
|
||||
}
|
||||
|
||||
.modal-restricted-title {
|
||||
@include t.use-typography("headline-large");
|
||||
@include use-typography("headline-large");
|
||||
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.modal-restricted-content {
|
||||
@include t.use-typography("body-medium");
|
||||
@include use-typography("body-medium");
|
||||
|
||||
margin-block-end: 0;
|
||||
}
|
||||
@ -955,13 +908,13 @@
|
||||
}
|
||||
|
||||
.modal-select-organization-content {
|
||||
@include t.use-typography("body-medium");
|
||||
@include use-typography("body-medium");
|
||||
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
.modal-select-organization-info {
|
||||
@include t.use-typography("body-medium");
|
||||
@include use-typography("body-medium");
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -971,13 +924,13 @@
|
||||
}
|
||||
|
||||
.modal-select-organization-title {
|
||||
@include t.use-typography("headline-large");
|
||||
@include use-typography("headline-large");
|
||||
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.modal-select-organization-text {
|
||||
@include t.use-typography("body-medium");
|
||||
@include use-typography("body-medium");
|
||||
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
@ -1023,10 +976,8 @@
|
||||
align-items: center;
|
||||
block-size: $sz-16;
|
||||
inline-size: $sz-16;
|
||||
color: transparent;
|
||||
fill: none;
|
||||
stroke-width: $b-1;
|
||||
stroke: var(--stroke-color);
|
||||
color: var(--stroke-color);
|
||||
}
|
||||
|
||||
.organization-dropdown {
|
||||
@ -1042,13 +993,13 @@
|
||||
background-color: var(--color-background-tertiary);
|
||||
border: $b-2 solid var(--color-background-quaternary);
|
||||
margin: 0;
|
||||
top: var(--sp-xxxl);
|
||||
inset-block-start: var(--sp-xxxl);
|
||||
inline-size: fit-content;
|
||||
min-inline-size: $sz-160;
|
||||
}
|
||||
|
||||
.organization-dropdown-item {
|
||||
@include t.use-typography("body-small");
|
||||
@include use-typography("body-small");
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -1071,5 +1022,5 @@
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--modal-link-foreground-color);
|
||||
color: var(--color-accent-primary);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user