[Rewards][Android] Adds pending contributions UI.

browser/ui/webui/brave_webui_source.cc

@@ -769,6 +769,7 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "continue", IDS_BRAVE_REWARDS_CONTINUE },
         { "continueToLogin", IDS_BRAVE_REWARDS_CONTINUE_TO_LOGIN },
         { "minimumBalanceWarning", IDS_BRAVE_REWARDS_MINIMUM_BALANCE_WARNING },
+        { "contributionPendingUntil", IDS_BRAVE_REWARDS_CONTRIBUTION_PENDING_UNTIL },  // NOLINT
 
         { "walletAccountLink", IDS_REWARDS_WALLET_ACCOUNT_LINK },
         { "walletAddFunds", IDS_REWARDS_WALLET_ADD_FUNDS },

components/brave_rewards/resources/android_page/components/icons/trash_icon.tsx

@@ -0,0 +1,13 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+ import * as React from 'react'
+
+ export function TrashIcon () {
+   return (
+    <svg className='icon' width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fillRule="evenodd" clipRule="evenodd" d="M13 4H12.2734L11.07 14.7447C10.9914 15.4487 10.3747 16 9.66671 16H4.33337C3.62404 16 3.00871 15.448 2.93071 14.7433L1.74671 4H1.00004C0.632041 4 0.333374 3.70133 0.333374 3.33333C0.333374 2.96533 0.632041 2.66667 1.00004 2.66667H4.33337V2C4.33337 0.897333 5.23071 0 6.33337 0H7.66671C8.76937 0 9.66671 0.897333 9.66671 2V2.66667H13C13.368 2.66667 13.6667 2.96533 13.6667 3.33333C13.6667 3.70133 13.368 4 13 4ZM8.33337 2C8.33337 1.63267 8.03404 1.33333 7.66671 1.33333H6.33337C5.96604 1.33333 5.66671 1.63267 5.66671 2V2.66667H8.33337V2ZM3.08804 4L4.25671 14.598C4.25937 14.624 4.30671 14.6667 4.33337 14.6667H9.66671C9.69337 14.6667 9.74204 14.6233 9.74537 14.5967L10.932 4H3.08804Z" fill="#AEB1C2"/>
+    </svg>
+   )
+ }

components/brave_rewards/resources/android_page/components/pageWallet.tsx

@@ -9,9 +9,9 @@ import { connect } from 'react-redux'
 import {
   ModalActivity,
   ModalBackupRestore,
-  ModalPending,
   ModalQRCode
 } from '../../ui/components'
+import { PendingContributionsModal } from './pending_contributions_modal'
 import { WalletCard, ExternalWalletAction } from '../../shared/components/wallet_card'
 import { ExternalWallet, ExternalWalletProvider, ExternalWalletStatus } from '../../shared/lib/external_wallet'
 import { Provider } from '../../ui/components/profile'
