From 3634168a480651c570434039d4cd6b1617a68445 Mon Sep 17 00:00:00 2001
From: Ian Philips <iansphilips@gmail.com>
Date: Mon, 1 Aug 2022 11:16:26 -0600
Subject: [PATCH] Challenge card styling

---
 og-image/api/_lib/template.ts                 | 12 ++++----
 .../[contractSlug]/[challengeSlug].tsx        | 28 +++++++++++--------
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/og-image/api/_lib/template.ts b/og-image/api/_lib/template.ts
index 911cc001..f99689e0 100644
--- a/og-image/api/_lib/template.ts
+++ b/og-image/api/_lib/template.ts
@@ -94,7 +94,7 @@ export function getHtml(parsedReq: ParsedRequest) {
     challengeAmount,
     challengeOutcome,
   } = parsedReq
-  const MAX_QUESTION_CHARS = 100
+  const MAX_QUESTION_CHARS = challengeAmount ? 85 : 100
   const truncatedQuestion =
     question.length > MAX_QUESTION_CHARS
       ? question.slice(0, MAX_QUESTION_CHARS) + '...'
@@ -147,11 +147,11 @@ export function getHtml(parsedReq: ParsedRequest) {
       </div>
 
       <div class="flex flex-row justify-between gap-12 pt-36">
-        <div class="text-indigo-700 text-6xl leading-tight">
-        <span class="text-gray-900">
-          ${challengeAmount ? 'Bet against me on:' : ''}
-        </span>
-          ${truncatedQuestion}
+        <div class="flex flex-col text-gray-900 text-6xl">
+          ${challengeAmount ? '⚔️️' + ' Bet against me ' + '⚔️️' : ''}
+          <div class="text-indigo-700 leading-tight">
+            ${truncatedQuestion}
+          </div>
         </div>
         <div class="flex flex-col text-primary">
           <div class="text-8xl">${
diff --git a/web/pages/challenges/[username]/[contractSlug]/[challengeSlug].tsx b/web/pages/challenges/[username]/[contractSlug]/[challengeSlug].tsx
index acf8358c..2ee7c3ef 100644
--- a/web/pages/challenges/[username]/[contractSlug]/[challengeSlug].tsx
+++ b/web/pages/challenges/[username]/[contractSlug]/[challengeSlug].tsx
@@ -137,18 +137,22 @@ export default function ChallengePage(props: {
 }
 
 const userRow = (challenger: User) => (
-  <Row className={'mb-2 w-full items-center justify-center gap-2'}>
-    <Avatar
-      size={12}
-      avatarUrl={challenger.avatarUrl}
-      username={challenger.username}
-    />
-    <UserLink
-      className={'text-2xl'}
-      name={challenger.name}
-      username={challenger.username}
-    />
-  </Row>
+  <div className="flex flex-col text-gray-900">
+    ${'⚔️️' + ' Bet against me ' + '⚔️️'}
+    <div>{'Will there be a new doctrowho sad'}</div>
+  </div>
+  // <Row className={'mb-2 w-full items-center justify-center gap-2'}>
+  //   <Avatar
+  //     size={12}
+  //     avatarUrl={challenger.avatarUrl}
+  //     username={challenger.username}
+  //   />
+  //   <UserLink
+  //     className={'text-2xl'}
+  //     name={challenger.name}
+  //     username={challenger.username}
+  //   />
+  // </Row>
 )
 
 function ClosedChallengeContent(props: {