Approximate the design as proposed

Author: turt2live

res/css/_common.scss

@@ -60,6 +60,10 @@ pre, code {
     color: $accent-color;
 }
 
+.text-muted {
+    color: $muted-fg-color;
+}
+
 b {
     // On Firefox, the default weight for `<b>` is `bolder` which results in no bold
     // effect since we only have specific weights of our fonts available.
@@ -364,6 +368,11 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 .mx_Dialog_buttons {
     margin-top: 20px;
     text-align: right;
+
+    .mx_Dialog_buttons_additive {
+        // The consumer is responsible for positioning their elements.
+        float: left;
+    }
 }
 
 /* XXX: Our button style are a mess: buttons that happen to appear in dialogs get special styles applied

res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.scss

@@ -16,26 +16,55 @@ limitations under the License.
 
 
 .mx_WidgetCapabilitiesPromptDialog  {
+    .text-muted {
+        font-size: $font-12px;
+    }
+
     .mx_Dialog_content {
         margin-bottom: 16px;
     }
 
     .mx_WidgetCapabilitiesPromptDialog_cap {
-        margin-top: 8px;
+        margin-top: 20px;
+        font-size: $font-15px;
+        line-height: $font-15px;
 
         .mx_WidgetCapabilitiesPromptDialog_byline {
             color: $muted-fg-color;
             margin-left: 26px;
+            font-size: $font-12px;
+            line-height: $font-12px;
         }
     }
 
+    .mx_Dialog_buttons {
+        margin-top: 40px; // double normal
+    }
+
     .mx_SettingsFlag {
-        margin-top: 24px;
+        line-height: calc($font-14px + 7px + 7px); // 7px top & bottom padding
+        color: $muted-fg-color;
+        font-size: $font-12px;
 
         .mx_ToggleSwitch {
             display: inline-block;
             vertical-align: middle;
             margin-right: 8px;
+
+            // downsize the switch + ball
+            width: $font-32px;
+            height: $font-15px;
+
+
+            &.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
+                left: calc(100% - $font-15px);
+            }
+
+            .mx_ToggleSwitch_ball {
+                width: $font-15px;
+                height: $font-15px;
+                border-radius: $font-15px;
+            }
         }
 
         .mx_SettingsFlag_label {

src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx

@@ -126,18 +126,19 @@ export default class WidgetCapabilitiesPromptDialog extends React.PureComponent<
             >
                 <form onSubmit={this.onSubmit}>
                     <div className="mx_Dialog_content">
-                        {_t("This widget would like to:")}
+                        <div className="text-muted">{_t("This widget would like to:")}</div>
                         {checkboxRows}
-                        <LabelledToggleSwitch
-                            value={this.state.rememberSelection}
-                            toggleInFront={true}
-                            onChange={this.onRememberSelectionChange}
-                            label={_t("Remember my selection for this widget")} />
                         <DialogButtons
                             primaryButton={_t("Approve")}
                             cancelButton={_t("Decline All")}
                             onPrimaryButtonClick={this.onSubmit}
                             onCancel={this.onReject}
+                            additive={
+                                <LabelledToggleSwitch
+                                    value={this.state.rememberSelection}
+                                    toggleInFront={true}
+                                    onChange={this.onRememberSelectionChange}
+                                    label={_t("Remember my selection for this widget")} />}
                         />
                     </div>
                 </form>

src/components/views/elements/DialogButtons.js

@@ -54,6 +54,9 @@ export default class DialogButtons extends React.Component {
 
         // disables only the primary button
         primaryDisabled: PropTypes.bool,
+
+        // something to stick next to the buttons, optionally
+        additive: PropTypes.element,
     };
 
     static defaultProps = {
@@ -85,8 +88,14 @@ export default class DialogButtons extends React.Component {
             </button>;
         }
 
+        let additive = null;
+        if (this.props.additive) {
+            additive = <div className="mx_Dialog_buttons_additive">{this.props.additive}</div>;
+        }
+
         return (
             <div className="mx_Dialog_buttons">
+                { additive }
                 { cancelButton }
                 { this.props.children }
                 <button type={this.props.primaryIsSubmit ? 'submit' : 'button'}