From 11f74cdab0f9aee38cd6b7b68da15c8a87e0a8ba Mon Sep 17 00:00:00 2001
From: Thomas Weber <tommyweber33@gmail.com>
Date: Mon, 27 Jul 2020 13:57:39 -0500
Subject: [PATCH] Some more updates to get this ready

---
 src/components/menu-bar/menu-bar.jsx | 38 ++++++++++++++++-----
 src/components/tw-home/tw-home.css   | 16 +++++++--
 src/components/tw-home/tw-home.jsx   | 50 +++++++++++++++++++++++++---
 3 files changed, 89 insertions(+), 15 deletions(-)

diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx
index f9a1c29d3..87ddb5c54 100644
--- a/src/components/menu-bar/menu-bar.jsx
+++ b/src/components/menu-bar/menu-bar.jsx
@@ -97,6 +97,7 @@ const ariaMessages = defineMessages({
 
 const openSourceCodeLink = () => window.open('https://github.com/TurboWarp', '_blank');
 const openReportBugsLink = () => window.open('https://scratch.mit.edu/users/GarboMuffin/#comments', '_blank');
+const goHome = () => location.hash = '';
 
 const MenuBarItemTooltip = ({
     children,
@@ -527,13 +528,13 @@ class MenuBar extends React.Component {
                                                 <FormattedMessage
                                                     defaultMessage="Turn on 60 FPS mode"
                                                     description="Menu bar item for turning on compatibility mode"
-                                                    id="tw.compatibilityModeOn"
+                                                    id="tw.settings.compatOn"
                                                 />
                                             ) : (
                                                 <FormattedMessage
                                                     defaultMessage="Turn off 60 FPS mode"
                                                     description="Menu bar item for turning off compatibility mode"
-                                                    id="tw.compatibilityModeOff"
+                                                    id="tw.settings.compatOff"
                                                 />
                                             )}
                                         </MenuItem>
@@ -547,13 +548,13 @@ class MenuBar extends React.Component {
                                                 <FormattedMessage
                                                     defaultMessage="Disable Compiler"
                                                     description="Menu bar item for disabling the compiler"
-                                                    id="tw.compilerDisable"
+                                                    id="tw.settings.compilerOff"
                                                 />
                                             ) : (
                                                 <FormattedMessage
                                                     defaultMessage="Enable Compiler"
                                                     description="Menu bar item for enabling the compiler"
-                                                    id="tw.compilerEnable"
+                                                    id="tw.settings.compilerOn"
                                                 />
                                             )}
                                         </MenuItem>
@@ -563,7 +564,7 @@ class MenuBar extends React.Component {
                                             <FormattedMessage
                                                 defaultMessage="Change Username"
                                                 description="Menu bar item for changing the username"
-                                                id="tw.changeUsername"
+                                                id="tw.settings.changeUsername"
                                             />
                                         </MenuItem>
                                     )}</ChangeUsername>
@@ -573,13 +574,13 @@ class MenuBar extends React.Component {
                                                 <FormattedMessage
                                                     defaultMessage="Disable cloud variables"
                                                     description="Menu bar item for disabling cloud variables"
-                                                    id="tw.disableCloud"
+                                                    id="tw.settings.cloudOff"
                                                 />
                                             ) : (
                                                 <FormattedMessage
                                                     defaultMessage="Enable cloud variables"
                                                     description="Menu bar item for enabling cloud variables"
-                                                    id="tw.enableCloud"
+                                                    id="tw.settings.cloudOn"
                                                 />
                                             )}
                                         </MenuItem>
