added to redeem page (#2886)

manifoldmarkets · Sep 18, 2024 · 8861aeb · 8861aeb
1 parent b660113
commit 8861aeb
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 9 deletions.
diff --git a/web/components/twomba/us-only-disclaimer.tsx b/web/components/twomba/us-only-disclaimer.tsx
@@ -0,0 +1,19 @@
+import { LiaFlagUsaSolid } from 'react-icons/lia'
+import { Row } from '../layout/row'
+import { Tooltip } from '../widgets/tooltip'
+import clsx from 'clsx'
+
+export function UsOnlyDisclaimer(props: { className?: string }) {
+  const { className } = props
+  return (
+    <Tooltip
+      className={clsx(
+        'text-ink-900 flex select-none flex-row items-center gap-1 font-semibold ',
+        className
+      )}
+      text="Sweepstakes are limited to 18+ in all US states except WA, MI, ID, DE"
+    >
+      <LiaFlagUsaSolid className="text-ink-600 h-6 w-6" /> US only
+    </Tooltip>
+  )
+}
diff --git a/web/pages/gidx/register.tsx b/web/pages/gidx/register.tsx
@@ -8,6 +8,7 @@ import { Col } from 'web/components/layout/col'
 import { Tooltip } from 'web/components/widgets/tooltip'
 import { Row } from 'web/components/layout/row'
 import { LiaFlagUsaSolid } from 'react-icons/lia'
+import { UsOnlyDisclaimer } from 'web/components/twomba/us-only-disclaimer'
 
 const HomePage = () => {
   const user = useUser()
@@ -16,13 +17,8 @@ const HomePage = () => {
   return (
     <Page trackPageView={'register user gidx'}>
       <Col className="bg-canvas-0 relative mx-auto w-full max-w-lg gap-4 px-6 py-4">
-        <Row className="text-ink-600 w-full select-none  justify-end gap-1 rounded">
-          <Tooltip
-            className="flex flex-row items-center gap-1  "
-            text="Sweepstakes are limited to 18+ in all US states except WA, MI, ID, DE"
-          >
-            <LiaFlagUsaSolid className="h-6 w-6" /> US only
-          </Tooltip>
+        <Row className="w-full justify-end rounded">
+          <UsOnlyDisclaimer />
         </Row>
         {!user || !privateUser ? (
           <LoadingIndicator className="mx-auto my-auto h-80" />

diff --git a/web/pages/redeem.tsx b/web/pages/redeem.tsx
@@ -45,6 +45,7 @@ import {
   Divider,
   InputTitle,
 } from 'web/components/gidx/register-component-helpers'
+import { UsOnlyDisclaimer } from 'web/components/twomba/us-only-disclaimer'
 
 export type CashoutPagesType =
   | 'select-cashout-method'
@@ -241,6 +242,9 @@ const CashoutPage = () => {
     return (
       <Page trackPageView={'redeem sweeps page'}>
         <Col className="bg-canvas-0 mx-auto max-w-lg gap-4 px-6 py-4">
+          <Row className="w-full justify-end">
+            <UsOnlyDisclaimer />
+          </Row>
           {isLocationBlocked ? (
             <Row className="items-center gap-4">
               <LocationBlockedIcon height={16} className="fill-red-500" />
@@ -342,13 +346,16 @@ const CashoutPage = () => {
   return (
     <Page trackPageView={'redemptions page'}>
       <Col className="bg-canvas-0 mx-auto max-w-lg items-center gap-2 px-6 py-4">
-        <Row className="text-primary-600 w-full justify-start text-3xl">
+        <Row className="w-full justify-end">
+          <UsOnlyDisclaimer />
+        </Row>
+        <Row className="text-ink-1000 w-full justify-center text-3xl">
           Redeem {SWEEPIES_NAME}
         </Row>
         <SweepiesStats
           redeemableCash={redeemableCash}
           cashBalance={user.cashBalance}
-          className="mb-4"
+          className="my-4"
         />
         {!user || page === 'get-session' ? (
           <LoadingIndicator />