Consolidate button styles in Space creation flows

res/css/structures/_SpaceRoomView.scss

@@ -16,6 +16,51 @@ limitations under the License.
 
 $SpaceRoomViewInnerWidth: 428px;
 
+@define-mixin SpacePillButton {
+    position: relative;
+    padding: 16px 32px 16px 72px;
+    width: 432px;
+    box-sizing: border-box;
+    border-radius: 8px;
+    border: 1px solid $input-darker-bg-color;
+    font-size: $font-15px;
+    margin: 20px 0;
+
+    > h3 {
+        font-weight: $font-semi-bold;
+        margin: 0 0 4px;
+    }
+
+    > span {
+        color: $secondary-fg-color;
+    }
+
+    &::before {
+        position: absolute;
+        content: '';
+        width: 32px;
+        height: 32px;
+        top: 24px;
+        left: 20px;
+        mask-position: center;
+        mask-repeat: no-repeat;
+        mask-size: 24px;
+        background-color: $tertiary-fg-color;
+    }
+
+    &:hover {
+        border-color: $accent-color;
+
+        &::before {
+            background-color: $accent-color;
+        }
+
+        > span {
+            color: $primary-fg-color;
+        }
+    }
+}
+
 .mx_SpaceRoomView {
     .mx_MainSplit > div:first-child {
         padding: 80px 60px;
@@ -331,64 +376,8 @@ $SpaceRoomViewInnerWidth: 428px;
     }
 
     .mx_SpaceRoomView_privateScope {
-        .mx_RadioButton {
+        .mx_AccessibleButton {
-            width: $SpaceRoomViewInnerWidth;
+            @mixin SpacePillButton;
-            border-radius: 8px;
-            border: 1px solid $space-button-outline-color;
-            padding: 16px 16px 16px 72px;
-            margin-top: 36px;
-            cursor: pointer;
-            box-sizing: border-box;
-            position: relative;
-
-            > div:first-of-type {
-                // hide radio dot
-                display: none;
-            }
-
-            .mx_RadioButton_content {
-                margin: 0;
-
-                > h3 {
-                    margin: 0 0 4px;
-                    font-size: $font-15px;
-                    font-weight: $font-semi-bold;
-                    line-height: $font-18px;
-                }
-
-                > div {
-                    color: $secondary-fg-color;
-                    font-size: $font-15px;
-                    line-height: $font-24px;
-                }
-            }
-
-            &::before {
-                content: "";
-                position: absolute;
-                height: 32px;
-                width: 32px;
-                top: 24px;
-                left: 20px;
-                background-color: $secondary-fg-color;
-                mask-repeat: no-repeat;
-                mask-position: center;
-                mask-size: contain;
-            }
-        }
-
-        .mx_RadioButton_checked {
-            border-color: $accent-color;
-
-            .mx_RadioButton_content {
-                > div {
-                    color: $primary-fg-color;
-                }
-            }
-
-            &::before {
-                background-color: $accent-color;
-            }
         }
 
         .mx_SpaceRoomView_privateScope_justMeButton::before {

res/css/views/spaces/_SpaceCreateMenu.scss

@@ -45,53 +45,11 @@ $spacePanelWidth: 71px;
         }
 
         .mx_SpaceCreateMenuType {
-            position: relative;
+            @mixin SpacePillButton;
-            padding: 16px 32px 16px 72px;
-            width: 432px;
-            box-sizing: border-box;
-            border-radius: 8px;
-            border: 1px solid $input-darker-bg-color;
-            font-size: $font-15px;
-            margin: 20px 0;
-
-            > h3 {
-                font-weight: $font-semi-bold;
-                margin: 0 0 4px;
-            }
-
-            > span {
-                color: $secondary-fg-color;
-            }
-
-            &::before {
-                position: absolute;
-                content: '';
-                width: 32px;
-                height: 32px;
-                top: 24px;
-                left: 20px;
-                mask-position: center;
-                mask-repeat: no-repeat;
-                mask-size: 32px;
-                background-color: $tertiary-fg-color;
-            }
-
-            &:hover {
-                border-color: $accent-color;
-
-                &::before {
-                    background-color: $accent-color;
-                }
-
-                > span {
-                    color: $primary-fg-color;
-                }
-            }
         }
 
         .mx_SpaceCreateMenuType_public::before {
             mask-image: url('$(res)/img/globe.svg');
-            mask-size: 26px;
         }
         .mx_SpaceCreateMenuType_private::before {
             mask-image: url('$(res)/img/element-icons/lock.svg');

res/css/views/spaces/_SpacePublicShare.scss

@@ -16,38 +16,7 @@ limitations under the License.
 
 .mx_SpacePublicShare {
     .mx_AccessibleButton {
-        border: 1px solid $space-button-outline-color;
+        @mixin SpacePillButton;
-        box-sizing: border-box;
-        border-radius: 8px;
-        padding: 12px 24px 12px 52px;
-        margin-top: 16px;
-        width: $SpaceRoomViewInnerWidth;
-        font-size: $font-15px;
-        line-height: $font-24px;
-        position: relative;
-        display: flex;
-
-        > span {
-            color: #368bd6;
-            margin-left: auto;
-        }
-
-        &:hover {
-            background-color: rgba(141, 151, 165, 0.1);
-        }
-
-        &::before {
-            content: "";
-            position: absolute;
-            width: 30px;
-            height: 30px;
-            mask-repeat: no-repeat;
-            mask-size: contain;
-            mask-position: center;
-            background: $muted-fg-color;
-            left: 12px;
-            top: 9px;
-        }
 
         &.mx_SpacePublicShare_shareButton::before {
             mask-image: url('$(res)/img/element-icons/link.svg');

src/components/structures/SpaceRoomView.tsx

@@ -32,7 +32,6 @@ import {useRoomMembers} from "../../hooks/useRoomMembers";
 import createRoom, {IOpts, Preset} from "../../createRoom";
 import Field from "../views/elements/Field";
 import {useEventEmitter} from "../../hooks/useEventEmitter";
-import StyledRadioGroup from "../views/elements/StyledRadioGroup";
 import withValidation from "../views/elements/Validation";
 import * as Email from "../../email";
 import defaultDispatcher from "../../dispatcher/dispatcher";
@@ -443,32 +442,20 @@ const SpaceSetupPrivateScope = ({ onFinished }) => {
         <h1>{ _t("Who are you working with?") }</h1>
         <div className="mx_SpaceRoomView_description">{ _t("Ensure the right people have access to the space.") }</div>
 
-        <StyledRadioGroup
+        <AccessibleButton
-            name="privateSpaceScope"
+            className="mx_SpaceRoomView_privateScope_justMeButton"
-            value={option}
+            onClick={() => { onFinished(false) }}
-            onChange={setOption}
+        >
-            definitions={[
+            <h3>{ _t("Just me") }</h3>
-                {
+            <div>{ _t("A private space to organise your rooms") }</div>
-                    value: "justMe",
+        </AccessibleButton>
-                    className: "mx_SpaceRoomView_privateScope_justMeButton",
+        <AccessibleButton
-                    label: <React.Fragment>
+            className="mx_SpaceRoomView_privateScope_meAndMyTeammatesButton"
-                        <h3>{ _t("Just Me") }</h3>
+            onClick={() => { onFinished(true) }}
-                        <div>{ _t("A private space just for you") }</div>
+        >
-                    </React.Fragment>,
-                }, {
-                    value: "meAndMyTeammates",
-                    className: "mx_SpaceRoomView_privateScope_meAndMyTeammatesButton",
-                    label: <React.Fragment>
             <h3>{ _t("Me and my teammates") }</h3>
             <div>{ _t("A private space for you and your teammates") }</div>
-                    </React.Fragment>,
+        </AccessibleButton>
-                },
-            ]}
-        />
-
-        <div className="mx_SpaceRoomView_buttons">
-            <FormButton label={_t("Next")} disabled={!option} onClick={() => onFinished(option !== "justMe")} />
-        </div>
     </div>;
 };
 

src/components/views/spaces/SpacePublicShare.tsx

@@ -47,7 +47,7 @@ const SpacePublicShare = ({ space, onFinished }: IProps) => {
                 }
             }}
         >
-            { _t("Share invite link") }
+            <h3>{ _t("Share invite link") }</h3>
             <span>{ copiedText }</span>
         </AccessibleButton>
         <AccessibleButton
@@ -57,7 +57,8 @@ const SpacePublicShare = ({ space, onFinished }: IProps) => {
                 onFinished();
             }}
         >
-            { _t("Invite by email or username") }
+            <h3>{ _t("Invite people") }</h3>
+            <span>{ _t("Invite with email or username") }</span>
         </AccessibleButton>
     </div>;
 };