From d726f46e7330898ec9777d2795c052f3e0535b05 Mon Sep 17 00:00:00 2001
From: Andrzej <andrzej.daniel@archblock.com>
Date: Thu, 25 Apr 2024 16:54:15 +0200
Subject: [PATCH] Add views logic and padding

---
 .../userActious/claim/VoucherForm.tsx         |  4 +-
 .../components/userActious/claim/WinForm.tsx  | 40 ++++++++++++-------
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/packages/frontend/src/components/userActious/claim/VoucherForm.tsx b/packages/frontend/src/components/userActious/claim/VoucherForm.tsx
index 8eefdc9a..a23a7b5f 100644
--- a/packages/frontend/src/components/userActious/claim/VoucherForm.tsx
+++ b/packages/frontend/src/components/userActious/claim/VoucherForm.tsx
@@ -10,10 +10,10 @@ import { Colors } from '@/styles/colors'
 
 interface Props {
   voucher: string
-  withdrawnBid: boolean
+  withdrawnBid?: boolean
 }
 
-export const VoucherForm = ({ voucher, withdrawnBid }: Props) => {
+export const VoucherForm = ({ voucher, withdrawnBid = false }: Props) => {
   const redeemTimestamp = useVoucherRedeemDeadline()
   const isVoucherExpired = redeemTimestamp ? redeemTimestamp * BigInt(1000) > Date.now() : false
 
diff --git a/packages/frontend/src/components/userActious/claim/WinForm.tsx b/packages/frontend/src/components/userActious/claim/WinForm.tsx
index da23a7fa..13c1e30f 100644
--- a/packages/frontend/src/components/userActious/claim/WinForm.tsx
+++ b/packages/frontend/src/components/userActious/claim/WinForm.tsx
@@ -21,23 +21,35 @@ export const WinForm = ({ userBid, withdrawalAmount, setView }: WinFormProps) =>
     setVoucher(undefined)
   }, [address])
 
-  if (voucher) {
-    return <VoucherForm voucher={voucher} withdrawnBid={userBid.claimed} />
-  }
-
   return (
-    <Wrapper>
-      <WinBidForm
-        userBid={userBid}
-        withdrawalAmount={withdrawalAmount}
-        setView={setView}
-        voucher={voucher}
-        setVoucher={setVoucher}
-      />
-    </Wrapper>
+    <>
+      {!(userBid.claimed && voucher) && (
+        <Wrapper>
+          <WinBidFormWrapper $hasVoucher={!!voucher}>
+            <WinBidForm
+              userBid={userBid}
+              withdrawalAmount={withdrawalAmount}
+              setView={setView}
+              voucher={voucher}
+              setVoucher={setVoucher}
+            />
+          </WinBidFormWrapper>
+        </Wrapper>
+      )}
+      {voucher && (
+        <Wrapper>
+          <VoucherForm voucher={voucher} withdrawnBid={userBid.claimed} />
+        </Wrapper>
+      )}
+    </>
   )
 }
 
-const Wrapper = styled(FormWrapper)`
+const WinBidFormWrapper = styled(FormWrapper)<{ $hasVoucher?: boolean }>`
   justify-content: center;
+  width: ${(props) => (props.$hasVoucher ? '289px' : '431px')};
+`
+
+const Wrapper = styled.div`
+  padding: 0 35px;
 `