challenge button styling

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

@@ -63,12 +63,13 @@ export function CreateChallengeButton(props: {
       <button
         onClick={() => setOpen(true)}
         className={clsx(
-          'border-w-0 h-11 rounded-md bg-gradient-to-r text-base font-semibold text-white shadow-sm',
+          // 'border-w-0 h-11 rounded-md bg-gradient-to-r text-base font-semibold text-white shadow-sm',
-          gradient,
+          // gradient,
-          'max-w-xs justify-center px-2 mb-4'
+          'btn btn-outline',
+          'mb-4 max-w-xs'
         )}
       >
-        ⚔️ Challenge a friend ⚔️
+        Challenge ️
       </button>
     </>
   )

web/components/contract/contract-overview.tsx

@@ -19,7 +19,7 @@ import { AnswersGraph } from '../answers/answers-graph'
 import { Contract, CPMMBinaryContract } from 'common/contract'
 import { ContractDescription } from './contract-description'
 import { ContractDetails } from './contract-details'
-import { ShareMarket } from '../share-market'
+import { ShareMarketButton } from '../share-market-button'
 import { NumericGraph } from './numeric-graph'
 import { CreateChallengeButton } from 'web/components/challenges/create-challenge-button'
 import React from 'react'
@@ -118,16 +118,26 @@ export const ContractOverview = (props: {
         <AnswersGraph contract={contract} bets={bets} />
       )}
       {outcomeType === 'NUMERIC' && <NumericGraph contract={contract} />}
-      {(contract.description || isCreator) && <Spacer h={6} />}
+      {/* {(contract.description || isCreator) && <Spacer h={6} />} */}
-      {showChallenge && (
-        <CreateChallengeButton user={user} contract={contract} />
-      )}
-      {isCreator && <ShareMarket className="px-2" contract={contract} />}
       <ContractDescription
         className="px-2"
         contract={contract}
         isCreator={isCreator}
       />
+      <Col className="mx-4 mt-4 justify-around sm:flex-row">
+        {showChallenge && (
+          <Col className="gap-3">
+            <div className="text-lg">⚔️ Challenge a friend ⚔️</div>
+            <CreateChallengeButton user={user} contract={contract} />
+          </Col>
+        )}
+        {isCreator && (
+          <Col className="gap-3">
+            <div className="text-lg">Share your market</div>
+            <ShareMarketButton contract={contract} />
+          </Col>
+        )}
+      </Col>
     </Col>
   )
 }

web/components/share-market-button.tsx

@@ -0,0 +1,18 @@
+import { ENV_CONFIG } from 'common/envs/constants'
+import { Contract, contractPath, contractUrl } from 'web/lib/firebase/contracts'
+import { CopyLinkButton } from './copy-link-button'
+
+export function ShareMarketButton(props: { contract: Contract }) {
+  const { contract } = props
+
+  const url = `https://${ENV_CONFIG.domain}${contractPath(contract)}`
+
+  return (
+    <CopyLinkButton
+      url={url}
+      displayUrl={contractUrl(contract)}
+      buttonClassName="btn-md rounded-l-none"
+      toastClassName={'-left-28 mt-1'}
+    />
+  )
+}

web/components/share-market.tsx

@@ -1,26 +0,0 @@
-import clsx from 'clsx'
-import { ENV_CONFIG } from 'common/envs/constants'
-import { Contract, contractPath, contractUrl } from 'web/lib/firebase/contracts'
-import { CopyLinkButton } from './copy-link-button'
-import { Col } from './layout/col'
-import { Row } from './layout/row'
-
-export function ShareMarket(props: { contract: Contract; className?: string }) {
-  const { contract, className } = props
-
-  const url = `https://${ENV_CONFIG.domain}${contractPath(contract)}`
-
-  return (
-    <Col className={clsx(className, 'gap-3')}>
-      <div>Share your market</div>
-      <Row className="mb-6 items-center">
-        <CopyLinkButton
-          url={url}
-          displayUrl={contractUrl(contract)}
-          buttonClassName="btn-md rounded-l-none"
-          toastClassName={'-left-28 mt-1'}
-        />
-      </Row>
-    </Col>
-  )
-}