UserDetail Refactor

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;
 }

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 {
                   <TabBar
                     onTabClick={this.changeTab}
                     activeTab={activeTab}
-                    className={cn(styles.commentStatuses, 'talk-admin-user-detail-tab-bar')}
-                    aria-controls='talk-admin-user-detail-content' >
-                    <Tab tabId={'all'} className={'talk-admin-user-detail-all-tab'}>
+                    className={cn(styles.tabBar, 'talk-admin-user-detail-tab-bar')}
+                    aria-controls='talk-admin-user-detail-content'
+                    tabClassNames={{
+                      button: styles.tabButton,
+                      buttonActive: styles.tabButtonActive,
+                    }} >
+                    <Tab
+                      tabId={'all'}
+                      className={cn(styles.tab, styles.button, 'talk-admin-user-detail-all-tab')} >
                       All
                     </Tab>
-                    <Tab tabId={'rejected'} className={'talk-admin-user-detail-rejected-tab'}>
+                    <Tab 
+                      tabId={'rejected'}
+                      className={cn(styles.tab, 'talk-admin-user-detail-rejected-tab')} >
                       Rejected
                     </Tab>
-                    <Tab tabId={'history'} className={'talk-admin-user-detail-history-tab'}>
+                    <Tab tabId={'history'} className={cn(styles.tab, styles.button, 'talk-admin-user-detail-history-tab')}>
                       Account History
                     </Tab>
                   </TabBar>
@@ -190,16 +197,18 @@ class UserDetail extends React.Component {
                 )
             }
 
-            <div className={styles.toggleAll}>
-              <input
-                type='checkbox'
-                id='toogleAll'
-                checked={selectedCommentIds.length > 0 && selectedCommentIds.length === nodes.length}
-                onChange={(e) => {
-                  toggleSelectAll(nodes.map((comment) => comment.id), e.target.checked);
-                }} />
-              <label htmlFor='toogleAll'>Select all</label>
-            </div>
+            {(activeTab === 'all' || activeTab === 'rejected') && (
+              <div className={styles.toggleAll}>
+                <input
+                  type='checkbox'
+                  id='toogleAll'
+                  checked={selectedCommentIds.length > 0 && selectedCommentIds.length === nodes.length}
+                  onChange={(e) => {
+                    toggleSelectAll(nodes.map((comment) => comment.id), e.target.checked);
+                  }} />
+                <label htmlFor='toogleAll'>Select all</label>
+              </div>
+            )}
 
           </div>
 

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,
     );
   }
 

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,
     );
   }