From a4f1a2e224d2f77a4a0743c0337182c6cc4838be Mon Sep 17 00:00:00 2001
From: seanyesmunt <sean.yesmunt@gmail.com>
Date: Wed, 18 Mar 2020 13:33:17 -0400
Subject: [PATCH] add badge to analytics page link

---
 ui/component/channelSelector/view.jsx |  2 +-
 ui/component/common/icon-custom.jsx   |  2 +-
 ui/component/header/view.jsx          |  7 +++++++
 ui/component/sideNavigation/view.jsx  |  4 ++--
 ui/constants/icons.js                 |  1 +
 ui/page/fileListPublished/view.jsx    |  2 --
 ui/scss/component/_card.scss          |  1 -
 ui/scss/component/menu-button.scss    | 15 ++++++++++++---
 ui/scss/init/_vars.scss               |  2 +-
 9 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/ui/component/channelSelector/view.jsx b/ui/component/channelSelector/view.jsx
index fa6303cca..8ae4e07d0 100644
--- a/ui/component/channelSelector/view.jsx
+++ b/ui/component/channelSelector/view.jsx
@@ -43,7 +43,7 @@ function ChannelSelector(props: Props) {
         <MenuButton className="">
           <ChannelListItem url={selectedChannelUrl} isSelected />
         </MenuButton>
-        <MenuList className="">
+        <MenuList className="menu__list">
           {channels &&
             channels.map(channel => (
               <MenuItem key={channel.canonical_url} onSelect={() => onChannelSelect(channel.canonical_url)}>
diff --git a/ui/component/common/icon-custom.jsx b/ui/component/common/icon-custom.jsx
index 51eec66ba..353f867ad 100644
--- a/ui/component/common/icon-custom.jsx
+++ b/ui/component/common/icon-custom.jsx
@@ -425,7 +425,7 @@ export const icons = {
       <line x1="17" y1="16" x2="23" y2="16" />
     </g>
   ),
-  [ICONS.SCIENCE]: buildIcon(
+  [ICONS.ANALYTICS]: buildIcon(
     <g>
       <path d="M 8.4312337,1.6285136 V 9.4232264 L 2.2367584,22.725564 H 22.030217 L 15.773797,9.2902071 V 1.6285136 Z" />
       <path d="M 4.2426407,18.166369 H 12.197591" />
diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx
index ed110d78c..a28802b2d 100644
--- a/ui/component/header/view.jsx
+++ b/ui/component/header/view.jsx
@@ -167,6 +167,13 @@ const Header = (props: Props) => {
                       <Icon aria-hidden icon={ICONS.CHANNEL} />
                       {__('Channels')}
                     </MenuItem>
+                    <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.CREATOR_DASHBOARD}`)}>
+                      <Icon aria-hidden icon={ICONS.ANALYTICS} />
+                      {__('Creator Analytics')}
+                      <span>
+                        <span className="badge badge--alert">New!</span>
+                      </span>
+                    </MenuItem>
                     <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.REWARDS}`)}>
                       <Icon aria-hidden icon={ICONS.FEATURED} />
                       {__('Rewards')}
diff --git a/ui/component/sideNavigation/view.jsx b/ui/component/sideNavigation/view.jsx
index 6c269420a..aa4d84a37 100644
--- a/ui/component/sideNavigation/view.jsx
+++ b/ui/component/sideNavigation/view.jsx
@@ -168,11 +168,11 @@ function SideNavigation(props: Props) {
             ].map(
               linkProps =>
                 Object.keys(linkProps).length > 0 &&
-                (linkProps && (
+                linkProps && (
                   <li key={linkProps.navigate}>
                     <Button {...linkProps} className="navigation-link" activeClass="navigation-link--active" />
                   </li>
-                ))
+                )
             )}
         </ul>
 
diff --git a/ui/constants/icons.js b/ui/constants/icons.js
index 52129dc6b..8424cfe9a 100644
--- a/ui/constants/icons.js
+++ b/ui/constants/icons.js
@@ -91,3 +91,4 @@ export const REPOST = 'Repeat';
 export const VALIDATED = 'Check';
 export const SLIDERS = 'Sliders';
 export const SCIENCE = 'Science';
+export const ANALYTICS = 'BarChart2';
diff --git a/ui/page/fileListPublished/view.jsx b/ui/page/fileListPublished/view.jsx
index 79258631f..51631abfb 100644
--- a/ui/page/fileListPublished/view.jsx
+++ b/ui/page/fileListPublished/view.jsx
@@ -1,5 +1,4 @@
 // @flow
-import * as PAGES from 'constants/pages';
 import React, { useEffect } from 'react';
 import Button from 'component/button';
 import ClaimList from 'component/claimList';
@@ -29,7 +28,6 @@ function FileListPublished(props: Props) {
 
   return (
     <Page>
-      <Button button="link" label={'Creator Dashboard'} navigate={`/$/${PAGES.CREATOR_DASHBOARD}`} />
       <WebUploadList />
       {urls && Boolean(urls.length) && (
         <React.Fragment>
diff --git a/ui/scss/component/_card.scss b/ui/scss/component/_card.scss
index 128a6fff4..57c9a8ddf 100644
--- a/ui/scss/component/_card.scss
+++ b/ui/scss/component/_card.scss
@@ -3,7 +3,6 @@
   margin-bottom: var(--spacing-large);
   position: relative;
   border-radius: var(--card-radius);
-  box-shadow: var(--card-box-shadow);
   overflow: hidden;
   border: 1px solid var(--color-border);
 
diff --git a/ui/scss/component/menu-button.scss b/ui/scss/component/menu-button.scss
index ed03adcc1..67dfc8d9a 100644
--- a/ui/scss/component/menu-button.scss
+++ b/ui/scss/component/menu-button.scss
@@ -1,4 +1,4 @@
-// Extends reach-ui menu button base stylesheet
+Pmenu// Extends reach-ui menu button base stylesheet
 /* Used to detect in JavaScript if apps have loaded styles or not. */
 :root {
   --reach-menu-button: 1;
@@ -50,8 +50,7 @@
   }
 }
 
-.menu__list--header {
-  margin-top: 19px;
+.menu__list {
   margin-left: calc(var(--spacing-medium) * -1);
   box-shadow: var(--card-box-shadow);
   animation: menu-animate-in var(--animation-duration) var(--animation-style);
@@ -59,6 +58,11 @@
   border-bottom-right-radius: var(--border-radius);
 }
 
+.menu__list--header {
+  @extend .menu__list;
+  margin-top: 19px;
+}
+
 .menu__link {
   display: flex;
   align-items: center;
@@ -69,6 +73,11 @@
     stroke: var(--color-menu-icon);
     margin-right: var(--spacing-small);
   }
+
+  .badge {
+    margin-left: var(--spacing-small);
+    margin-bottom: 5px;
+  }
 }
 
 .menu__link-help {
diff --git a/ui/scss/init/_vars.scss b/ui/scss/init/_vars.scss
index eea471fd9..10ca9c0d2 100644
--- a/ui/scss/init/_vars.scss
+++ b/ui/scss/init/_vars.scss
@@ -44,7 +44,7 @@ $breakpoint-medium: 1150px;
   // Card
   --card-radius: var(--border-radius);
   --card-max-width: 1000px;
-  // --card-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --card-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 
   // Modal
   --modal-width: 550px;