Wrap inputs in fieldsets in Space visibility settings (#7350)

* use fieldset in space settings > visibility Signed-off-by: Kerry Archibald <kerrya@element.io> * add basic tests for space setttings visibility Signed-off-by: Kerry Archibald <kerrya@element.io> * i18n Signed-off-by: Kerry Archibald <kerrya@element.io> * fix toggle button placement Signed-off-by: Kerry Archibald <kerrya@element.io> * i18n Signed-off-by: Kerry Archibald <kerrya@element.io> * update settings separator color to quinary Signed-off-by: Kerry Archibald <kerrya@element.io>
2022-01-06 10:09:26 +00:00
parent 92ee02fe02
commit b1066a5699
10 changed files with 431 additions and 54 deletions
@@ -38,7 +38,7 @@ limitations under the License.
        }

        & + .mx_SettingsTab_subheading {
-            border-top: 1px solid $quinary-content;
+            border-top: 1px solid $menu-border-color;
            margin-top: 0;
            padding-top: 24px;
        }
@@ -60,15 +60,6 @@ limitations under the License.
                margin-left: 26px;
            }
        }
-
-        .mx_SettingsTab_showAdvanced {
-            margin: 16px 0;
-            padding: 0;
-        }
-
-        .mx_SettingsFlag {
-            margin-top: 24px;
-        }
    }

    .mx_SpaceSettingsDialog_buttons {
@@ -86,6 +77,11 @@ limitations under the License.

    .mx_AccessibleButton_hasKind {
        padding: 8px 22px;
+
+        &.mx_SettingsTab_showAdvanced {
+            margin: 16px 0;
+            padding: 0;
+        }
    }

    .mx_TabbedView_tabLabel {
@@ -77,7 +77,7 @@ limitations under the License.
        color: $secondary-content;

        & + .mx_StyledRadioButton {
-            border-top: 1px solid $menu-border-color;
+            border-top: 1px solid $quinary-content;
        }
    }
 }
@@ -54,7 +54,6 @@ limitations under the License.

 .mx_ProfileSettings_profileForm {
    @mixin mx_Settings_fullWidthField;
-    border-bottom: 1px solid $menu-border-color;
 }

 .mx_ProfileSettings_buttons {
@@ -98,3 +98,7 @@ limitations under the License.
 .mx_SettingsTab a {
    color: $accent-alt;
 }
+
+.mx_SettingsTab_toggleWithDescription {
+    margin-top: 24px;
+}