@@ -790,7 +790,7 @@ class PageWallet extends React.Component<Props, State> {
           summaryData={summaryData}
           autoContributeEnabled={enabledContribute}
           onExternalWalletAction={this.onExternalWalletAction}
-          onViewPendingTips={undefined}
+          onViewPendingTips={this.onModalPendingToggle}
         />
         { this.props.showManageWalletButton && <ManageWalletButton onClick={this.onModalBackupOpen} /> }
         {
@@ -815,10 +815,9 @@ class PageWallet extends React.Component<Props, State> {
         }
         {
           this.state.modalPendingContribution
-            ? <ModalPending
+            ? <PendingContributionsModal
               onClose={this.onModalPendingToggle}
               rows={this.getPendingRows()}
-              onRemoveAll={this.removeAllPendingContribution}
             />
             : null
         }

components/brave_rewards/resources/android_page/components/pending_contributions_modal.style.ts

@@ -0,0 +1,137 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import styled from 'styled-components'
+
+export const root = styled.div`
+  position: absolute;
+  left: 0px;
+  top: 8px;
+  width: 100%;
+  height: calc(100% - 16px);
+  max-width: 700px;
+  min-height: 545px;
+
+  border-radius: 8px;
+  background: var(--brave-palette-white);
+
+  display: block;
+  overflow-y: hidden;
+
+  font-family: var(--brave-font-heading);
+  line-height: 24px;
+`
+
+export const header = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 18px;
+  grid-template-rows: 1;
+  align-items: center;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  padding: 21px 24px;
+
+  button {
+    grid-column-start: 2;
+    justify-self: end;
+  }
+
+  div {
+    display: flex;
+    align-items: baseline;
+    padding-top: 2px;
+  }
+`
+
+export const title = styled.span`
+  grid-column-start: 1;
+  justify-self: start;
+  line-height: 24px;
+  font-size: 22px;
+  font-weight: 500;
+  font-color: rgba(33, 37, 41, 1);
+`
+
+export const constributionsList = styled.div`
+  height: calc(100% - 16px - 67px);
+  overflow-y: scroll;
+`
+
+export const constributionsListItem = styled.div`
+  display: grid;
+  grid-template-columns: 29px 1fr 1fr 14px;
+  grid-template-rows: 3;
+  padding: 16px;
+  align-items: center;
+  justify-items: start;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  overflow-y: visible;
+  white-space: nowrap;
+`
+
+export const contributionReceiver = styled.div`
+  grid-row-start: 1;
+  grid-column: 1 / 4;
+  display: flex;
+  font-size: 16px;
+  font-weight: 500;
+
+  a {
+    text-decoration: none;
+  }
+`
+
+export const contributionDelete = styled.div`
+  grid-row-start: 1;
+  grid-column-start: 4;
+  justify-self: end;
+  align-self: center;
+  line-height: 16px;
+
+  button {
+    padding: 2px 0px 0px 0px;
+    border: none;
+    background: none;
+    cursor: pointer;
+    text-align: center;
+    width: 100%;
+
+    .icon {
+      color: var(--brave-palette-grey500);
+      width: 14px;
+      height: 16px;
+      display: inline-block;
+    }
+  }
+`
+
+export const contributionAmount = styled.div`
+  grid-row-start: 2;
+  grid-column: 2 / -1;
+  font-size: 14px;
+  font-weight: 500;
+`
+
+export const contributionType = styled.div`
+  grid-row-start: 3;
+  grid-column-start: 2;
+  font-size: 14px;
+  line-height: 22px;
+`
+
+export const contributionDate = styled.div`
+  grid-row-start: 3;
+  grid-column: 3 / -1;
+  font-size: 12px;
+  justify-self: end;
+  text-align: right;
+  line-height: 20px;
+  padding-top: 2px;
+`
+
+export const noContent = styled.div`
+  text-align: center;
+  padding: 30px 0;
+  color: #989898;
+  font-size: 14px;
+`

components/brave_rewards/resources/android_page/components/pending_contributions_modal.tsx

@@ -0,0 +1,92 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react'
+
+import Profile from '../../ui/components/profile/index'
+import { DetailRow, getTypeMessage } from '../../ui/components/tablePending/index'
+import { LocaleContext, formatMessage } from '../../shared/lib/locale_context'
+import { Modal, ModalCloseButton } from '../../shared/components/modal'
+import { NewTabLink } from '../../shared/components/new_tab_link'
+import Tokens from '../../ui/components/tokens/index'
+import { TrashIcon } from './icons/trash_icon'
+
+import * as style from './pending_contributions_modal.style'
+
+interface Props {
+  rows: DetailRow[]
+  onClose: () => void
+}
+
+export function PendingContributionsModal (props: Props) {
+  const { getString } = React.useContext(LocaleContext)
+  function renderRow (row: DetailRow) {
+    /* Each row is a grid
+       ---------------------------------------------
+       |   | 1(29px) | 2(1fr) |  3(1fr)  | 4(14px) |
+       ---------------------------------------------
+       | 1 |  Icon     Site              |     |_| |
+       | 2 |         | Pending Amount              |
+       | 3 |         | Type  |                Date |
+       ---------------------------------------------
+    */
+     return (
+      <style.constributionsListItem>
+        <style.contributionReceiver>
+          <NewTabLink href={row.url}>
+            <Profile
+              title={row.profile.name}
+              provider={row.profile.provider}
+              verified={row.profile.verified}
+              src={row.profile.src}
+              type='mobile'
+            />
+          </NewTabLink>
+        </style.contributionReceiver>
+        <style.contributionDelete>
+          <button onClick={row.onRemove}><TrashIcon /></button>
+        </style.contributionDelete>
+        <style.contributionAmount>
+          <Tokens
+            value={row.amount.tokens}
+            converted={row.amount.converted}
+            size={'small'}
+            showApproxSign={true}
+          />
+        </style.contributionAmount>
+        <style.contributionType>
+          {getString(getTypeMessage(row.type))}
+        </style.contributionType>
+        <style.contributionDate>
+          {
+            formatMessage(getString('contributionPendingUntil'), [
+              row.date
+            ])
+          }
+        </style.contributionDate>
+      </style.constributionsListItem>
+    )
+  }
+
+   return (
+    <Modal>
+      <style.root>
+        <style.header>
+          <style.title>
+            {getString('pendingContributions')}
+          </style.title>
+          <ModalCloseButton onClick={props.onClose} />
+        </style.header>
+        { props.rows && props.rows.length > 0
+          ? <style.constributionsList>
+            {props.rows.map(renderRow)}
+          </style.constributionsList>
+          : <style.noContent>
+            {getString('pendingContributionEmpty')}
+          </style.noContent>
+        }
+      </style.root>
+    </Modal>
+  )
+}

components/brave_rewards/resources/ui/components/profile/index.tsx

@@ -37,7 +37,7 @@ export interface Props {
   id?: string
   src?: string
   title: string
-  type?: 'big' | 'small'
+  type?: 'big' | 'small' | 'mobile'
   provider?: Provider
   verified?: boolean
   tableCell?: boolean
@@ -286,7 +286,7 @@ export default class Profile extends React.PureComponent<Props, {}> {
     } = this.props
 
     return (
-      <StyledWrapper id={id}>
+      <StyledWrapper id={id} type={type}>
         <StyledImageWrapper type={type}>
           <StyledImage src={this.getSrc(src)} />
           {verified && type === 'small' ? (
@@ -295,8 +295,8 @@ export default class Profile extends React.PureComponent<Props, {}> {
             </StyledVerified>
           ) : null}
         </StyledImageWrapper>
-        <StyledContent>
-          <StyledTitleWrap>
+        <StyledContent type={type}>
+          <StyledTitleWrap type={type}>
             <StyledTitle type={type}>{title}</StyledTitle>
             {provider ? (
               <StyledProvider type={type}>

components/brave_rewards/resources/ui/components/profile/style.ts

@@ -56,11 +56,11 @@ const fadeOutToNull = keyframes`
   }
 `
 
-export const StyledWrapper = styled('div')<{}>`
+export const StyledWrapper = styled('div')<Partial<Props>>`
   position: relative;
   display: flex;
   align-items: center;
-  font-family: ${p => p.theme.fontFamily.body};
+  font-family: ${p => p.type === 'mobile' ? 'var(--brave-font-heading)' : p.theme.fontFamily.body};
 `
 
 export const StyledImageWrapper = styled('div')<Partial<Props>>`
@@ -72,10 +72,15 @@ export const StyledImageWrapper = styled('div')<Partial<Props>>`
       height: 32px;
       width: 32px;
     `
+    : p.type === 'small'
+    ? css`
+      height: 24px;
+      width: 24px;
+    `
     : css`
-    height: 24px;
-    width: 24px
-  `
+      height: 20px;
+      width: 20px;
+    `
   };
 `
 
@@ -97,25 +102,29 @@ export const StyledVerified = styled('span')<{}>`
   position: absolute;
 `
 
-export const StyledContent = styled.div`
-  padding: 0 0 0 12px;
+export const StyledContent = styled('div')<Partial<Props>>`
+  padding: 0px;
+  padding-left: ${p => p.type === 'mobile' ? '8px' : '12px'}
 `
 