@@ -607,8 +608,27 @@ class MenuBar extends React.Component {
                                 onRequestClose={this.props.onRequestCloseLinks}
                             >
                                 <MenuSection>
-                                    <MenuItem onClick={openSourceCodeLink}>Source Code</MenuItem>
-                                    <MenuItem onClick={openReportBugsLink}>Report Bugs</MenuItem>
+                                    <MenuItem onClick={goHome}>
+                                        <FormattedMessage
+                                            defaultMessage="Back to home"
+                                            description="Text for returning to home in the Links dropdown"
+                                            id="tw.links.home"
+                                        />
+                                    </MenuItem>
+                                    <MenuItem onClick={openSourceCodeLink}>
+                                        <FormattedMessage
+                                            defaultMessage="Source Code"
+                                            description="Text for Source Code in the Links dropdown"
+                                            id="tw.links.code"
+                                        />
+                                    </MenuItem>
+                                    <MenuItem onClick={openReportBugsLink}>
+                                        <FormattedMessage
+                                            defaultMessage="Report Bugs"
+                                            description="Text for Report Bugs in the Links dropdown"
+                                            id="tw.links.bugs"
+                                        />
+                                    </MenuItem>
                                 </MenuSection>
                             </MenuBarMenu>
                         </div>
diff --git a/src/components/tw-home/tw-home.css b/src/components/tw-home/tw-home.css
index 021e44b6e..4713e9786 100644
--- a/src/components/tw-home/tw-home.css
+++ b/src/components/tw-home/tw-home.css
@@ -22,12 +22,12 @@
     position: relative;
     background: rgba(255, 255, 255, 1);
     box-sizing: border-box;
-    max-width: 640px;
+    min-width: 480px;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    padding: 30px;
+    padding: 15px;
 }
 
 .new-project {
@@ -38,3 +38,15 @@
 .new-project:hover {
     text-decoration: underline;
 }
+
+.title {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.subtitles {
+    text-align: right;
+}
diff --git a/src/components/tw-home/tw-home.jsx b/src/components/tw-home/tw-home.jsx
index 7e9176fc1..0d5d2166c 100644
--- a/src/components/tw-home/tw-home.jsx
+++ b/src/components/tw-home/tw-home.jsx
@@ -28,15 +28,57 @@ class Home extends React.Component {
                     onClick={this.clickClose}
                 >&times;</a>
                 <div className={styles.body}>
-                    {/* TODO: we have to make this translatable */}
-                    <h1>TurboWarp</h1>
-                    <p>TurboWarp compiles your Scratch projects to JavaScript to make them run faster. Try it out by inputting a project ID or URL below and pressing enter. Visit <a href="https://scratch.mit.edu/studios/27205657/">this studio</a> for some examples.</p>
+                    <div className={styles.title}>
+                        <h1>TurboWarp</h1>
+                        <span className={styles.subtitles}>
+                            <div>
+                                <FormattedMessage
+                                    defaultMessage="Unofficial Scratch Mod"
+                                    description="Text for explaining this is an unofficial mod of scratch on the home page"
+                                    id="tw.home.mod"
+                                />
+                            </div>
+                            <div>
+                                <a href="https://github.com/TurboWarp/">
+                                    <FormattedMessage
+                                        defaultMessage="Source Code"
+                                        description="Text for source code link on the home page"
+                                        id="tw.home.code"
+                                    />
+                                </a>
+                            </div>
+                        </span>
+                    </div>
+                    <p>
+                        <FormattedMessage
+                            defaultMessage="TurboWarp compiles your Scratch projects to JavaScript to make them run faster. Try it out by inputting a project ID or URL below and pressing enter. Visit {studioLink} for some examples"
+                            description="Description of TurboWarp"
+                            id="tw.home.description"
+                            values={{
+                                studioLink: (
+                                    <a href="https://scratch.mit.edu/studios/27205657/">
+                                        <FormattedMessage
+                                            defaultMessage="this studio"
+                                            description="link to turbowarp examples studio"
+                                            id="tw.home.description.studioLink"
+                                        />
+                                    </a>
+                                )
+                            }}
+                        />
+                    </p>
                     <ProjectInput></ProjectInput>
                     <div
                         className={styles.newProject}
                         onClick={this.clickClose}
                     >
-                        <a>or do you want to create a new project?</a>
+                        <a>
+                            <FormattedMessage
+                                defaultMessage="or do you want to create a new project?"
+                                description="Option to create a new project instead of load an existing one on homepage"
+                                id="tw.home.new"
+                            />
+                        </a>
                     </div>
                 </div>
             </div>