Revert "Migrate my-sites/sharing to webpack css pipeline (#28607)"

assets/stylesheets/_components.scss

@@ -354,6 +354,10 @@
 @import 'my-sites/plugins/plugins-browser-item/style';
 @import 'my-sites/plugins/plugins-browser-list/style';
 @import 'my-sites/plugins/plugins-browser/style';
+@import 'my-sites/sharing/style';
+@import 'my-sites/sharing/connections/account-dialog.scss';
+@import 'my-sites/sharing/connections/account-dialog-account.scss';
+@import 'my-sites/sharing/connections/services-group.scss';
 @import 'my-sites/sidebar/style';
 @import 'my-sites/sidebar-navigation/style';
 @import 'my-sites/site-indicator/style';

assets/stylesheets/shared/_extends-forms.scss

@@ -1,4 +1,8 @@
-// SASS placeholder selectors for form styles
+/**
+ * SASS placeholder selectors for form styles
+ *
+ * @format
+ */
 
 %form {
 	ul {

client/my-sites/sharing/connections/account-dialog-account.jsx

@@ -3,21 +3,13 @@
 /**
  * External dependencies
  */
+
 import PropTypes from 'prop-types';
 import React from 'react';
+import Image from 'components/image';
 import classNames from 'classnames';
 import Gridicon from 'gridicons';
 
-/**
- * Internal dependencies
- */
-import Image from 'components/image';
-
-/**
- * Style dependencies
- */
-import './account-dialog-account.scss';
-
 /* eslint-disable wpcalypso/jsx-classname-namespace */
 const AccountDialogAccount = ( { account, conflicting, onChange, selected, defaultIcon } ) => {
 	const classes = classNames( 'account-dialog-account', {

client/my-sites/sharing/connections/account-dialog.jsx

@@ -19,12 +19,6 @@ import AccountDialogAccount from './account-dialog-account';
 import Dialog from 'components/dialog';
 import { warningNotice } from 'state/notices/actions';
 
-/**
- * Style dependencies
- */
-import './account-dialog.scss';
-
-/* eslint-disable wpcalypso/jsx-classname-namespace */
 class AccountDialog extends Component {
 	static propTypes = {
 		accounts: PropTypes.arrayOf( PropTypes.object ),
@@ -45,20 +39,6 @@ class AccountDialog extends Component {
 		warningNotice: () => {},
 	};
 
-	state = {
-		selectedAccount: null,
-	};
-
-	static getDerivedStateFromProps( props, state ) {
-		// When the account dialog is closed, reset the selected account so
-		// that the state doesn't leak into a future dialog
-		if ( ! props.visible && state.selectedAccount ) {
-			return { selectedAccount: null };
-		}
-
-		return null;
-	}
-
 	onClose = action => {
 		const accountToConnect = this.getAccountToConnect();
 		const externalUserId =
@@ -79,6 +59,22 @@ class AccountDialog extends Component {
 
 	onSelectedAccountChanged = account => this.setState( { selectedAccount: account } );
 
+	constructor( props ) {
+		super( props );
+
+		this.state = {
+			selectedAccount: null,
+		};
+	}
+
+	componentWillReceiveProps( nextProps ) {
+		// When the account dialog is closed, reset the selected account so
+		// that the state doesn't leak into a future dialog
+		if ( ! nextProps.visible ) {
+			this.setState( { selectedAccount: null } );
+		}
+	}
+
 	getSelectedAccount() {
 		if ( this.state.selectedAccount ) {
 			return this.state.selectedAccount;
@@ -229,7 +225,6 @@ class AccountDialog extends Component {
 		);
 	}
 }
-/* eslint-enable wpcalypso/jsx-classname-namespace */
 
 export default connect(
 	null,

client/my-sites/sharing/connections/services-group.jsx

@@ -22,11 +22,6 @@ import Service from './service';
 import * as Components from './services';
 import ServicePlaceholder from './service-placeholder';
 
-/**
- * Style dependencies
- */
-import './services-group.scss';
-
 /**
  * Module constants
  */
@@ -37,7 +32,6 @@ const SharingServicesGroup = ( { isFetching, services, title } ) => {
 		return null;
 	}
 
-	/* eslint-disable wpcalypso/jsx-classname-namespace */
 	return (
 		<div className="sharing-services-group">
 			<SectionHeader label={ title } />
@@ -56,7 +50,6 @@ const SharingServicesGroup = ( { isFetching, services, title } ) => {
 			</ul>
 		</div>
 	);
-	/* eslint-enable wpcalypso/jsx-classname-namespace */
 };
 
 SharingServicesGroup.propTypes = {

client/my-sites/sharing/connections/services-group.scss

@@ -2,6 +2,15 @@
 	display: none;
 }
 
+.sharing-services-group__header {
+	margin: 0 0 30px 20px;
+}
+
+.sharing-service-group__title {
+	@include heading;
+	margin: 0 0 4px;
+}
+
 .sharing-services-group__services {
 	margin: 0 0 30px;
 	padding: 0;

client/my-sites/sharing/main.jsx

@@ -28,11 +28,6 @@ import SidebarNavigation from 'my-sites/sidebar-navigation';
 import UpgradeNudge from 'my-sites/upgrade-nudge';
 import { FEATURE_NO_ADS } from 'lib/plans/constants';
 
-/**
- * Style Dependencies
- */
-import './style.scss';
-
 export const Sharing = ( {
 	contentComponent,
 	path,

client/my-sites/sharing/style.scss

@@ -1100,3 +1100,15 @@
 .sharing-buttons-label-editor__input {
 	max-width: 300px;
 }
+
+@include breakpoint( '<660px' ) {
+	.right-column {
+		box-sizing: border-box;
+	}
+
+	.sharing-content {
+		.new-account {
+			margin-left: 10px;
+		}
+	}
+}