feat(onboarding): Add Yahoo and iCloud and fix styling

internal_packages/onboarding/lib/account-types.es6

@@ -7,26 +7,12 @@
 //     color: '#1ea2a3',
 //   },
 //   {
-//     type: 'icloud',
-//     displayName: 'iCloud',
-//     icon: 'ic-settings-account-icloud.png',
-//     headerIcon: 'setup-icon-provider-icloud.png',
-//     color: '#61bfe9',
-//   },
-//   {
 //     type: 'outlook',
 //     displayName: 'Outlook.com',
 //     icon: 'ic-settings-account-outlook.png',
 //     headerIcon: 'setup-icon-provider-outlook.png',
 //     color: '#1174c3',
 //   },
-//   {
-//     type: 'yahoo',
-//     displayName: 'Yahoo',
-//     icon: 'ic-settings-account-yahoo.png',
-//     headerIcon: 'setup-icon-provider-yahoo.png',
-//     color: '#a76ead',
-//   },
 // ]
 
 const AccountTypes = [
@@ -44,6 +30,20 @@ const AccountTypes = [
     headerIcon: 'setup-icon-provider-outlook.png',
     color: '#0078d7',
   },
+  {
+    type: 'yahoo',
+    displayName: 'Yahoo',
+    icon: 'ic-settings-account-yahoo.png',
+    headerIcon: 'setup-icon-provider-yahoo.png',
+    color: '#a76ead',
+  },
+  {
+    type: 'icloud',
+    displayName: 'iCloud',
+    icon: 'ic-settings-account-icloud.png',
+    headerIcon: 'setup-icon-provider-icloud.png',
+    color: '#61bfe9',
+  },
   {
     type: 'imap',
     displayName: 'IMAP / SMTP Setup',

internal_packages/onboarding/lib/onboarding-helpers.es6

@@ -85,8 +85,10 @@ export function buildGmailAuthURL(sessionKey) {
 export function runAuthRequest(accountInfo) {
   const {username, type, email, name} = accountInfo;
 
+  const provider = ['gmail', 'office365'].includes(type) ? type : 'imap';
+
   const data = {
-    provider: type,
+    provider: provider,
     email: email,
     name: name,
     settings: Object.assign({}, accountInfo),
@@ -109,7 +111,7 @@ export function runAuthRequest(accountInfo) {
    * Only include the required IMAP fields. Auth validation does not allow
    * extra fields
    */
-  if (type === "imap") {
+  if (provider === "imap") {
     for (const key of Object.keys(data.settings)) {
       if (!IMAP_FIELDS.has(key)) {
         delete data.settings[key]

internal_packages/onboarding/lib/page-account-settings.jsx

@@ -56,7 +56,7 @@ class AccountBasicSettingsForm extends React.Component {
   }
 
   submit() {
-    if (this.props.accountInfo.type === 'imap') {
+    if (!['gmail', 'office365'].includes(this.props.accountInfo.type)) {
       const accountInfo = accountInfoWithIMAPAutocompletions(this.props.accountInfo);
       OnboardingActions.setAccountInfo(accountInfo);
       OnboardingActions.moveToPage('account-settings-imap');

internal_packages/onboarding/stylesheets/onboarding.less

@@ -240,7 +240,7 @@
 
 .page.account-choose {
   h2 {
-    margin-top: 155px;
+    margin-top: 100px;
   }
 
   .provider-list {