Position toggle switch more clearly (#6914)

* Position toggle switch more clearly

* attempt to revert changes, align switch to title instead

* remove unused import, add missing property

Co-authored-by: ColonisationCaptain <[email protected]>

Author: CicadaCinema

res/css/views/settings/_SetIntegrationManager.scss

@@ -26,12 +26,11 @@ limitations under the License.
 .mx_SetIntegrationManager > .mx_SettingsTab_heading > .mx_SettingsTab_subheading {
     display: inline-block;
     padding-left: 5px;
+    margin-top: 0px;
 }
 
 .mx_SetIntegrationManager .mx_ToggleSwitch {
     display: inline-block;
     float: right;
     top: 9px;
-
-    @mixin mx_Settings_fullWidthField;
 }

src/components/views/settings/SetIntegrationManager.tsx

@@ -18,10 +18,10 @@ import React from 'react';
 import { _t } from "../../../languageHandler";
 import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
 import { IntegrationManagerInstance } from "../../../integrations/IntegrationManagerInstance";
-import * as sdk from '../../../index';
 import SettingsStore from "../../../settings/SettingsStore";
 import { SettingLevel } from "../../../settings/SettingLevel";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import ToggleSwitch from "../elements/ToggleSwitch";
 
 import { logger } from "matrix-js-sdk/src/logger";
 
@@ -59,8 +59,6 @@ export default class SetIntegrationManager extends React.Component<IProps, IStat
     };
 
     public render(): React.ReactNode {
-        const ToggleSwitch = sdk.getComponent("views.elements.ToggleSwitch");
-
         const currentManager = this.state.currentManager;
         let managerName;
         let bodyText;
@@ -81,7 +79,11 @@ export default class SetIntegrationManager extends React.Component<IProps, IStat
                 <div className="mx_SettingsTab_heading">
                     <span>{ _t("Manage integrations") }</span>
                     <span className="mx_SettingsTab_subheading">{ managerName }</span>
-                    <ToggleSwitch checked={this.state.provisioningEnabled} onChange={this.onProvisioningToggled} />
+                    <ToggleSwitch
+                        checked={this.state.provisioningEnabled}
+                        disabled={false}
+                        onChange={this.onProvisioningToggled}
+                    />
                 </div>
                 <span className="mx_SettingsTab_subsectionText">
                     { bodyText }