From 0104164d51e91efc2fa60122fa3b3548df8fce02 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Thu, 19 Nov 2020 12:06:24 -0700
Subject: [PATCH] Approximate the design as proposed

---
 res/css/_common.scss                          |  9 +++++
 .../_WidgetCapabilitiesPromptDialog.scss      | 33 +++++++++++++++++--
 .../WidgetCapabilitiesPromptDialog.tsx        | 13 ++++----
 .../views/elements/DialogButtons.js           |  9 +++++
 4 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/res/css/_common.scss b/res/css/_common.scss
index 0317e89d20..7ab88d6f02 100644
--- a/res/css/_common.scss
+++ b/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
diff --git a/res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.scss b/res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.scss
index bd39bb8989..13a1e7a890 100644
--- a/res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.scss
+++ b/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 {
diff --git a/src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx b/src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx
index 9e2481f524..7784b73387 100644
--- a/src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx
+++ b/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>
diff --git a/src/components/views/elements/DialogButtons.js b/src/components/views/elements/DialogButtons.js
index 001292b6b7..3417485eb8 100644
--- a/src/components/views/elements/DialogButtons.js
+++ b/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'}