From f433ff2b5311a887036bd4ae038d5a5fdc2aab3f Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 10 May 2024 10:43:00 -0400 Subject: [PATCH] update with trunk --- client/me/style.scss | 2 +- .../list/bulk-all-domains.tsx | 231 +++++++++--------- client/sites-dashboard-v2/controller.tsx | 1 - 3 files changed, 116 insertions(+), 118 deletions(-) diff --git a/client/me/style.scss b/client/me/style.scss index a9b227e15bfd35..89af4e1803dcdd 100644 --- a/client/me/style.scss +++ b/client/me/style.scss @@ -49,7 +49,7 @@ body.is-section-me { .layout__primary { background: var(--color-surface); border-radius: 8px; /* stylelint-disable-line scales/radii */ - box-shadow: none; + box-shadow: 0 0 17.4px 0 rgba(0, 0, 0, 0.05); @media only screen and (min-width: 601px) { height: calc(100vh - var(--masterbar-height) - 50px); } diff --git a/client/my-sites/domains/domain-management/list/bulk-all-domains.tsx b/client/my-sites/domains/domain-management/list/bulk-all-domains.tsx index c18f92c7b1ab7f..0b48ba2e742f39 100644 --- a/client/my-sites/domains/domain-management/list/bulk-all-domains.tsx +++ b/client/my-sites/domains/domain-management/list/bulk-all-domains.tsx @@ -40,153 +40,152 @@ export default function BulkAllDomains( props: BulkAllDomainsProps ) { const translate = useTranslate(); const isInSupportSession = Boolean( useSelector( isSupportSession ) ); const sitesDashboardGlobalStyles = css` - html { - overflow-y: auto; + html { + overflow-y: auto; + } + body.is-section-domains { + background: var( --studio-gray-0 ); + + &.rtl .layout__content { + padding: 16px calc( var( --sidebar-width-max ) ) 16px 16px; } - body.is-section-domains { - background: var( --studio-gray-0 ); - &.rtl .layout__content { - padding: 16px calc( var( --sidebar-width-max ) ) 16px 16px; + .layout__content { + // Add border around everything + overflow: hidden; + min-height: 100vh; + padding: 16px 16px 16px calc( var( --sidebar-width-max ) ); + + .layout_primary > main { + padding-bottom: 0; } + } - .layout__content { - // Add border around everything - overflow: hidden; - min-height: 100vh; - padding: 16px 16px 16px calc( var( --sidebar-width-max ) ); + .layout__secondary .global-sidebar { + border: none; + } - .layout_primary > main { - padding-bottom: 0; - } - } + .has-no-masterbar .layout__content { + padding-top: 16px !important; + } - .layout__secondary .global-sidebar { - border: none; - } + header.navigation-header { + padding-top: 24px; - .has-no-masterbar .layout__content { - padding-top: 16px !important; + .formatted-header { + max-height: 41px; } - header.navigation-header { - padding-top: 24px; - - .formatted-header { - max-height: 41px; - } - - .navigation-header__main { - align-items: center; - } + .navigation-header__main { + align-items: center; + } - .formatted-header__title { - color: var( --studio-gray-80, #2c3338 ); - font-family: 'SF Pro Display', sans-serif; - font-size: 1.5rem; - font-style: normal; - font-weight: 500; - line-height: 1.2; - } - .domain-header__buttons .button { - border-radius: 4px; - white-space: nowrap; - margin-left: 0; - &:not( .is-primary ) { - margin-inline-end: 1rem; - } + .formatted-header__title { + color: var( --studio-gray-80, #2c3338 ); + font-family: 'SF Pro Display', sans-serif; + font-size: 1.5rem; + font-style: normal; + font-weight: 500; + line-height: 1.2; + } + .domain-header__buttons .button { + border-radius: 4px; + white-space: nowrap; + margin-left: 0; + &:not( .is-primary ) { + margin-inline-end: 1rem; } } + } - .search-component.domains-table-filter__search.is-open.has-open-icon { - border-radius: 4px; - height: 44px; + .search-component.domains-table-filter__search.is-open.has-open-icon { + border-radius: 4px; + height: 44px; + } + + .domains-table { + margin-top: 48px; + .domains-table-toolbar { + margin-inline: 64px; + } + table { + overflow-y: auto; + max-height: calc( 100vh - 235px ); + padding-inline: 64px; + margin-bottom: 0; } + .domains-table-header { + position: sticky; + top: 0; + z-index: 2; + } + } - .domains-table { - margin-top: 48px; - .domains-table-toolbar { - margin-inline: 64px; - } - table { - overflow-y: auto; - max-height: calc( 100vh - 235px ); + @media only screen and ( min-width: 782px ) { + div.layout.is-global-sidebar-visible { + header.navigation-header { + padding-top: 24px; padding-inline: 64px; - margin-bottom: 0; + border-block-end: 1px solid var( --studio-gray-0 ); } - .domains-table-header { - position: sticky; - top: 0; - z-index: 2; + .layout__primary > main { + background: var( --color-surface ); + border-radius: 8px; + box-shadow: 0 0 17.4px 0 rgba( 0, 0, 0, 0.05 ); + height: calc( 100vh - 32px ); + overflow: hidden; + max-width: none; } } + } - @media only screen and ( min-width: 782px ) { - div.layout.is-global-sidebar-visible { - header.navigation-header { - padding-top: 24px; - padding-inline: 64px; - border-block-end: 1px solid var( --studio-gray-0 ); - } - .layout__primary > main { - background: var( --color-surface ); - border-radius: 8px; - box-shadow: none - height: calc( 100vh - 32px ); - overflow: hidden; - max-width: none; - } + @media only screen and ( max-width: 600px ) { + .navigation-header__main { + justify-content: normal; + .formatted-header { + flex: none; } } + .domains-table { + padding: 0 8px; + } + .domains-table-toolbar { + margin-inline: 0 !important; + } + table { + padding-inline: 0 !important; + } + } - @media only screen and ( max-width: 600px ) { - .navigation-header__main { - justify-content: normal; - .formatted-header { - flex: none; - } - } - .domains-table { - padding: 0 8px; + @media only screen and ( max-width: 781px ) { + div.layout.is-global-sidebar-visible { + .layout__primary { + overflow-x: auto; } + } + .layout__primary > main { + background: var( --color-surface ); + margin: 0; + border-radius: 8px; + height: calc( 100vh - 32px ); + } + header.navigation-header { + padding-inline: 16px; + padding-bottom: 0; + } + } + @media only screen and ( min-width: 601px ) and ( max-width: 781px ) { + .domains-table { .domains-table-toolbar { - margin-inline: 0 !important; + margin-inline: 16px; } table { - padding-inline: 0 !important; - } - } - - @media only screen and ( max-width: 781px ) { - div.layout.is-global-sidebar-visible { - .layout__primary { - overflow-x: auto; - } - } - .layout__primary > main { - background: var( --color-surface ); - margin: 0; - border-radius: 8px; - height: calc( 100vh - 32px ); - } - header.navigation-header { padding-inline: 16px; - padding-bottom: 0; } } - @media only screen and ( min-width: 601px ) and ( max-width: 781px ) { - .domains-table { - .domains-table-toolbar { - margin-inline: 16px; - } - table { - padding-inline: 16px; - } - } - } - } - `; + } + `; const item = { label: translate( 'Domains' ), helpBubble: translate( diff --git a/client/sites-dashboard-v2/controller.tsx b/client/sites-dashboard-v2/controller.tsx index a603054013e1de..5bf62c01c0a957 100644 --- a/client/sites-dashboard-v2/controller.tsx +++ b/client/sites-dashboard-v2/controller.tsx @@ -87,7 +87,6 @@ export function sitesDashboard( context: Context, next: () => void ) { .main.sites-dashboard.sites-dashboard__layout:has( .dataviews-pagination ) { padding-bottom: 0; - box-shadow: none; } // Update body margin to account for the sidebar width