Fix partially hidden grant captcha drag and drop target image

brave · Mar 3, 2020 · af8fd1b · af8fd1b
1 parent af9e381
commit af8fd1b
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 24 deletions.
diff --git a/components/brave_rewards/resources/page/components/promotion.tsx b/components/brave_rewards/resources/page/components/promotion.tsx
@@ -73,6 +73,7 @@ class Promotion extends React.Component<Props, State> {
           onClose={this.onHide}
           title={getLocale('grantGeneralErrorTitle')}
           text={''}
+          overlay={true}
         >
           <GrantError
             buttonText={getLocale('grantGeneralErrorButton')}
@@ -92,6 +93,7 @@ class Promotion extends React.Component<Props, State> {
         onClose={this.onHide}
         title={promotion.captchaStatus === 'wrongPosition' ? getLocale('notQuite') : getLocale('almostThere')}
         text={getLocale('proveHuman')}
+        overlay={true}
       >
         <GrantCaptcha
           onSolution={this.onSolution}
@@ -125,6 +127,7 @@ class Promotion extends React.Component<Props, State> {
         onClose={this.onFinish}
         title={title}
         text={text}
+        overlay={true}
       >
         <GrantComplete
           onClose={this.onFinish}

diff --git a/components/brave_rewards/resources/ui/components/grantCaptcha/style.ts b/components/brave_rewards/resources/ui/components/grantCaptcha/style.ts
@@ -6,7 +6,7 @@ import styled from 'styled-components'
 
 export const StyledWrapper = styled<{}, 'div'>('div')`
   text-align: center;
-  margin: 10px 0 0 -32px;
+  margin: 10px -32px 0;
   width: 333px;
 `
 

diff --git a/components/brave_rewards/resources/ui/components/grantError/style.ts b/components/brave_rewards/resources/ui/components/grantError/style.ts
@@ -7,8 +7,7 @@ import styled from 'styled-components'
 export const StyledWrapper = styled<{}, 'div'>('div')`
   text-align: center;
   width: 100%;
-  padding: 20px 10px;
-  min-height: 350px;
+  padding: 20px 10px 0;
 `
 
 export const StyledText = styled<{}, 'div'>('div')`

diff --git a/components/brave_rewards/resources/ui/components/grantWrapper/index.tsx b/components/brave_rewards/resources/ui/components/grantWrapper/index.tsx
@@ -17,21 +17,34 @@ export interface Props {
   onClose: () => void
   title: string
   fullScreen?: boolean
+  overlay?: boolean
   hint?: string
   text: React.ReactNode
   children: React.ReactNode
 }
 
 export default class GrantWrapper extends React.PureComponent<Props, {}> {
   render () {
-    const { id, testId, isPanel, fullScreen, hint, onClose, title, text, children } = this.props
+    const {
+      id,
+      testId,
+      isPanel,
+      fullScreen,
+      overlay,
+      hint,
+      onClose,
+      title,
+      text,
+      children
+    } = this.props
 
     return (
       <StyledWrapper
         id={id}
         data-test-id={testId}
         isPanel={isPanel}
         fullScreen={fullScreen}
+        overlay={overlay}
       >
         <StyledClose onClick={onClose}>
           <CloseCircleOIcon />

diff --git a/components/brave_rewards/resources/ui/components/grantWrapper/style.ts b/components/brave_rewards/resources/ui/components/grantWrapper/style.ts
@@ -7,6 +7,7 @@ import styled from 'styled-components'
 interface StyleProps {
   isPanel?: boolean
   fullScreen?: boolean
+  overlay?: boolean
 }
 
 const getBackground = (props: StyleProps) => {
@@ -22,7 +23,9 @@ const getBackground = (props: StyleProps) => {
 }
 
 export const StyledWrapper = styled<StyleProps, 'div'>('div')`
-  position: ${p => p.fullScreen ? 'fixed' : 'absolute'};
+  position: ${p => p.fullScreen
+    ? 'fixed'
+    : p.overlay ? 'absolute' : 'relative'};
   top: 0;
   left: 0;
   z-index: 6;
@@ -32,9 +35,12 @@ export const StyledWrapper = styled<StyleProps, 'div'>('div')`
   flex-wrap: wrap;
   overflow: hidden;
   width: 100%;
-  padding: 0 52px 20px;
+  padding: 0 52px 36px;
   border-radius: 6px;
-  height: ${p => (p.fullScreen || p.isPanel) ? '100%' : 'auto'};
+  min-height: ${p => (p.fullScreen || p.isPanel)
+    ? '100%'
+    : p.overlay ? '710px' : 'auto'};
+  min-width: 373px;
   overflow-y: ${p => p.fullScreen ? 'scroll' : 'hidden'};
   background: ${p => getBackground(p)};
 `

diff --git a/components/brave_rewards/resources/ui/components/walletWrapper/index.tsx b/components/brave_rewards/resources/ui/components/walletWrapper/index.tsx
@@ -569,6 +569,33 @@ export default class WalletWrapper extends React.PureComponent<Props, State> {
       if (grant.amount) {
         grantAmount = grant.amount.toFixed(1)
       }
+
+      if (grant.captchaImage && grant.captchaStatus !== 'finished') {
+        let rendered = this.grantCaptcha()
+        if (rendered) {
+          return rendered
+        }
+      }
+
+      if (grant.captchaStatus === 'finished') {
+        return (
+          <GrantWrapper
+            isPanel={true}
+            onClose={this.onFinish.bind(this, grant.promotionId)}
+            title={grant.finishTitle || ''}
+            text={grant.finishText}
+          >
+            <GrantComplete
+              isMobile={true}
+              onClose={this.onFinish.bind(this, grant.promotionId)}
+              amount={grantAmount}
+              date={date}
+              tokenTitle={grant.finishTokenTitle}
+              onlyAnonWallet={onlyAnonWallet}
+            />
+          </GrantWrapper>
+        )
+      }
     }
 
     const walletVerified = walletState === 'verified' || walletState === 'disconnected_verified'
@@ -583,23 +610,6 @@ export default class WalletWrapper extends React.PureComponent<Props, State> {
           isMobile={isMobile}
           notification={notification}
         >
-          {
-            grant && grant.captchaImage && grant.captchaStatus !== 'finished'
-              ? this.grantCaptcha()
-              : null
-          }
-          {
-            grant && grant.captchaStatus === 'finished'
-              ? <GrantWrapper
-                isPanel={true}
-                onClose={this.onFinish.bind(this, grant.promotionId)}
-                title={grant.finishTitle || ''}
-                text={grant.finishText}
-              >
-                <GrantComplete isMobile={true} onClose={this.onFinish.bind(this, grant.promotionId)} amount={grantAmount} date={date} tokenTitle={grant.finishTokenTitle} onlyAnonWallet={onlyAnonWallet} />
-              </GrantWrapper>
-              : null
-          }
           <StyledHeader>
             {
               !notification