Merge pull request #8910 from overleaf/ta-add-email-wider

Wider Add Email Input

GitOrigin-RevId: e0b3a8577754205ac12fbfb17e56eb1f844a5273
This commit is contained in:
Timothée Alby 2022-07-20 16:00:55 +02:00 committed by Copybot
parent d730d20264
commit 0e2245930d
4 changed files with 53 additions and 43 deletions

View file

@ -107,31 +107,31 @@ function AddEmail() {
)
}
const InputCol = (
<Col md={4}>
<Cell>
<label htmlFor="affiliations-email" className="sr-only">
{t('email')}
</label>
<Input
onChange={handleEmailChange}
handleAddNewEmail={handleAddNewEmail}
/>
</Cell>
</Col>
const InputComponent = (
<>
<label htmlFor="affiliations-email" className="sr-only">
{t('email')}
</label>
<Input
onChange={handleEmailChange}
handleAddNewEmail={handleAddNewEmail}
/>
</>
)
if (!isValidEmail(newEmail)) {
return (
<Layout isError={isError} error={error}>
<form>
{InputCol}
<Col md={5}>
<Col md={8}>
<Cell>
<div>{t('start_by_adding_your_email')}</div>
{InputComponent}
<div className="affiliations-table-cell-tabbed">
<div>{t('start_by_adding_your_email')}</div>
</div>
</Cell>
</Col>
<Col md={3}>
<Col md={4}>
<Cell className="text-md-right">
<AddNewEmailBtn email={newEmail} disabled />
</Cell>
@ -141,24 +141,17 @@ function AddEmail() {
)
}
const isSsoAvailableForDomain =
newEmailMatchedDomain && ssoAvailableForDomain(newEmailMatchedDomain)
return (
<Layout isError={isError} error={error}>
<form>
{InputCol}
{newEmailMatchedDomain &&
ssoAvailableForDomain(newEmailMatchedDomain) ? (
<Col md={8}>
<Cell>
<SsoLinkingInfo
email={newEmail}
domainInfo={newEmailMatchedDomain}
/>
</Cell>
</Col>
) : (
<>
<Col md={5}>
<Cell>
<Col md={8}>
<Cell>
{InputComponent}
{!isSsoAvailableForDomain ? (
<div className="affiliations-table-cell-tabbed">
<InstitutionFields
countryCode={countryCode}
setCountryCode={setCountryCode}
@ -172,18 +165,31 @@ function AddEmail() {
setDepartment={setDepartment}
newEmailMatchedDomain={newEmailMatchedDomain}
/>
</Cell>
</Col>
<Col md={3}>
<Cell className="text-md-right">
<AddNewEmailBtn
</div>
) : null}
</Cell>
</Col>
{!isSsoAvailableForDomain ? (
<Col md={4}>
<Cell className="text-md-right">
<AddNewEmailBtn
email={newEmail}
disabled={isLoading || state.isLoading}
onClick={handleAddNewEmail}
/>
</Cell>
</Col>
) : (
<Col md={12}>
<Cell>
<div className="affiliations-table-cell-tabbed">
<SsoLinkingInfo
email={newEmail}
disabled={isLoading || state.isLoading}
onClick={handleAddNewEmail}
domainInfo={newEmailMatchedDomain as DomainInfo}
/>
</Cell>
</Col>
</>
</div>
</Cell>
</Col>
)}
</form>
</Layout>

View file

@ -7,7 +7,6 @@ function EmailAffiliatedWithInstitution({ onClick, ...props }: ButtonProps) {
return (
<div className="mt-1">
{t('is_email_affiliated')}
<br />
<Button className="btn-inline-link" onClick={onClick} {...props}>
{t('let_us_know')}
</Button>

View file

@ -10,7 +10,7 @@ function UniversityName({ name, onClick }: UniversityNameProps) {
const { t } = useTranslation()
return (
<p className="pt-1">
<p>
{name}
<span className="small">
{' '}

View file

@ -27,6 +27,11 @@
padding: 0.5rem;
overflow-wrap: break-word;
}
.affiliations-table-cell-tabbed {
margin: @margin-sm 0 0 @margin-md;
padding-left: @margin-sm;
border-left: 2px solid @table-border-color;
}
.affiliations-table-row--highlighted {
background-color: tint(@content-alt-bg-color, 6%);
}