diff --git a/src/core/client/admin/routes/Community/ButtonPadding.css b/src/core/client/admin/components/ButtonPadding.css similarity index 100% rename from src/core/client/admin/routes/Community/ButtonPadding.css rename to src/core/client/admin/components/ButtonPadding.css diff --git a/src/core/client/admin/routes/Community/ButtonPadding.tsx b/src/core/client/admin/components/ButtonPadding.tsx similarity index 100% rename from src/core/client/admin/routes/Community/ButtonPadding.tsx rename to src/core/client/admin/components/ButtonPadding.tsx diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerQuery.css b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerQuery.css index 0766fbb5a..78bda03e1 100644 --- a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerQuery.css +++ b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerQuery.css @@ -91,4 +91,25 @@ hr { .divider { border-bottom: 1px solid var(--palette-grey-lighter); +} + +.userStatus { + margin-top: var(--spacing-1); + margin-bottom: var(--spacing-1); +} + +.userStatusLabel { + margin-right: var(--spacing-1); + margin-bottom: 2px; + + line-height: calc(36em / 24); +} + +.userStatusChange { + border-style: solid; + border-color: var(--palette-grey-lighter); + border-width: 1px; + border-radius: 2px; + + padding-left: var(--spacing-1); } \ No newline at end of file diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerQuery.tsx b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerQuery.tsx index 9406cbc40..6d9e70f60 100644 --- a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerQuery.tsx +++ b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerQuery.tsx @@ -3,6 +3,7 @@ import { Localized } from "fluent-react/compat"; import React, { FunctionComponent } from "react"; import { ReadyState } from "react-relay"; +import { UserStatusChangeContainer } from "coral-admin/components/UserStatus"; import { CopyButton } from "coral-framework/components"; import { Button, @@ -39,6 +40,7 @@ const UserHistoryDrawerQuery: FunctionComponent = ({ username email createdAt + ...UserStatusChangeContainer_user } } `} @@ -75,6 +77,22 @@ const UserHistoryDrawerQuery: FunctionComponent = ({ {user.username} +
+ +
+ + + + Status: + + + +
+
+ +
+
+
diff --git a/src/core/client/admin/routes/Community/UserRole/UpdateUserRoleMutation.ts b/src/core/client/admin/components/UserRole/UpdateUserRoleMutation.ts similarity index 100% rename from src/core/client/admin/routes/Community/UserRole/UpdateUserRoleMutation.ts rename to src/core/client/admin/components/UserRole/UpdateUserRoleMutation.ts diff --git a/src/core/client/admin/routes/Community/UserRole/UserRoleChange.css b/src/core/client/admin/components/UserRole/UserRoleChange.css similarity index 100% rename from src/core/client/admin/routes/Community/UserRole/UserRoleChange.css rename to src/core/client/admin/components/UserRole/UserRoleChange.css diff --git a/src/core/client/admin/routes/Community/UserRole/UserRoleChange.tsx b/src/core/client/admin/components/UserRole/UserRoleChange.tsx similarity index 100% rename from src/core/client/admin/routes/Community/UserRole/UserRoleChange.tsx rename to src/core/client/admin/components/UserRole/UserRoleChange.tsx diff --git a/src/core/client/admin/routes/Community/UserRole/UserRoleChangeContainer.tsx b/src/core/client/admin/components/UserRole/UserRoleChangeContainer.tsx similarity index 100% rename from src/core/client/admin/routes/Community/UserRole/UserRoleChangeContainer.tsx rename to src/core/client/admin/components/UserRole/UserRoleChangeContainer.tsx diff --git a/src/core/client/admin/routes/Community/UserRole/UserRoleText.css b/src/core/client/admin/components/UserRole/UserRoleText.css similarity index 100% rename from src/core/client/admin/routes/Community/UserRole/UserRoleText.css rename to src/core/client/admin/components/UserRole/UserRoleText.css diff --git a/src/core/client/admin/routes/Community/UserRole/UserRoleText.tsx b/src/core/client/admin/components/UserRole/UserRoleText.tsx similarity index 100% rename from src/core/client/admin/routes/Community/UserRole/UserRoleText.tsx rename to src/core/client/admin/components/UserRole/UserRoleText.tsx diff --git a/src/core/client/admin/routes/Community/UserRole/index.ts b/src/core/client/admin/components/UserRole/index.ts similarity index 100% rename from src/core/client/admin/routes/Community/UserRole/index.ts rename to src/core/client/admin/components/UserRole/index.ts diff --git a/src/core/client/admin/routes/Community/UserStatus/BanModal.css b/src/core/client/admin/components/UserStatus/BanModal.css similarity index 100% rename from src/core/client/admin/routes/Community/UserStatus/BanModal.css rename to src/core/client/admin/components/UserStatus/BanModal.css diff --git a/src/core/client/admin/routes/Community/UserStatus/BanModal.tsx b/src/core/client/admin/components/UserStatus/BanModal.tsx similarity index 100% rename from src/core/client/admin/routes/Community/UserStatus/BanModal.tsx rename to src/core/client/admin/components/UserStatus/BanModal.tsx diff --git a/src/core/client/admin/routes/Community/UserStatus/BanUserMutation.ts b/src/core/client/admin/components/UserStatus/BanUserMutation.ts similarity index 100% rename from src/core/client/admin/routes/Community/UserStatus/BanUserMutation.ts rename to src/core/client/admin/components/UserStatus/BanUserMutation.ts diff --git a/src/core/client/admin/routes/Community/UserStatus/RemoveUserBanMutation.ts b/src/core/client/admin/components/UserStatus/RemoveUserBanMutation.ts similarity index 100% rename from src/core/client/admin/routes/Community/UserStatus/RemoveUserBanMutation.ts rename to src/core/client/admin/components/UserStatus/RemoveUserBanMutation.ts diff --git a/src/core/client/admin/routes/Community/UserStatus/UserStatus.tsx b/src/core/client/admin/components/UserStatus/UserStatus.tsx similarity index 91% rename from src/core/client/admin/routes/Community/UserStatus/UserStatus.tsx rename to src/core/client/admin/components/UserStatus/UserStatus.tsx index 0cdb3eec5..ad8f7c914 100644 --- a/src/core/client/admin/routes/Community/UserStatus/UserStatus.tsx +++ b/src/core/client/admin/components/UserStatus/UserStatus.tsx @@ -4,8 +4,6 @@ import React, { FunctionComponent } from "react"; import { Flex, Typography } from "coral-ui/components"; import { PropTypesOf } from "coral-ui/types"; -import styles from "./UserStatus.css"; - interface Props { banned: boolean; suspended: boolean; @@ -17,9 +15,6 @@ const render = ( ) => ( -
- • -
{content}
diff --git a/src/core/client/admin/routes/Community/UserStatus/UserStatusChange.css b/src/core/client/admin/components/UserStatus/UserStatusChange.css similarity index 87% rename from src/core/client/admin/routes/Community/UserStatus/UserStatusChange.css rename to src/core/client/admin/components/UserStatus/UserStatusChange.css index 6e953b31e..528966bb2 100644 --- a/src/core/client/admin/routes/Community/UserStatus/UserStatusChange.css +++ b/src/core/client/admin/components/UserStatus/UserStatusChange.css @@ -1,9 +1,12 @@ .button { - width: 100%; justify-content: space-between; padding: 0; } +.fullWidth { + width: 100%; +} + .dropdownButton { min-width: 80px; } diff --git a/src/core/client/admin/routes/Community/UserStatus/UserStatusChange.tsx b/src/core/client/admin/components/UserStatus/UserStatusChange.tsx similarity index 83% rename from src/core/client/admin/routes/Community/UserStatus/UserStatusChange.tsx rename to src/core/client/admin/components/UserStatus/UserStatusChange.tsx index f7d13a57d..41ebc98c0 100644 --- a/src/core/client/admin/routes/Community/UserStatus/UserStatusChange.tsx +++ b/src/core/client/admin/components/UserStatus/UserStatusChange.tsx @@ -1,3 +1,4 @@ +import cn from "classnames"; import { Localized } from "fluent-react/compat"; import React, { FunctionComponent } from "react"; @@ -20,9 +21,19 @@ interface Props { banned: boolean; suspended: boolean; children: React.ReactNode; + fullWidth?: boolean; } -const UserStatusChange: FunctionComponent = props => ( +const UserStatusChange: FunctionComponent = ({ + onBan, + onRemoveBan, + onSuspend, + onRemoveSuspension, + banned, + suspended, + children, + fullWidth = true, +}) => ( = props => ( body={({ toggleVisibility }) => ( - {!props.banned && ( + {!banned && ( { - props.onBan(); + onBan(); toggleVisibility(); }} > @@ -44,12 +55,12 @@ const UserStatusChange: FunctionComponent = props => ( )} - {props.banned && ( + {banned && ( { - props.onRemoveBan(); + onRemoveBan(); toggleVisibility(); }} > @@ -57,12 +68,12 @@ const UserStatusChange: FunctionComponent = props => ( )} - {!props.suspended && ( + {!suspended && ( { - props.onSuspend(); + onSuspend(); toggleVisibility(); }} > @@ -70,12 +81,12 @@ const UserStatusChange: FunctionComponent = props => ( )} - {props.suspended && ( + {suspended && ( { - props.onRemoveSuspension(); + onRemoveSuspension(); toggleVisibility(); }} > @@ -94,13 +105,13 @@ const UserStatusChange: FunctionComponent = props => ( >