Changes in structure.

synapse_topology/view/webui/js/components/ServerName.jsx

@@ -27,7 +27,7 @@ export default ({ onClick }) => {
         </p>
         <input type="text" onChange={onChange} autoFocus placeholder="Enter server name"></input>
         <div>
-          <button disabled={servername ? undefined : true} onClick={() => onClick(servername)}>Continue</button>
+          <button disabled={servername ? undefined : true} onClick={() => onClick(servername)}>Next</button>
         </div>
       </Card.Body>
     </Accordion.Collapse>

synapse_topology/view/webui/js/components/StatsReporter.jsx

@@ -1,15 +1,16 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import style from '../../less/main.less';
 
-import ButtonDisplay from './ButtonDisplay';
 import Accordion from 'react-bootstrap/Accordion';
 import Card from 'react-bootstrap/Card';
 import { STATS_REPORT_UI } from '../reducers/ui_constants';
 
 
-export default ({ onClick }) =>
-  <Card>
+export default ({ onClick }) => {
+  const [consent, setConsent] = useState(true);
+
+  return <Card>
     <Accordion.Toggle as={Card.Header} eventKey={STATS_REPORT_UI}>
       Anonymous Statistics
     </Accordion.Toggle>
@@ -20,10 +21,15 @@ export default ({ onClick }) =>
           Your server will send anonymised, aggregated statistics to matrix.org
           on user usage so we can measure the health of the Matrix ecosystem.
         </p>
-        <ButtonDisplay>
-          <button onClick={() => onClick(true)}>YES</button>
-          <button onClick={() => onClick(false)} className={style.redButton}>NO</button>
-        </ButtonDisplay>
+        <label>
+          <input
+            type="checkbox"
+            onChange={event => setConsent(event.target.checked)}
+          />
+          Yes, send anonymous statistics
+        </label>
+        <button onClick={() => onClick(consent)}>Next</button>
       </Card.Body>
     </Accordion.Collapse>
-  </Card >
+  </Card >
+}