Page MenuHomePhabricator
Files F3506947

D10236.diff
No OneTemporary
Actions

D10236.diff
View Options

diff --git a/web/sidebar/community-creation/community-creation-modal.css b/web/sidebar/community-creation/community-creation-modal.css
--- a/web/sidebar/community-creation/community-creation-modal.css
+++ b/web/sidebar/community-creation/community-creation-modal.css
@@ -13,7 +13,6 @@
.formContainer {
display: flex;
flex-direction: column;
- padding: 20px;
}
div.formTitle {
@@ -63,12 +62,6 @@
padding-bottom: 20px;
}
-div.createCommunityButtonContainer {
- display: flex;
- flex-direction: column;
- margin-top: 20px;
-}
-
div.createCommunityButtonContent {
display: flex;
justify-content: center;
diff --git a/web/sidebar/community-creation/community-creation-modal.react.js b/web/sidebar/community-creation/community-creation-modal.react.js
--- a/web/sidebar/community-creation/community-creation-modal.react.js
+++ b/web/sidebar/community-creation/community-creation-modal.react.js
@@ -39,6 +39,8 @@
},
];
+const communityCreationKeyserverLabel = <CommunityCreationKeyserverLabel />;
+
const createNewCommunityLoadingStatusSelector =
createLoadingStatusSelector(newThreadActionTypes);
@@ -135,28 +137,50 @@
const createNewCommunityLoadingStatus: LoadingStatus = useSelector(
createNewCommunityLoadingStatusSelector,
);
- let buttonContent;
- if (createNewCommunityLoadingStatus === 'loading') {
- buttonContent = (
- <LoadingIndicator
- status={createNewCommunityLoadingStatus}
- size="medium"
- />
- );
- } else if (errorMessage) {
- buttonContent = errorMessage;
- } else {
- buttonContent = 'Create community';
- }
+
+ const buttonContent = React.useMemo(() => {
+ if (createNewCommunityLoadingStatus === 'loading') {
+ return (
+ <LoadingIndicator
+ status={createNewCommunityLoadingStatus}
+ size="medium"
+ />
+ );
+ } else if (errorMessage) {
+ return errorMessage;
+ } else {
+ return 'Create community';
+ }
+ }, [createNewCommunityLoadingStatus, errorMessage]);
+
+ const button = React.useMemo(
+ () => (
+ <Button
+ onClick={createNewCommunity}
+ variant="filled"
+ buttonColor={errorMessage ? buttonThemes.danger : buttonThemes.standard}
+ disabled={createNewCommunityLoadingStatus === 'loading'}
+ >
+ <div className={css.createCommunityButtonContent}>{buttonContent}</div>
+ </Button>
+ ),
+ [
+ buttonContent,
+ createNewCommunity,
+ createNewCommunityLoadingStatus,
+ errorMessage,
+ ],
+ );
return (
<Modal
name="Create a community"
onClose={modalContext.popModal}
size="large"
+ primaryButton={button}
+ subheader={communityCreationKeyserverLabel}
>
<div className={css.modalBody}>
- <CommunityCreationKeyserverLabel />
{avatarNode}
<form method="POST" className={css.formContainer}>
<div>
@@ -186,20 +210,6 @@
type="checkbox"
/>
</div>
- <div className={css.createCommunityButtonContainer}>
- <Button
- onClick={createNewCommunity}
- variant="filled"
- buttonColor={
- errorMessage ? buttonThemes.danger : buttonThemes.standard
- }
- disabled={createNewCommunityLoadingStatus === 'loading'}
- >
- <div className={css.createCommunityButtonContent}>
- {buttonContent}
- </div>
- </Button>
- </div>
</form>
</div>
</Modal>

File Metadata

Mime Type
text/plain
Expires
Sat, Dec 21, 6:36 PM (21 h, 20 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2688732
Default Alt Text
D10236.diff (3 KB)

Event Timeline