From 02dc1cf13aa866b4eb57db8258d72ac4e17e3bb1 Mon Sep 17 00:00:00 2001
From: Nad Chishtie <n.chishtie@gmail.com>
Date: Fri, 16 Aug 2019 14:22:13 -0700
Subject: Polish buttons that relate to input

---
 synapse_topology/webui/src/js/components/Database.jsx |  8 ++++----
 synapse_topology/webui/src/js/components/TLS.jsx      | 15 ++++++++++-----
 synapse_topology/webui/src/scss/main.scss             |  6 +++++-
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/synapse_topology/webui/src/js/components/Database.jsx b/synapse_topology/webui/src/js/components/Database.jsx
index 2f5fb6f2e8..923c98a8b4 100644
--- a/synapse_topology/webui/src/js/components/Database.jsx
+++ b/synapse_topology/webui/src/js/components/Database.jsx
@@ -30,7 +30,7 @@ export default ({
         <Accordion.Collapse eventKey={DATABASE_UI}>
             <Card.Body>
                 <p>Synapse can use either SQLite3 or Postgres as it's database.</p>
-                <p>Postgres is recommended</p>
+                <p>Postgres is recommended.</p>
 
                 <select defaultValue={defaultDatabase}
                     onChange={event => setDatabase(event.target.value)}
@@ -38,11 +38,11 @@ export default ({
                     <option value={DATABASE_TYPES.POSTGRES}>PostgreSQL</option>
                     <option value={DATABASE_TYPES.SQLITE3}>SQLite3</option>
                 </select>
-                <button onClick={() => {
-
+                <button
+                    className='inputButton'
+                    onClick={() => {
                     toggle();
                     onClick(database)
-
                 }}>Next</button>
             </Card.Body>
         </Accordion.Collapse>
diff --git a/synapse_topology/webui/src/js/components/TLS.jsx b/synapse_topology/webui/src/js/components/TLS.jsx
index 564401081b..56ba5a2c0a 100644
--- a/synapse_topology/webui/src/js/components/TLS.jsx
+++ b/synapse_topology/webui/src/js/components/TLS.jsx
@@ -152,21 +152,26 @@ export default ({
                         />
 
                         <button
+                            className="inputButton"
                             disabled={certPath && certKeyPath ? undefined : true}
                             onClick={() => onClickCertPath(certPath, certKeyPath, toggle)}
                         >Use TLS Path</button>
 
-                        <h3>OR..</h3>
-                        <h1>Upload a TLS cert</h1>
-                        <p>Upload a cert file.</p>
+                        <hr />
+
+                        <p>Or, upload a cert file.</p>
                         <input type="file" name="cert" onChange={e => setCertFile(e.target.files[0])} />
                         <p>Upload the cert's private key file.</p>
                         <input type="file" name="certkey" onChange={e => setCertKeyFile(e.target.files[0])} />
-                        <button disabled={certFile && certKeyFile ? undefined : true} onClick={() => onClickCertUpload(certFile, certKeyFile, toggle)}>Upload cert</button>
+                        <button
+                            className="inputButton"
+                            disabled={certFile && certKeyFile ? undefined : true}
+                            onClick={() => onClickCertUpload(certFile, certKeyFile, toggle)}
+                        >Upload cert</button>
                     </Tab>
                 </Tabs>
             </Card.Body>
         </Accordion.Collapse>
     </Card>
 
-}
\ No newline at end of file
+}
diff --git a/synapse_topology/webui/src/scss/main.scss b/synapse_topology/webui/src/scss/main.scss
index 110b1bc5d0..088097ba20 100644
--- a/synapse_topology/webui/src/scss/main.scss
+++ b/synapse_topology/webui/src/scss/main.scss
@@ -230,4 +230,8 @@ input[type=checkbox] {
 
 .chevron {
     float:right;
-}
\ No newline at end of file
+}
+.inputButton {
+    margin-left: 0.6rem;
+    font-size: 0.6rem;
+}
-- 
cgit 1.5.1