made pretty, but not functional and need to figure out how to get embed to fit

web/components/answers/answer-item.tsx

@@ -92,7 +92,7 @@ export function AnswerItem(props: {
             <div
               className={clsx(
                 'text-2xl',
-                tradingAllowed(contract) ? 'text-green-500' : 'text-gray-500'
+                tradingAllowed(contract) ? 'text-teal-500' : 'text-gray-500'
               )}
             >
               {probPercent}

web/components/contract/quick-bet.tsx

@@ -42,8 +42,9 @@ export function QuickBet(props: {
   contract: BinaryContract | PseudoNumericContract
   user: User
   className?: string
+  noProbBar?: boolean
 }) {
-  const { contract, user, className } = props
+  const { contract, user, className, noProbBar } = props
   const { mechanism, outcomeType } = contract
   const isCpmm = mechanism === 'cpmm-1'
 
@@ -162,20 +163,24 @@ export function QuickBet(props: {
           <TriangleFillIcon
             className={clsx(
               'mx-auto h-5 w-5',
-              upHover ? 'text-green-500' : 'text-gray-400'
+              upHover ? 'text-teal-500' : 'text-gray-400'
             )}
           />
         ) : (
           <TriangleFillIcon
             className={clsx(
               'mx-auto h-5 w-5',
-              upHover ? 'text-green-500' : 'text-gray-200'
+              upHover ? 'text-teal-500' : 'text-gray-200'
             )}
           />
         )}
       </div>
 
-      <QuickOutcomeView contract={contract} previewProb={previewProb} />
+      <QuickOutcomeView
+        contract={contract}
+        previewProb={previewProb}
+        noProbBar={noProbBar}
+      />
 
       {/* Down bet triangle */}
       {outcomeType !== 'BINARY' && outcomeType !== 'PSEUDO_NUMERIC' ? (
@@ -266,8 +271,9 @@ function QuickOutcomeView(props: {
   contract: Contract
   previewProb?: number
   caption?: 'chance' | 'expected'
+  noProbBar?: boolean
 }) {
-  const { contract, previewProb, caption } = props
+  const { contract, previewProb, caption, noProbBar } = props
   const { outcomeType } = contract
   const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC'
 
@@ -305,7 +311,7 @@ function QuickOutcomeView(props: {
     <Col className={clsx('items-center text-3xl', textColor)}>
       {override ?? display}
       {caption && <div className="text-base">{caption}</div>}
-      <ProbBar contract={contract} previewProb={previewProb} />
+      {!noProbBar && <ProbBar contract={contract} previewProb={previewProb} />}
     </Col>
   )
 }

web/pages/embed/[username]/[contractSlug].tsx

@@ -27,6 +27,9 @@ import {
   tradingAllowed,
 } from 'web/lib/firebase/contracts'
 import Custom404 from '../../404'
+import { useUser } from 'web/hooks/use-user'
+import { QuickBet } from 'web/components/contract/quick-bet'
+import { contractMetrics } from 'common/contract-details'
 
 export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz(props: {
@@ -74,66 +77,86 @@ export function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
     creatorId: contract.creatorId,
   })
 
+  const { creatorName, creatorUsername, creatorId, creatorAvatarUrl } = contract
+  const { resolvedDate } = contractMetrics(contract)
   const isBinary = outcomeType === 'BINARY'
   const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC'
 
   const href = `https://${DOMAIN}${contractPath(contract)}`
 
-  const { setElem, height: graphHeight } = useMeasureSize()
+  const { setElem, width: graphWidth, height: graphHeight } = useMeasureSize()
 
   const [betPanelOpen, setBetPanelOpen] = useState(false)
 
   const [probAfter, setProbAfter] = useState<number>()
 
-  return (
-    <Col className="border-greyscale-2 bg-greyscale-1 h-[100vh] w-full rounded-lg border-2 p-4">
-      <Row className="justify-between gap-4 px-2">
-        <div className="text-md text-lg text-indigo-700 md:text-xl">
-          <SiteLink href={href}>{question}</SiteLink>
-        </div>
-        {isBinary && (
-          <BinaryResolutionOrChance contract={contract} probAfter={probAfter} />
-        )}
-
-        {isPseudoNumeric && (
-          <PseudoNumericResolutionOrExpectation contract={contract} />
-        )}
-
-        {outcomeType === 'FREE_RESPONSE' && (
-          <FreeResponseResolutionOrChance contract={contract} truncate="long" />
-        )}
-
-        {outcomeType === 'NUMERIC' && (
-          <NumericResolutionOrExpectation contract={contract} />
-        )}
-      </Row>
-      <Spacer h={3} />
-      <Row className="items-center justify-between gap-4 px-2">
-        <MarketSubheader contract={contract} disabled />
-
-        {(isBinary || isPseudoNumeric) &&
-          tradingAllowed(contract) &&
-          !betPanelOpen && (
-            <Button color="gradient" onClick={() => setBetPanelOpen(true)}>
-              Predict
-            </Button>
-          )}
-      </Row>
-
-      <Spacer h={2} />
-
-      {(isBinary || isPseudoNumeric) && betPanelOpen && (
-        <BetInline
-          contract={contract as any}
-          setProbAfter={setProbAfter}
-          onClose={() => setBetPanelOpen(false)}
-          className="self-center"
+  const user = useUser()
+  if (user && (isBinary || isPseudoNumeric)) {
+    return (
+      <Row className="border-greyscale-2 bg-greyscale-1 h-full w-full justify-between overflow-hidden rounded-lg border-2 p-4">
+        <Col className="w-5/6">
+          <Col>
+            <div className="text-md text-indigo-700 md:text-xl">
+              <SiteLink href={href}>{question}</SiteLink>
+            </div>
+            <Row className="gap-4">
+              <div className="text-greyscale-4 text-xs">@{creatorUsername}</div>
+              <div className="text-greyscale-6 text-xs">{creatorUsername}</div>
+            </Row>
+          </Col>
+          <div className="mx-1 mb-2 min-h-0 flex-1" ref={setElem}>
+            <ContractChart contract={contract} bets={bets} height={150} />
+          </div>
+        </Col>
+        <QuickBet
+          user={user}
+          contract={contract}
+          noProbBar={true}
+          className="-mr-5"
         />
-      )}
+      </Row>
+    )
+  } else
+    return (
+      <Col className="border-greyscale-2 bg-greyscale-1 h-full w-full justify-between overflow-hidden rounded-lg border-2 p-4">
+        <Row className="justify-between gap-4">
+          <Col>
+            <div className="text-md text-lg text-indigo-700 md:text-xl">
+              <SiteLink href={href}>{question}</SiteLink>
+            </div>
+            {/* <MarketSubheader contract={contract} disabled /> */}
+            <Row>
+              <div className="text-greyscale-4 text-xs">@{creatorUsername}</div>
+              <div className="text-greyscale-4 text-xs">@{creatorUsername}</div>
+            </Row>
+          </Col>
+          <Col>
+            {!user && isBinary && (
+              <BinaryResolutionOrChance
+                contract={contract}
+                probAfter={probAfter}
+              />
+            )}
 
-      <div className="mx-1 mb-2 min-h-0 flex-1" ref={setElem}>
-        <ContractChart contract={contract} bets={bets} height={graphHeight} />
-      </div>
-    </Col>
-  )
+            {!user && isPseudoNumeric && (
+              <PseudoNumericResolutionOrExpectation contract={contract} />
+            )}
+
+            {outcomeType === 'FREE_RESPONSE' && (
+              <FreeResponseResolutionOrChance
+                contract={contract}
+                truncate="long"
+              />
+            )}
+            {outcomeType === 'NUMERIC' && (
+              <NumericResolutionOrExpectation contract={contract} />
+            )}
+            <Spacer h={3} />
+          </Col>
+        </Row>
+        <div className="mx-1 mb-2 min-h-0 flex-1" ref={setElem}>
+          <ContractChart contract={contract} bets={bets} height={150} />
+        </div>
+      </Col>
+    )
 }