diff --git a/res/css/views/elements/_ToggleSwitch.scss b/res/css/views/elements/_ToggleSwitch.scss index e5e90e2d57..09c04f2c08 100644 --- a/res/css/views/elements/_ToggleSwitch.scss +++ b/res/css/views/elements/_ToggleSwitch.scss @@ -15,6 +15,8 @@ limitations under the License. */ .mx_ToggleSwitch { + --ToggleSwitch-min-width: $font-44px; + transition: background-color 0.20s ease-out 0.1s; width: $font-44px; diff --git a/res/css/views/settings/_SetIntegrationManager.scss b/res/css/views/settings/_SetIntegrationManager.scss index 521b1ee8ab..3d98f47346 100644 --- a/res/css/views/settings/_SetIntegrationManager.scss +++ b/res/css/views/settings/_SetIntegrationManager.scss @@ -15,22 +15,26 @@ limitations under the License. */ .mx_SetIntegrationManager { - margin-top: 10px; - margin-bottom: 10px; -} + .mx_SettingsFlag { + align-items: center; + margin-top: var(--SettingsTab_heading_nth_child-margin-top); -.mx_SetIntegrationManager > .mx_SettingsTab_heading { - margin-bottom: 10px; -} + .mx_SetIntegrationManager_heading_manager { + display: flex; + align-items: center; + flex-wrap: wrap; + column-gap: $spacing-4; -.mx_SetIntegrationManager > .mx_SettingsTab_heading > .mx_SettingsTab_subheading { - display: inline-block; - padding-left: 5px; - margin-top: 0px; -} + .mx_SettingsTab_heading, + .mx_SettingsTab_subheading { + margin-top: 0; + margin-bottom: 0; + } + } -.mx_SetIntegrationManager .mx_ToggleSwitch { - display: inline-block; - float: right; - top: 9px; + .mx_ToggleSwitch { + align-self: flex-start; + min-width: var(--ToggleSwitch-min-width); // avoid compression + } + } } diff --git a/res/css/views/settings/tabs/_SettingsTab.scss b/res/css/views/settings/tabs/_SettingsTab.scss index 583e0374f4..49f4282ec5 100644 --- a/res/css/views/settings/tabs/_SettingsTab.scss +++ b/res/css/views/settings/tabs/_SettingsTab.scss @@ -16,6 +16,7 @@ limitations under the License. .mx_SettingsTab { --SettingsTab_section-margin-bottom-preferences-labs: 30px; + --SettingsTab_heading_nth_child-margin-top: 30px; // TODO: Use a spacing variable --SettingsTab_fullWidthField-margin-inline-end: 100px; --SettingsTab_tooltip-max-width: 120px; // So it fits in the space provided by the page @@ -38,7 +39,7 @@ limitations under the License. margin-bottom: 10px; // TODO: Use a spacing variable &:nth-child(n + 2) { - margin-top: 30px; // TODO: Use a spacing variable + margin-top: var(--SettingsTab_heading_nth_child-margin-top); } } diff --git a/src/components/views/settings/SetIdServer.tsx b/src/components/views/settings/SetIdServer.tsx index 8e28cfad4b..130e771f92 100644 --- a/src/components/views/settings/SetIdServer.tsx +++ b/src/components/views/settings/SetIdServer.tsx @@ -407,7 +407,7 @@ export default class SetIdServer extends React.Component { } return ( -
+ { sectionTitle } diff --git a/src/components/views/settings/SetIntegrationManager.tsx b/src/components/views/settings/SetIntegrationManager.tsx index 557cbaea61..250b66660d 100644 --- a/src/components/views/settings/SetIntegrationManager.tsx +++ b/src/components/views/settings/SetIntegrationManager.tsx @@ -74,24 +74,26 @@ export default class SetIntegrationManager extends React.Component -
- { _t("Manage integrations") } - { managerName } +
+
+ { _t("Manage integrations") } + { managerName } +
- +
{ bodyText } -
-
+
+
{ _t( "Integration managers receive configuration data, and can modify widgets, " + "send room invites, and set power levels on your behalf.", ) } - +
); }