Add margins between labs sections (#8169)

matrix-org · Mar 28, 2022 · e02ab66 · e02ab66
1 parent 4f57a46
commit e02ab66
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 15 deletions.
diff --git a/res/css/views/settings/tabs/user/_LabsUserSettingsTab.scss b/res/css/views/settings/tabs/user/_LabsUserSettingsTab.scss
@@ -15,18 +15,18 @@ limitations under the License.
 */
 
 .mx_LabsUserSettingsTab {
-    .mx_SettingsTab_section {
-        margin-top: 32px;
+    .mx_SettingsTab_subsectionText, .mx_SettingsTab_section {
+        margin-bottom: 30px;
+    }
 
-        .mx_SettingsFlag {
-            margin-right: 0; // remove right margin to align with beta cards
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
+    .mx_SettingsTab_section .mx_SettingsFlag {
+        margin-right: 0; // remove right margin to align with beta cards
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
 
-            .mx_ToggleSwitch {
-                float: unset;
-            }
+        .mx_ToggleSwitch {
+            float: unset;
         }
     }
 }
diff --git a/src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx b/src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx
@@ -85,7 +85,7 @@ export default class LabsUserSettingsTab extends React.Component<{}, IState> {
             </div>;
         }
 
-        let labsSection;
+        let labsSections;
         if (SdkConfig.get("show_labs_settings")) {
             const groups = new EnhancedMap<LabGroup, JSX.Element[]>();
             labs.forEach(f => {
@@ -143,14 +143,14 @@ export default class LabsUserSettingsTab extends React.Component<{}, IState> {
                 );
             }
 
-            labsSection = <div className="mx_SettingsTab_section">
+            labsSections = <>
                 { sortBy(Array.from(groups.entries()), "0").map(([group, flags]) => (
-                    <div key={group}>
+                    <div className="mx_SettingsTab_section" key={group}>
                         <span className="mx_SettingsTab_subheading">{ _t(labGroupNames[group]) }</span>
                         { flags }
                     </div>
                 )) }
-            </div>;
+            </>;
         }
 
         return (
@@ -172,7 +172,7 @@ export default class LabsUserSettingsTab extends React.Component<{}, IState> {
                     }
                 </div>
                 { betaSection }
-                { labsSection }
+                { labsSections }
             </div>
         );
     }