Add You don't have passport page (#28)

Co-authored-by: Bartlomiej Tarczynski <[email protected]>
efdevcon · Apr 24, 2024 · 55483b5 · 55483b5
1 parent a6f9da9
commit 55483b5
Show file tree

Hide file tree

Showing 11 changed files with 88 additions and 52 deletions.
diff --git a/packages/frontend/src/components/bids/allBids/Header.tsx b/packages/frontend/src/components/bids/allBids/Header.tsx
@@ -10,7 +10,7 @@ export const Header = () => {
 
   return (
     <StyledHeader>
-      <BackButton url="/" />
+      <BackButton url="/" withBack />
       <Wrapper>
         <Title>
           <h2>Number of participants:</h2>

diff --git a/packages/frontend/src/components/buttons/BackButton.tsx b/packages/frontend/src/components/buttons/BackButton.tsx
@@ -9,9 +9,10 @@ interface BackButtonProps {
   setView?: (view: number) => void
   url?: string
   resetState?: () => void
+  withBack?: boolean
 }
 
-export function BackButton({ view, setView, url, resetState }: BackButtonProps) {
+export function BackButton({ view, setView, url, resetState, withBack = false }: BackButtonProps) {
   const router = useRouter()
 
   const goBack = useCallback(() => {
@@ -27,31 +28,30 @@ export function BackButton({ view, setView, url, resetState }: BackButtonProps)
   }, [setView, view, router, url, resetState])
 
   return (
-    <BackBtn onClick={goBack}>
-      <ArrowLeftIcon />
-      Back
+    <BackBtn onClick={goBack} $withBack={withBack}>
+      <ArrowLeftIcon color={Colors.Black} />
+      {withBack && 'Back'}
     </BackBtn>
   )
 }
 
-const BackBtn = styled.button`
+const BackBtn = styled.button<{ $withBack?: boolean }>`
   display: flex;
   align-items: center;
-  width: 84px;
+  width: ${({ $withBack }) => ($withBack ? '84px' : '35px')};
   height: 32px;
   font-family: 'Roboto', Helvetica, Arial, sans-serif;
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
   background-color: ${Colors.Transparent};
   color: ${Colors.GreenLight};
-  border: 1px solid ${Colors.GreenLight};
+  border: 1px solid ${Colors.Black};
   padding: 0;
 
   &:hover,
   &:focus-visible,
   &:active {
-    background-color: ${Colors.GreenLight};
-    color: ${Colors.Black};
+    background-color: ${Colors.Pink};
   }
 `
diff --git a/packages/frontend/src/components/common/Separator.tsx b/packages/frontend/src/components/common/Separator.tsx
@@ -28,9 +28,9 @@ const SeparatorElement = styled(SeparatorPrimitive.Root)<SeparatorElementProps>`
 export const SeparatorWithText = ({ text }: { text: string }) => {
   return (
     <SeparatorWrapper>
-      <Separator color={Colors.Mystic} />
+      <Separator color={Colors.Black} />
       {text}
-      <Separator color={Colors.Mystic} />
+      <Separator color={Colors.Black} />
     </SeparatorWrapper>
   )
 }
@@ -40,5 +40,5 @@ const SeparatorWrapper = styled.div`
   flex-direction: row;
   align-items: center;
   gap: 10px;
-  color: White;
+  color: ${Colors.Black};
 `
diff --git a/packages/frontend/src/components/form/Form.tsx b/packages/frontend/src/components/form/Form.tsx
@@ -1,18 +1,6 @@
 import { Colors } from '@/styles/colors'
 import styled from 'styled-components'
 
-export const Form = styled.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: 16px;
-  width: 100%;
-  max-width: 460px;
-`
-
-export const FormNarrow = styled(Form)`
-  max-width: 289px;
-`
-
 export const FormRow = styled.div`
   display: flex;
   justify-content: space-between;
@@ -33,8 +21,8 @@ export const FormWrapper = styled.div`
   display: flex;
   flex-direction: column;
   row-gap: 16px;
-  padding: 82px 115px 82px 170px;
-  width: 100%;
+  padding: 82px 0 82px;
+  width: 431px;
 `
 
 export const FormSectionWrapper = styled(FormWrapper)`
@@ -51,3 +39,15 @@ export const FormText = styled.p`
   max-width: 440px;
   color: ${Colors.Black};
 `
+
+export const Form = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`
+
+export const Row = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+`
diff --git a/packages/frontend/src/components/userActious/ConnectWalletWarning.tsx b/packages/frontend/src/components/userActious/ConnectWalletWarning.tsx
@@ -1,5 +1,4 @@
 import { useContractState } from '@/blockchain/hooks/useAuctionState'
-import styled from 'styled-components'
 import { FormHeading, FormRow, FormWrapper } from '../form'
 import { ConnectWalletButton } from '../buttons'
 import { getWarningText } from './getWarningText'
@@ -9,19 +8,14 @@ export const ConnectWalletWarning = () => {
   const text = getWarningText(state)
 
   return (
-    <ConnectFormWrapper>
+    <FormWrapper>
       <FormHeading>{text.heading}</FormHeading>
       <FormRow>
         <span>
           To {text.action} please connect your wallet to the <strong>Arbitrum</strong> network.
         </span>
       </FormRow>
       <ConnectWalletButton />
-    </ConnectFormWrapper>
+    </FormWrapper>
   )
 }
-
-const ConnectFormWrapper = styled(FormWrapper)`
-  justify-content: center;
-  padding: 0 218px;
-`
diff --git a/packages/frontend/src/components/userActious/UserActionSection.tsx b/packages/frontend/src/components/userActious/UserActionSection.tsx
@@ -45,4 +45,6 @@ const Wrapper = styled.div`
   background-color: ${Colors.Pink};
   position: relative;
   z-index: 1;
+  justify-content: center;
+  align-items: center;
 `
diff --git a/packages/frontend/src/components/userActious/gitcoin/CheckGitcoinPassword.tsx b/packages/frontend/src/components/userActious/gitcoin/CheckGitcoinPassword.tsx
@@ -6,15 +6,15 @@ import { SeparatorWithText } from '@/components/common/Separator'
 export const CheckGitcoinPassword = () => {
   return (
     <Wrapper>
-      <FormHeading>Check GitCoin Passport</FormHeading>
+      <FormHeading>Check Gitcoin Passport</FormHeading>
       <FormRow>
         <span>To place a bid we need to check your score. By verifying your score we checking if you are a human.</span>
       </FormRow>
       <Button wide>Check Score</Button>
       <SeparatorWithText text="Or" />
       <FormRow>
         <span>
-          If you don’t have a <b>GitCoin Passport</b>, please create one.
+          If you don’t have a <b>Gitcoin Passport</b>, please create one.
         </span>
       </FormRow>
       <Button wide>Create a Gitcoin Passport</Button>
@@ -23,6 +23,5 @@ export const CheckGitcoinPassword = () => {
 }
 
 const Wrapper = styled(FormWrapper)`
-  justify-content: center;
-  padding: 0 143px;
+  width: 390px;
 `
diff --git a/packages/frontend/src/components/userActious/gitcoin/CheckingGitcoinScore.tsx b/packages/frontend/src/components/userActious/gitcoin/CheckingGitcoinScore.tsx
@@ -1,7 +1,6 @@
 import styled from 'styled-components'
-import { FormRow, FormWrapper } from '../../form'
+import { FormHeading, FormRow, FormWrapper } from '../../form'
 import { Stepper } from '@/components/stepper/Stepper'
-import { Colors } from '@/styles/colors'
 import { ClockIcon } from '@/components/icons'
 import { Button } from '@/components/buttons'
 
@@ -37,7 +36,7 @@ export const CheckGitcoinScore = () => {
     <Wrapper>
       <Row>
         <ClockIcon size={38} />
-        <StepperHeader>Checking Your Score</StepperHeader>
+        <FormHeading>Checking Your Score</FormHeading>
       </Row>
       <FormRow>
         <span>It will take about 1 minute. Please stay on this page.</span>
@@ -49,9 +48,7 @@ export const CheckGitcoinScore = () => {
 }
 
 const Wrapper = styled(FormWrapper)`
-  justify-content: center;
-  gap: 16px;
-  padding: 0 143px;
+  width: 530px;
 `
 
 const Row = styled.div`
@@ -60,7 +57,3 @@ const Row = styled.div`
   align-items: center;
   gap: 16px;
 `
-
-const StepperHeader = styled.h3`
-  color: ${Colors.Black};
-`
diff --git a/packages/frontend/src/components/userActious/gitcoin/GitcointFlow.tsx b/packages/frontend/src/components/userActious/gitcoin/GitcointFlow.tsx
@@ -2,16 +2,17 @@ import { useState } from 'react'
 import { CheckGitcoinPassword } from './CheckGitcoinPassword'
 import { CheckGitcoinScore } from './CheckingGitcoinScore'
 import { UserGitcoinScore } from '@/components/userActious/gitcoin/UserGitcoinScore'
+import { MissingGitcoinPassport } from './MissingGitcoinPassport'
 
 enum GitcoinState {
   INITIAL_PAGE,
   CHECKING_SCORE,
-  YOU_DONT_HAVE_PASSPORT,
+  MISSING_PASSPORT,
   YOUR_SCORE,
 }
 
 export const GitcoinFlow = () => {
-  const [gitcoinState] = useState<GitcoinState>(GitcoinState.YOUR_SCORE)
+  const [gitcoinState, setGitcoinState] = useState<GitcoinState>(GitcoinState.MISSING_PASSPORT)
 
   switch (gitcoinState) {
     case GitcoinState.INITIAL_PAGE:
@@ -20,6 +21,9 @@ export const GitcoinFlow = () => {
       return <CheckGitcoinScore />
     case GitcoinState.YOUR_SCORE:
       return <UserGitcoinScore />
+    case GitcoinState.MISSING_PASSPORT:
+      return <MissingGitcoinPassport afterCreateClick={() => setGitcoinState(GitcoinState.INITIAL_PAGE)} />
+
     default:
       return <CheckGitcoinPassword />
   }

diff --git a/packages/frontend/src/components/userActious/gitcoin/MissingGitcoinPassport.tsx b/packages/frontend/src/components/userActious/gitcoin/MissingGitcoinPassport.tsx
@@ -0,0 +1,44 @@
+import styled from 'styled-components'
+import { Button } from '../../buttons'
+import { Colors } from '@/styles/colors'
+import { BackButton } from '@/components/buttons/BackButton'
+import { Form, FormRow, FormWrapper, Row } from '@/components/form'
+import { urls } from '@/constants/urls'
+
+interface Props {
+  afterCreateClick: () => void
+}
+
+export const MissingGitcoinPassport = ({ afterCreateClick }: Props) => {
+  const onCreateClick = () => {
+    window.open(urls.gitcoin, '_blank')
+    afterCreateClick()
+  }
+
+  return (
+    <Wrapper>
+      <BackButtonRow>
+        <BackButton />
+        <Form>
+          <WarningHeader>You don&apos;t have a Gitcoin Passport</WarningHeader>
+          <FormRow>
+            <span>To finish placing a bid, please create a Gitcoin Passport.</span>
+          </FormRow>
+          <Button onClick={onCreateClick}>Create a Gitcoin Passport</Button>
+        </Form>
+      </BackButtonRow>
+    </Wrapper>
+  )
+}
+
+const BackButtonRow = styled(Row)`
+  gap: 32px;
+`
+
+const Wrapper = styled(FormWrapper)`
+  width: 465px;
+`
+
+const WarningHeader = styled.h2`
+  color: ${Colors.RedDark};
+`
diff --git a/packages/frontend/src/styles/colors.ts b/packages/frontend/src/styles/colors.ts
@@ -1,6 +1,6 @@
 export const Colors = {
   White: '#FFFFFF',
-  Black: '#323232',
+  Black: '#0F0F0F',
   Blue: '#1144AA',
   BlueDark: '#103D96',
   BlueLight: '#F6FFFE',