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

Wider Add Email Input

GitOrigin-RevId: e0b3a8577754205ac12fbfb17e56eb1f844a5273

services/web/frontend/js/features/settings/components/emails/add-email.tsx

@@ -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>

services/web/frontend/js/features/settings/components/emails/add-email/email-affiliated-with-institution.tsx

@@ -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>

services/web/frontend/js/features/settings/components/emails/add-email/university-name.tsx

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

services/web/frontend/stylesheets/app/account-settings.less

@@ -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%);
 }