Untangling: polish UI components of the new IA

Automattic · Nov 25, 2024 · bd9a7b9 · bd9a7b9
1 parent 7115e04
commit bd9a7b9
Show file tree

Hide file tree

Showing 76 changed files with 197 additions and 203 deletions.
diff --git a/client/sites/components/panel/index.tsx → client/components/panel/index.tsx b/client/sites/components/panel/index.tsx → 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 <Main className={ clsx( 'panel', className ) }>{ children }</Main>;
+	return (
+		<Main
+			className={ clsx( 'panel', className, {
+				'panel--wide': wide,
+			} ) }
+		>
+			{ children }
+		</Main>
+	);
 }
 
 export function PanelSection( {

diff --git a/client/sites/components/panel/style.scss → client/components/panel/style.scss b/client/sites/components/panel/style.scss → 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
@@ -113,7 +113,7 @@ export default function SitePreviewLinks( {
 	}
 
 	return (
-		<div>
+		<>
 			<p>{ description }</p>
 			{ isFirstLoading && <InputPlaceholder /> }
 			{ ! isFirstLoading && (
@@ -135,6 +135,6 @@ export default function SitePreviewLinks( {
 						) ) }
 				</>
 			) }
-		</div>
+		</>
 	);
 }
diff --git 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 (
-		<Main wideLayout className="page-server-settings">
+		<Panel wide className="page-server-settings">
 			{ ! isLoadingSftpData && (
 				<ScrollToAnchorOnMount
 					offset={ HEADING_OFFSET }
@@ -342,7 +342,7 @@ const ServerSettings = ( { fetchUpdatedData }: ServerSettingsProps ) => {
 				/>
 			) }
 			<QueryReaderTeams />
-		</Main>
+		</Panel>
 	);
 };
 

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -21,14 +21,14 @@ 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';
 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -330,10 +330,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
@@ -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
@@ -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 (
-		<Panel className="marketing-connections connections__sharing-settings connections__sharing-connections">
+		<Panel
+			wide
+			className="marketing-connections connections__sharing-settings connections__sharing-connections"
+		>
 			<NavigationHeader
 				title={ translate( 'Connections' ) }
 				subtitle={ translate(

diff --git a/client/sites/marketing/connections/services-group.jsx b/client/sites/marketing/connections/services-group.jsx
@@ -5,7 +5,7 @@ import { Fragment, useEffect, useRef } from 'react';
 import { connect } from 'react-redux';
 import Notice from 'calypso/components/notice';
 import NoticeAction from 'calypso/components/notice/notice-action';
-import { PanelHeading, PanelSection } from 'calypso/sites/components/panel';
+import { PanelHeading, PanelSection } from 'calypso/components/panel';
 import { activateModule } from 'calypso/state/jetpack/modules/actions';
 import isFetchingJetpackModules from 'calypso/state/selectors/is-fetching-jetpack-modules';
 import isJetpackModuleActive from 'calypso/state/selectors/is-jetpack-module-active';

diff --git a/client/sites/marketing/controller.tsx b/client/sites/marketing/controller.tsx
@@ -1,7 +1,6 @@
 import { __ } from '@wordpress/i18n';
 import { translate } from 'i18n-calypso';
 import { useSelector } from 'react-redux';
-import NavigationHeader from 'calypso/components/navigation-header';
 import { errorNotice } from 'calypso/state/notices/actions';
 import { canCurrentUser } from 'calypso/state/selectors/can-current-user';
 import isSiteP2Hub from 'calypso/state/selectors/is-site-p2-hub';
@@ -10,7 +9,7 @@ import { getSelectedSiteId, getSelectedSiteSlug } from 'calypso/state/ui/selecto
 import { PanelWithSidebar, Sidebar, SidebarItem } from '../components/panel-sidebar';
 import MarketingConnections from './connections';
 import MarketingSharing from './sharing';
-import MarketingTools from './tools';
+import MarketingTools from './tools/page';
 import MarketingTraffic from './traffic';
 import type { Context as PageJSContext } from '@automattic/calypso-router';
 
@@ -35,15 +34,7 @@ export function marketingTools( context: PageJSContext, next: () => void ) {
 	context.primary = (
 		<PanelWithSidebar>
 			<MarketingSidebar />
-			<div>
-				<NavigationHeader
-					title={ __( 'Marketing Tools' ) }
-					subtitle={ __(
-						'Explore tools to build your audience, market your site, and engage your visitors.'
-					) }
-				/>
-				<MarketingTools />
-			</div>
+			<MarketingTools />
 		</PanelWithSidebar>
 	);
 	next();

diff --git 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
@@ -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
@@ -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 (
-		<Panel className="marketing-sharing">
+		<Panel wide className="marketing-sharing">
 			{ siteId && <QueryJetpackModules siteId={ siteId } /> }
 			<NavigationHeader
 				title={ translate( 'Sharing' ) }

diff --git a/client/sites/marketing/sharing/options.jsx b/client/sites/marketing/sharing/options.jsx
@@ -10,8 +10,8 @@ import FormInputCheckbox from 'calypso/components/forms/form-checkbox';
 import FormFieldset from 'calypso/components/forms/form-fieldset';
 import FormTextInput from 'calypso/components/forms/form-text-input';
 import MultiCheckbox from 'calypso/components/forms/multi-checkbox';
+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 { getPostTypes } from 'calypso/state/post-types/selectors';
 import getCurrentRouteParameterized from 'calypso/state/selectors/get-current-route-parameterized';

diff --git a/client/sites/marketing/style.scss b/client/sites/marketing/style.scss
@@ -117,18 +117,18 @@
 	}
 }
 
-.sharing-services-group__services {
-	margin: 24px -22px -23px -22px;
+.panel-section.sharing-services-group {
+	padding-bottom: 0;
+}
 
+.sharing-services-group__services {
 	.notice {
 		margin-bottom: 0;
+		margin-left: -22px;
+		margin-right: -22px;
 	}
 }
 
-.sharing-services-group__services .notice.sharing-service__unsupported {
-	width: 100%;
-}
-
 .buttons__sharing-settings,
 .connections__sharing-settings {
 	// labels, checkboxes, radio