Page MenuHomePhabricator
Files F3507092

D10230.diff
No OneTemporary
Actions

D10230.diff
View Options

diff --git a/web/roles/community-roles-modal.css b/web/roles/community-roles-modal.css
--- a/web/roles/community-roles-modal.css
+++ b/web/roles/community-roles-modal.css
@@ -1,14 +1,14 @@
.modalDescription {
color: var(--text-background-secondary-default);
- padding: 16px 32px 0 32px;
font-size: var(--m-font-16);
+ margin-bottom: 16px;
}
.rolePanelTitleContainer {
display: flex;
flex-direction: row;
justify-content: space-between;
- margin: 32px 32px 16px 32px;
+ margin: 24px 0 16px;
}
.rolePanelTitle {
@@ -22,8 +22,7 @@
.separator {
border: 0;
- margin: 0 32px 8px 32px;
- width: 85%;
+ margin-bottom: 8px;
align-self: center;
height: 2px;
border: none;
@@ -35,18 +34,4 @@
flex-direction: column;
overflow-y: auto;
max-height: 400px;
- margin: 0 32px 16px 24px;
-}
-
-.createRoleButtonContainer {
- width: 100%;
- display: flex;
- flex-direction: column;
- align-self: center;
- align-items: stretch;
- margin-bottom: 16px;
-}
-
-.createRoleButton {
- margin: 0 32px 0 32px;
}
diff --git a/web/roles/community-roles-modal.react.js b/web/roles/community-roles-modal.react.js
--- a/web/roles/community-roles-modal.react.js
+++ b/web/roles/community-roles-modal.react.js
@@ -68,8 +68,26 @@
[pushModal, threadInfo, rolePermissionsForNewRole],
);
+ const createRoleButton = React.useMemo(
+ () => (
+ <Button
+ variant="filled"
+ buttonColor={buttonThemes.standard}
+ onClick={onClickCreateRole}
+ >
+ Create Role
+ </Button>
+ ),
+ [onClickCreateRole],
+ );
+
return (
- <Modal name="Roles" onClose={popModal} size="large">
+ <Modal
+ name="Roles"
+ onClose={popModal}
+ size="large"
+ primaryButton={createRoleButton}
+ >
<div className={css.modalDescription}>
Roles help you group community members together and assign them certain
permissions. When people join the community, they are automatically
@@ -84,16 +102,6 @@
</div>
<hr className={css.separator} />
<div className={css.rolePanelList}>{rolePanelList}</div>
- <div className={css.createRoleButtonContainer}>
- <Button
- variant="filled"
- className={css.createRoleButton}
- buttonColor={buttonThemes.standard}
- onClick={onClickCreateRole}
- >
- Create Role
- </Button>
- </div>
</Modal>
);
}
diff --git a/web/roles/role-panel-entry.css b/web/roles/role-panel-entry.css
--- a/web/roles/role-panel-entry.css
+++ b/web/roles/role-panel-entry.css
@@ -1,11 +1,15 @@
.rolePanelEntry {
display: grid;
align-items: center;
- padding: 12px;
+ padding: 12px 12px 12px 0;
color: var(--text-background-primary-default);
font-weight: 500;
}
+.rolePanelEntry:last-of-type {
+ padding-bottom: 0;
+}
+
.rolePanelNameEntry {
font-size: var(--s-font-14);
}

File Metadata

Mime Type
text/plain
Expires
Sat, Dec 21, 7:18 PM (21 h, 4 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2688827
Default Alt Text
D10230.diff (2 KB)

Event Timeline