From 004671f032b36903531ce70f2b0a24ad8ca202ff Mon Sep 17 00:00:00 2001
From: ingawei <46611122+ingawei@users.noreply.github.com>
Date: Wed, 7 Sep 2022 23:51:52 -0500
Subject: [PATCH] Inga/challenge icon (#857)

* changed challenge icon to custom icon
* fixed tip button alignment
---
 .../contract/extra-contract-actions-row.tsx   |  5 ++---
 .../contract/like-market-button.tsx           |  6 +++---
 web/lib/icons/challenge-icon.tsx              | 19 +++++++++++++++++++
 3 files changed, 24 insertions(+), 6 deletions(-)
 create mode 100644 web/lib/icons/challenge-icon.tsx

diff --git a/web/components/contract/extra-contract-actions-row.tsx b/web/components/contract/extra-contract-actions-row.tsx
index d4918783..5d5ee4d8 100644
--- a/web/components/contract/extra-contract-actions-row.tsx
+++ b/web/components/contract/extra-contract-actions-row.tsx
@@ -14,6 +14,7 @@ import { Col } from 'web/components/layout/col'
 import { withTracking } from 'web/lib/service/analytics'
 import { CreateChallengeModal } from 'web/components/challenges/create-challenge-modal'
 import { CHALLENGES_ENABLED } from 'common/challenge'
+import ChallengeIcon from 'web/lib/icons/challenge-icon'
 
 export function ExtraContractActionsRow(props: { contract: Contract }) {
   const { contract } = props
@@ -61,9 +62,7 @@ export function ExtraContractActionsRow(props: { contract: Contract }) {
           )}
         >
           <Col className="items-center sm:flex-row">
-            <span className="h-[24px] w-5 sm:mr-2" aria-hidden="true">
-              ⚔️
-            </span>
+            <ChallengeIcon className="mx-auto h-[24px] w-5 text-gray-500 sm:mr-2" />
             <span>Challenge</span>
           </Col>
           <CreateChallengeModal
diff --git a/web/components/contract/like-market-button.tsx b/web/components/contract/like-market-button.tsx
index 6ea6996d..e35e3e7e 100644
--- a/web/components/contract/like-market-button.tsx
+++ b/web/components/contract/like-market-button.tsx
@@ -39,14 +39,14 @@ export function LikeMarketButton(props: {
   return (
     <Button
       size={'lg'}
-      className={'mb-1'}
+      className={'max-w-xs self-center'}
       color={'gray-white'}
       onClick={onLike}
     >
-      <Col className={'items-center sm:flex-row sm:gap-x-2'}>
+      <Col className={'items-center sm:flex-row'}>
         <HeartIcon
           className={clsx(
-            'h-6 w-6',
+            'h-[24px] w-5 sm:mr-2',
             user &&
               (userLikedContractIds?.includes(contract.id) ||
                 (!likes && contract.likedByUserIds?.includes(user.id)))
diff --git a/web/lib/icons/challenge-icon.tsx b/web/lib/icons/challenge-icon.tsx
new file mode 100644
index 00000000..6e5f3561
--- /dev/null
+++ b/web/lib/icons/challenge-icon.tsx
@@ -0,0 +1,19 @@
+export default function ChallengeIcon(props: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      className={props.className}
+      viewBox="0 0 24 24"
+    >
+      <g>
+        <polygon points="18.63 15.11 15.37 18.49 3.39 6.44 1.82 1.05 7.02 2.68 18.63 15.11" />
+        <polygon points="21.16 13.73 22.26 14.87 19.51 17.72 23 21.35 21.41 23 17.91 19.37 15.16 22.23 14.07 21.09 21.16 13.73" />
+      </g>
+      <g>
+        <polygon points="8.6 18.44 5.34 15.06 16.96 2.63 22.15 1 20.58 6.39 8.6 18.44" />
+        <polygon points="9.93 21.07 8.84 22.21 6.09 19.35 2.59 22.98 1 21.33 4.49 17.7 1.74 14.85 2.84 13.71 9.93 21.07" />
+      </g>
+    </svg>
+  )
+}