Added help text to sso switching and removed redundant divs

web/react/components/claim/claim_account.jsx

@@ -43,11 +43,7 @@ export default class ClaimAccount extends React.Component {
             );
         }
 
-        return (
+        return content;
-            <div>
-                {content}
-            </div>
-        );
     }
 }
 

web/react/components/claim/email_to_sso.jsx

@@ -70,8 +70,7 @@ class EmailToSSO extends React.Component {
         const uiType = Utils.toTitleCase(this.props.type) + ' SSO';
 
         return (
-            <div className='col-sm-12'>
+            <div>
-                <div className='signup-team__container'>
                 <h3>
                     <FormattedMessage
                         id='claim.email_to_sso.title'
@@ -85,7 +84,16 @@ class EmailToSSO extends React.Component {
                     <p>
                         <FormattedMessage
                             id='claim.email_to_sso.ssoType'
-                                defaultMessage='Upon claiming your account, you will only be able to login with {type} SSO'
+                            defaultMessage='Upon claiming your account, you will only be able to login with {type} SSO. You must already have a valid {type} account'
+                            values={{
+                                type: Utils.toTitleCase(this.props.type)
+                            }}
+                        />
+                    </p>
+                    <p>
+                        <FormattedMessage
+                            id='claim.email_to_sso.ssoNote'
+                            defaultMessage='You must already have a valid {type} account'
                             values={{
                                 type: Utils.toTitleCase(this.props.type)
                             }}
@@ -126,7 +134,6 @@ class EmailToSSO extends React.Component {
                     </button>
                 </form>
             </div>
-            </div>
         );
     }
 }

web/react/components/claim/sso_to_email.jsx

@@ -86,8 +86,7 @@ class SSOToEmail extends React.Component {
         const uiType = Utils.toTitleCase(this.props.currentType) + ' SSO';
 
         return (
-            <div className='col-sm-12'>
+            <div>
-                <div className='signup-team__container'>
                 <h3>
                     <FormattedMessage
                         id='claim.sso_to_email.title'
@@ -149,7 +148,6 @@ class SSOToEmail extends React.Component {
                     </button>
                 </form>
             </div>
-            </div>
         );
     }
 }

web/static/i18n/en.json

@@ -548,6 +548,7 @@
   "claim.email_to_sso.pwd": "Password",
   "claim.email_to_sso.title": "Switch Email/Password Account to {uiType}",
   "claim.email_to_sso.ssoType": "Upon claiming your account, you will only be able to login with {type} SSO",
+  "claim.email_to_sso.ssoNote": "You must already have a valid {type} account",
   "claim.email_to_sso.enterPwd": "Enter the password for your {team} {site} account",
   "claim.email_to_sso.switchTo": "Switch account to {uiType}",
   "claim.sso_to_email.enterPwd": "Please enter a password.",