Placing refresh publisher link

Fixing column widths

Adding function for link. Storybook changes.

Make method optional

Adding flex attribute to a element

Align last flex item to right for check link

Replace removed margin

Update z-index for link

Adding loading icon

Correcting refreshed check

Add missing attribute for prop

Removed unneeded prop

src/features/rewards/profile/index.tsx

@@ -15,10 +15,12 @@ import {
   StyledProviderWrap,
   StyledInlineVerified,
   StyledVerifiedText,
-  StyledInlineUnVerified
+  StyledInlineUnVerified,
+  StyledVerifiedCheckLink,
+  StyledRefresh
 } from './style'
 import { getLocale } from '../../../helpers'
-import { VerifiedIcon, UnVerifiedIcon } from '../../../components/icons'
+import { VerifiedIcon, UnVerifiedIcon, LoaderIcon } from '../../../components/icons'
 
 export type Provider = 'twitter' | 'youtube' | 'twitch'
 
@@ -31,6 +33,9 @@ export interface Props {
   verified?: boolean
   tableCell?: boolean
   showUnVerifiedHelpIcon?: boolean
+  refreshingPublisher?: boolean
+  publisherRefreshed?: boolean
+  onRefreshPublisher?: () => void
 }
 
 /*
@@ -66,7 +71,9 @@ export default class Profile extends React.PureComponent<Props, {}> {
       title,
       verified,
       tableCell,
-      showUnVerifiedHelpIcon
+      showUnVerifiedHelpIcon,
+      onRefreshPublisher,
+      refreshingPublisher
     } = this.props
 
     return (
@@ -109,6 +116,15 @@ export default class Profile extends React.PureComponent<Props, {}> {
               <StyledVerifiedText>
                 {getLocale('unVerifiedPublisher')}
               </StyledVerifiedText>
+              {
+                refreshingPublisher ?
+                  <StyledRefresh>
+                    <LoaderIcon />
+                  </StyledRefresh>
+                  : <StyledVerifiedCheckLink onClick={onRefreshPublisher}>
+                    {getLocale('unVerifiedCheck')}
+                  </StyledVerifiedCheckLink>
+              }
             </StyledProviderWrap>
           ) : null}
         </StyledContent>

src/features/rewards/profile/style.ts

@@ -3,6 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import styled, { css } from 'styled-components'
+import palette from '../../../theme/colors'
 import { Props, Provider } from './index'
 
 const getOverflowRules = (provider?: Provider) => {
@@ -147,6 +148,24 @@ export const StyledVerifiedText = styled<{}, 'span'>('span')`
   margin-left: 4px;
 `
 
+export const StyledRefresh = styled<{}, 'span'>('span')`
+  color: ${palette.blue400};
+  line-height: 0;
+  height: 18px;
+  width: 18px;
+  vertical-align: bottom;
+  margin-left: auto;
+`
+
+export const StyledVerifiedCheckLink = styled<{}, 'span'>('span')`
+  font-size: 12px;
+  color: ${palette.blue400};
+  cursor: pointer;
+  text-decoration: none;
+  margin-left: auto;
+  z-index: 1;
+`
+
 export const StyledInlineVerified = styled<{}, 'span'>('span')`
   width: 19px;
   padding-top: 2px;

src/features/rewards/walletPanel/index.tsx

@@ -55,6 +55,9 @@ export interface Props {
   onToggleTips: () => void
   onAmountChange: () => void
   onIncludeInAuto: () => void
+  onRefreshPublisher?: () => void
+  refreshingPublisher?: boolean
+  publisherRefreshed?: boolean
   showUnVerified?: boolean
   moreLink?: string
   acEnabled?: boolean
@@ -75,6 +78,9 @@ export default class WalletPanel extends React.PureComponent<Props, {}> {
           showUnVerifiedHelpIcon={
             !this.props.isVerified && this.props.showUnVerified
           }
+          refreshingPublisher={this.props.refreshingPublisher}
+          onRefreshPublisher={this.props.onRefreshPublisher}
+          publisherRefreshed={this.props.publisherRefreshed}
         />
       </StyledProfileWrapper>
     )

stories/assets/locale.ts

@@ -201,6 +201,7 @@ const locale: Record<string, string> = {
   turnOnRewardsTitle: 'Turn on Rewards',
   type: 'Type',
   uhOh: 'Uh oh…',
+  unVerifiedCheck: 'Check Again...',
   unVerifiedPublisher: 'Not yet verified',
   unVerifiedText: 'This creator has not yet signed up to receive contributions from Brave users.',
   unVerifiedTextMore: 'Learn more.',

stories/features/rewards/concepts.tsx

@@ -262,7 +262,7 @@ storiesOf('Feature Components/Rewards/Concepts/Desktop', module)
       </div>
     )
   })
-  .add('Wallet Panel', withState({ grant: defaultGrant, notification: grantNotification, showSummary: false, tipsEnabled: true, includeInAuto: true }, (store) => {
+  .add('Wallet Panel', withState({ grant: defaultGrant, notification: grantNotification, showSummary: false, tipsEnabled: true, includeInAuto: true, refreshingPublisher: false }, (store) => {
     const curveRgb = '233,235,255'
     const panelRgb = '249,251,252'
 
@@ -286,6 +286,10 @@ storiesOf('Feature Components/Rewards/Concepts/Desktop', module)
       store.set({ includeInAuto: !store.state.includeInAuto })
     }
 
+    const onRefreshPublisher = () => {
+      store.set({ refreshingPublisher: !store.state.refreshingPublisher })
+    }
+
     const onToggleTips = () => {
       store.set({ tipsEnabled: !store.state.tipsEnabled })
     }
@@ -396,6 +400,8 @@ storiesOf('Feature Components/Rewards/Concepts/Desktop', module)
                 donationAction={doNothing}
                 onAmountChange={doNothing}
                 onIncludeInAuto={onIncludeInAuto}
+                refreshingPublisher={store.state.refreshingPublisher}
+                onRefreshPublisher={onRefreshPublisher}
               />
               <WalletSummary
                 compact={true}

stories/features/rewards/wallet.tsx

@@ -137,6 +137,7 @@ storiesOf('Feature Components/Rewards/Wallet/Desktop', module)
           onAmountChange={doNothing}
           onIncludeInAuto={doNothing}
           showUnVerified={boolean('Show unverified content', true)}
+          onRefreshPublisher={doNothing}
         />
       </div>
     )