changes

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/components/share-embed-button.tsx

@@ -12,7 +12,7 @@ import { track } from 'web/lib/service/analytics'
 export function embedContractCode(contract: Contract) {
   const title = contract.question
   const src = `https://${DOMAIN}/embed${contractPath(contract)}`
-  return `<iframe src="${src}" title="${title}" frameborder="0"></iframe>`
+  return `<iframe src="${src}" title="${title}"></iframe>`
 }
 
 export function embedContractGridCode(contracts: Contract[]) {

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

@@ -27,6 +27,10 @@ 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'
+import Image from 'next/future/image'
 
 export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz(props: {
@@ -74,65 +78,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>()
 
+  const user = useUser()
+  if (user && (isBinary || isPseudoNumeric)) {
     return (
-    <Col className="h-[100vh] w-full bg-white">
-      <Row className="justify-between gap-4 px-2">
-        <div className="text-xl text-indigo-700 md:text-2xl">
+      <Col className="border-greyscale-2 h-full w-full justify-between overflow-hidden rounded-lg border-2 bg-white p-4">
+        <Row className="mb-1 justify-between">
+          <MarketSubheader contract={contract} disabled />
+          <SiteLink href={href} className="mt-0">
+            <Image height={32} width={32} alt="Manifold logo" src="/logo.png" />
+          </SiteLink>
+        </Row>
+        <SiteLink href={href} className="text-md text-indigo-700 md:text-xl">
+          {question}
+        </SiteLink>
+        <Row>
+          <div className="min-h-150 mx-1 mb-2 h-full flex-1" ref={setElem}>
+            <ContractChart contract={contract} bets={bets} height={150} />
+          </div>
+          <QuickBet
+            user={user}
+            contract={contract}
+            noProbBar={true}
+            className="mx-auto -mr-5"
+          />
+        </Row>
+      </Col>
+    )
+  } else
+    return (
+      <Col className="border-greyscale-2 h-full w-full justify-between overflow-hidden rounded-lg border-2 bg-white p-4">
+        <Row className="mb-1 justify-between">
+          <MarketSubheader contract={contract} disabled />
+          <SiteLink href={href} className="mt-0">
+            <Image height={32} width={32} alt="Manifold logo" src="/logo.png" />
+          </SiteLink>
+        </Row>
+        <Row className="justify-between gap-4">
+          <Col>
+            <div className="text-md text-indigo-700 md:text-xl">
               <SiteLink href={href}>{question}</SiteLink>
             </div>
-        {isBinary && (
-          <BinaryResolutionOrChance contract={contract} probAfter={probAfter} />
+          </Col>
+          <Col>
+            {!user && isBinary && (
+              <BinaryResolutionOrChance
+                contract={contract}
+                probAfter={probAfter}
+              />
             )}
 
-        {isPseudoNumeric && (
+            {!user && isPseudoNumeric && (
               <PseudoNumericResolutionOrExpectation contract={contract} />
             )}
 
             {outcomeType === 'FREE_RESPONSE' && (
-          <FreeResponseResolutionOrChance contract={contract} truncate="long" />
+              <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>
-          )}
+          </Col>
         </Row>
-
-      <Spacer h={2} />
-
-      {(isBinary || isPseudoNumeric) && betPanelOpen && (
-        <BetInline
-          contract={contract as any}
-          setProbAfter={setProbAfter}
-          onClose={() => setBetPanelOpen(false)}
-          className="self-center"
-        />
-      )}
-
         <div className="mx-1 mb-2 min-h-0 flex-1" ref={setElem}>
-        <ContractChart contract={contract} bets={bets} height={graphHeight} />
+          <ContractChart contract={contract} bets={bets} height={150} />
         </div>
       </Col>
     )