diff --git a/client/coral-admin/src/components/ui/Header.css b/client/coral-admin/src/components/ui/Header.css index 22774baef..2073bd68a 100644 --- a/client/coral-admin/src/components/ui/Header.css +++ b/client/coral-admin/src/components/ui/Header.css @@ -1,6 +1,7 @@ .header { background-color: transparent; box-shadow: none; + min-height: 58px; } .header > div { diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.css b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.css index 802fb88be..339672a3b 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.css +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.css @@ -6,12 +6,31 @@ } .tabBar { - background: #9E9E9E; + background: #262626; + z-index: 5; } .tab { flex: 1; color: white; + text-transform: capitalize; + font-weight: 500; + font-size: 15px; + letter-spacing: 1px; +} + +.active { + color: white; + box-sizing: border-box; + border-bottom: solid 5px #F36451; +} + +.active > span { + color: white; +} + +.active:after { + background: transparent !important; } .showShortcuts { diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js index 55a2e705e..585760bf4 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js @@ -12,14 +12,17 @@ const lang = new I18n(translations); export default ({onTabClick, ...props}) => (
-
+
- onTabClick('pending')} - className={`mdl-tabs__tab ${styles.tab}`}>{lang.t('modqueue.pending')} - onTabClick('rejected')} - className={`mdl-tabs__tab ${styles.tab}`}>{lang.t('modqueue.rejected')} - onTabClick('flagged')} - className={`mdl-tabs__tab ${styles.tab}`}>{lang.t('modqueue.flagged')} + onTabClick('pending')} className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'pending' ? styles.active : ''}`}> + {lang.t('modqueue.pending')} + + onTabClick('rejected')} className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'rejected' ? styles.active : ''}`}> + {lang.t('modqueue.rejected')} + + onTabClick('flagged')} className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'flagged' ? styles.active : ''}`}> + {lang.t('modqueue.flagged')} +