From fb46815b6a5bbc2b17286f67b3fef70af53111bc Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 24 Mar 2021 13:15:31 +0000
Subject: [PATCH] Spaces move away from Form Buttons

---
 res/css/structures/_SpaceRoomView.scss        |  2 +-
 .../views/dialogs/_SpaceSettingsDialog.scss   |  2 +-
 res/css/views/spaces/_SpaceCreateMenu.scss    |  2 +-
 src/components/structures/SpaceRoomView.tsx   | 41 ++++++++++++-------
 .../dialogs/AddExistingToSpaceDialog.tsx      |  9 ++--
 .../views/dialogs/SpaceSettingsDialog.tsx     | 12 +++---
 .../views/spaces/SpaceCreateMenu.tsx          |  9 ++--
 7 files changed, 44 insertions(+), 33 deletions(-)

diff --git a/res/css/structures/_SpaceRoomView.scss b/res/css/structures/_SpaceRoomView.scss
index a7ce630b96..080773b49b 100644
--- a/res/css/structures/_SpaceRoomView.scss
+++ b/res/css/structures/_SpaceRoomView.scss
@@ -89,7 +89,7 @@ $SpaceRoomViewInnerWidth: 428px;
             width: $SpaceRoomViewInnerWidth;
             text-align: right; // button alignment right
 
-            .mx_FormButton {
+            .mx_AccessibleButton_hasKind {
                 padding: 8px 22px;
                 margin-left: 16px;
             }
diff --git a/res/css/views/dialogs/_SpaceSettingsDialog.scss b/res/css/views/dialogs/_SpaceSettingsDialog.scss
index c1fa539e9b..6e5fd9c8c8 100644
--- a/res/css/views/dialogs/_SpaceSettingsDialog.scss
+++ b/res/css/views/dialogs/_SpaceSettingsDialog.scss
@@ -49,7 +49,7 @@ limitations under the License.
         }
     }
 
-    .mx_FormButton {
+    .mx_AccessibleButton_hasKind {
         padding: 8px 22px;
     }
 }
diff --git a/res/css/views/spaces/_SpaceCreateMenu.scss b/res/css/views/spaces/_SpaceCreateMenu.scss
index bea39e2389..ef3fea351b 100644
--- a/res/css/views/spaces/_SpaceCreateMenu.scss
+++ b/res/css/views/spaces/_SpaceCreateMenu.scss
@@ -79,7 +79,7 @@ $spacePanelWidth: 71px;
             }
         }
 
-        .mx_FormButton {
+        .mx_AccessibleButton_kind_primary {
             padding: 8px 22px;
             margin-left: auto;
             display: block;
diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx
index 95846d8e21..46ff37dc14 100644
--- a/src/components/structures/SpaceRoomView.tsx
+++ b/src/components/structures/SpaceRoomView.tsx
@@ -26,7 +26,6 @@ import AccessibleButton from "../views/elements/AccessibleButton";
 import RoomName from "../views/elements/RoomName";
 import RoomTopic from "../views/elements/RoomTopic";
 import InlineSpinner from "../views/elements/InlineSpinner";
-import FormButton from "../views/elements/FormButton";
 import {inviteMultipleToRoom, showRoomInviteDialog} from "../../RoomInvite";
 import {useRoomMembers} from "../../hooks/useRoomMembers";
 import createRoom, {IOpts, Preset} from "../../createRoom";
@@ -124,30 +123,36 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
         }
 
         joinButtons = <>
-            <FormButton
-                label={_t("Reject")}
+            <AccessibleButton
                 kind="secondary"
                 onClick={() => {
                     setBusy(true);
                     onRejectButtonClicked();
-                }} />
-            <FormButton
-                label={_t("Accept")}
+                }}
+            >
+                { _t("Reject") }
+            </AccessibleButton>
+            <AccessibleButton
+                kind="primary"
                 onClick={() => {
                     setBusy(true);
                     onJoinButtonClicked();
                 }}
-            />
+            >
+                { _t("Accept") }
+            </AccessibleButton>
         </>;
     } else {
         joinButtons = (
-            <FormButton
-                label={_t("Join")}
+            <AccessibleButton
+                kind="primary"
                 onClick={() => {
                     setBusy(true);
                     onJoinButtonClicked();
                 }}
-            />
+            >
+                { _t("Join") }
+            </AccessibleButton>
         )
     }
 
@@ -407,11 +412,13 @@ const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
         { fields }
 
         <div className="mx_SpaceRoomView_buttons">
-            <FormButton
-                label={buttonLabel}
+            <AccessibleButton
+                kind="primary"
                 disabled={busy}
                 onClick={onClick}
-            />
+            >
+                { buttonLabel }
+            </AccessibleButton>
         </div>
     </div>;
 };
@@ -426,7 +433,9 @@ const SpaceSetupPublicShare = ({ space, onFinished }) => {
         <SpacePublicShare space={space} onFinished={onFinished} />
 
         <div className="mx_SpaceRoomView_buttons">
-            <FormButton label={_t("Go to my first room")} onClick={onFinished} />
+            <AccessibleButton kind="primary" onClick={onFinished}>
+                { _t("Go to my first room") }
+            </AccessibleButton>
         </div>
     </div>;
 };
