From e46b4de0bb71bca46a7236fc27156e3fffe99614 Mon Sep 17 00:00:00 2001
From: gabrielburnworth <gabrielburnworth@users.noreply.github.com>
Date: Fri, 7 Feb 2020 15:05:59 -0800
Subject: [PATCH] os download page updates

---
 frontend/css/global.scss                        | 3 ++-
 frontend/os_download/__tests__/content_test.tsx | 8 +++++---
 frontend/os_download/content.tsx                | 9 ++++++---
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/frontend/css/global.scss b/frontend/css/global.scss
index 04ecd0a8f..8e320263b 100644
--- a/frontend/css/global.scss
+++ b/frontend/css/global.scss
@@ -1579,7 +1579,7 @@ textarea:focus {
     }
   }
   table {
-    margin: 2rem;
+    margin: auto;
     margin-top: 3rem;
     width: 93%;
     font-size: 1.2rem;
@@ -1596,6 +1596,7 @@ textarea:focus {
       padding-bottom: 1rem;
       span {
         display: block;
+        white-space: nowrap;
       }
     }
   }
diff --git a/frontend/os_download/__tests__/content_test.tsx b/frontend/os_download/__tests__/content_test.tsx
index b40180e2a..3b98f7eff 100644
--- a/frontend/os_download/__tests__/content_test.tsx
+++ b/frontend/os_download/__tests__/content_test.tsx
@@ -13,12 +13,14 @@ import * as React from "react";
 import { mount } from "enzyme";
 import { OsDownload } from "../content";
 
+const DOWNLOAD_PREFIX = "DOWNLOAD ";
+
 describe("<OsDownload />", () => {
   it("fetches and renders", async () => {
     const wrapper = await mount<OsDownload>(<OsDownload />);
     expect(wrapper.state().tagName).toEqual("v1.0.0");
     expect(wrapper.state().genesisImg).toEqual("fake rpi3 img url");
-    expect(wrapper.text()).toContain("Download FBOS v1.0.0");
+    expect(wrapper.text()).toContain(DOWNLOAD_PREFIX + "v1.0.0");
     wrapper.update();
     expect(wrapper.find("a").first().props().href)
       .toEqual("fake rpi3 img url");
@@ -28,7 +30,7 @@ describe("<OsDownload />", () => {
     globalConfig.GENESIS_IMG_FALLBACK = "fake rpi3 img fallback url///////v0.0.0";
     mockResponse = Promise.reject();
     const wrapper = await mount(<OsDownload />);
-    expect(wrapper.text()).toContain("Download FBOS v0.0.0");
+    expect(wrapper.text()).toContain(DOWNLOAD_PREFIX + "v0.0.0");
     expect(wrapper.find("a").first().props().href)
       .toEqual(globalConfig.GENESIS_IMG_FALLBACK);
   });
@@ -36,7 +38,7 @@ describe("<OsDownload />", () => {
   it("uses override", async () => {
     globalConfig.GENESIS_IMG_OVERRIDE = "fake rpi3 img override url";
     const wrapper = await mount(<OsDownload />);
-    expect(wrapper.text()).toContain("Download FBOS");
+    expect(wrapper.text()).toContain(DOWNLOAD_PREFIX);
     wrapper.update();
     expect(wrapper.find("a").first().props().href)
       .toEqual(globalConfig.GENESIS_IMG_OVERRIDE);
diff --git a/frontend/os_download/content.tsx b/frontend/os_download/content.tsx
index a55436f1e..c30d5c016 100644
--- a/frontend/os_download/content.tsx
+++ b/frontend/os_download/content.tsx
@@ -22,6 +22,9 @@ const tagNameFromUrl = (url: string) => {
   return tagPart.startsWith("v") ? tagPart : "";
 };
 
+const downloadButtonText = (versionString: string) =>
+  `${t("DOWNLOAD")} ${versionString}`;
+
 export class OsDownload extends React.Component<{}, OsDownloadState> {
   state: OsDownloadState = { tagName: "", genesisImg: "", expressImg: "" };
 
@@ -75,15 +78,15 @@ export class OsDownload extends React.Component<{}, OsDownloadState> {
                 <span>{"Genesis v1.2"}</span>
                 <span>{"Genesis v1.3"}</span>
                 <span>{"Genesis v1.4"}</span>
-                <span>{"Genesis XL v1.4"}</span>
                 <span>{"Genesis v1.5"}</span>
+                <span>{"Genesis XL v1.4"}</span>
                 <span>{"Genesis XL v1.5"}</span>
               </td>
               <td>{t("Raspberry Pi 3")}</td>
               <td>
                 <a className="transparent-link-button"
                   href={this.genesisImgDownloadLink}>
-                  {`${t("Download")} FBOS ${this.genesisTagName}`}
+                  {downloadButtonText(this.genesisTagName)}
                 </a>
               </td>
             </tr>
@@ -96,7 +99,7 @@ export class OsDownload extends React.Component<{}, OsDownloadState> {
               <td>
                 <a className="transparent-link-button"
                   href={this.expressImgDownloadLink}>
-                  {`${t("Download")} FBOS ${this.expressTagName}`}
+                  {downloadButtonText(this.expressTagName)}
                 </a>
               </td>
             </tr>