From 447ef63950f4b74de2d5b72df98a0f5c973451e1 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Mon, 27 Jul 2020 16:36:31 +0100
Subject: [PATCH] Replace old checkboxes

---
 .../tabs/room/_SecurityRoomSettingsTab.scss   |  4 -
 .../tabs/room/SecurityRoomSettingsTab.js      | 92 ++++++++++---------
 2 files changed, 50 insertions(+), 46 deletions(-)

diff --git a/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss b/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss
index b5a57dfefb..23dcc532b2 100644
--- a/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss
+++ b/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss
@@ -14,10 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_SecurityRoomSettingsTab label {
-    display: block;
-}
-
 .mx_SecurityRoomSettingsTab_warning {
     display: block;
 
diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js
index c67596a3a5..8b8b82c568 100644
--- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js
+++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js
@@ -23,6 +23,7 @@ import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
 import {SettingLevel} from "../../../../../settings/SettingsStore";
 import Modal from "../../../../../Modal";
 import QuestionDialog from "../../../dialogs/QuestionDialog";
+import StyledRadioButton from '../../../elements/StyledRadioButton';
 
 export default class SecurityRoomSettingsTab extends React.Component {
     static propTypes = {
@@ -257,27 +258,30 @@ export default class SecurityRoomSettingsTab extends React.Component {
             <div>
                 {guestWarning}
                 {aliasWarning}
-                <label>
-                    <input type="radio" name="roomVis" value="invite_only"
-                           disabled={!canChangeAccess}
-                           onChange={this._onRoomAccessRadioToggle}
-                           checked={joinRule !== "public"} />
+                <StyledRadioButton
+                    name="roomVis" value="invite_only"
+                    disabled={!canChangeAccess}
+                    onChange={this._onRoomAccessRadioToggle}
+                    checked={joinRule !== "public"}
+                >
                     {_t('Only people who have been invited')}
-                </label>
-                <label>
-                    <input type="radio" name="roomVis" value="public_no_guests"
-                           disabled={!canChangeAccess}
-                           onChange={this._onRoomAccessRadioToggle}
-                           checked={joinRule === "public" && guestAccess !== "can_join"} />
+                </StyledRadioButton>
+                <StyledRadioButton
+                    name="roomVis" value="public_no_guests"
+                    disabled={!canChangeAccess}
+                    onChange={this._onRoomAccessRadioToggle}
+                    checked={joinRule === "public" && guestAccess !== "can_join"}
+                >
                     {_t('Anyone who knows the room\'s link, apart from guests')}
-                </label>
-                <label>
-                    <input type="radio" name="roomVis" value="public_with_guests"
-                           disabled={!canChangeAccess}
-                           onChange={this._onRoomAccessRadioToggle}
-                           checked={joinRule === "public" && guestAccess === "can_join"} />
+                </StyledRadioButton>
+                <StyledRadioButton
+                    name="roomVis" value="public_with_guests"
+                    disabled={!canChangeAccess}
+                    onChange={this._onRoomAccessRadioToggle}
+                    checked={joinRule === "public" && guestAccess === "can_join"}
+                >
                     {_t("Anyone who knows the room's link, including guests")}
-                </label>
+                </StyledRadioButton>
             </div>
         );
     }
@@ -294,34 +298,38 @@ export default class SecurityRoomSettingsTab extends React.Component {
                     {_t('Changes to who can read history will only apply to future messages in this room. ' +
                         'The visibility of existing history will be unchanged.')}
                 </div>
-                <label>
-                    <input type="radio" name="historyVis" value="world_readable"
-                           disabled={!canChangeHistory}
-                           checked={history === "world_readable"}
-                           onChange={this._onHistoryRadioToggle} />
+                <StyledRadioButton
+                    name="historyVis" value="world_readable"
+                    disabled={!canChangeHistory}
+                    checked={history === "world_readable"}
+                    onChange={this._onHistoryRadioToggle}
+                >
                     {_t("Anyone")}
-                </label>
-                <label>
-                    <input type="radio" name="historyVis" value="shared"
-                           disabled={!canChangeHistory}
-                           checked={history === "shared"}
-                           onChange={this._onHistoryRadioToggle} />
+                </StyledRadioButton>
+                <StyledRadioButton
+                    name="historyVis" value="shared"
+                    disabled={!canChangeHistory}
+                    checked={history === "shared"}
+                    onChange={this._onHistoryRadioToggle}
+                >
                     {_t('Members only (since the point in time of selecting this option)')}
-                </label>
-                <label>
-                    <input type="radio" name="historyVis" value="invited"
-                           disabled={!canChangeHistory}
-                           checked={history === "invited"}
-                           onChange={this._onHistoryRadioToggle} />
+                </StyledRadioButton>
+                <StyledRadioButton
+                    name="historyVis" value="invited"
+                    disabled={!canChangeHistory}
+                    checked={history === "invited"}
+                    onChange={this._onHistoryRadioToggle}
+                >
                     {_t('Members only (since they were invited)')}
-                </label>
-                <label >
-                    <input type="radio" name="historyVis" value="joined"
-                           disabled={!canChangeHistory}
-                           checked={history === "joined"}
-                           onChange={this._onHistoryRadioToggle} />
+                </StyledRadioButton>
+                <StyledRadioButton
+                    name="historyVis" value="joined"
+                    disabled={!canChangeHistory}
+                    checked={history === "joined"}
+                    onChange={this._onHistoryRadioToggle}
+                >
                     {_t('Members only (since they joined)')}
-                </label>
+                </StyledRadioButton>
             </div>
         );
     }