mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
Merge pull request #8910 from overleaf/ta-add-email-wider
Wider Add Email Input GitOrigin-RevId: e0b3a8577754205ac12fbfb17e56eb1f844a5273
This commit is contained in:
parent
d730d20264
commit
0e2245930d
4 changed files with 53 additions and 43 deletions
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -10,7 +10,7 @@ function UniversityName({ name, onClick }: UniversityNameProps) {
|
|||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<p className="pt-1">
|
||||
<p>
|
||||
{name}
|
||||
<span className="small">
|
||||
{' '}
|
||||
|
|
|
@ -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%);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue