feat(ui): Update "Invite/Member Details" designs (#7283)

src/sentry/static/sentry/app/views/inviteMember/inviteMember.jsx

@@ -12,7 +12,9 @@ import ConfigStore from '../../stores/configStore';
 import LoadingIndicator from '../../components/loadingIndicator';
 import OrganizationState from '../../mixins/organizationState';
 import RoleSelect from './roleSelect';
+import SettingsPageHeader from '../settings/components/settingsPageHeader';
 import TeamSelect from './teamSelect';
+import TextBlock from '../settings/components/text/textBlock';
 import TextField from '../../components/forms/textField';
 import recreateRoute from '../../utils/recreateRoute';
 
@@ -208,8 +210,8 @@ const InviteMember = createReactClass({
 
     return (
       <div>
-        <h3>{t('Add Member to Organization')}</h3>
-        <p>
+        <SettingsPageHeader title={t('Add Member to Organization')} />
+        <TextBlock>
           {invitesEnabled
             ? t(
                 'Invite a member to join this organization via their email address. If they do not already have an account, they will first be asked to create one. Multiple emails delimited by commas.'
@@ -217,7 +219,7 @@ const InviteMember = createReactClass({
             : t(
                 'You may add a user by their username if they already have an account. Multiple inputs delimited by commas.'
               )}
-        </p>
+        </TextBlock>
 
         {loading && <LoadingIndicator />}
         {!loading && (

src/sentry/static/sentry/app/views/inviteMember/roleSelect.jsx

@@ -1,9 +1,22 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
+import styled from 'react-emotion';
 
+import {t} from '../../locale';
+import Panel from '../settings/components/panel';
+import PanelBody from '../settings/components/panelBody';
+import PanelHeader from '../settings/components/panelHeader';
+import PanelItem from '../settings/components/panelItem';
 import Radio from '../../components/radio';
+import TextBlock from '../settings/components/text/textBlock';
 
-import {t} from '../../locale';
+const Label = styled.label`
+  ${p => (p.disabled ? 'cursor: default' : '')};
+  display: flex;
+  flex: 1;
+  align-items: center;
+  margin-bottom: 0;
+`;
 
 class RoleSelect extends React.Component {
   static propTypes = {
@@ -21,33 +34,39 @@ class RoleSelect extends React.Component {
     let {disabled, enforceAllowed, roleList, selectedRole} = this.props;
 
     return (
-      <div className="new-invite-team box">
-        <div className="box-header">
-          <h4>{t('Role')}</h4>
-        </div>
-        <div className="box-content with-padding">
-          <ul className="radio-inputs">
-            {roleList.map((role, i) => {
-              let {desc, name, id, allowed} = role;
-              let isDisabled = disabled || (enforceAllowed && !allowed);
-              return (
-                <li
-                  className="radio"
-                  key={id}
-                  onClick={() => !isDisabled && this.props.setRole(id)}
-                  style={!isDisabled ? {} : {color: 'grey', cursor: 'default'}}
-                >
-                  <label style={!isDisabled ? {} : {cursor: 'default'}}>
-                    <Radio id={id} value={name} checked={id === selectedRole} readOnly />
+      <Panel className="new-invite-team">
+        <PanelHeader>{t('Role')}</PanelHeader>
+
+        <PanelBody>
+          {roleList.map((role, i) => {
+            let {desc, name, id, allowed} = role;
+            let isDisabled = disabled || (enforceAllowed && !allowed);
+            return (
+              <PanelItem
+                key={id}
+                onClick={() => !isDisabled && this.props.setRole(id)}
+                css={!isDisabled ? {} : {color: 'grey', cursor: 'default'}}
+              >
+                <Label>
+                  <Radio
+                    id={id}
+                    value={name}
+                    checked={id === selectedRole}
+                    readOnly
+                    style={{margin: 0}}
+                  />
+                  <div style={{flex: 1, padding: '0 16px'}}>
                     {name}
-                    <div className="help-block">{desc}</div>
-                  </label>
-                </li>
-              );
-            })}
-          </ul>
-        </div>
-      </div>
+                    <TextBlock css={{marginBottom: 0}}>
+                      <div className="help-block">{desc}</div>
+                    </TextBlock>
+                  </div>
+                </Label>
+              </PanelItem>
+            );
+          })}
+        </PanelBody>
+      </Panel>
     );
   }
 }

src/sentry/static/sentry/app/views/inviteMember/teamSelect.jsx

@@ -1,9 +1,18 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
+import styled from 'react-emotion';
 
+import {t} from '../../locale';
 import Checkbox from '../../components/checkbox';
+import Panel from '../settings/components/panel';
+import PanelBody from '../settings/components/panelBody';
+import PanelHeader from '../settings/components/panelHeader';
+import PanelItem from '../settings/components/panelItem';
 
-import {t} from '../../locale';
+const TeamItem = styled.div`
+  width: 25%;
+  padding: 6px;
+`;
 
 class TeamSelect extends React.Component {
   static propTypes = {
@@ -17,30 +26,32 @@ class TeamSelect extends React.Component {
     let {disabled, teams, selectedTeams, toggleTeam} = this.props;
     //no need to select a team when there's only one option
     if (teams.length < 2) return null;
+
     return (
-      <div className="new-invite-team box">
-        <div className="box-header">
-          <h4>{t('Team')}</h4>
-        </div>
-        <div className="grouping-controls team-choices row box-content with-padding">
-          {teams.map(({slug, name}, i) => (
-            <div key={slug} className="col-md-3">
-              <label className="checkbox">
-                <Checkbox
-                  id={slug}
-                  disabled={disabled}
-                  checked={selectedTeams.has(slug)}
-                  onChange={e => {
-                    toggleTeam(slug);
-                  }}
-                />
-                {name}
-                <span className="team-slug">{slug}</span>
-              </label>
-            </div>
-          ))}
-        </div>
-      </div>
+      <Panel className="new-invite-team">
+        <PanelHeader>{t('Team')}</PanelHeader>
+
+        <PanelBody className="grouping-controls team-choices">
+          <PanelItem css={{flexWrap: 'wrap'}}>
+            {teams.map(({slug, name}, i) => (
+              <TeamItem key={slug}>
+                <label className="checkbox">
+                  <Checkbox
+                    id={slug}
+                    disabled={disabled}
+                    checked={selectedTeams.has(slug)}
+                    onChange={e => {
+                      toggleTeam(slug);
+                    }}
+                  />
+                  <span>{name}</span>
+                  <span className="team-slug">{slug}</span>
+                </label>
+              </TeamItem>
+            ))}
+          </PanelItem>
+        </PanelBody>
+      </Panel>
     );
   }
 }

src/sentry/static/sentry/app/views/settings/organization/members/organizationMemberDetail.jsx

@@ -9,8 +9,13 @@ import ConfigStore from '../../../../stores/configStore';
 import DateTime from '../../../../components/dateTime';
 import IndicatorStore from '../../../../stores/indicatorStore';
 import NotFound from '../../../../components/errors/notFound';
+import Panel from '../../components/panel';
+import PanelBody from '../../components/panelBody';
+import PanelHeader from '../../components/panelHeader';
+import PanelItem from '../../components/panelItem';
 import RoleSelect from '../../../inviteMember/roleSelect';
 import SentryTypes from '../../../../proptypes';
+import SettingsPageHeader from '../../components/settingsPageHeader';
 import TeamSelect from '../../../inviteMember/teamSelect';
 import recreateRoute from '../../../../utils/recreateRoute';
 
@@ -133,77 +138,85 @@ class OrganizationMemberDetail extends AsyncView {
 
     return (
       <div>
-        <div className="page-header">
-          <h3>
-            {member.name}
-            <br />
-            <small>Member Settings</small>
-          </h3>
-        </div>
+        <SettingsPageHeader
+          title={
+            <div>
+              <div style={{fontSize: '1.4em'}}>{member.name}</div>
+              <div>
+                <small style={{opacity: 0.6, fontSize: '0.8em', fontWeight: 'normal'}}>
+                  {t('Member Settings')}
+                </small>
+              </div>
+            </div>
+          }
+        />
 
         {error && error.role && <p className="error alert-error">{error.role}</p>}
 
-        <div className="box">
-          <div className="box-header">
-            <h3>{t('Basics')}</h3>
-          </div>
-
-          <div className="box-content with-padding">
-            <div className="row" style={{marginBottom: '10px'}}>
-              <div className="col-md-6">
-                <div className="control-group">
-                  <label>{t('Email')}</label>
-                  <div className="controls">
-                    <a href={`mailto:${email}`}>{email}</a>
+        <Panel>
+          <PanelHeader>{t('Basics')}</PanelHeader>
+
+          <PanelBody>
+            <PanelItem direction="column">
+              <div className="row" style={{width: '100%'}}>
+                <div className="col-md-6">
+                  <div className="control-group">
+                    <label>{t('Email')}</label>
+                    <div className="controls">
+                      <a href={`mailto:${email}`}>{email}</a>
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div className="col-md-3">
-                <div className="control-group">
-                  <label>{t('Status')}</label>
-                  <div className="controls">
-                    {member.pending ? <em>Invitation Pending</em> : 'Active'}
+                <div className="col-md-3">
+                  <div className="control-group">
+                    <label>{t('Status')}</label>
+                    <div className="controls">
+                      {member.pending ? <em>Invitation Pending</em> : 'Active'}
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div className="col-md-3">
-                <div className="control-group">
-                  <label>{t('Added')}</label>
-                  <div className="controls">
-                    <DateTime dateOnly date={member.dateCreated} />
+                <div className="col-md-3">
+                  <div className="control-group">
+                    <label>{t('Added')}</label>
+                    <div className="controls">
+                      <DateTime dateOnly date={member.dateCreated} />
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
 
-            {inviteLink && (
-              <div className="form-actions">
-                <div className="control-group">
-                  <label>{t('Invite Link')}</label>
-                  <div className="controls">
-                    <code className="auto-select form-control" style={{overflow: 'auto'}}>
-                      {inviteLink}
-                    </code>
+              {inviteLink && (
+                <div className="form-actions">
+                  <div className="control-group">
+                    <label>{t('Invite Link')}</label>
+                    <div className="controls">
+                      <code
+                        className="auto-select form-control"
+                        style={{overflow: 'auto'}}
+                      >
+                        {inviteLink}
+                      </code>
+                    </div>
+                    <p className="help-block">
+                      This unique invite link may only be used by this member.
+                    </p>
+                  </div>
+                  <div className="align-right">
+                    <Button
+                      style={{marginRight: 10}}
+                      onClick={() => this.handleInvite(true)}
+                    >
+                      {t('Generate New Invite')}
+                    </Button>
+                    <Button onClick={() => this.handleInvite(false)}>
+                      {t('Resend Invite')}
+                    </Button>
                   </div>
-                  <p className="help-block">
-                    This unique invite link may only be used by this member.
-                  </p>
-                </div>
-                <div className="align-right">
-                  <Button
-                    style={{marginRight: 10}}
-                    onClick={() => this.handleInvite(true)}
-                  >
-                    {t('Generate New Invite')}
-                  </Button>
-                  <Button onClick={() => this.handleInvite(false)}>
-                    {t('Resend Invite')}
-                  </Button>
                 </div>
-              </div>
-            )}
-          </div>
-        </div>
+              )}
+            </PanelItem>
+          </PanelBody>
+        </Panel>
 
         <RoleSelect
           enforceAllowed={false}

tests/js/spec/views/inviteMember/__snapshots__/inviteMember.spec.jsx.snap

@@ -2,17 +2,148 @@
 
 exports[`CreateProject render() should render loading 1`] = `
 <div>
-  <h3>
-    Add Member to Organization
-  </h3>
-  <p>
+  <SettingsPageHeading
+    title="Add Member to Organization"
+  />
+  <TextBlock>
     Invite a member to join this organization via their email address. If they do not already have an account, they will first be asked to create one. Multiple emails delimited by commas.
-  </p>
+  </TextBlock>
   <LoadingIndicator />
 </div>
 `;
 
 exports[`CreateProject render() should render roles when available and allowed, and handle submitting 1`] = `
+.glamor-4 {
+  font-size: 14px;
+  box-shadow: inset 0 -1px 0;
+  margin: -20px 0 30px;
+}
+
+.glamor-2 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.glamor-0 {
+  font-size: 20px;
+  font-weight: bold;
+  margin: 20px 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.glamor-6 {
+  line-height: 1.5;
+  margin-bottom: 30px;
+}
+
+.glamor-21 {
+  margin-bottom: 0;
+}
+
+.glamor-41 {
+  background: #fff;
+  border: 1px solid;
+  margin-bottom: NaNpx;
+  position: relative;
+}
+
+.glamor-15 {
+  border-bottom: 1px solid;
+  border-radius: 0 0;
+  text-transform: uppercase;
+  font-size: 13px;
+  line-height: 1;
+  padding: 15px 20px;
+}
+
+.glamor-11 {
+  font-size: inherit;
+  text-transform: inherit;
+  margin: 0;
+}
+
+.glamor-9 {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  margin-bottom: 20px;
+  font-size: inherit;
+  text-transform: inherit;
+  margin: 0;
+}
+
+.glamor-24 {
+  box-sizing: border-box;
+  padding: 16px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  border-bottom: 1px solid;
+}
+
+.glamor-24:last-child {
+  border: 0;
+}
+
+.glamor-22 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: 0;
+}
+
+.glamor-19 {
+  line-height: 1.5;
+  margin-bottom: 30px;
+  margin-bottom: 0;
+}
+
+.glamor-62 {
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.glamor-58 {
+  box-sizing: border-box;
+  padding: 16px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  border-bottom: 1px solid;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.glamor-58:last-child {
+  border: 0;
+}
+
+.glamor-54 {
+  width: 25%;
+  padding: 6px;
+}
+
 <InviteMember
   params={
     Object {
@@ -21,12 +152,44 @@ exports[`CreateProject render() should render roles when available and allowed,
   }
 >
   <div>
-    <h3>
-      Add Member to Organization
-    </h3>
-    <p>
-      Invite a member to join this organization via their email address. If they do not already have an account, they will first be asked to create one. Multiple emails delimited by commas.
-    </p>
+    <SettingsPageHeading
+      title="Add Member to Organization"
+    >
+      <Wrapper>
+        <div
+          className="glamor-4 glamor-5"
+        >
+          <Flex
+            align="center"
+          >
+            <Base
+              align="center"
+              className="glamor-2"
+            >
+              <div
+                className="glamor-2"
+                is={null}
+              >
+                <Title>
+                  <div
+                    className="glamor-0 glamor-1"
+                  >
+                    Add Member to Organization
+                  </div>
+                </Title>
+              </div>
+            </Base>
+          </Flex>
+        </div>
+      </Wrapper>
+    </SettingsPageHeading>
+    <TextBlock>
+      <div
+        className="glamor-6 glamor-7"
+      >
+        Invite a member to join this organization via their email address. If they do not already have an account, they will first be asked to create one. Multiple emails delimited by commas.
+      </div>
+    </TextBlock>
     <div>
       <div
         className=""
@@ -90,89 +253,209 @@ exports[`CreateProject render() should render roles when available and allowed,
         selectedRole="member"
         setRole={[Function]}
       >
-        <div
-          className="new-invite-team box"
+        <Panel
+          className="new-invite-team"
         >
           <div
-            className="box-header"
-          >
-            <h4>
-              Role
-            </h4>
-          </div>
-          <div
-            className="box-content with-padding"
+            className="new-invite-team glamor-41 glamor-42"
           >
-            <ul
-              className="radio-inputs"
-            >
-              <li
-                className="radio"
-                key="1"
-                onClick={[Function]}
-                style={Object {}}
-              >
-                <label
-                  style={Object {}}
+            <PanelHeader>
+              <StyledPanelHeader>
+                <Component
+                  className="glamor-15 glamor-16"
                 >
-                  <Radio
-                    checked={false}
-                    id="1"
-                    readOnly={true}
-                    value="member"
-                  >
-                    <input
-                      checked={false}
-                      className="radio-select"
-                      id="1"
-                      readOnly={true}
-                      type="radio"
-                      value="member"
-                    />
-                  </Radio>
-                  member
                   <div
-                    className="help-block"
+                    className="glamor-15 glamor-16"
                   >
-                    a normal member
+                    <StyledPanelHeading>
+                      <Component
+                        className="glamor-11 glamor-8"
+                      >
+                        <PanelHeading
+                          className="glamor-11 glamor-8"
+                        >
+                          <div
+                            className="glamor-8 glamor-9 glamor-10"
+                          >
+                            Role
+                          </div>
+                        </PanelHeading>
+                      </Component>
+                    </StyledPanelHeading>
                   </div>
-                </label>
-              </li>
-              <li
-                className="radio"
-                key="2"
-                onClick={[Function]}
-                style={Object {}}
+                </Component>
+              </StyledPanelHeader>
+            </PanelHeader>
+            <PanelBody
+              direction="column"
+              disablePadding={true}
+              flex={false}
+            >
+              <div
+                className=""
               >
-                <label
-                  style={Object {}}
+                <PanelItem
+                  className="glamor-28"
+                  key="1"
+                  onClick={[Function]}
+                  p={2}
                 >
-                  <Radio
-                    checked={false}
-                    id="2"
-                    readOnly={true}
-                    value="bar"
+                  <StyledPanelItem
+                    className="glamor-28"
+                    onClick={[Function]}
+                    p={2}
                   >
-                    <input
-                      checked={false}
-                      className="radio-select"
-                      id="2"
-                      readOnly={true}
-                      type="radio"
-                      value="bar"
-                    />
-                  </Radio>
-                  bar
-                  <div
-                    className="help-block"
+                    <Base
+                      className="glamor-24 glamor-25"
+                      onClick={[Function]}
+                      p={2}
+                    >
+                      <div
+                        className="glamor-24 glamor-25"
+                        is={null}
+                        onClick={[Function]}
+                      >
+                        <Label>
+                          <label
+                            className="glamor-22 glamor-23"
+                          >
+                            <Radio
+                              checked={false}
+                              id="1"
+                              readOnly={true}
+                              style={
+                                Object {
+                                  "margin": 0,
+                                }
+                              }
+                              value="member"
+                            >
+                              <input
+                                checked={false}
+                                className="radio-select"
+                                id="1"
+                                readOnly={true}
+                                style={
+                                  Object {
+                                    "margin": 0,
+                                  }
+                                }
+                                type="radio"
+                                value="member"
+                              />
+                            </Radio>
+                            <div
+                              style={
+                                Object {
+                                  "flex": 1,
+                                  "padding": "0 16px",
+                                }
+                              }
+                            >
+                              member
+                              <TextBlock
+                                className="glamor-21"
+                              >
+                                <div
+                                  className="glamor-19 glamor-7"
+                                >
+                                  <div
+                                    className="help-block"
+                                  >
+                                    a normal member
+                                  </div>
+                                </div>
+                              </TextBlock>
+                            </div>
+                          </label>
+                        </Label>
+                      </div>
+                    </Base>
+                  </StyledPanelItem>
+                </PanelItem>
+                <PanelItem
+                  className="glamor-28"
+                  key="2"
+                  onClick={[Function]}
+                  p={2}
+                >
+                  <StyledPanelItem
+                    className="glamor-28"
+                    onClick={[Function]}
+                    p={2}
                   >
-                    another role
-                  </div>
-                </label>
-              </li>
-            </ul>
+                    <Base
+                      className="glamor-24 glamor-25"
+                      onClick={[Function]}
+                      p={2}
+                    >
+                      <div
+                        className="glamor-24 glamor-25"
+                        is={null}
+                        onClick={[Function]}
+                      >
+                        <Label>
+                          <label
+                            className="glamor-22 glamor-23"
+                          >
+                            <Radio
+                              checked={false}
+                              id="2"
+                              readOnly={true}
+                              style={
+                                Object {
+                                  "margin": 0,
+                                }
+                              }
+                              value="bar"
+                            >
+                              <input
+                                checked={false}
+                                className="radio-select"
+                                id="2"
+                                readOnly={true}
+                                style={
+                                  Object {
+                                    "margin": 0,
+                                  }
+                                }
+                                type="radio"
+                                value="bar"
+                              />
+                            </Radio>
+                            <div
+                              style={
+                                Object {
+                                  "flex": 1,
+                                  "padding": "0 16px",
+                                }
+                              }
+                            >
+                              bar
+                              <TextBlock
+                                className="glamor-21"
+                              >
+                                <div
+                                  className="glamor-19 glamor-7"
+                                >
+                                  <div
+                                    className="help-block"
+                                  >
+                                    another role
+                                  </div>
+                                </div>
+                              </TextBlock>
+                            </div>
+                          </label>
+                        </Label>
+                      </div>
+                    </Base>
+                  </StyledPanelItem>
+                </PanelItem>
+              </div>
+            </PanelBody>
           </div>
-        </div>
+        </Panel>
       </RoleSelect>
       <TeamSelect
         selectedTeams={
@@ -198,77 +481,138 @@ exports[`CreateProject render() should render roles when available and allowed,
         }
         toggleTeam={[Function]}
       >
-        <div
-          className="new-invite-team box"
+        <Panel
+          className="new-invite-team"
         >
           <div
-            className="box-header"
-          >
-            <h4>
-              Team
-            </h4>
-          </div>
-          <div
-            className="grouping-controls team-choices row box-content with-padding"
+            className="new-invite-team glamor-41 glamor-42"
           >
-            <div
-              className="col-md-3"
-              key="bar"
-            >
-              <label
-                className="checkbox"
-              >
-                <Checkbox
-                  checked={false}
-                  id="bar"
-                  onChange={[Function]}
+            <PanelHeader>
+              <StyledPanelHeader>
+                <Component
+                  className="glamor-15 glamor-16"
                 >
-                  <input
-                    checked={false}
-                    className="chk-select"
-                    id="bar"
-                    onChange={[Function]}
-                    type="checkbox"
-                  />
-                </Checkbox>
-                bar
-                <span
-                  className="team-slug"
-                >
-                  bar
-                </span>
-              </label>
-            </div>
-            <div
-              className="col-md-3"
-              key="foo"
+                  <div
+                    className="glamor-15 glamor-16"
+                  >
+                    <StyledPanelHeading>
+                      <Component
+                        className="glamor-11 glamor-8"
+                      >
+                        <PanelHeading
+                          className="glamor-11 glamor-8"
+                        >
+                          <div
+                            className="glamor-8 glamor-9 glamor-10"
+                          >
+                            Team
+                          </div>
+                        </PanelHeading>
+                      </Component>
+                    </StyledPanelHeading>
+                  </div>
+                </Component>
+              </StyledPanelHeader>
+            </PanelHeader>
+            <PanelBody
+              className="grouping-controls team-choices"
+              direction="column"
+              disablePadding={true}
+              flex={false}
             >
-              <label
-                className="checkbox"
+              <div
+                className="grouping-controls team-choices"
               >
-                <Checkbox
-                  checked={false}
-                  id="foo"
-                  onChange={[Function]}
+                <PanelItem
+                  className="glamor-62"
+                  p={2}
                 >
-                  <input
-                    checked={false}
-                    className="chk-select"
-                    id="foo"
-                    onChange={[Function]}
-                    type="checkbox"
-                  />
-                </Checkbox>
-                foo
-                <span
-                  className="team-slug"
-                >
-                  foo
-                </span>
-              </label>
-            </div>
+                  <StyledPanelItem
+                    className="glamor-62"
+                    p={2}
+                  >
+                    <Base
+                      className="glamor-58 glamor-25"
+                      p={2}
+                    >
+                      <div
+                        className="glamor-58 glamor-25"
+                        is={null}
+                      >
+                        <TeamItem
+                          key="bar"
+                        >
+                          <div
+                            className="glamor-54 glamor-55"
+                          >
+                            <label
+                              className="checkbox"
+                            >
+                              <Checkbox
+                                checked={false}
+                                id="bar"
+                                onChange={[Function]}
+                              >
+                                <input
+                                  checked={false}
+                                  className="chk-select"
+                                  id="bar"
+                                  onChange={[Function]}
+                                  type="checkbox"
+                                />
+                              </Checkbox>
+                              <span>
+                                bar
+                              </span>
+                              <span
+                                className="team-slug"
+                              >
+                                bar
+                              </span>
+                            </label>
+                          </div>
+                        </TeamItem>
+                        <TeamItem
+                          key="foo"
+                        >
+                          <div
+                            className="glamor-54 glamor-55"
+                          >
+                            <label
+                              className="checkbox"
+                            >
+                              <Checkbox
+                                checked={false}
+                                id="foo"
+                                onChange={[Function]}
+                              >
+                                <input
+                                  checked={false}
+                                  className="chk-select"
+                                  id="foo"
+                                  onChange={[Function]}
+                                  type="checkbox"
+                                />
+                              </Checkbox>
+                              <span>
+                                foo
+                              </span>
+                              <span
+                                className="team-slug"
+                              >
+                                foo
+                              </span>
+                            </label>
+                          </div>
+                        </TeamItem>
+                      </div>
+                    </Base>
+                  </StyledPanelItem>
+                </PanelItem>
+              </div>
+            </PanelBody>
           </div>
-        </div>
+        </Panel>
       </TeamSelect>
       <Button
         busy={false}
@@ -304,7 +648,7 @@ exports[`CreateProject render() should render roles when available and allowed,
 `;
 
 exports[`CreateProject render() should use invite/add language based on config 1`] = `
-<p>
+<TextBlock>
   You may add a user by their username if they already have an account. Multiple inputs delimited by commas.
-</p>
+</TextBlock>
 `;

tests/js/spec/views/inviteMember/inviteMember.spec.jsx

@@ -90,7 +90,7 @@ describe('CreateProject', function() {
       });
 
       // Lets just target message
-      expect(wrapper.find('div > p')).toMatchSnapshot();
+      expect(wrapper.find('TextBlock')).toMatchSnapshot();
     });
 
     it('should redirect when no roles available', function() {
@@ -144,7 +144,7 @@ describe('CreateProject', function() {
 
       expect(wrapper.state('loading')).toBe(false);
 
-      let node = wrapper.find('.radio').first();
+      let node = wrapper.find('RoleSelect PanelItem').first();
       node.props().onClick();
 
       node = wrapper.find('.team-choices input').first();