Merge pull request #4665 from JorikSchellekens/joriks/appearance-tab

Create and use stylised checkboxes

src/components/views/auth/InteractiveAuthEntryComponents.js

@@ -355,6 +355,7 @@ export const TermsAuthEntry = createReactClass({
             allChecked = allChecked && checked;
 
             checkboxes.push(
+                // XXX: replace with StyledCheckbox
                 <label key={"policy_checkbox_" + policy.id} className="mx_InteractiveAuthEntryComponents_termsPolicy">
                     <input type="checkbox" onChange={() => this._togglePolicy(policy.id)} checked={checked} />
                     <a href={policy.url} target="_blank" rel="noreferrer noopener">{ policy.name }</a>

src/components/views/dialogs/DeactivateAccountDialog.js

@@ -25,6 +25,7 @@ import * as Lifecycle from '../../../Lifecycle';
 import { _t } from '../../../languageHandler';
 import InteractiveAuth, {ERROR_USER_CANCELLED} from "../../structures/InteractiveAuth";
 import {DEFAULT_PHASE, PasswordAuthEntry, SSOAuthEntry} from "../auth/InteractiveAuthEntryComponents";
+import StyledCheckbox from "../elements/StyledCheckbox";
 
 export default class DeactivateAccountDialog extends React.Component {
     constructor(props) {
@@ -209,21 +210,18 @@ export default class DeactivateAccountDialog extends React.Component {
 
                     <div className="mx_DeactivateAccountDialog_input_section">
                         <p>
-                            <label htmlFor="mx_DeactivateAccountDialog_erase_account_input">
-                                <input
-                                    id="mx_DeactivateAccountDialog_erase_account_input"
-                                    type="checkbox"
-                                    checked={this.state.shouldErase}
-                                    onChange={this._onEraseFieldChange}
-                                />
-                                { _t(
+                            <StyledCheckbox
+                                checked={this.state.shouldErase}
+                                onChange={this._onEraseFieldChange}
+                            >
+                                {_t(
                                     "Please forget all messages I have sent when my account is deactivated " +
                                     "(<b>Warning:</b> this will cause future users to see an incomplete view " +
                                     "of conversations)",
                                     {},
                                     { b: (sub) => <b>{ sub }</b> },
-                                ) }
-                            </label>
+                                )}
+                            </StyledCheckbox>
                         </p>
 
                         {error}

src/components/views/dialogs/ShareDialog.tsx

@@ -29,6 +29,7 @@ import {RoomPermalinkCreator, makeGroupPermalink, makeUserPermalink} from "../..
 import * as ContextMenu from "../../structures/ContextMenu";
 import {toRightOf} from "../../structures/ContextMenu";
 import {copyPlaintext, selectText} from "../../../utils/strings";
+import StyledCheckbox from '../elements/StyledCheckbox';
 
 const socials = [
     {
@@ -168,13 +169,12 @@ export default class ShareDialog extends React.PureComponent<IProps, IState> {
             const events = this.props.target.getLiveTimeline().getEvents();
             if (events.length > 0) {
                 checkbox = <div>
-                    <input type="checkbox"
-                           id="mx_ShareDialog_checkbox"
-                           checked={this.state.linkSpecificEvent}
-                           onChange={this.onLinkSpecificEventCheckboxClick} />
-                    <label htmlFor="mx_ShareDialog_checkbox">
+                    <StyledCheckbox
+                        checked={this.state.linkSpecificEvent}
+                        onChange={this.onLinkSpecificEventCheckboxClick}
+                    >
                         { _t('Link to most recent message') }
-                    </label>
+                    </StyledCheckbox>
                 </div>;
             }
         } else if (this.props.target instanceof User || this.props.target instanceof RoomMember) {
@@ -184,13 +184,12 @@ export default class ShareDialog extends React.PureComponent<IProps, IState> {
         } else if (this.props.target instanceof MatrixEvent) {
             title = _t('Share Room Message');
             checkbox = <div>
-                <input type="checkbox"
-                       id="mx_ShareDialog_checkbox"
+                <StyledCheckbox
                        checked={this.state.linkSpecificEvent}
-                       onClick={this.onLinkSpecificEventCheckboxClick} />
-                <label htmlFor="mx_ShareDialog_checkbox">
+                       onClick={this.onLinkSpecificEventCheckboxClick}
+                >
                     { _t('Link to selected message') }
-                </label>
+                </StyledCheckbox>
             </div>;
         }
 

src/components/views/elements/StyledCheckbox.tsx

@@ -0,0 +1,56 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { randomString } from "matrix-js-sdk/src/randomstring";
+
+const CHECK_BOX_SVG = require("../../../../res/img/feather-customised/check.svg");
+
+interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
+}
+
+interface IState {
+}
+
+export default class StyledCheckbox extends React.PureComponent<IProps, IState> {
+    private id: string;
+
+    public static readonly defaultProps = {
+        className: "",
+    }
+
+    constructor(props: IProps) {
+        super(props);
+        // 56^10 so unlikely chance of collision.
+        this.id = "checkbox_" + randomString(10);
+    }
+
+    public render() {
+        const { children, className, ...otherProps } = this.props;
+        return <span className={"mx_Checkbox " + className}>
+            <input id={this.id} {...otherProps} type="checkbox" />
+            <label htmlFor={this.id}>
+                {/* Using the div to center the image */}
+                <div className="mx_Checkbox_background">
+                    <img src={CHECK_BOX_SVG}/>
+                </div>
+                <div>
+                    { this.props.children }
+                </div>
+            </label>
+        </span>
+    }
+}

src/components/views/settings/DevicesPanelEntry.js

@@ -21,6 +21,7 @@ import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {formatDate} from '../../../DateUtils';
+import StyledCheckbox from '../elements/StyledCheckbox';
 
 export default class DevicesPanelEntry extends React.Component {
     constructor(props) {
@@ -81,7 +82,7 @@ export default class DevicesPanelEntry extends React.Component {
                     { lastSeen }
                 </div>
                 <div className="mx_DevicesPanel_deviceButtons">
-                    <input type="checkbox" onChange={this.onDeviceToggled} checked={this.props.selected} />
+                    <StyledCheckbox onChange={this.onDeviceToggled} checked={this.props.selected} />
                 </div>
             </div>
         );