SponsorDialog: make team link inline

Also buttons cannot be inside of `<p>` tags.

Author: dlech

src/sponsor/SponsorDialog.tsx

@@ -30,14 +30,23 @@ const SponsorDialog: React.VoidFunctionComponent = () => {
             <div className={classNames(Classes.DIALOG_BODY, Classes.RUNNING_TEXT)}>
                 <h4>{i18n.translate('whoAreWe.heading')}</h4>
                 <p>
-                    {i18n.translate('whoAreWe.team')}{' '}
-                    <a href={pybricksTeamUrl} target="_blank" rel="noreferrer">
-                        {i18n.translate('whoAreWe.learnMore')}
-                    </a>
-                    <ExternalLinkIcon />
+                    {i18n.translate('whoAreWe.team.about', {
+                        team: (
+                            <>
+                                <a
+                                    href={pybricksTeamUrl}
+                                    target="_blank"
+                                    rel="noreferrer"
+                                >
+                                    {i18n.translate('whoAreWe.team.team')}
+                                </a>
+                                <ExternalLinkIcon />
+                            </>
+                        ),
+                    })}
                 </p>
-
                 <p>{i18n.translate('whoAreWe.mission')}</p>
+
                 <h4>{i18n.translate('whyDonate.heading')}</h4>
                 <p>{i18n.translate('whyDonate.body')}</p>
                 <p>
@@ -49,10 +58,13 @@ const SponsorDialog: React.VoidFunctionComponent = () => {
                         <li>{i18n.translate('donateReason.supportOthers')}</li>
                     </ul>
                 </p>
+
                 <h4>{i18n.translate('donateOptions.heading')}</h4>
                 <p>{i18n.translate('donateOptions.options')}</p>
                 <p>{i18n.translate('donateOptions.thanks')}</p>
-                <p>
+            </div>
+            <div className={Classes.DIALOG_FOOTER}>
+                <div className={Classes.DIALOG_FOOTER_ACTIONS}>
                     <AnchorButton
                         large={true}
                         intent={Intent.PRIMARY}
@@ -65,8 +77,6 @@ const SponsorDialog: React.VoidFunctionComponent = () => {
                         GitHub Sponsors
                         <ExternalLinkIcon />
                     </AnchorButton>
-                </p>
-                <p>
                     <AnchorButton
                         large={true}
                         intent={Intent.PRIMARY}
@@ -79,8 +89,6 @@ const SponsorDialog: React.VoidFunctionComponent = () => {
                         Patreon
                         <ExternalLinkIcon />
                     </AnchorButton>
-                </p>
-                <p>
                     <AnchorButton
                         large={true}
                         intent={Intent.PRIMARY}
@@ -93,8 +101,6 @@ const SponsorDialog: React.VoidFunctionComponent = () => {
                         Paypal
                         <ExternalLinkIcon />
                     </AnchorButton>
-                </p>
-                <p>
                     <AnchorButton
                         large={true}
                         intent={Intent.PRIMARY}
@@ -103,7 +109,7 @@ const SponsorDialog: React.VoidFunctionComponent = () => {
                     >
                         pybricks.eth
                     </AnchorButton>
-                </p>
+                </div>
             </div>
         </Dialog>
     );

src/sponsor/translations/en.json

@@ -2,8 +2,10 @@
     "title": "Sponsor {pybricks}",
     "whoAreWe": {
         "heading": "Who are we?",
-        "team": "Pybricks is run by a small team, supported by a community of open source coding enthusiasts from all around the world.",
-        "learnMore": "Learn more.",
+        "team": {
+            "about": "Pybricks is run by a small {team}, supported by a community of open source coding enthusiasts from all around the world.",
+            "team": "team"
+        },
         "mission": "Our mission is to make robotics fun and accessible and teach a million people how to code. And you can help!"
     },
     "whyDonate": {