@@ -545,7 +554,9 @@ const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
         </div>
 
         <div className="mx_SpaceRoomView_buttons">
-            <FormButton label={buttonLabel} disabled={busy} onClick={onClick} />
+            <AccessibleButton kind="primary" disabled={busy} onClick={onClick}>
+                { buttonLabel }
+            </AccessibleButton>
         </div>
     </div>;
 };
diff --git a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
index 500637244a..e3e28e4fbe 100644
--- a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
+++ b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
@@ -22,7 +22,6 @@ import {MatrixClient} from "matrix-js-sdk/src/client";
 import {_t} from '../../../languageHandler';
 import {IDialogProps} from "./IDialogProps";
 import BaseDialog from "./BaseDialog";
-import FormButton from "../elements/FormButton";
 import Dropdown from "../elements/Dropdown";
 import SearchBox from "../../structures/SearchBox";
 import SpaceStore from "../../../stores/SpaceStore";
@@ -185,8 +184,8 @@ const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space,
                 </AccessibleButton>
             </span>
 
-            <FormButton
-                label={busy ? _t("Applying...") : _t("Apply")}
+            <AccessibleButton
+                kind="primary"
                 disabled={busy || selectedToAdd.size < 1}
                 onClick={async () => {
                     setBusy(true);
@@ -200,7 +199,9 @@ const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space,
                     }
                     setBusy(false);
                 }}
-            />
+            >
+                { busy ? _t("Adding...") : _t("Add") }
+            </AccessibleButton>
         </div>
     </BaseDialog>;
 };
diff --git a/src/components/views/dialogs/SpaceSettingsDialog.tsx b/src/components/views/dialogs/SpaceSettingsDialog.tsx
index f6bf5b87e6..b016e320eb 100644
--- a/src/components/views/dialogs/SpaceSettingsDialog.tsx
+++ b/src/components/views/dialogs/SpaceSettingsDialog.tsx
@@ -28,7 +28,6 @@ import {getTopic} from "../elements/RoomTopic";
 import {avatarUrlForRoom} from "../../../Avatar";
 import ToggleSwitch from "../elements/ToggleSwitch";
 import AccessibleButton from "../elements/AccessibleButton";
-import FormButton from "../elements/FormButton";
 import Modal from "../../../Modal";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
 import {allSettled} from "../../../utils/promise";
@@ -134,16 +133,17 @@ const SpaceSettingsDialog: React.FC<IProps> = ({ matrixClient: cli, space, onFin
                 />
             </div>
 
-            <FormButton
+            <AccessibleButton
                 kind="danger"
-                label={_t("Leave Space")}
                 onClick={() => {
                     defaultDispatcher.dispatch({
                         action: "leave_room",
                         room_id: space.roomId,
                     });
                 }}
-            />
+            >
+                { _t("Leave Space") }
+            </AccessibleButton>
 
             <div className="mx_SpaceSettingsDialog_buttons">
                 <AccessibleButton onClick={() => Modal.createDialog(DevtoolsDialog, {roomId: space.roomId})}>
@@ -152,7 +152,9 @@ const SpaceSettingsDialog: React.FC<IProps> = ({ matrixClient: cli, space, onFin
                 <AccessibleButton onClick={onFinished} disabled={busy} kind="link">
                     { _t("Cancel") }
                 </AccessibleButton>
-                <FormButton onClick={onSave} disabled={busy} label={busy ? _t("Saving...") : _t("Save Changes")} />
+                <AccessibleButton onClick={onSave} disabled={busy} kind="primary">
+                    { busy ? _t("Saving...") : _t("Save Changes") }
+                </AccessibleButton>
             </div>
         </div>
     </BaseDialog>;
diff --git a/src/components/views/spaces/SpaceCreateMenu.tsx b/src/components/views/spaces/SpaceCreateMenu.tsx
index 879cf929e0..6269de1c50 100644
--- a/src/components/views/spaces/SpaceCreateMenu.tsx
+++ b/src/components/views/spaces/SpaceCreateMenu.tsx
@@ -21,7 +21,6 @@ import {EventType, RoomType, RoomCreateTypeField} from "matrix-js-sdk/src/@types
 import {_t} from "../../../languageHandler";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import {ChevronFace, ContextMenu} from "../../structures/ContextMenu";
-import FormButton from "../elements/FormButton";
 import createRoom, {IStateEvent, Preset} from "../../../createRoom";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import SpaceBasicSettings from "./SpaceBasicSettings";
@@ -148,11 +147,9 @@ const SpaceCreateMenu = ({ onFinished }) => {
 
             <SpaceBasicSettings setAvatar={setAvatar} name={name} setName={setName} topic={topic} setTopic={setTopic} />
 
-            <FormButton
-                label={busy ? _t("Creating...") : _t("Create")}
-                onClick={onSpaceCreateClick}
-                disabled={!name && !busy}
-            />
+            <AccessibleButton kind="primary" onClick={onSpaceCreateClick} disabled={!name && !busy}>
+                { busy ? _t("Creating...") : _t("Create") }
+            </AccessibleButton>
         </React.Fragment>;
     }