Disconnect Site: Replace the Dropdown Survey selection with a List

Initial choice of a Dropdown component for presenting the Survey
questions was driven by their large number. In the end, there are much
fever questions and to improve readibility, the Flow will use Lists.

client/my-sites/site-settings/disconnect-site/disconnect-survey.jsx

@@ -9,7 +9,8 @@ import { localize } from 'i18n-calypso';
 /**
  * Internal dependencies
  */
-import SelectDropdown from 'components/select-dropdown';
+import Card from 'components/card';
+import CompactCard from 'components/card/compact';
 import { getSelectedSite, getSelectedSiteId, getSelectedSiteSlug } from 'state/ui/selectors';
 import { isFreeJetpackPlan } from 'lib/products-values';
 import { isJetpackSite } from 'state/sites/selectors';
@@ -47,9 +48,21 @@ class DisconnectSurvey extends Component {
 		return options;
 	}
 
+	getSurveyQuestions( options ) {
+		const questions = [];
+		for ( let i = 0; i < options.length; i++ ) {
+			questions.push(
+				<CompactCard href="#" onClick={ this.logReason } className="disconnect-site__survey-one">
+					{ options[ i ].label }
+				</CompactCard>
+			);
+		}
+		return questions;
+	}
+
 	render() {
 		const { translate, siteSlug } = this.props;
-		const { reasonSelected, compactButtons, renderFull } = this.state;
+		const { reasonSelected, renderFull } = this.state;
 
 		const textShareWhy = translate(
 			'Would you mind sharing why you want to disconnect %(siteName)s from WordPress.com ',
@@ -60,15 +73,12 @@ class DisconnectSurvey extends Component {
 		);
 
 		const options = this.getOptions();
+		const surveyQuestionsOne = this.getSurveyQuestions( options );
 
 		return (
 			<div className="disconnect-site__survey main">
-				<div className="disconnect-site__question">{ textShareWhy }</div>
-				<SelectDropdown
-					compact={ compactButtons }
-					onSelect={ this.logReason }
-					options={ options }
-				/>
+				<Card className="disconnect-site__question">{ textShareWhy }</Card>
+				{ surveyQuestionsOne }
 				{ renderFull ? this.renderFull( reasonSelected ) : null }
 			</div>
 		);

client/my-sites/site-settings/disconnect-site/index.jsx

@@ -9,7 +9,6 @@ import { localize } from 'i18n-calypso';
 /**
  * Internal dependencies
  */
-import Card from 'components/card';
 import DisconnectSurvey from './disconnect-survey';
 import DocumentHead from 'components/data/document-head';
 import FormattedHeader from 'components/formatted-header';
@@ -48,9 +47,7 @@ class DisconnectSite extends Component {
 							"We'd love to know why you're disconnecting -- it will help us improve Jetpack."
 						) }
 					/>
-					<Card className="disconnect-site__card">
-						<DisconnectSurvey />
-					</Card>
+					<DisconnectSurvey />
 					<SkipSurvey />
 				</Main>
 			</div>

client/my-sites/site-settings/disconnect-site/style.scss

@@ -1,32 +1,22 @@
 .disconnect-site__site-settings {
 	position: fixed;
-  top: 40%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+		top: 15%;
+		left: 30%;
+	width: 550px;
+
+	@include breakpoint( ">660px" ) {
+		max-width: 800px;
 	}
+}
 
 .disconnect-site__card {
 		position: relative;
 		padding: 24px;
-
-		@include breakpoint( "<480px" ) {
-			max-width: 300px;
-		}
-
-		@include breakpoint( "<660px" ) {
-			margin-top: 2em;
-			max-width: 500px;
-		}
-
-		@include breakpoint( ">660px" ) {
-			margin-top: 17px;
-			max-width: 800px;
-		}
 	}
 
 .disconnect-site__skip-survey {
 		&.main {
-			margin: 16px 0 24px 0;
+			margin: 16px 10px 24px 10px;
 			text-align: center;
 		}
 }
@@ -47,6 +37,13 @@
 }
 
 .disconnect-site__question {
+	position: relative;
 	padding-bottom: 20px;
 	text-align: left;
+	margin:0;
+}
+
+.disconnect-site__survey-one {
+	position: relative;
+	margin:0;
 }