From 5e95fa7d3cd3fe47daabdc91b0af36de30782210 Mon Sep 17 00:00:00 2001
From: Thomas Weber <weber_t@mailbox.org>
Date: Wed, 19 May 2021 18:04:44 -0500
Subject: [PATCH] Slightly improve footer

---
 src/playground/interface.css        |  15 +-
 src/playground/render-interface.jsx | 203 +++++++++++++---------------
 2 files changed, 108 insertions(+), 110 deletions(-)

diff --git a/src/playground/interface.css b/src/playground/interface.css
index 259f01cf2..af65eea7c 100644
--- a/src/playground/interface.css
+++ b/src/playground/interface.css
@@ -38,13 +38,16 @@ a {
     margin-top: 10px;
     background: #eee;
 }
+.footer a {
+    font-weight: bold;
+    text-decoration: none;
+}
 [theme="dark"] .footer {
     background-color: #151515;
 }
 .footer-content {
     max-width: 600px;
     margin: auto;
-    flex-wrap: wrap;
 }
 .footer-text {
     text-align: center;
@@ -52,15 +55,19 @@ a {
 }
 .footer-columns {
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
+    align-items: center;
+    justify-items: center;
     flex-wrap: wrap;
 }
 .footer-section {
-    max-width: 200px;
+    display: flex;
+    flex-direction: column;
+    width: 200px;
     margin-bottom: 10px;
 }
 .footer-section > * {
-    margin-bottom: 8px;
+    margin-bottom: 10px;
 }
 .footer-header {
     font-weight: bold;
diff --git a/src/playground/render-interface.jsx b/src/playground/render-interface.jsx
index 76a56e718..ec3b1331c 100644
--- a/src/playground/render-interface.jsx
+++ b/src/playground/render-interface.jsx
@@ -45,6 +45,7 @@ import {isRendererSupported, isEvalSupported} from '../lib/tw-environment-suppor
 import styles from './interface.css';
 
 if (window.parent !== window) {
+    // eslint-disable-next-line no-alert
     alert('This page is embedding TurboWarp in a way that is unsupported and will cease to function in the near future. Please read https://github.com/TurboWarp/scratch-gui/wiki/Embedding');
 }
 
@@ -87,6 +88,100 @@ const WrappedMenuBar = compose(
 
 import(/* webpackChunkName: "addons" */ '../addons/entry');
 
+const Footer = () => (
+    <footer className={styles.footer}>
+        <div className={styles.footerContent}>
+            <div className={styles.footerText}>
+                <FormattedMessage
+                    // eslint-disable-next-line max-len
+                    defaultMessage="TurboWarp is not affiliated with Scratch, the Scratch Team, or the Scratch Foundation."
+                    description="Disclaimer that TurboWarp is not connected to Scratch"
+                    id="tw.footer.disclaimer"
+                />
+            </div>
+            <div className={styles.footerColumns}>
+                <div className={styles.footerSection}>
+                    <div className={styles.footerHeader}>
+                        <FormattedMessage
+                            defaultMessage="Credits"
+                            description="Credits link in footer"
+                            id="tw.footer.credits"
+                        />
+                    </div>
+                    <a href="https://fosshost.org/">
+                        <FormattedMessage
+                            defaultMessage="Hosting provided by Fosshost"
+                            description="Fosshost link in footer"
+                            id="tw.footer.fosshost"
+                        />
+                    </a>
+                    <a href="credits.html">
+                        <FormattedMessage
+                            defaultMessage="Credits"
+                            description="Credits link in footer"
+                            id="tw.footer.credits"
+                        />
+                    </a>
+                </div>
+                <div className={styles.footerSection}>
+                    <div className={styles.footerHeader}>
+                        <FormattedMessage
+                            defaultMessage="Links"
+                            description="Title of links section of footer"
+                            id="tw.footer.links"
+                        />
+                    </div>
+                    <a href="https://desktop.turbowarp.org/">
+                        {/* Do not translate */}
+                        {'TurboWarp Desktop'}
+                    </a>
+                    <a href="https://packager.turbowarp.org/">
+                        {/* Do not translate */}
+                        {'TurboWarp Packager'}
+                    </a>
+                    <a href="https://github.com/TurboWarp/scratch-gui/wiki/Embedding">
+                        <FormattedMessage
+                            defaultMessage="Embedding"
+                            description="Menu bar item for embedding link"
+                            id="tw.menuBar.embed"
+                        />
+                    </a>
+                </div>
+                <div className={styles.footerSection}>
+                    <div className={styles.footerHeader}>
+                        <FormattedMessage
+                            defaultMessage="About"
+                            description="Title of about section of footer"
+                            id="tw.footer.about"
+                        />
+                    </div>
+                    <a href="https://scratch.mit.edu/users/GarboMuffin/#comments">
+                        <FormattedMessage
+                            defaultMessage="Feedback & Bugs"
+                            description="Link to feedback/bugs page"
+                            id="tw.feedback"
+                        />
+                    </a>
+                    <a href="https://github.com/TurboWarp/">
+                        <FormattedMessage
+                            defaultMessage="Source Code"
+                            description="Link to source code"
+                            id="tw.code"
+                        />
+                    </a>
+                    <a href="privacy.html">
+                        <FormattedMessage
+                            defaultMessage="Privacy Policy"
+                            description="Link to privacy policy"
+                            id="tw.privacy"
+                        />
+                    </a>
+                </div>
+            </div>
+        </div>
+    </footer>
+);
+
 class Interface extends React.Component {
     constructor (props) {
         super(props);
@@ -172,6 +267,7 @@ class Interface extends React.Component {
                             <div className={styles.section}>
                                 <p>
                                     <FormattedMessage
+                                        // eslint-disable-next-line max-len
                                         defaultMessage="TurboWarp is a Scratch mod that compiles projects to JavaScript to make them run really fast. Try it out by inputting a project ID or URL above or choosing a featured project below."
                                         description="Description of TurboWarp"
                                         id="tw.home.description"
@@ -184,112 +280,7 @@ class Interface extends React.Component {
                         </React.Fragment>
                     ) : null}
                 </div>
-                {isHomepage && <footer className={styles.footer}>
-                    <div className={styles.footerContent}>
-                        <div className={styles.footerText}>
-                            <FormattedMessage
-                                defaultMessage="TurboWarp is not affiliated with Scratch, the Scratch Team, or the Scratch Foundation."
-                                description="Disclaimer that TurboWarp is not connected to Scratch"
-                                id="tw.footer.disclaimer"
-                            />
-                        </div>
-                        <div className={styles.footerColumns}>
-                            <div className={styles.footerSection}>
-                                <div className={styles.footerHeader}>
-                                    <FormattedMessage
-                                        defaultMessage="Credits"
-                                        description="Credits link in footer"
-                                        id="tw.footer.credits"
-                                    />
-                                </div>
-                                <div>
-                                    <a href="https://fosshost.org/">
-                                        <FormattedMessage
-                                            defaultMessage="Hosted by Fosshost"
-                                            description="Fosshost link in footer"
-                                            id="tw.footer.fosshost"
-                                        />
-                                    </a>
-                                </div>
-                                <div>
-                                    <a href="credits.html">
-                                        <FormattedMessage
-                                            defaultMessage="Credits"
-                                            description="Credits link in footer"
-                                            id="tw.footer.credits"
-                                        />
-                                    </a>
-                                </div>
-                            </div>
-                            <div className={styles.footerSection}>
-                                <div className={styles.footerHeader}>
-                                    <FormattedMessage
-                                        defaultMessage="Links"
-                                        description="Title of links section of footer"
-                                        id="tw.footer.links"
-                                    />
-                                </div>
-                                <div>
-                                    <a href="https://desktop.turbowarp.org/">
-                                        {/* Do not translate */}
-                                        {'TurboWarp Desktop'}
-                                    </a>
-                                </div>
-                                <div>
-                                    <a href="https://packager.turbowarp.org/">
-                                        {/* Do not translate */}
-                                        {'TurboWarp Packager'}
-                                    </a>
-                                </div>
-                                <div>
-                                    <a href="https://github.com/TurboWarp/scratch-gui/wiki/Embedding">
-                                        <FormattedMessage
-                                            defaultMessage="Embedding"
-                                            description="Menu bar item for embedding link"
-                                            id="tw.menuBar.embed"
-                                        />
-                                    </a>
-                                </div>
-                            </div>
-                            <div className={styles.footerSection}>
-                                <div className={styles.footerHeader}>
-                                    <FormattedMessage
-                                        defaultMessage="About"
-                                        description="Title of about section of footer"
-                                        id="tw.footer.about"
-                                    />
-                                </div>
-                                <div>
-                                    <a href="https://scratch.mit.edu/users/GarboMuffin/#comments">
-                                        <FormattedMessage
-                                            defaultMessage="Feedback & Bugs"
-                                            description="Link to feedback/bugs page"
-                                            id="tw.feedback"
-                                        />
-                                    </a>
-                                </div>
-                                <div>
-                                    <a href="https://github.com/TurboWarp/">
-                                        <FormattedMessage
-                                            defaultMessage="Source Code"
-                                            description="Link to source code"
-                                            id="tw.code"
-                                        />
-                                    </a>
-                                </div>
-                                <div>
-                                    <a href="privacy.html">
-                                        <FormattedMessage
-                                            defaultMessage="Privacy Policy"
-                                            description="Link to privacy policy"
-                                            id="tw.privacy"
-                                        />
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </footer>}
+                {isHomepage && <Footer />}
             </div>
         );
     }