-export const StyledTitleWrap = styled.div`
+export const StyledTitleWrap = styled('div')<Partial<Props>>`
   display: flex;
-  font-size: 14px;
-  font-weight: 700;
+  font-size: ${p => p.type === 'mobile' ? '16px' : '14px'};
+  font-weight: ${p => p.type === 'mobile' ? '500' : '700'};
   color: ${p => p.theme.palette.grey800};
+  display: ${p => p.type === 'mobile' ? 'block' : 'flex'};
+
 `
 
 export const StyledTitle = styled('span')<Partial<Props>>`
-  font-size: ${p => p.type === 'big' ? '18px' : null};
+  font-size: ${p => p.type === 'big' ? '18px' : p.type === 'mobile' ? '16px' : null};
+  font-weight: ${p => p.type === 'mobile' ? '500' : null};
 `
 
 export const StyledProvider = styled('span')<Partial<Props>>`
   padding-left: 4px;
-  font-size: ${p => p.type === 'big' ? '16px' : null};
-  font-weight: ${p => p.type === 'big' ? '400' : null};
+  font-size: ${p => p.type === 'big' ? '16px' : p.type === 'mobile' ? '16px' : null};
+  font-weight: ${p => p.type === 'big' ? '400' : p.type === 'mobile' ? '500' : null};
 `
 
 export const StyledProviderWrap = styled('div')<{}>`