First cut of visual polish for installer.

6 files changed, 36 insertions, 20 deletions

diff --git a/synapse_topology/webui/src/js/components/BaseIntro.jsx b/synapse_topology/webui/src/js/components/BaseIntro.jsx
index 22f54a859a..c13f4bb345 100644
--- a/synapse_topology/webui/src/js/components/BaseIntro.jsx
+++ b/synapse_topology/webui/src/js/components/BaseIntro.jsx
@@ -3,9 +3,18 @@ import React from 'react';
 import ContentWrapper from '../containers/ContentWrapper';
 import ButtonDisplay from './ButtonDisplay';
 
+import style from '../../scss/main.scss';
+
 export default ({ onClick }) =>
     <ContentWrapper>
-        <h1>Synapse Topology</h1>
-        <p>Let's get started.</p>
-        <ButtonDisplay><button onClick={onClick}>SETUP</button></ButtonDisplay>
-    </ContentWrapper>
\ No newline at end of file
+        <div className='baseintro'>
+            <svg width="113" height="48" xmlns="http://www.w3.org/2000/svg">
+                <g fill="#2D2D2D" fill-rule="nonzero">
+                    <path d="M1.404 1.098v45.776h3.29v1.099H.142V0h4.552v1.098zM14.079 15.61v2.317h.065c.617-.882 1.36-1.567 2.231-2.052.87-.485 1.867-.728 2.99-.728 1.08 0 2.066.21 2.958.629.892.42 1.57 1.158 2.032 2.217.507-.75 1.195-1.412 2.066-1.986.87-.573 1.9-.86 3.09-.86.903 0 1.74.11 2.511.33.77.222 1.432.575 1.982 1.06.55.485.98 1.12 1.29 1.902.307.784.462 1.727.462 2.83v11.45h-4.693v-9.696c0-.574-.022-1.114-.066-1.622-.044-.507-.165-.948-.363-1.323a2.21 2.21 0 0 0-.876-.894c-.385-.22-.909-.33-1.57-.33-.66 0-1.195.127-1.602.38a2.758 2.758 0 0 0-.958.993 3.981 3.981 0 0 0-.463 1.39 10.611 10.611 0 0 0-.116 1.572v9.53h-4.692v-9.597c0-.507-.011-1.009-.033-1.505a4.238 4.238 0 0 0-.28-1.374 2.117 2.117 0 0 0-.827-1.01c-.386-.252-.953-.38-1.702-.38-.22 0-.512.05-.875.15-.364.099-.717.287-1.058.562-.342.276-.633.673-.876 1.191-.242.519-.363 1.197-.363 2.035v9.928H9.65V15.61h4.428zM38.763 18.125a5.627 5.627 0 0 1 1.85-1.754 8.056 8.056 0 0 1 2.528-.943 14.368 14.368 0 0 1 2.825-.281c.86 0 1.73.06 2.61.182.881.121 1.686.359 2.413.711a4.757 4.757 0 0 1 1.784 1.473c.463.628.694 1.461.694 2.498v8.902c0 .773.044 1.511.132 2.217.088.706.242 1.236.463 1.588h-4.758a6.888 6.888 0 0 1-.33-1.655 6.117 6.117 0 0 1-2.644 1.623 10.625 10.625 0 0 1-3.107.463c-.815 0-1.575-.1-2.28-.298a5.207 5.207 0 0 1-1.85-.927 4.304 4.304 0 0 1-1.24-1.588c-.297-.64-.446-1.401-.446-2.283 0-.97.17-1.77.513-2.4a4.28 4.28 0 0 1 1.322-1.505 5.913 5.913 0 0 1 1.85-.844 19.932 19.932 0 0 1 2.098-.447c.705-.11 1.4-.198 2.082-.264a12.534 12.534 0 0 0 1.818-.298c.529-.133.947-.325 1.255-.58.308-.253.452-.622.43-1.108 0-.507-.083-.91-.248-1.208a1.825 1.825 0 0 0-.66-.695 2.606 2.606 0 0 0-.959-.331 7.938 7.938 0 0 0-1.173-.083c-.925 0-1.652.199-2.18.596-.53.397-.838 1.06-.926 1.986h-4.692c.065-1.103.34-2.02.826-2.747zm9.268 6.635c-.297.1-.617.182-.958.248-.341.067-.7.122-1.074.166-.374.044-.749.1-1.123.165-.353.066-.7.155-1.04.265-.343.11-.64.26-.893.447a2.125 2.125 0 0 0-.612.711c-.154.287-.231.651-.231 1.092 0 .419.077.773.231 1.059.154.287.364.513.628.678.265.166.573.282.926.348.352.066.715.099 1.09.099.925 0 1.64-.154 2.148-.463.506-.309.88-.679 1.123-1.11.242-.43.391-.864.447-1.306.054-.44.082-.794.082-1.059v-1.754a2.101 2.101 0 0 1-.744.414zM65.825 15.61v3.144H62.39v8.472c0 .793.132 1.323.397 1.588.263.264.793.397 1.586.397.264 0 .517-.011.76-.033a6.52 6.52 0 0 0 .693-.1v3.64c-.396.067-.837.11-1.321.133-.485.021-.959.033-1.421.033-.727 0-1.416-.05-2.065-.15a4.85 4.85 0 0 1-1.719-.578 3.06 3.06 0 0 1-1.173-1.224c-.286-.53-.43-1.225-.43-2.086V18.754h-2.841V15.61h2.842v-5.13h4.692v5.13h3.436zM72.533 15.61v3.177h.066c.22-.53.517-1.02.892-1.473a5.86 5.86 0 0 1 1.289-1.158 6.32 6.32 0 0 1 1.553-.745 5.601 5.601 0 0 1 1.719-.265c.308 0 .649.056 1.024.166v4.369a8.793 8.793 0 0 0-.793-.116 8.35 8.35 0 0 0-.893-.05c-.859 0-1.586.144-2.18.43a3.779 3.779 0 0 0-1.438 1.175 4.714 4.714 0 0 0-.776 1.737 9.48 9.48 0 0 0-.232 2.151v7.71h-4.692V15.61h4.461zM81.058 12.962V9.091h4.693v3.871h-4.693zm4.693 2.648v17.109h-4.693V15.61h4.693zM88.196 15.61h5.353l3.007 4.467 2.974-4.467h5.188L99.1 23.618l6.311 9.1h-5.353l-3.57-5.393-3.568 5.394h-5.254l6.146-9.001zM111.14 46.874V1.098h-3.289V0h4.552v47.973h-4.552v-1.099z"/>
+                </g>
+            </svg>
+            <h1>Setting up Synapse</h1>
+            <p>Let&apos;s configure your Synapse server.</p>
+            <ButtonDisplay><button onClick={onClick}>Get Started</button></ButtonDisplay>
+        </div>
+    </ContentWrapper>
diff --git a/synapse_topology/webui/src/js/components/ContentWrapper.jsx b/synapse_topology/webui/src/js/components/ContentWrapper.jsx
index 487046ed06..ac6488ec14 100644
--- a/synapse_topology/webui/src/js/components/ContentWrapper.jsx
+++ b/synapse_topology/webui/src/js/components/ContentWrapper.jsx
@@ -7,9 +7,9 @@ export default ({ servername, children }) => {
     if (servername) {
 
         return <div>
-            <p className={style.servername}>{servername}</p>
             <div className={style.contentWrapper}>
                 {children}
+                {/* <p className={style.servername}>{servername}</p> */}
             </div>
         </div>
 
@@ -19,4 +19,4 @@ export default ({ servername, children }) => {
 
     }
 
-}
\ No newline at end of file
+}
diff --git a/synapse_topology/webui/src/js/components/DownloadOrCopy.jsx b/synapse_topology/webui/src/js/components/DownloadOrCopy.jsx
index 9fddd1fe22..35bd5f6951 100644
--- a/synapse_topology/webui/src/js/components/DownloadOrCopy.jsx
+++ b/synapse_topology/webui/src/js/components/DownloadOrCopy.jsx
@@ -18,6 +18,9 @@ const download = (filename, text) => {
 
 export default ({ content, fileName }) =>
     <ButtonDisplay>
-        <button onClick={() => download(fileName, content)}>Download</button>
-        <button onClick={() => navigator.clipboard.writeText(content)}>Copy</button>
-    </ButtonDisplay>
\ No newline at end of file
+        <div className='buttonGroup'>
+            <button onClick={() => download(fileName, content)}>Download</button>
+            <span className='or'>or</span>
+            <button onClick={() => navigator.clipboard.writeText(content)}>Copy</button>
+        </div>
+    </ButtonDisplay>
diff --git a/synapse_topology/webui/src/js/components/ExportKeys.jsx b/synapse_topology/webui/src/js/components/ExportKeys.jsx
index 60a7e94c35..8d64ad8009 100644
--- a/synapse_topology/webui/src/js/components/ExportKeys.jsx
+++ b/synapse_topology/webui/src/js/components/ExportKeys.jsx
@@ -27,7 +27,7 @@ export default ({ secretKeyLoaded, secretKey, onClick }) => {
 
     if (!secretKeyLoaded) {
 
-        body = <Card.Body>Generating secret key</Card.Body>
+        body = <Card.Body><p>Generating secret key</p></Card.Body>
 
     } else {
 
@@ -38,11 +38,13 @@ export default ({ secretKeyLoaded, secretKey, onClick }) => {
                 is inaccessible:
       </p>
             <pre><code>{secretKey}</code></pre>
-            <p>Keep a copy of this key somewhere safe</p>
+            <p>Keep a copy of this key somewhere safe by downloading or copying the key to your clipboard to continue.</p>
             <DownloadOrCopy content={secretKey} fileName="secret_key.txt" />
-            <ButtonDisplay>
-                <button onClick={decoratedOnClick}>Next</button>
-            </ButtonDisplay>
+            <div className='blockWrapper'>
+                <ButtonDisplay>
+                    <button onClick={decoratedOnClick}>Next</button>
+                </ButtonDisplay>
+            </div>
         </Card.Body>
 
     }
@@ -56,4 +58,4 @@ export default ({ secretKeyLoaded, secretKey, onClick }) => {
         </Accordion.Collapse>
     </Card>
 
-}
\ No newline at end of file
+}
diff --git a/synapse_topology/webui/src/js/components/PortSelection.jsx b/synapse_topology/webui/src/js/components/PortSelection.jsx
index e041956571..f7d87bcbd4 100644
--- a/synapse_topology/webui/src/js/components/PortSelection.jsx
+++ b/synapse_topology/webui/src/js/components/PortSelection.jsx
@@ -105,7 +105,7 @@ export default ({
                     set a privileged port <b>we will skip the check for that port</b>.
                 </p>
 
-                <h3>Federation Port</h3>
+                <h6>Federation Port</h6>
                 <input
                     type="text"
                     className={internalFedPortInUse | !fedPortValid ? "invalid" : undefined}
@@ -117,7 +117,7 @@ export default ({
                 {internalFedPortInUse ? <p>This port is in use.</p> : undefined}
                 {fedPortValid ? undefined : <p>Invalid port</p>}
                 {fedPortPriv ? <p>This is a privileged port.</p> : undefined}
-                <h3>Client Port</h3>
+                <h6>Client Port</h6>
                 <input
                     type="text"
                     className={internalClientPortInUse | !clientPortValid ? "invalid" : undefined}
@@ -139,4 +139,4 @@ export default ({
         </Accordion.Collapse>
     </Card>
 
-}
\ No newline at end of file
+}
diff --git a/synapse_topology/webui/src/js/components/StatsReporter.jsx b/synapse_topology/webui/src/js/components/StatsReporter.jsx
index 51c4ad0ece..3648dd6c23 100644
--- a/synapse_topology/webui/src/js/components/StatsReporter.jsx
+++ b/synapse_topology/webui/src/js/components/StatsReporter.jsx
@@ -38,9 +38,11 @@ export default ({ onClick }) => {
                     />
                     Yes, send anonymous statistics
                 </label>
-                <button onClick={decoratedOnClick}>Next</button>
+                <div className='blockWrapper'>
+                    <button onClick={decoratedOnClick}>Next</button>
+                </div>
             </Card.Body>
         </Accordion.Collapse>
     </Card>
 
-}
\ No newline at end of file
+}