add badge to analytics page link

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

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" />

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')}

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>
 

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

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>

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

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 {

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;