Iterate PR

res/css/views/beta/_BetaCard.scss

@@ -19,9 +19,11 @@ limitations under the License.
     padding: 24px;
     background-color: $settings-profile-placeholder-bg-color;
     border-radius: 8px;
-    display: flex;
     box-sizing: border-box;
 
+    .mx_BetaCard_columns {
+        display: flex;
+
         > div {
             .mx_BetaCard_title {
                 font-weight: $font-semi-bold;
@@ -55,12 +57,6 @@ limitations under the License.
                 color: $secondary-fg-color;
                 margin-top: 20px;
             }
-
-        .mx_BetaCard_relatedSettings {
-            summary + .mx_SettingsFlag {
-                margin-top: 4px;
-            }
-        }
         }
 
         > img {
@@ -69,6 +65,23 @@ limitations under the License.
             object-fit: contain;
             height: 100%;
         }
+    }
+
+    .mx_BetaCard_relatedSettings {
+        .mx_SettingsFlag {
+            margin: 16px 0 0;
+            font-size: $font-15px;
+            line-height: $font-24px;
+            color: $primary-fg-color;
+
+            .mx_SettingsFlag_microcopy {
+                margin-top: 4px;
+                font-size: $font-12px;
+                line-height: $font-15px;
+                color: $secondary-fg-color;
+            }
+        }
+    }
 }
 
 .mx_BetaCard_betaPill {

src/components/views/beta/BetaCard.tsx

@@ -83,6 +83,7 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
     }
 
     return <div className="mx_BetaCard">
+        <div className="mx_BetaCard_columns">
             <div>
                 <h3 className="mx_BetaCard_title">
                     { titleOverride || _t(title) }
@@ -101,14 +102,14 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
                 { disclaimer && <div className="mx_BetaCard_disclaimer">
                     { disclaimer(value) }
                 </div> }
-            { extraSettings && <details className="mx_BetaCard_relatedSettings">
+            </div>
-                <summary>{ _t("Experimental options") }</summary>
+            <img src={image} alt="" />
+        </div>
+        { extraSettings && <div className="mx_BetaCard_relatedSettings">
             { extraSettings.map(key => (
                 <SettingsFlag key={key} name={key} level={SettingLevel.DEVICE} />
             )) }
-            </details> }
+        </div> }
-        </div>
-        <img src={image} alt="" />
     </div>;
 };
 

src/components/views/elements/SettingsFlag.tsx

@@ -77,9 +77,10 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
     public render() {
         const canChange = SettingsStore.canSetValue(this.props.name, this.props.roomId, this.props.level);
 
-        let label = this.props.label;
+        const label = this.props.label
-        if (!label) label = SettingsStore.getDisplayName(this.props.name, this.props.level);
+            ? _t(this.props.label)
-        else label = _t(label);
+            : SettingsStore.getDisplayName(this.props.name, this.props.level);
+        const description = SettingsStore.getDescription(this.props.name);
 
         if (this.props.useCheckbox) {
             return <StyledCheckbox
@@ -99,6 +100,9 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
                         disabled={this.props.disabled || !canChange}
                         aria-label={label}
                     />
+                    { description && <div className="mx_SettingsFlag_microcopy">
+                        { description }
+                    </div> }
                 </div>
             );
         }

src/i18n/strings/en_EN.json

@@ -793,9 +793,10 @@
     "You can leave the beta any time from settings or tapping on a beta badge, like the one above.": "You can leave the beta any time from settings or tapping on a beta badge, like the one above.",
     "Beta available for web, desktop and Android. Some features may be unavailable on your homeserver.": "Beta available for web, desktop and Android. Some features may be unavailable on your homeserver.",
     "Your feedback will help make spaces better. The more detail you can go into, the better.": "Your feedback will help make spaces better. The more detail you can go into, the better.",
-    "Use an all rooms space instead of a home space.": "Use an all rooms space instead of a home space.",
+    "Show all rooms in Home": "Show all rooms in Home",
-    "Show DMs for joined/invited members in the space.": "Show DMs for joined/invited members in the space.",
+    "Show people in spaces": "Show people in spaces",
-    "Show notification badges for DMs in spaces.": "Show notification badges for DMs in spaces.",
+    "If disabled, you can still add Direct Messages to Personal Spaces. If enabled, you'll automatically see everyone who is a member of the Space.": "If disabled, you can still add Direct Messages to Personal Spaces. If enabled, you'll automatically see everyone who is a member of the Space.",
+    "Show notification badges for DMs in Spaces.": "Show notification badges for DMs in Spaces.",
     "Show options to enable 'Do not disturb' mode": "Show options to enable 'Do not disturb' mode",
     "Send and receive voice messages": "Send and receive voice messages",
     "Render LaTeX maths in messages": "Render LaTeX maths in messages",
@@ -2510,7 +2511,6 @@
     "Beta": "Beta",
     "Leave the beta": "Leave the beta",
     "Join the beta": "Join the beta",
-    "Experimental options": "Experimental options",
     "Avatar": "Avatar",
     "This room is public": "This room is public",
     "Away": "Away",

src/settings/Settings.tsx

@@ -94,6 +94,9 @@ export interface ISetting {
         [level: SettingLevel]: string;
     };
 
+    // Optional description which will be shown as microCopy under SettingsFlags
+    description?: string;
+
     // The supported levels are required. Preferably, use the preset arrays
     // at the top of this file to define this rather than a custom array.
     supportedLevels?: SettingLevel[];
@@ -176,19 +179,21 @@ export const SETTINGS: {[setting: string]: ISetting} = {
         },
     },
     "feature_spaces.all_rooms": {
-        displayName: _td("Use an all rooms space instead of a home space."),
+        displayName: _td("Show all rooms in Home"),
         supportedLevels: LEVELS_FEATURE,
         default: true,
         controller: new ReloadOnChangeController(),
     },
     "feature_spaces.space_member_dms": {
-        displayName: _td("Show DMs for joined/invited members in the space."),
+        displayName: _td("Show people in spaces"),
+        description: _td("If disabled, you can still add Direct Messages to Personal Spaces. " +
+            "If enabled, you'll automatically see everyone who is a member of the Space."),
         supportedLevels: LEVELS_FEATURE,
         default: true,
         controller: new ReloadOnChangeController(),
     },
     "feature_spaces.space_dm_badges": {
-        displayName: _td("Show notification badges for DMs in spaces."),
+        displayName: _td("Show notification badges for DMs in Spaces."),
         supportedLevels: LEVELS_FEATURE,
         default: false,
         controller: new ReloadOnChangeController(),

src/settings/SettingsStore.ts

@@ -248,6 +248,16 @@ export default class SettingsStore {
         return _t(displayName as string);
     }
 
+    /**
+     * Gets the translated description for a given setting
+     * @param {string} settingName The setting to look up.
+     * @return {String} The description for the setting, or null if not found.
+     */
+    public static getDescription(settingName: string) {
+        if (!SETTINGS[settingName]?.description) return null;
+        return _t(SETTINGS[settingName].description);
+    }
+
     /**
      * Determines if a setting is also a feature.
      * @param {string} settingName The setting to look up.