Merge pull request #3489 from matrix-org/jryans/terms-dialog-tweaks

Adjust details of terms dialog

res/css/views/dialogs/_TermsDialog.scss

@@ -40,6 +40,7 @@ limitations under the License.
 }
 
 .mx_TermsDialog_link {
+    display: inline-block;
     mask-image: url('$(res)/img/external-link.svg');
     background-color: $accent-color;
     width: 10px;

src/components/views/dialogs/TermsDialog.js

@@ -90,21 +90,17 @@ export default class TermsDialog extends React.PureComponent {
         }
     }
 
-    _summaryForServiceType(serviceType, docName) {
+    _summaryForServiceType(serviceType) {
         switch (serviceType) {
             case Matrix.SERVICE_TYPES.IS:
                 return <div>
                     {_t("Find others by phone or email")}
                     <br />
                     {_t("Be found by phone or email")}
-                    {docName !== null ? <br /> : ''}
-                    {docName !== null ? '('+docName+')' : ''}
                 </div>;
             case Matrix.SERVICE_TYPES.IM:
                 return <div>
                     {_t("Use bots, bridges, widgets and sticker packs")}
-                    {docName !== null ? <br /> : ''}
-                    {docName !== null ? '('+docName+')' : ''}
                 </div>;
         }
     }
@@ -128,19 +124,19 @@ export default class TermsDialog extends React.PureComponent {
                 const termDoc = policyValues[i];
                 const termsLang = pickBestLanguage(Object.keys(termDoc).filter((k) => k !== 'version'));
                 let serviceName;
+                let summary;
                 if (i === 0) {
                     serviceName = this._nameForServiceType(policiesAndService.service.serviceType, parsedBaseUrl.host);
+                    summary = this._summaryForServiceType(
+                        policiesAndService.service.serviceType,
+                    );
                 }
-                const summary = this._summaryForServiceType(
-                    policiesAndService.service.serviceType,
-                    policyValues.length > 1 ? termDoc[termsLang].name : null,
-                );
 
                 rows.push(<tr key={termDoc[termsLang].url}>
                     <td className="mx_TermsDialog_service">{serviceName}</td>
                     <td className="mx_TermsDialog_summary">{summary}</td>
-                    <td><a rel="noopener" target="_blank" href={termDoc[termsLang].url}>
+                    <td>{termDoc[termsLang].name} <a rel="noopener" target="_blank" href={termDoc[termsLang].url}>
-                        <div className="mx_TermsDialog_link" />
+                        <span className="mx_TermsDialog_link" />
                     </a></td>
                     <td><TermsCheckbox
                         url={termDoc[termsLang].url}
@@ -184,13 +180,13 @@ export default class TermsDialog extends React.PureComponent {
                 hasCancel={false}
             >
                 <div id='mx_Dialog_content'>
-                    <p>{_t("To continue you need to accept the Terms of this service.")}</p>
+                    <p>{_t("To continue you need to accept the terms of this service.")}</p>
 
                     <table className="mx_TermsDialog_termsTable"><tbody>
                         <tr className="mx_TermsDialog_termsTableHeader">
                             <th>{_t("Service")}</th>
                             <th>{_t("Summary")}</th>
-                            <th>{_t("Terms")}</th>
+                            <th>{_t("Document")}</th>
                             <th>{_t("Accept")}</th>
                         </tr>
                         {rows}

src/i18n/strings/en_EN.json

@@ -1383,10 +1383,10 @@
     "Be found by phone or email": "Be found by phone or email",
     "Use bots, bridges, widgets and sticker packs": "Use bots, bridges, widgets and sticker packs",
     "Terms of Service": "Terms of Service",
-    "To continue you need to accept the Terms of this service.": "To continue you need to accept the Terms of this service.",
+    "To continue you need to accept the terms of this service.": "To continue you need to accept the terms of this service.",
     "Service": "Service",
     "Summary": "Summary",
-    "Terms": "Terms",
+    "Document": "Document",
     "Next": "Next",
     "You are currently blacklisting unverified devices; to send messages to these devices you must verify them.": "You are currently blacklisting unverified devices; to send messages to these devices you must verify them.",
     "We recommend you go through the verification process for each device to confirm they belong to their legitimate owner, but you can resend the message without verifying if you prefer.": "We recommend you go through the verification process for each device to confirm they belong to their legitimate owner, but you can resend the message without verifying if you prefer.",