challenge button (WIP)

web/components/challenges/create-challenge-button.tsx

@@ -13,6 +13,7 @@ import { Contract } from 'common/contract'
 import { CopyLinkButton } from 'web/components/copy-link-button'
 import { SiteLink } from 'web/components/site-link'
 import { getOutcomeProbability } from 'common/calculate'
+import { createButtonStyle } from '../create-question-button'
 
 type challengeInfo = {
   amount: number
@@ -29,6 +30,9 @@ export function CreateChallengeButton(props: {
   const [open, setOpen] = useState(false)
   const [highlightedSlug, setHighlightedSlug] = useState('')
 
+  const gradient =
+    'from-indigo-500 to-red-500 hover:from-indigo-700 hover:to-red-700'
+
   return (
     <>
       <Modal open={open} setOpen={(newOpen) => setOpen(newOpen)}>
@@ -56,14 +60,16 @@ export function CreateChallengeButton(props: {
         </Col>
       </Modal>
 
-      <Button
-        color={'indigo'}
-        size={'lg'}
+      <button
         onClick={() => setOpen(true)}
-        className={clsx('whitespace-nowrap')}
+        className={clsx(
+          'border-w-0 h-11 rounded-md bg-gradient-to-r text-base font-semibold text-white shadow-sm',
+          gradient,
+          'max-w-xs justify-center px-2 mb-4'
+        )}
       >
-        Challenge
-      </Button>
+        ⚔️ Challenge a friend ⚔️
+      </button>
     </>
   )
 }

web/components/contract/contract-overview.tsx

@@ -119,15 +119,10 @@ export const ContractOverview = (props: {
       )}
       {outcomeType === 'NUMERIC' && <NumericGraph contract={contract} />}
       {(contract.description || isCreator) && <Spacer h={6} />}
-      {isCreator && <ShareMarket className="px-2" contract={contract} />}
       {showChallenge && (
-        <Row className={'ml-1 items-center'}>
-          <div>Challenge a friend</div>
-          <Row className={'mt-2 ml-1'}>
-            <CreateChallengeButton user={user} contract={contract} />
-          </Row>
-        </Row>
+        <CreateChallengeButton user={user} contract={contract} />
       )}
+      {isCreator && <ShareMarket className="px-2" contract={contract} />}
       <ContractDescription
         className="px-2"
         contract={contract}