diff --git a/client/sites/components/panel/index.tsx b/client/components/panel/index.tsx similarity index 86% rename from client/sites/components/panel/index.tsx rename to client/components/panel/index.tsx index a2205edd1748e6..07420afc409e32 100644 --- a/client/sites/components/panel/index.tsx +++ b/client/components/panel/index.tsx @@ -6,12 +6,22 @@ import './style.scss'; export function Panel( { className, + wide, children, }: { className?: string; + wide?: boolean; children: React.ReactNode; } ) { - return
{ children }
; + return ( +
+ { children } +
+ ); } export function PanelSection( { diff --git a/client/sites/components/panel/style.scss b/client/components/panel/style.scss similarity index 65% rename from client/sites/components/panel/style.scss rename to client/components/panel/style.scss index 92944382239c9d..f087ab1aa40cb0 100644 --- a/client/sites/components/panel/style.scss +++ b/client/components/panel/style.scss @@ -1,6 +1,7 @@ .panel { display: flex; flex-direction: column; + max-width: 720px; gap: 16px; font-size: 0.875rem; align-items: flex-start; @@ -9,12 +10,18 @@ margin: 0; } + &--wide.main { + max-width: 100%; + } + .header-cake__back { padding: 0; } - .upsell-nudge { - width: 100%; + // TODO: remove after the untangling/hosting-menu flag is enabled + #primary > & { + margin-left: auto; + margin-right: auto; } } @@ -50,7 +57,18 @@ font-size: rem(14px) !important; } + > *:last-child { + margin-bottom: 0; + } + + .foldable-card { + margin-left: -22px; + margin-right: -22px; + } + .upsell-nudge { - margin: 0 -22px -22px -22px !important; + margin-bottom: -22px; + margin-left: -22px; + margin-right: -22px; } } diff --git a/client/components/site-preview-links/index.tsx b/client/components/site-preview-links/index.tsx index 0725ad1d1d9f41..6387c9006453b2 100644 --- a/client/components/site-preview-links/index.tsx +++ b/client/components/site-preview-links/index.tsx @@ -113,7 +113,7 @@ export default function SitePreviewLinks( { } return ( -
+ <>

{ description }

{ isFirstLoading && } { ! isFirstLoading && ( @@ -135,6 +135,6 @@ export default function SitePreviewLinks( { ) ) } ) } -
+ ); } diff --git a/client/hosting/server-settings/main.tsx b/client/hosting/server-settings/main.tsx index f5ffa5bd830175..a5886609efbd73 100644 --- a/client/hosting/server-settings/main.tsx +++ b/client/hosting/server-settings/main.tsx @@ -13,11 +13,11 @@ import QueryJetpackModules from 'calypso/components/data/query-jetpack-modules'; import QueryReaderTeams from 'calypso/components/data/query-reader-teams'; import QuerySites from 'calypso/components/data/query-sites'; import FeatureExample from 'calypso/components/feature-example'; -import Main from 'calypso/components/main'; import { MasonryGrid } from 'calypso/components/masonry-grid'; import NavigationHeader from 'calypso/components/navigation-header'; import Notice from 'calypso/components/notice'; import NoticeAction from 'calypso/components/notice/notice-action'; +import { Panel } from 'calypso/components/panel'; import { ScrollToAnchorOnMount } from 'calypso/components/scroll-to-anchor-on-mount'; import { HostingUpsellNudge } from 'calypso/hosting/server-settings/components/hosting-upsell-nudge'; import PhpMyAdminCard from 'calypso/hosting/server-settings/components/phpmyadmin-card/card'; @@ -296,7 +296,7 @@ const ServerSettings = ( { fetchUpdatedData }: ServerSettingsProps ) => { const banner = shouldShowUpgradeBanner ? getUpgradeBanner() : getAtomicActivationNotice(); return ( -
+ { ! isLoadingSftpData && ( { /> ) } -
+ ); }; diff --git a/client/hosting/server-settings/style.scss b/client/hosting/server-settings/style.scss index 7be0b3c9978ad3..6993bcedad66da 100644 --- a/client/hosting/server-settings/style.scss +++ b/client/hosting/server-settings/style.scss @@ -13,7 +13,7 @@ .navigation-header { padding: 0; - margin-bottom: 32px; + margin-bottom: 16px; } .card > .card-icon, diff --git a/client/my-sites/site-settings/analytics/form-cloudflare-analytics.js b/client/my-sites/site-settings/analytics/form-cloudflare-analytics.js index 3f237ae377f899..b55fee72ee41b6 100644 --- a/client/my-sites/site-settings/analytics/form-cloudflare-analytics.js +++ b/client/my-sites/site-settings/analytics/form-cloudflare-analytics.js @@ -19,7 +19,7 @@ import cloudflareIllustration from 'calypso/assets/images/illustrations/cloudfla import UpsellNudge from 'calypso/blocks/upsell-nudge'; import FormFieldset from 'calypso/components/forms/form-fieldset'; import FormTextInput from 'calypso/components/forms/form-text-input'; -import { PanelHeading, PanelSection } from 'calypso/sites/components/panel'; +import { PanelHeading, PanelSection } from 'calypso/components/panel'; import { recordTracksEvent } from 'calypso/state/analytics/actions'; import getCurrentRouteParameterized from 'calypso/state/selectors/get-current-route-parameterized'; import siteHasFeature from 'calypso/state/selectors/site-has-feature'; diff --git a/client/my-sites/site-settings/analytics/form-google-analytics-jetpack.jsx b/client/my-sites/site-settings/analytics/form-google-analytics-jetpack.jsx index bf920b02b6e5ec..f6be53ad7989a6 100644 --- a/client/my-sites/site-settings/analytics/form-google-analytics-jetpack.jsx +++ b/client/my-sites/site-settings/analytics/form-google-analytics-jetpack.jsx @@ -19,10 +19,10 @@ import FormFieldset from 'calypso/components/forms/form-fieldset'; import FormSettingExplanation from 'calypso/components/forms/form-setting-explanation'; import FormTextInput from 'calypso/components/forms/form-text-input'; import InlineSupportLink from 'calypso/components/inline-support-link'; +import { PanelHeading, PanelSection } from 'calypso/components/panel'; import SupportInfo from 'calypso/components/support-info'; import { PRODUCT_UPSELLS_BY_FEATURE } from 'calypso/my-sites/plans/jetpack-plans/constants'; import JetpackModuleToggle from 'calypso/my-sites/site-settings/jetpack-module-toggle'; -import { PanelHeading, PanelSection } from 'calypso/sites/components/panel'; import { useDispatch } from 'calypso/state'; import { recordTracksEvent } from 'calypso/state/analytics/actions'; import { requestSiteSettings } from 'calypso/state/site-settings/actions'; diff --git a/client/my-sites/site-settings/analytics/form-google-analytics-simple.jsx b/client/my-sites/site-settings/analytics/form-google-analytics-simple.jsx index 7f4a1e99faa8ea..6c09172c7dc869 100644 --- a/client/my-sites/site-settings/analytics/form-google-analytics-simple.jsx +++ b/client/my-sites/site-settings/analytics/form-google-analytics-simple.jsx @@ -18,7 +18,7 @@ import UpsellNudge from 'calypso/blocks/upsell-nudge'; import FormFieldset from 'calypso/components/forms/form-fieldset'; import FormTextInput from 'calypso/components/forms/form-text-input'; import InlineSupportLink from 'calypso/components/inline-support-link'; -import { PanelHeading, PanelSection } from 'calypso/sites/components/panel'; +import { PanelHeading, PanelSection } from 'calypso/components/panel'; import './style.scss'; diff --git a/client/my-sites/site-settings/jetpack-site-stats.jsx b/client/my-sites/site-settings/jetpack-site-stats.jsx index 50158e6cfa712a..3d9aff73d3eed7 100644 --- a/client/my-sites/site-settings/jetpack-site-stats.jsx +++ b/client/my-sites/site-settings/jetpack-site-stats.jsx @@ -9,11 +9,11 @@ import QueryJetpackConnection from 'calypso/components/data/query-jetpack-connec import FormFieldset from 'calypso/components/forms/form-fieldset'; import FormLegend from 'calypso/components/forms/form-legend'; import FormSettingExplanation from 'calypso/components/forms/form-setting-explanation'; +import { PanelHeading, PanelSection } from 'calypso/components/panel'; import SupportInfo from 'calypso/components/support-info'; import withSiteRoles from 'calypso/data/site-roles/with-site-roles'; import { getStatsPathForTab } from 'calypso/lib/route'; import JetpackModuleToggle from 'calypso/my-sites/site-settings/jetpack-module-toggle'; -import { PanelHeading, PanelSection } from 'calypso/sites/components/panel'; import { recordTracksEvent } from 'calypso/state/analytics/actions'; import getCurrentRouteParameterized from 'calypso/state/selectors/get-current-route-parameterized'; import isJetpackModuleActive from 'calypso/state/selectors/is-jetpack-module-active'; diff --git a/client/my-sites/site-settings/seo-settings/form.jsx b/client/my-sites/site-settings/seo-settings/form.jsx index 30344746fbba72..60c8128642c4f4 100644 --- a/client/my-sites/site-settings/seo-settings/form.jsx +++ b/client/my-sites/site-settings/seo-settings/form.jsx @@ -21,6 +21,7 @@ import CountedTextarea from 'calypso/components/forms/counted-textarea'; import FormSettingExplanation from 'calypso/components/forms/form-setting-explanation'; import Notice from 'calypso/components/notice'; import NoticeAction from 'calypso/components/notice/notice-action'; +import { PanelHeading, PanelSection } from 'calypso/components/panel'; import MetaTitleEditor from 'calypso/components/seo/meta-title-editor'; import { toApi as seoTitleToApi } from 'calypso/components/seo/meta-title-editor/mappings'; import SupportInfo from 'calypso/components/support-info'; @@ -28,7 +29,6 @@ import WebPreview from 'calypso/components/web-preview'; import { protectForm } from 'calypso/lib/protect-form'; import { getFirstConflictingPlugin } from 'calypso/lib/seo'; import { PRODUCT_UPSELLS_BY_FEATURE } from 'calypso/my-sites/plans/jetpack-plans/constants'; -import { PanelHeading, PanelSection } from 'calypso/sites/components/panel'; import { recordTracksEvent } from 'calypso/state/analytics/actions'; import { errorNotice, removeNotice } from 'calypso/state/notices/actions'; import { getFilteredAndSortedPlugins } from 'calypso/state/plugins/installed/selectors-ts'; diff --git a/client/my-sites/site-settings/seo-settings/help.jsx b/client/my-sites/site-settings/seo-settings/help.jsx index 033bfee0228ced..2a1269c668247e 100644 --- a/client/my-sites/site-settings/seo-settings/help.jsx +++ b/client/my-sites/site-settings/seo-settings/help.jsx @@ -3,8 +3,8 @@ import { localizeUrl } from '@automattic/i18n-utils'; import { localize } from 'i18n-calypso'; import { get } from 'lodash'; import { connect } from 'react-redux'; +import { PanelHeading, PanelSection } from 'calypso/components/panel'; import JetpackModuleToggle from 'calypso/my-sites/site-settings/jetpack-module-toggle'; -import { PanelHeading, PanelSection } from 'calypso/sites/components/panel'; import getJetpackModules from 'calypso/state/selectors/get-jetpack-modules'; import siteHasFeature from 'calypso/state/selectors/site-has-feature'; import { isJetpackSite } from 'calypso/state/sites/selectors'; diff --git a/client/my-sites/site-settings/seo-settings/site-verification.jsx b/client/my-sites/site-settings/seo-settings/site-verification.jsx index 741981c6921ba2..571904da81af90 100644 --- a/client/my-sites/site-settings/seo-settings/site-verification.jsx +++ b/client/my-sites/site-settings/seo-settings/site-verification.jsx @@ -9,11 +9,11 @@ import ExternalLink from 'calypso/components/external-link'; import FormFieldset from 'calypso/components/forms/form-fieldset'; import FormInput from 'calypso/components/forms/form-text-input-with-affixes'; import InlineSupportLink from 'calypso/components/inline-support-link'; +import { PanelHeading, PanelSection } from 'calypso/components/panel'; import SupportInfo from 'calypso/components/support-info'; import { protectForm } from 'calypso/lib/protect-form'; import versionCompare from 'calypso/lib/version-compare'; import JetpackModuleToggle from 'calypso/my-sites/site-settings/jetpack-module-toggle'; -import { PanelHeading, PanelSection } from 'calypso/sites/components/panel'; import { recordTracksEvent } from 'calypso/state/analytics/actions'; import { errorNotice, removeNotice } from 'calypso/state/notices/actions'; import getCurrentRouteParameterized from 'calypso/state/selectors/get-current-route-parameterized'; diff --git a/client/my-sites/site-settings/seo-settings/style.scss b/client/my-sites/site-settings/seo-settings/style.scss index 7d6b4247f12514..b814059df5f105 100644 --- a/client/my-sites/site-settings/seo-settings/style.scss +++ b/client/my-sites/site-settings/seo-settings/style.scss @@ -1,5 +1,5 @@ .seo-settings__seo-upsell.upsell-nudge { - margin-top: -30px; + margin-top: -16px; margin-left: 1px; margin-right: 1px; margin-bottom: 16px; diff --git a/client/my-sites/site-settings/shortlinks.jsx b/client/my-sites/site-settings/shortlinks.jsx index ffe8940302cb94..2ec05496960cc5 100644 --- a/client/my-sites/site-settings/shortlinks.jsx +++ b/client/my-sites/site-settings/shortlinks.jsx @@ -3,9 +3,9 @@ import PropTypes from 'prop-types'; import { Component } from 'react'; import { connect } from 'react-redux'; import FormFieldset from 'calypso/components/forms/form-fieldset'; +import { PanelHeading, PanelSection } from 'calypso/components/panel'; import SupportInfo from 'calypso/components/support-info'; import JetpackModuleToggle from 'calypso/my-sites/site-settings/jetpack-module-toggle'; -import { PanelHeading, PanelSection } from 'calypso/sites/components/panel'; import isJetpackModuleActive from 'calypso/state/selectors/is-jetpack-module-active'; import isJetpackModuleUnavailableInDevelopmentMode from 'calypso/state/selectors/is-jetpack-module-unavailable-in-development-mode'; import isJetpackSiteInDevelopmentMode from 'calypso/state/selectors/is-jetpack-site-in-development-mode'; diff --git a/client/my-sites/site-settings/sitemaps.jsx b/client/my-sites/site-settings/sitemaps.jsx index 6896f8754999aa..932cb16c825c8d 100644 --- a/client/my-sites/site-settings/sitemaps.jsx +++ b/client/my-sites/site-settings/sitemaps.jsx @@ -8,9 +8,9 @@ import QueryJetpackConnection from 'calypso/components/data/query-jetpack-connec import ExternalLink from 'calypso/components/external-link'; import FormFieldset from 'calypso/components/forms/form-fieldset'; import FormSettingExplanation from 'calypso/components/forms/form-setting-explanation'; +import { PanelHeading, PanelSection } from 'calypso/components/panel'; import SupportInfo from 'calypso/components/support-info'; import JetpackModuleToggle from 'calypso/my-sites/site-settings/jetpack-module-toggle'; -import { PanelHeading, PanelSection } from 'calypso/sites/components/panel'; import getJetpackModule from 'calypso/state/selectors/get-jetpack-module'; import isActivatingJetpackModule from 'calypso/state/selectors/is-activating-jetpack-module'; import isJetpackModuleActive from 'calypso/state/selectors/is-jetpack-module-active'; diff --git a/client/sites/components/dotcom-style.scss b/client/sites/components/dotcom-style.scss index 5562dca3383981..d119912d87adfc 100644 --- a/client/sites/components/dotcom-style.scss +++ b/client/sites/components/dotcom-style.scss @@ -329,10 +329,6 @@ max-height: initial; max-width: 1400px; width: 100%; - - main { - max-width: 100%; - } } @media (max-width: $break-large) { diff --git a/client/sites/hosting-features/components/hosting-activation.tsx b/client/sites/hosting-features/components/hosting-activation.tsx index b5460e77ec3929..f22d329dd90878 100644 --- a/client/sites/hosting-features/components/hosting-activation.tsx +++ b/client/sites/hosting-features/components/hosting-activation.tsx @@ -1,5 +1,5 @@ import { useTranslate } from 'i18n-calypso'; -import { PanelDescription, PanelHeading, PanelSection } from 'calypso/sites/components/panel'; +import { PanelDescription, PanelHeading, PanelSection } from 'calypso/components/panel'; import HostingActivationButton from './hosting-activation-button'; export default function HostingActivation( { redirectUrl }: { redirectUrl: string } ) { diff --git a/client/sites/marketing/connections/index.tsx b/client/sites/marketing/connections/index.tsx index 9fa0cf4b76dc75..1d9ac5832ac28b 100644 --- a/client/sites/marketing/connections/index.tsx +++ b/client/sites/marketing/connections/index.tsx @@ -1,7 +1,7 @@ import { useTranslate } from 'i18n-calypso'; import InlineSupportLink from 'calypso/components/inline-support-link'; import NavigationHeader from 'calypso/components/navigation-header'; -import { Panel } from 'calypso/sites/components/panel'; +import { Panel } from 'calypso/components/panel'; import SharingConnections from './connections'; import '../style.scss'; @@ -16,7 +16,10 @@ export default function MarketingConnections( { } ) { const translate = useTranslate(); return ( - + void ) { context.primary = ( -
- - -
+ ); next(); diff --git a/client/sites/marketing/sharing/appearance.jsx b/client/sites/marketing/sharing/appearance.jsx index a412f92a387615..1784b654d47182 100644 --- a/client/sites/marketing/sharing/appearance.jsx +++ b/client/sites/marketing/sharing/appearance.jsx @@ -6,8 +6,8 @@ import { Component } from 'react'; import { connect } from 'react-redux'; import FormInputCheckbox from 'calypso/components/forms/form-checkbox'; import FormFieldset from 'calypso/components/forms/form-fieldset'; +import { PanelSection } from 'calypso/components/panel'; import SupportInfo from 'calypso/components/support-info'; -import { PanelSection } from 'calypso/sites/components/panel'; import { recordGoogleEvent, recordTracksEvent } from 'calypso/state/analytics/actions'; import getCurrentRouteParameterized from 'calypso/state/selectors/get-current-route-parameterized'; import isPrivateSite from 'calypso/state/selectors/is-private-site'; diff --git a/client/sites/marketing/sharing/components/buttons-block-appearance.jsx b/client/sites/marketing/sharing/components/buttons-block-appearance.jsx index 689fdb48bbb300..6cfd079530f937 100644 --- a/client/sites/marketing/sharing/components/buttons-block-appearance.jsx +++ b/client/sites/marketing/sharing/components/buttons-block-appearance.jsx @@ -1,7 +1,7 @@ import { localizeUrl } from '@automattic/i18n-utils'; import { localize } from 'i18n-calypso'; import ExternalLink from 'calypso/components/external-link'; -import { PanelSection } from 'calypso/sites/components/panel'; +import { PanelSection } from 'calypso/components/panel'; import { useSelector } from 'calypso/state'; import { getSiteAdminUrl } from 'calypso/state/sites/selectors'; import SharingButtonsPreviewButtons from '../preview-buttons'; diff --git a/client/sites/marketing/sharing/index.tsx b/client/sites/marketing/sharing/index.tsx index a539431e5b85e0..634f72c0458967 100644 --- a/client/sites/marketing/sharing/index.tsx +++ b/client/sites/marketing/sharing/index.tsx @@ -3,7 +3,7 @@ import QueryJetpackModules from 'calypso/components/data/query-jetpack-modules'; import InlineSupportLink from 'calypso/components/inline-support-link'; import NavigationHeader from 'calypso/components/navigation-header'; import Notice from 'calypso/components/notice'; -import { Panel } from 'calypso/sites/components/panel'; +import { Panel } from 'calypso/components/panel'; import { useSelector } from 'calypso/state'; import { useSelectedSiteSelector } from 'calypso/state/sites/hooks'; import { @@ -36,7 +36,7 @@ export default function MarketingSharing() { }; return ( - + { siteId && } +
@@ -96,6 +96,6 @@ export default function MarketingTools() { ); } ) }
- + ); } diff --git a/client/sites/marketing/tools/page.tsx b/client/sites/marketing/tools/page.tsx new file mode 100644 index 00000000000000..7da50d3cb31679 --- /dev/null +++ b/client/sites/marketing/tools/page.tsx @@ -0,0 +1,20 @@ +import { useTranslate } from 'i18n-calypso'; +import NavigationHeader from 'calypso/components/navigation-header'; +import { Panel } from 'calypso/components/panel'; +import Tools from '.'; + +export default function MarketingTools() { + const translate = useTranslate(); + + return ( + + + + + ); +} diff --git a/client/sites/marketing/tools/style.scss b/client/sites/marketing/tools/style.scss index da3402e6cfc8a6..e99bd88c32d7d3 100644 --- a/client/sites/marketing/tools/style.scss +++ b/client/sites/marketing/tools/style.scss @@ -47,9 +47,14 @@ margin-right: 0; } +.tools__wrapper { + align-self: stretch; +} + .tools__header-body { display: flex; flex-direction: row; + width: 100%; padding: 42px; justify-content: space-between; gap: 20px; @@ -98,7 +103,7 @@ font-weight: 500; text-decoration: none; color: var(--color-gray-80); - + svg { margin-left: 8px; } @@ -109,7 +114,7 @@ .tools__header-image-wrapper { @include wide-screen { display: flex; - margin-right: -20px; // This is to compensate the gap in .tools__header-body + margin-right: -20px; // This is to compensate the gap in .tools__header-body } .tools__header-image { diff --git a/client/sites/marketing/traffic/index.tsx b/client/sites/marketing/traffic/index.tsx index e99413d0ffebde..0be5b437994dcf 100644 --- a/client/sites/marketing/traffic/index.tsx +++ b/client/sites/marketing/traffic/index.tsx @@ -2,7 +2,7 @@ import { useTranslate } from 'i18n-calypso'; import InlineSupportLink from 'calypso/components/inline-support-link'; import NavigationHeader from 'calypso/components/navigation-header'; import Notice from 'calypso/components/notice'; -import { Panel } from 'calypso/sites/components/panel'; +import { Panel } from 'calypso/components/panel'; import { useSelectedSiteSelector } from 'calypso/state/sites/hooks'; import { getSiteAdminUrl, @@ -30,7 +30,7 @@ export default function MarketingTraffic() { }; return ( - + + { isSupported ? renderSetting() : renderNotSupportedNotice() } - + ); } diff --git a/client/sites/settings/administration/style.scss b/client/sites/settings/administration/style.scss deleted file mode 100644 index 9800b3db026811..00000000000000 --- a/client/sites/settings/administration/style.scss +++ /dev/null @@ -1,5 +0,0 @@ -.settings-administration { - display: flex; - flex-direction: column; - gap: 16px; -} diff --git a/client/sites/settings/administration/tools/card.jsx b/client/sites/settings/administration/tools/card.jsx index c10084d61f7083..20a149850700ae 100644 --- a/client/sites/settings/administration/tools/card.jsx +++ b/client/sites/settings/administration/tools/card.jsx @@ -1,7 +1,7 @@ import { Button } from '@automattic/components'; import clsx from 'clsx'; +import { PanelDescription, PanelHeading, PanelSection } from 'calypso/components/panel'; import SiteToolsLink from 'calypso/my-sites/site-settings/site-tools/link'; -import { PanelDescription, PanelHeading, PanelSection } from 'calypso/sites/components/panel'; import { isHostingMenuUntangled } from '../../utils'; export default function AdministrationToolCard( props ) { diff --git a/client/sites/settings/administration/tools/delete-site/delete-site-warnings.jsx b/client/sites/settings/administration/tools/delete-site/delete-site-warnings.jsx index bb23c0e750ba51..86bd266f66d5dd 100644 --- a/client/sites/settings/administration/tools/delete-site/delete-site-warnings.jsx +++ b/client/sites/settings/administration/tools/delete-site/delete-site-warnings.jsx @@ -1,8 +1,8 @@ import { Button } from '@automattic/components'; import { useTranslate } from 'i18n-calypso'; import PropTypes from 'prop-types'; +import { PanelHeading, PanelSection } from 'calypso/components/panel'; import { purchasesRoot } from 'calypso/me/purchases/paths'; -import { PanelHeading, PanelSection } from 'calypso/sites/components/panel'; import { isHostingMenuUntangled } from '../../../utils'; function DeleteSiteWarnings( { p2HubP2Count, isAtomicRemovalInProgress, isTrialSite = false } ) { diff --git a/client/sites/settings/administration/tools/delete-site/index.jsx b/client/sites/settings/administration/tools/delete-site/index.jsx index f78b49a6303140..c512bc3377e1b5 100644 --- a/client/sites/settings/administration/tools/delete-site/index.jsx +++ b/client/sites/settings/administration/tools/delete-site/index.jsx @@ -12,10 +12,10 @@ import InlineSupportLink from 'calypso/components/inline-support-link'; import NavigationHeader from 'calypso/components/navigation-header'; import Notice from 'calypso/components/notice'; import NoticeAction from 'calypso/components/notice/notice-action'; +import { Panel, PanelHeading, PanelSection } from 'calypso/components/panel'; import withP2HubP2Count from 'calypso/data/p2/with-p2-hub-p2-count'; import { recordTracksEvent } from 'calypso/lib/analytics/tracks'; import { getSettingsSource } from 'calypso/my-sites/site-settings/site-tools/utils'; -import { Panel, PanelHeading, PanelSection } from 'calypso/sites/components/panel'; import { hasLoadedSitePurchasesFromServer } from 'calypso/state/purchases/selectors'; import hasCancelableSitePurchases from 'calypso/state/selectors/has-cancelable-site-purchases'; import isSiteAutomatedTransfer from 'calypso/state/selectors/is-site-automated-transfer'; diff --git a/client/sites/settings/administration/tools/delete-site/style.scss b/client/sites/settings/administration/tools/delete-site/style.scss index b4501274d52554..2153c1d7e8dc28 100644 --- a/client/sites/settings/administration/tools/delete-site/style.scss +++ b/client/sites/settings/administration/tools/delete-site/style.scss @@ -1,19 +1,5 @@ .settings-administration__delete-site { - .panel-with-sidebar & { - margin-left: 0; - - .panel-section { - width: 100%; - max-width: 800px !important; - } - } - input.delete-site__confirm-input { margin-bottom: 12px !important; } - - button:last-child, - .notice:last-child { - margin-bottom: 0; - } } diff --git a/client/sites/settings/administration/tools/manage-connection/data-synchronization.jsx b/client/sites/settings/administration/tools/manage-connection/data-synchronization.jsx index f8fa5aa2824343..942e14b0870ffb 100644 --- a/client/sites/settings/administration/tools/manage-connection/data-synchronization.jsx +++ b/client/sites/settings/administration/tools/manage-connection/data-synchronization.jsx @@ -1,7 +1,7 @@ import { Button } from '@automattic/components'; import { localize } from 'i18n-calypso'; import { connect } from 'react-redux'; -import { PanelHeading, PanelSection } from 'calypso/sites/components/panel'; +import { PanelHeading, PanelSection } from 'calypso/components/panel'; import getSiteUrl from 'calypso/state/selectors/get-site-url'; import { isJetpackSite } from 'calypso/state/sites/selectors'; import { getSelectedSiteId } from 'calypso/state/ui/selectors'; diff --git a/client/sites/settings/administration/tools/manage-connection/index.jsx b/client/sites/settings/administration/tools/manage-connection/index.jsx index 782ad57dce5a1e..fcaa2f0a1705f0 100644 --- a/client/sites/settings/administration/tools/manage-connection/index.jsx +++ b/client/sites/settings/administration/tools/manage-connection/index.jsx @@ -4,8 +4,8 @@ import { Component } from 'react'; import DocumentHead from 'calypso/components/data/document-head'; import HeaderCakeBack from 'calypso/components/header-cake/back'; import NavigationHeader from 'calypso/components/navigation-header'; +import { Panel } from 'calypso/components/panel'; import redirectNonJetpack from 'calypso/my-sites/site-settings/redirect-non-jetpack'; -import { Panel } from 'calypso/sites/components/panel'; import DataSynchronization from './data-synchronization'; import DisconnectSiteLink from './disconnect-site-link'; import SiteOwnership from './site-ownership'; diff --git a/client/sites/settings/administration/tools/manage-connection/site-ownership.jsx b/client/sites/settings/administration/tools/manage-connection/site-ownership.jsx index 6a9d1651a7789f..dab50ddac9fda6 100644 --- a/client/sites/settings/administration/tools/manage-connection/site-ownership.jsx +++ b/client/sites/settings/administration/tools/manage-connection/site-ownership.jsx @@ -9,8 +9,8 @@ import QueryJetpackUserConnection from 'calypso/components/data/query-jetpack-us import FormFieldset from 'calypso/components/forms/form-fieldset'; import FormSettingExplanation from 'calypso/components/forms/form-setting-explanation'; import Gravatar from 'calypso/components/gravatar'; +import { PanelHeading, PanelSection } from 'calypso/components/panel'; import accept from 'calypso/lib/accept'; -import { PanelHeading, PanelSection } from 'calypso/sites/components/panel'; import { recordTracksEvent } from 'calypso/state/analytics/actions'; import { getCurrentUser } from 'calypso/state/current-user/selectors'; import { changeOwner } from 'calypso/state/jetpack/connection/actions'; diff --git a/client/sites/settings/administration/tools/manage-connection/style.scss b/client/sites/settings/administration/tools/manage-connection/style.scss index 4dde009a28ba4d..6e687ad7d2ee83 100644 --- a/client/sites/settings/administration/tools/manage-connection/style.scss +++ b/client/sites/settings/administration/tools/manage-connection/style.scss @@ -1,12 +1,4 @@ .settings-administration__manage-connection { - .panel-with-sidebar & { - margin-left: 0; - - .panel-section { - max-width: 800px !important; - } - } - .site-tools__link { width: 100%; } diff --git a/client/sites/settings/administration/tools/reset-site/index.jsx b/client/sites/settings/administration/tools/reset-site/index.jsx index 500571ffbc4d4c..6e8725dcfbc2fc 100644 --- a/client/sites/settings/administration/tools/reset-site/index.jsx +++ b/client/sites/settings/administration/tools/reset-site/index.jsx @@ -15,10 +15,10 @@ import HeaderCakeBack from 'calypso/components/header-cake/back'; import InlineSupportLink from 'calypso/components/inline-support-link'; import { LoadingBar } from 'calypso/components/loading-bar'; import NavigationHeader from 'calypso/components/navigation-header'; +import { Panel, PanelHeading, PanelSection } from 'calypso/components/panel'; import PageViewTracker from 'calypso/lib/analytics/page-view-tracker'; import { EVERY_FIVE_SECONDS, Interval } from 'calypso/lib/interval'; import { getSettingsSource } from 'calypso/my-sites/site-settings/site-tools/utils'; -import { Panel, PanelHeading, PanelSection } from 'calypso/sites/components/panel'; import { useDispatch, useSelector } from 'calypso/state'; import { errorNotice, successNotice } from 'calypso/state/notices/actions'; import isUnlaunchedSite from 'calypso/state/selectors/is-unlaunched-site'; diff --git a/client/sites/settings/administration/tools/reset-site/style.scss b/client/sites/settings/administration/tools/reset-site/style.scss index 4260a787ebef6a..a6759b5e45f86b 100644 --- a/client/sites/settings/administration/tools/reset-site/style.scss +++ b/client/sites/settings/administration/tools/reset-site/style.scss @@ -1,14 +1,6 @@ .settings-administration__reset-site { .panel-with-sidebar & { - margin-left: 0; - .panel-section { - max-width: 800px !important; - - p:last-child { - margin-bottom: 0; - } - button { margin-top: 12px; } diff --git a/client/sites/settings/administration/tools/transfer-site/confirmation-transfer.tsx b/client/sites/settings/administration/tools/transfer-site/confirmation-transfer.tsx index e81e82f8fa2c7c..d6c9a9ff1808c3 100644 --- a/client/sites/settings/administration/tools/transfer-site/confirmation-transfer.tsx +++ b/client/sites/settings/administration/tools/transfer-site/confirmation-transfer.tsx @@ -3,8 +3,8 @@ import { useTranslate } from 'i18n-calypso'; import { useEffect, useState } from 'react'; import { LoadingBar } from 'calypso/components/loading-bar'; import Notice from 'calypso/components/notice'; +import { PanelHeading } from 'calypso/components/panel'; import { recordTracksEvent } from 'calypso/lib/analytics/tracks'; -import { PanelHeading } from 'calypso/sites/components/panel'; import { isHostingMenuUntangled } from '../../../utils'; import { useConfirmTransfer } from './use-confirm-transfer'; diff --git a/client/sites/settings/administration/tools/transfer-site/index.tsx b/client/sites/settings/administration/tools/transfer-site/index.tsx index 6b5f4cd401a06c..bc33bdb26ac3d7 100644 --- a/client/sites/settings/administration/tools/transfer-site/index.tsx +++ b/client/sites/settings/administration/tools/transfer-site/index.tsx @@ -3,9 +3,9 @@ import styled from '@emotion/styled'; import { useTranslate } from 'i18n-calypso'; import { useEffect, useState } from 'react'; import { useQueryUserPurchases } from 'calypso/components/data/query-user-purchases'; +import { PanelHeading } from 'calypso/components/panel'; import { ResponseDomain } from 'calypso/lib/domains/types'; import { getSettingsSource } from 'calypso/my-sites/site-settings/site-tools/utils'; -import { PanelHeading } from 'calypso/sites/components/panel'; import { isHostingMenuUntangled } from 'calypso/sites/settings/utils'; import { useDispatch, useSelector } from 'calypso/state'; import { recordTracksEvent } from 'calypso/state/analytics/actions'; diff --git a/client/sites/settings/administration/tools/transfer-site/pending-domain-transfer.tsx b/client/sites/settings/administration/tools/transfer-site/pending-domain-transfer.tsx index 0b9dd3e6ae74c0..b8f225fcf40890 100644 --- a/client/sites/settings/administration/tools/transfer-site/pending-domain-transfer.tsx +++ b/client/sites/settings/administration/tools/transfer-site/pending-domain-transfer.tsx @@ -3,8 +3,8 @@ import styled from '@emotion/styled'; import { createInterpolateElement } from '@wordpress/element'; import { sprintf } from '@wordpress/i18n'; import { useTranslate } from 'i18n-calypso'; +import { PanelHeading } from 'calypso/components/panel'; import { ResponseDomain } from 'calypso/lib/domains/types'; -import { PanelHeading } from 'calypso/sites/components/panel'; import { isHostingMenuUntangled } from '../../../utils'; const Strong = styled( 'strong' )( { diff --git a/client/sites/settings/administration/tools/transfer-site/site-owner-user-search.tsx b/client/sites/settings/administration/tools/transfer-site/site-owner-user-search.tsx index 500879754244d9..4c8e68df86074d 100644 --- a/client/sites/settings/administration/tools/transfer-site/site-owner-user-search.tsx +++ b/client/sites/settings/administration/tools/transfer-site/site-owner-user-search.tsx @@ -5,10 +5,10 @@ import { useTranslate } from 'i18n-calypso'; import { useState, FormEvent, ChangeEvent } from 'react'; import FormFieldset from 'calypso/components/forms/form-fieldset'; import FormTextInput from 'calypso/components/forms/form-text-input'; +import { PanelHeading } from 'calypso/components/panel'; import useUsersQuery from 'calypso/data/users/use-users-query'; import { recordTracksEvent } from 'calypso/lib/analytics/tracks'; import TeamMembersSiteTransfer from 'calypso/my-sites/people/team-members-site-transfer'; -import { PanelHeading } from 'calypso/sites/components/panel'; import { isHostingMenuUntangled } from '../../../utils'; import { useCheckSiteTransferEligibility } from './use-check-site-transfer-eligibility'; import type { UsersQuery } from '@automattic/data-stores'; diff --git a/client/sites/settings/administration/tools/transfer-site/site-transfer-card.tsx b/client/sites/settings/administration/tools/transfer-site/site-transfer-card.tsx index 28823b7d61fdb0..ace8cb000202ee 100644 --- a/client/sites/settings/administration/tools/transfer-site/site-transfer-card.tsx +++ b/client/sites/settings/administration/tools/transfer-site/site-transfer-card.tsx @@ -2,12 +2,10 @@ import { useTranslate } from 'i18n-calypso'; import HeaderCakeBack from 'calypso/components/header-cake/back'; import InlineSupportLink from 'calypso/components/inline-support-link'; import NavigationHeader from 'calypso/components/navigation-header'; +import { Panel, PanelSection } from 'calypso/components/panel'; import PageViewTracker from 'calypso/lib/analytics/page-view-tracker'; -import { Panel, PanelSection } from 'calypso/sites/components/panel'; import { isHostingMenuUntangled } from 'calypso/sites/settings/utils'; -import './style.scss'; - export function SiteTransferCard( { children, onClick, diff --git a/client/sites/settings/administration/tools/transfer-site/start-site-owner-transfer.tsx b/client/sites/settings/administration/tools/transfer-site/start-site-owner-transfer.tsx index e3425b211a6a81..25840de82e4f9a 100644 --- a/client/sites/settings/administration/tools/transfer-site/start-site-owner-transfer.tsx +++ b/client/sites/settings/administration/tools/transfer-site/start-site-owner-transfer.tsx @@ -7,9 +7,9 @@ import { localize, useTranslate } from 'i18n-calypso'; import { useState, FormEvent } from 'react'; import { connect, useSelector } from 'react-redux'; import Notice from 'calypso/components/notice'; +import { PanelHeading } from 'calypso/components/panel'; import { recordTracksEvent } from 'calypso/lib/analytics/tracks'; import { ResponseDomain } from 'calypso/lib/domains/types'; -import { PanelHeading } from 'calypso/sites/components/panel'; import { getSitePurchases } from 'calypso/state/purchases/selectors'; import isSiteAutomatedTransfer from 'calypso/state/selectors/is-site-automated-transfer'; import { IAppState } from 'calypso/state/types'; diff --git a/client/sites/settings/administration/tools/transfer-site/style.scss b/client/sites/settings/administration/tools/transfer-site/style.scss deleted file mode 100644 index 1ea3bcd6b2975b..00000000000000 --- a/client/sites/settings/administration/tools/transfer-site/style.scss +++ /dev/null @@ -1,14 +0,0 @@ -.settings-administration__transfer-site { - .panel-with-sidebar & { - margin-left: 0; - - .panel-section { - max-width: 800px !important; - - p:last-child, - .notice:last-child { - margin-bottom: 0; - } - } - } -} diff --git a/client/sites/settings/caching/form.tsx b/client/sites/settings/caching/form.tsx index 43902eced20a33..82ba44667c622c 100644 --- a/client/sites/settings/caching/form.tsx +++ b/client/sites/settings/caching/form.tsx @@ -6,12 +6,12 @@ import { useTranslate } from 'i18n-calypso'; import React, { useEffect, useState } from 'react'; import { HostingCard, HostingCardDescription } from 'calypso/components/hosting-card'; import InlineSupportLink from 'calypso/components/inline-support-link'; +import { PanelDescription, PanelHeading, PanelSection } from 'calypso/components/panel'; import { useEdgeCacheQuery, useSetEdgeCacheMutation, useClearEdgeCacheMutation, } from 'calypso/data/hosting/use-cache'; -import { PanelDescription, PanelHeading, PanelSection } from 'calypso/sites/components/panel'; import { useDispatch, useSelector } from 'calypso/state'; import { clearEdgeCacheSuccess, clearWordPressCache } from 'calypso/state/hosting/actions'; import getRequest from 'calypso/state/selectors/get-request'; diff --git a/client/sites/settings/caching/index.tsx b/client/sites/settings/caching/index.tsx index 15f8bbc5acf12d..44aae499b5e2a4 100644 --- a/client/sites/settings/caching/index.tsx +++ b/client/sites/settings/caching/index.tsx @@ -4,7 +4,7 @@ import { useTranslate } from 'i18n-calypso'; import UpsellNudge from 'calypso/blocks/upsell-nudge'; import InlineSupportLink from 'calypso/components/inline-support-link'; import NavigationHeader from 'calypso/components/navigation-header'; -import { Panel } from 'calypso/sites/components/panel'; +import { Panel } from 'calypso/components/panel'; import HostingActivation from 'calypso/sites/hosting-features/components/hosting-activation'; import { useAreHostingFeaturesSupported, diff --git a/client/sites/settings/site/agency.tsx b/client/sites/settings/site/agency.tsx index ce172998d17ec4..aa15b9cdb63bba 100644 --- a/client/sites/settings/site/agency.tsx +++ b/client/sites/settings/site/agency.tsx @@ -3,8 +3,8 @@ import { localizeUrl } from '@automattic/i18n-utils'; import { ToggleControl } from '@wordpress/components'; import { translate } from 'i18n-calypso'; import useFetchAgencyFromBlog from 'calypso/a8c-for-agencies/data/agencies/use-fetch-agency-from-blog'; +import { PanelHeading, PanelSection } from 'calypso/components/panel'; import SettingsSectionHeader from 'calypso/my-sites/site-settings/settings-section-header'; -import { PanelHeading, PanelSection } from 'calypso/sites/components/panel'; import { isHostingMenuUntangled } from '../utils'; import type { SiteDetails } from '@automattic/data-stores'; diff --git a/client/sites/settings/site/enhanced-ownership.jsx b/client/sites/settings/site/enhanced-ownership.jsx index 65781cd6548b65..ef6d580d4f5e59 100644 --- a/client/sites/settings/site/enhanced-ownership.jsx +++ b/client/sites/settings/site/enhanced-ownership.jsx @@ -8,8 +8,8 @@ import { useTranslate } from 'i18n-calypso'; import FormFieldset from 'calypso/components/forms/form-fieldset'; import FormSettingExplanation from 'calypso/components/forms/form-setting-explanation'; import FormInput from 'calypso/components/forms/form-text-input'; +import { PanelHeading, PanelSection } from 'calypso/components/panel'; import SettingsSectionHeader from 'calypso/my-sites/site-settings/settings-section-header'; -import { PanelHeading, PanelSection } from 'calypso/sites/components/panel'; import siteHasFeature from 'calypso/state/selectors/site-has-feature'; import { useSelectedSiteSelector } from 'calypso/state/sites/hooks'; import { isHostingMenuUntangled } from '../utils'; diff --git a/client/sites/settings/site/footer-credit/index.jsx b/client/sites/settings/site/footer-credit/index.jsx index 7cf5845f64ef85..aba614a2dccf51 100644 --- a/client/sites/settings/site/footer-credit/index.jsx +++ b/client/sites/settings/site/footer-credit/index.jsx @@ -6,10 +6,10 @@ import { import { CompactCard, Button } from '@automattic/components'; import { useTranslate } from 'i18n-calypso'; import UpsellNudge from 'calypso/blocks/upsell-nudge'; +import { PanelHeading, PanelSection } from 'calypso/components/panel'; import { useActiveThemeQuery } from 'calypso/data/themes/use-active-theme-query'; import { preventWidows } from 'calypso/lib/formatting'; import SettingsSectionHeader from 'calypso/my-sites/site-settings/settings-section-header'; -import { PanelHeading, PanelSection } from 'calypso/sites/components/panel'; import isSiteAutomatedTransfer from 'calypso/state/selectors/is-site-automated-transfer'; import isSiteWPForTeams from 'calypso/state/selectors/is-site-wpforteams'; import siteHasFeature from 'calypso/state/selectors/site-has-feature'; diff --git a/client/sites/settings/site/footer-credit/style.scss b/client/sites/settings/site/footer-credit/style.scss index 8594cf9779e4fd..76c14cc77e3410 100644 --- a/client/sites/settings/site/footer-credit/style.scss +++ b/client/sites/settings/site/footer-credit/style.scss @@ -1,6 +1,5 @@ .settings-site { .settings-site__footer-credit .upsell-nudge { - margin-bottom: 0; margin-top: 15px; } } diff --git a/client/sites/settings/site/index.tsx b/client/sites/settings/site/index.tsx index 87e64b16be64a8..0c3a357d8e1cca 100644 --- a/client/sites/settings/site/index.tsx +++ b/client/sites/settings/site/index.tsx @@ -1,5 +1,6 @@ import { useTranslate } from 'i18n-calypso'; import NavigationHeader from 'calypso/components/navigation-header'; +import { Panel } from 'calypso/components/panel'; import wrapSettingsForm from 'calypso/my-sites/site-settings/wrap-settings-form'; import { useSelector } from 'calypso/state'; import isAtomicSite from 'calypso/state/selectors/is-site-automated-transfer'; @@ -35,13 +36,13 @@ export function SiteSettings( props: any ) { }; return ( -
+ -
+ ); } diff --git a/client/sites/settings/site/privacy/index.tsx b/client/sites/settings/site/privacy/index.tsx index 4848ebdc20b53c..6e9e83db70f333 100644 --- a/client/sites/settings/site/privacy/index.tsx +++ b/client/sites/settings/site/privacy/index.tsx @@ -3,8 +3,8 @@ import { useTranslate } from 'i18n-calypso'; import { useSelector } from 'react-redux'; import InfoPopover from 'calypso/components/info-popover'; import InlineSupportLink from 'calypso/components/inline-support-link'; +import { PanelDescription, PanelHeading, PanelSection } from 'calypso/components/panel'; import SettingsSectionHeader from 'calypso/my-sites/site-settings/settings-section-header'; -import { PanelDescription, PanelHeading, PanelSection } from 'calypso/sites/components/panel'; import isSiteAutomatedTransfer from 'calypso/state/selectors/is-site-automated-transfer'; import isSiteComingSoon from 'calypso/state/selectors/is-site-coming-soon'; import isSiteP2Hub from 'calypso/state/selectors/is-site-p2-hub'; diff --git a/client/sites/settings/site/subscription-gifting.jsx b/client/sites/settings/site/subscription-gifting.jsx index 9b41cef4c4daff..c85d525707d454 100644 --- a/client/sites/settings/site/subscription-gifting.jsx +++ b/client/sites/settings/site/subscription-gifting.jsx @@ -5,8 +5,8 @@ import { ToggleControl } from '@wordpress/components'; import { useTranslate } from 'i18n-calypso'; import FormSettingExplanation from 'calypso/components/forms/form-setting-explanation'; import InlineSupportLink from 'calypso/components/inline-support-link'; +import { PanelDescription, PanelHeading, PanelSection } from 'calypso/components/panel'; import SettingsSectionHeader from 'calypso/my-sites/site-settings/settings-section-header'; -import { PanelDescription, PanelHeading, PanelSection } from 'calypso/sites/components/panel'; import isSiteWpcomStaging from 'calypso/state/selectors/is-site-wpcom-staging'; import siteHasFeature from 'calypso/state/selectors/site-has-feature'; import { useSelectedSiteSelector } from 'calypso/state/sites/hooks'; diff --git a/client/sites/settings/site/toolbar.jsx b/client/sites/settings/site/toolbar.jsx index 86971c82edfa03..73ce35f1e87e91 100644 --- a/client/sites/settings/site/toolbar.jsx +++ b/client/sites/settings/site/toolbar.jsx @@ -5,10 +5,10 @@ import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import QueryJetpackConnection from 'calypso/components/data/query-jetpack-connection'; import FormFieldset from 'calypso/components/forms/form-fieldset'; +import { PanelHeading, PanelSection } from 'calypso/components/panel'; import SupportInfo from 'calypso/components/support-info'; import JetpackModuleToggle from 'calypso/my-sites/site-settings/jetpack-module-toggle'; import SettingsSectionHeader from 'calypso/my-sites/site-settings/settings-section-header'; -import { PanelHeading, PanelSection } from 'calypso/sites/components/panel'; import isJetpackModuleUnavailableInDevelopmentMode from 'calypso/state/selectors/is-jetpack-module-unavailable-in-development-mode'; import isJetpackSiteInDevelopmentMode from 'calypso/state/selectors/is-jetpack-site-in-development-mode'; import isSiteAutomatedTransfer from 'calypso/state/selectors/is-site-automated-transfer'; diff --git a/client/sites/settings/site/visibility/index.jsx b/client/sites/settings/site/visibility/index.jsx index 9c824e022e4ef4..49029bc0d602fe 100644 --- a/client/sites/settings/site/visibility/index.jsx +++ b/client/sites/settings/site/visibility/index.jsx @@ -7,9 +7,9 @@ import { translate } from 'i18n-calypso'; import { useState } from 'react'; import useFetchAgencyFromBlog from 'calypso/a8c-for-agencies/data/agencies/use-fetch-agency-from-blog'; import QuerySiteDomains from 'calypso/components/data/query-site-domains'; +import { PanelHeading, PanelSection } from 'calypso/components/panel'; import SitePreviewLinks from 'calypso/components/site-preview-links'; import SettingsSectionHeader from 'calypso/my-sites/site-settings/settings-section-header'; -import { PanelHeading, PanelSection } from 'calypso/sites/components/panel'; import { useSelector, useDispatch } from 'calypso/state'; import isSiteComingSoon from 'calypso/state/selectors/is-site-coming-soon'; import getIsUnlaunchedSite from 'calypso/state/selectors/is-unlaunched-site'; diff --git a/client/sites/settings/web-server/defensive-mode-form.tsx b/client/sites/settings/web-server/defensive-mode-form.tsx index d79eedceb1c8de..3de106a682da8c 100644 --- a/client/sites/settings/web-server/defensive-mode-form.tsx +++ b/client/sites/settings/web-server/defensive-mode-form.tsx @@ -7,11 +7,11 @@ import { useState } from 'react'; import FormSelect from 'calypso/components/forms/form-select'; import InlineSupportLink from 'calypso/components/inline-support-link'; import { useLocalizedMoment } from 'calypso/components/localized-moment'; +import { PanelDescription, PanelHeading, PanelSection } from 'calypso/components/panel'; import { useEdgeCacheDefensiveModeMutation, useEdgeCacheDefensiveModeQuery, } from 'calypso/data/hosting/use-cache'; -import { PanelDescription, PanelHeading, PanelSection } from 'calypso/sites/components/panel'; import { EdgeCacheLoadingPlaceholder } from 'calypso/sites/settings/caching/edge-cache-loading-placeholder'; import { useDispatch, useSelector } from 'calypso/state'; import { recordTracksEvent } from 'calypso/state/analytics/actions'; diff --git a/client/sites/settings/web-server/index.tsx b/client/sites/settings/web-server/index.tsx index 9611a0d2cdc3d1..3f3ef9aef448c5 100644 --- a/client/sites/settings/web-server/index.tsx +++ b/client/sites/settings/web-server/index.tsx @@ -1,6 +1,7 @@ import { useTranslate } from 'i18n-calypso'; import NavigationHeader from 'calypso/components/navigation-header'; import Notice from 'calypso/components/notice'; +import { Panel } from 'calypso/components/panel'; import { useAreAdvancedHostingFeaturesSupported } from '../../hosting-features/features'; import DefensiveModeForm from './defensive-mode-form'; import ServerConfigurationForm from './server-configuration-form'; @@ -35,7 +36,7 @@ export default function WebServerSettings() { }; return ( -
+ { isSupported ? renderSetting() : renderNotSupportedNotice() } -
+ ); } diff --git a/client/sites/settings/web-server/server-configuration-form.tsx b/client/sites/settings/web-server/server-configuration-form.tsx index 89aa21c807d548..27c529c14f2348 100644 --- a/client/sites/settings/web-server/server-configuration-form.tsx +++ b/client/sites/settings/web-server/server-configuration-form.tsx @@ -13,9 +13,9 @@ import FormSelect from 'calypso/components/forms/form-select'; import FormSettingExplanation from 'calypso/components/forms/form-setting-explanation'; import FormTextInput from 'calypso/components/forms/form-text-input'; import { HostingCardDescription } from 'calypso/components/hosting-card'; +import { PanelHeading, PanelSection } from 'calypso/components/panel'; import { useDataCenterOptions } from 'calypso/data/data-center/use-data-center-options'; import { usePhpVersions } from 'calypso/data/php-versions/use-php-versions'; -import { PanelHeading, PanelSection } from 'calypso/sites/components/panel'; import { useSelector } from 'calypso/state'; import { updateAtomicPhpVersion, diff --git a/client/sites/settings/web-server/style.scss b/client/sites/settings/web-server/style.scss index 94503a2ef0ecb5..8a9e5c3f3cf094 100644 --- a/client/sites/settings/web-server/style.scss +++ b/client/sites/settings/web-server/style.scss @@ -1,8 +1,4 @@ .settings-web-server { - display: flex; - flex-direction: column; - gap: 16px; - select { width: unset; } diff --git a/client/sites/tools/database/form.js b/client/sites/tools/database/form.js index 10d23a2ce82f83..515ecbafb26bef 100644 --- a/client/sites/tools/database/form.js +++ b/client/sites/tools/database/form.js @@ -63,17 +63,8 @@ export default function PhpMyAdminForm( { disabled, ContainerComponent, Descript const [ isRestorePasswordDialogVisible, setIsRestorePasswordDialogVisible ] = useState( false ); const { openPhpMyAdmin, loading } = useOpenPhpMyAdmin(); - return ( - - - { translate( - 'For the tech-savvy, manage your database with phpMyAdmin and run a wide range of operations with MySQL.' - ) } - + const form = ( +
{ translate( @@ -121,6 +112,21 @@ export default function PhpMyAdminForm( { disabled, ContainerComponent, Descript onCancel={ () => setIsRestorePasswordDialogVisible( false ) } onRestore={ () => setIsRestorePasswordDialogVisible( false ) } /> +
+ ); + + return ( + + + { translate( + 'For the tech-savvy, manage your database with phpMyAdmin and run a wide range of operations with MySQL.' + ) } + + { form } ); } diff --git a/client/sites/tools/database/form.scss b/client/sites/tools/database/form.scss index d3dbfb3fc64b6f..9e7073b4d8d23d 100644 --- a/client/sites/tools/database/form.scss +++ b/client/sites/tools/database/form.scss @@ -12,6 +12,10 @@ } } +.phpmyadmin-card__wrapper { + width: 100%; +} + .phpmyadmin-card__restore-password { margin-top: 16px; color: var(--color-text-subtle); diff --git a/client/sites/tools/database/page.tsx b/client/sites/tools/database/page.tsx index 949ba94218c147..3f5af1025f869d 100644 --- a/client/sites/tools/database/page.tsx +++ b/client/sites/tools/database/page.tsx @@ -1,11 +1,10 @@ import { useTranslate } from 'i18n-calypso'; import NavigationHeader from 'calypso/components/navigation-header'; import Notice from 'calypso/components/notice'; +import { Panel } from 'calypso/components/panel'; import { useAreAdvancedHostingFeaturesSupported } from '../../hosting-features/features'; import PhpMyAdminForm from './form'; -import './style.scss'; - function Container( { children }: { children: React.ReactNode } ) { return children; } @@ -45,8 +44,8 @@ export default function Database() { }; return ( -
+ { isSupported ? renderSetting() : renderNotSupportedNotice() } -
+ ); } diff --git a/client/sites/tools/database/style.scss b/client/sites/tools/database/style.scss deleted file mode 100644 index 63de3d61ef2d57..00000000000000 --- a/client/sites/tools/database/style.scss +++ /dev/null @@ -1,5 +0,0 @@ -.tools-database { - .navigation-header { - margin-bottom: 32px; - } -} diff --git a/client/sites/tools/deployments/components/page-shell/index.tsx b/client/sites/tools/deployments/components/page-shell/index.tsx index d8eecde24ba6a7..b6082f7b0ac624 100644 --- a/client/sites/tools/deployments/components/page-shell/index.tsx +++ b/client/sites/tools/deployments/components/page-shell/index.tsx @@ -6,6 +6,7 @@ import InlineSupportLink from 'calypso/components/inline-support-link'; import NavigationHeader from 'calypso/components/navigation-header'; import Notice from 'calypso/components/notice'; import NoticeAction from 'calypso/components/notice/notice-action'; +import { Panel } from 'calypso/components/panel'; import HostingActivateStatus from 'calypso/hosting/server-settings/hosting-activate-status'; import { useDispatch, useSelector } from 'calypso/state'; import { transferInProgress } from 'calypso/state/automated-transfer/constants'; @@ -61,7 +62,7 @@ export function PageShell( { topRightButton, pageTitle, children }: GitHubDeploy const WrapperComponent = ! isSiteAtomic ? FeatureExample : Fragment; return ( -
+ ) } { children } -
+ ); } diff --git a/client/sites/tools/deployments/components/page-shell/style.scss b/client/sites/tools/deployments/components/page-shell/style.scss index 5400fe0560f313..752b730e959367 100644 --- a/client/sites/tools/deployments/components/page-shell/style.scss +++ b/client/sites/tools/deployments/components/page-shell/style.scss @@ -2,7 +2,3 @@ background-color: var(--studio-white); font-size: $font-body-small; } - -.github-deployments .navigation-header { - margin-bottom: 32px; -} diff --git a/client/sites/tools/deployments/deployment-run-logs/index.tsx b/client/sites/tools/deployments/deployment-run-logs/index.tsx index 4f9bfd3b260b15..a7558258012d83 100644 --- a/client/sites/tools/deployments/deployment-run-logs/index.tsx +++ b/client/sites/tools/deployments/deployment-run-logs/index.tsx @@ -35,7 +35,7 @@ export function DeploymentRunsLogs( { codeDeploymentId }: DeploymentRunsDialogPr return ( -
+

{ __( 'Deployment runs' ) }

 diff --git a/client/sites/tools/deployments/deployment-run-logs/style.scss b/client/sites/tools/deployments/deployment-run-logs/style.scss index 55658a7cf46685..6441aebcbd9d19 100644 --- a/client/sites/tools/deployments/deployment-run-logs/style.scss +++ b/client/sites/tools/deployments/deployment-run-logs/style.scss @@ -78,6 +78,9 @@ td.github-deployments-logs-content { } } +.github-deployments-runs { + width: 100%; +} .github-deployments-commit-author { display: inline-flex; diff --git a/client/sites/tools/deployments/deployments/styles.scss b/client/sites/tools/deployments/deployments/styles.scss index ae70241d6c40cb..3b69cf2edde74b 100644 --- a/client/sites/tools/deployments/deployments/styles.scss +++ b/client/sites/tools/deployments/deployments/styles.scss @@ -5,6 +5,7 @@ $brand-text: "SF Pro Text", $sans; display: flex; flex-direction: column; gap: 32px; + width: 100%; .github-deployments__search { max-width: 504px; diff --git a/client/sites/tools/sftp-ssh/page.tsx b/client/sites/tools/sftp-ssh/page.tsx index 36b62f5f489e2c..81d9e827e7861b 100644 --- a/client/sites/tools/sftp-ssh/page.tsx +++ b/client/sites/tools/sftp-ssh/page.tsx @@ -1,13 +1,12 @@ import { useTranslate } from 'i18n-calypso'; import NavigationHeader from 'calypso/components/navigation-header'; import Notice from 'calypso/components/notice'; +import { Panel } from 'calypso/components/panel'; import { useAreAdvancedHostingFeaturesSupported } from '../../hosting-features/features'; import useSftpSshSettingTitle from './hooks/use-sftp-ssh-setting-title'; import { SftpCardLoadingPlaceholder } from './sftp-card-loading-placeholder'; import { SftpForm } from './sftp-form'; -import './style.scss'; - function Container( { isLoading, children }: { isLoading: boolean; children: React.ReactNode } ) { return isLoading ? : children; } @@ -41,8 +40,8 @@ export default function SftpSsh() { }; return ( -
+ { isSupported ? renderSetting() : renderNotSupportedNotice() } -
+ ); } diff --git a/client/sites/tools/sftp-ssh/sftp-form.scss b/client/sites/tools/sftp-ssh/sftp-form.scss index 2764e4c94ae6b4..70d2934ce89171 100644 --- a/client/sites/tools/sftp-ssh/sftp-form.scss +++ b/client/sites/tools/sftp-ssh/sftp-form.scss @@ -1,3 +1,7 @@ +.sftp-card__wrapper { + width: 100%; +} + .sftp-card__questions-container { margin-bottom: 1.5em; } diff --git a/client/sites/tools/sftp-ssh/sftp-form.tsx b/client/sites/tools/sftp-ssh/sftp-form.tsx index 862a7064463f90..0ecbc81e2a6f86 100644 --- a/client/sites/tools/sftp-ssh/sftp-form.tsx +++ b/client/sites/tools/sftp-ssh/sftp-form.tsx @@ -279,29 +279,8 @@ export const SftpForm = ( { "Access and edit your website's files directly by creating SFTP credentials and using an SFTP client." ); - return ( - - { ! hasSftpFeatureAndIsLoading && ( - - { username - ? translate( - 'Use the credentials below to access and edit your website files using an SFTP client. {{a}}Learn more about SFTP on WordPress.com{{/a}}.', - { - components: { - a: , - }, - } - ) - : featureExplanation } - - ) } + const form = ( +
{ displayQuestionsAndButton && (
@@ -397,6 +376,33 @@ export const SftpForm = ( { ) } { isLoading && } { hasSftpFeatureAndIsLoading && } +
+ ); + + return ( + + { ! hasSftpFeatureAndIsLoading && ( + + { username + ? translate( + 'Use the credentials below to access and edit your website files using an SFTP client. {{a}}Learn more about SFTP on WordPress.com{{/a}}.', + { + components: { + a: , + }, + } + ) + : featureExplanation } + + ) } + { form } ); }; diff --git a/client/sites/tools/sftp-ssh/style.scss b/client/sites/tools/sftp-ssh/style.scss deleted file mode 100644 index f3dcb76e522c85..00000000000000 --- a/client/sites/tools/sftp-ssh/style.scss +++ /dev/null @@ -1,5 +0,0 @@ -.tools-sftp-ssh { - .navigation-header { - margin-bottom: 32px; - } -} diff --git a/client/sites/tools/staging-site/index.tsx b/client/sites/tools/staging-site/index.tsx index 0a845811fa69c4..1a8ec29214cc8b 100644 --- a/client/sites/tools/staging-site/index.tsx +++ b/client/sites/tools/staging-site/index.tsx @@ -1,11 +1,12 @@ +import { Panel } from 'calypso/components/panel'; import StagingSiteWrapper from './components/staging-site'; import './style.scss'; export default function StagingSite() { return ( -
+ -
+ ); }