Add margins between labs sections (#8169)

This commit is contained in:
Robin 2022-03-28 08:16:08 -04:00 committed by GitHub
parent 4f57a4661d
commit e02ab66884
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 15 deletions

View file

@ -15,18 +15,18 @@ limitations under the License.
*/ */
.mx_LabsUserSettingsTab { .mx_LabsUserSettingsTab {
.mx_SettingsTab_section { .mx_SettingsTab_subsectionText, .mx_SettingsTab_section {
margin-top: 32px; margin-bottom: 30px;
}
.mx_SettingsFlag { .mx_SettingsTab_section .mx_SettingsFlag {
margin-right: 0; // remove right margin to align with beta cards margin-right: 0; // remove right margin to align with beta cards
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.mx_ToggleSwitch { .mx_ToggleSwitch {
float: unset; float: unset;
}
} }
} }
} }

View file

@ -85,7 +85,7 @@ export default class LabsUserSettingsTab extends React.Component<{}, IState> {
</div>; </div>;
} }
let labsSection; let labsSections;
if (SdkConfig.get("show_labs_settings")) { if (SdkConfig.get("show_labs_settings")) {
const groups = new EnhancedMap<LabGroup, JSX.Element[]>(); const groups = new EnhancedMap<LabGroup, JSX.Element[]>();
labs.forEach(f => { 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]) => ( { 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> <span className="mx_SettingsTab_subheading">{ _t(labGroupNames[group]) }</span>
{ flags } { flags }
</div> </div>
)) } )) }
</div>; </>;
} }
return ( return (
@ -172,7 +172,7 @@ export default class LabsUserSettingsTab extends React.Component<{}, IState> {
} }
</div> </div>
{ betaSection } { betaSection }
{ labsSection } { labsSections }
</div> </div>
); );
} }