From 8bfa310f5af093e04362bab18e2268840c39ab50 Mon Sep 17 00:00:00 2001
From: picklesrus <picklesrus@users.noreply.github.com>
Date: Mon, 10 Dec 2018 19:34:23 -0500
Subject: [PATCH] Fix line spacing and font size along with a message.

---
 src/views/download/download.jsx  | 20 ++++++++++-------
 src/views/download/download.scss | 37 +++++++++++---------------------
 src/views/download/l10n.json     |  2 +-
 3 files changed, 25 insertions(+), 34 deletions(-)

diff --git a/src/views/download/download.jsx b/src/views/download/download.jsx
index 3bd0b3320..8195bd69a 100644
--- a/src/views/download/download.jsx
+++ b/src/views/download/download.jsx
@@ -55,7 +55,9 @@ class Download extends React.Component {
                                 />
                                 <FormattedMessage id="download.title" />
                                 </h1>
-                                <FormattedMessage id="download.intro" />
+                                <span className="download-description">
+                                    <FormattedMessage id="download.intro" />
+                                </span>
                             </FlexRow>
                             <FlexRow className="column download-requirements-container">
                                 <span className="requirements-header">
@@ -93,7 +95,7 @@ class Download extends React.Component {
                 />
                 <div className="blue install-scratch">
                     <FlexRow className="inner column">
-                        <h2>
+                        <h2 className="title">
                             <FormattedMessage id="download.installHeaderTitle" />
                         </h2>
                         <Steps>
@@ -148,23 +150,25 @@ class Download extends React.Component {
                 </div>
                 <div className="download-section faq">
                     <FlexRow className="inner column">
-                        <h2><FormattedMessage id="download.troubleshootingTitle" /></h2>
+                        <h2 className="faq-title">
+                            <FormattedMessage id="download.troubleshootingTitle" />
+                        </h2>
 
-                        <h3 className="faq-title">
+                        <h3 className="faq-question">
                             <FormattedMessage id="download.howDoIInstall" />
                         </h3>
                         <p>
                             You will need to install lorem ipsum dolor sit amet, consectetur adipiscing elit.
                         </p>
 
-                        <h3 className="faq-title">
+                        <h3 className="faq-question">
                             <FormattedMessage id="download.whenSupportLinux" />
                         </h3>
                         <p>
                             <FormattedMessage id="download.supportLinuxAnswer" />
                         </p>
 
-                        <h3 className="faq-title">
+                        <h3 className="faq-question">
                             <FormattedMessage id="download.supportChromeOS" />
                         </h3>
                         <p>
@@ -172,7 +176,7 @@ class Download extends React.Component {
                         </p>
 
 
-                        <h3 className="faq-title">
+                        <h3 className="faq-question">
                             { this.state.OS === OS_ENUM.WINDOWS ?
                                 <FormattedMessage id="download.cannotAccessWindowsStore" /> :
                                 <FormattedMessage id="download.cannotAccessMacStore" />
@@ -197,7 +201,7 @@ class Download extends React.Component {
                         <h2>
                             <FormattedMessage id="download.olderVersionsTitle" />
                         </h2>
-                        <h3 className="faq-title">
+                        <h3 className="faq-question">
                             <FormattedMessage id="download.olderVersions" />
                         </h3>
                         <FlexRow>
diff --git a/src/views/download/download.scss b/src/views/download/download.scss
index 5510b2554..64464c12a 100644
--- a/src/views/download/download.scss
+++ b/src/views/download/download.scss
@@ -11,6 +11,9 @@
         color: $ui-white;
         padding: 4rem 0;
 
+        .title {
+            font-size: 2rem;
+        }
         .inner {
             justify-content: space-between;
             flex-wrap: nowrap;
@@ -35,6 +38,10 @@
                         max-height: 100%;
                     }
                 }
+                .download-description {
+                    font-size: 1.2rem;
+                    line-height: 1.7rem;
+                }
             }
 
             .download-requirements-container {
@@ -88,32 +95,10 @@
             width: 150px;
             height: 80px;
         }
-
-        .horizontal-divider {
-            display: block;
-            margin: 20px;
+        .title {
+            margin-bottom: 1rem;
         }
 
-        .horizontal-divider:before,
-        .horizontal-divider:after {
-            display: inline-block;
-            position: relative;
-            background-color: $ui-dark-gray;
-            width: 50%;
-            height: 1px;
-            vertical-align: middle;
-            content: "";
-        }
-
-        .horizontal-divider:before {
-            right: .5em;
-            margin-left: -50%;
-        }
-
-        .horizontal-divider:after {
-            left: .5em;
-            margin-right: -50%;
-        }
     }
     .download-section {
         padding: 4rem 0;
@@ -133,8 +118,10 @@
             max-width: $cols8;
             text-align: left;
         }
-
         .faq-title {
+            margin-bottom: 1rem;
+        }
+        .faq-question{
             margin-bottom: 0;
             font-size: 1.4rem;
         }
diff --git a/src/views/download/l10n.json b/src/views/download/l10n.json
index 7055fa2b8..7fb35e6ef 100644
--- a/src/views/download/l10n.json
+++ b/src/views/download/l10n.json
@@ -1,6 +1,6 @@
 {
   "download.title": "Scratch 3.0 Desktop",
-  "download.intro": "You can install the Scratch 3.0 editor to work on projects without an internet connection. This version will work on Windows and MacOS",
+  "download.intro": "You can install the Scratch 3.0 editor to work on projects without an internet connection. This version will work on Windows and MacOS.",
   "download.requirements": "Requirements",
   "download.imgAltDownloadIllustration" : "Scratch 3.0 Desktop screenshot",
   "download.installHeaderTitle": "Install Scratch Desktop",