diff --git a/client/coral-admin/src/components/UserDetail.css b/client/coral-admin/src/components/UserDetail.css index 8b86a133c..0a55299ec 100644 --- a/client/coral-admin/src/components/UserDetail.css +++ b/client/coral-admin/src/components/UserDetail.css @@ -94,33 +94,16 @@ width: calc(100% - 90px); } -.commentStatuses { - padding: 0 0 0 10px; - margin: 0; - align-self: center; - list-style: none; - box-sizing: border-box; - li { - display: inline-block; - margin-right: 10px; - cursor: pointer; - padding: 0 10px; - } -} - -.active { - font-weight: bold; - border-bottom: 3px solid #F36451; -} - .bulkActionGroup { height: 52px; background-color: #efefef; padding: 0 0 0 10px; display: flex; + i { margin-right: 0; } + .bulkAction { display: inline-block; width: 48px; @@ -139,7 +122,7 @@ margin-left: 15px; } -.loadMore>button { +.loadMore > button { background-color: #696969; &:hover { background-color: #404040; @@ -160,7 +143,38 @@ display: flex; justify-content: space-between; height: 52px; + &.selected { background-color: #efefef; } +} + +.tabBar { + padding: 0 0 0 10px; + margin: 0; + align-self: center; + list-style: none; + box-sizing: border-box; + border: none; +} + +.tab { + display: inline-block; + margin-right: 10px; + cursor: pointer; + padding: 0 10px; +} + +.tabButton { + border: none; + background: white; + border-radius: 0; + font-size: 1em; + padding: 5px; + cursor: pointer; +} + +.tabButtonActive { + font-weight: bold; + border-bottom: 3px solid #F36451; } \ No newline at end of file diff --git a/client/coral-admin/src/components/UserDetail.js b/client/coral-admin/src/components/UserDetail.js index 4447a05e9..ea10a9d63 100644 --- a/client/coral-admin/src/components/UserDetail.js +++ b/client/coral-admin/src/components/UserDetail.js @@ -86,8 +86,7 @@ class UserDetail extends React.Component { rejectedComments, comments: { nodes, - hasNextPage - } + hasNextPage} }, activeTab, selectedCommentIds, @@ -162,15 +161,23 @@ class UserDetail extends React.Component { - + className={cn(styles.tabBar, 'talk-admin-user-detail-tab-bar')} + aria-controls='talk-admin-user-detail-content' + tabClassNames={{ + button: styles.tabButton, + buttonActive: styles.tabButtonActive, + }} > + All - + Rejected - + Account History @@ -190,16 +197,18 @@ class UserDetail extends React.Component { ) } -
- 0 && selectedCommentIds.length === nodes.length} - onChange={(e) => { - toggleSelectAll(nodes.map((comment) => comment.id), e.target.checked); - }} /> - -
+ {(activeTab === 'all' || activeTab === 'rejected') && ( +
+ 0 && selectedCommentIds.length === nodes.length} + onChange={(e) => { + toggleSelectAll(nodes.map((comment) => comment.id), e.target.checked); + }} /> + +
+ )} diff --git a/client/coral-ui/components/Tab.js b/client/coral-ui/components/Tab.js index 4fd85b303..ba579b80c 100644 --- a/client/coral-ui/components/Tab.js +++ b/client/coral-ui/components/Tab.js @@ -17,14 +17,14 @@ class Tab extends React.Component { getRootClassName({active, className, sub, classNames = {}} = this.props) { return cn( 'talk-tab', - className, { [classNames.root || styles.root]: !sub, [classNames.rootSub || styles.rootSub]: sub, [classNames.rootActive || styles.rootActive]: active && !sub, [classNames.rootSubActive || styles.rootSubActive]: active && sub, 'talk-tab-active': active, - } + }, + className, ); } diff --git a/client/coral-ui/components/TabBar.js b/client/coral-ui/components/TabBar.js index 1a51c60f2..0da65ec9a 100644 --- a/client/coral-ui/components/TabBar.js +++ b/client/coral-ui/components/TabBar.js @@ -13,11 +13,11 @@ class TabBar extends React.Component { getRootClassName({className, classNames = {}, sub} = this.props) { return cn( 'talk-tab-bar', - className, { [classNames.root || styles.root]: !sub, [classNames.rootSub || styles.rootSub]: sub, - } + }, + className, ); }