Polish buttons that relate to input

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>

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>
 
-}
+}

synapse_topology/webui/src/scss/main.scss

@@ -230,4 +230,8 @@ input[type=checkbox] {
 
 .chevron {
     float:right;
-}
+}
+.inputButton {
+    margin-left: 0.6rem;
+    font-size: 0.6rem;
+}