From 1cfbd86bd095444e6ae488efaea07e5895f46399 Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Sat, 21 May 2022 15:48:47 -0700
Subject: [PATCH] Fix down triangle & padding

---
 web/components/contract/contract-card.tsx | 47 ++++++++++++-----------
 web/lib/icons/triangle-down-fill-icon.tsx | 17 ++++++++
 web/lib/icons/triangle-icon.tsx           | 13 -------
 3 files changed, 41 insertions(+), 36 deletions(-)
 create mode 100644 web/lib/icons/triangle-down-fill-icon.tsx
 delete mode 100644 web/lib/icons/triangle-icon.tsx

diff --git a/web/components/contract/contract-card.tsx b/web/components/contract/contract-card.tsx
index aab63ab0..bb19aad4 100644
--- a/web/components/contract/contract-card.tsx
+++ b/web/components/contract/contract-card.tsx
@@ -27,8 +27,8 @@ import {
 import { getOutcomeProbability, getTopAnswer } from 'common/calculate'
 import { AvatarDetails, MiscDetails } from './contract-details'
 import { getExpectedValue, getValueFromBucket } from 'common/calculate-dpm'
-import TriangleIcon from 'web/lib/icons/triangle-icon'
 import TriangleFillIcon from 'web/lib/icons/triangle-fill-icon'
+import TriangleDownFillIcon from 'web/lib/icons/triangle-down-fill-icon'
 
 // Return a number from 0 to 1 for this contract
 // Resolved contracts are set to 1, for coloring purposes (even if NO)
@@ -94,7 +94,7 @@ export function ContractCard(props: {
     <div>
       <Col
         className={clsx(
-          'relative gap-3 rounded-lg bg-white py-4 pl-6 pr-7 shadow-md hover:cursor-pointer hover:bg-gray-100',
+          'relative gap-3 rounded-lg bg-white py-4 pl-6 pr-7 shadow-md hover:bg-gray-100',
           className
         )}
       >
@@ -126,22 +126,24 @@ export function ContractCard(props: {
           </Col>
 
           <Col className="relative -my-4 justify-center gap-2">
-            <div
-              className="peer absolute top-0 -left-4 -right-7 h-[50%]"
-              onClick={(e) => {
-                // console.log('e', e)
-              }}
-            ></div>
-            {contract.createdTime % 3 == 0 ? (
-              <TriangleFillIcon
-                className={clsx(
-                  'mx-auto h-5 w-5 peer-hover:text-opacity-60',
-                  `text-${color}`
-                )}
-              />
-            ) : (
-              <TriangleFillIcon className="mx-auto h-5 w-5 text-gray-200 peer-hover:text-gray-400" />
-            )}
+            <div className="mt-4">
+              <div
+                className="peer absolute top-0 -left-4 -right-7 h-[50%]"
+                onClick={(e) => {
+                  // console.log('e', e)
+                }}
+              ></div>
+              {contract.createdTime % 3 == 0 ? (
+                <TriangleFillIcon
+                  className={clsx(
+                    'mx-auto h-5 w-5 peer-hover:text-opacity-60',
+                    `text-${color}`
+                  )}
+                />
+              ) : (
+                <TriangleFillIcon className="mx-auto h-5 w-5 text-gray-200 peer-hover:text-gray-400" />
+              )}
+            </div>
 
             {outcomeType === 'BINARY' && (
               <BinaryResolutionOrChance
@@ -165,23 +167,22 @@ export function ContractCard(props: {
               />
             )}
 
-            <div>
+            <div className="mb-4">
               <div
                 className="peer absolute bottom-0 -left-4 -right-7 h-[50%]"
                 onClick={(e) => {
                   // console.log('e2', e)
                 }}
               ></div>
-              {/* Note: Something about rotate-180 screws with the hitbox. Rotate the SVG instead. */}
               {contract.createdTime % 3 == 2 ? (
-                <TriangleFillIcon
+                <TriangleDownFillIcon
                   className={clsx(
-                    'mx-auto h-5 w-5 rotate-180 peer-hover:text-opacity-60',
+                    'mx-auto h-5 w-5 peer-hover:text-opacity-60',
                     `text-${color}`
                   )}
                 />
               ) : (
-                <TriangleFillIcon className="mx-auto h-5 w-5 rotate-180 text-gray-200 peer-hover:text-gray-400" />
+                <TriangleDownFillIcon className="mx-auto h-5 w-5 text-gray-200 peer-hover:text-gray-400" />
               )}
             </div>
           </Col>
diff --git a/web/lib/icons/triangle-down-fill-icon.tsx b/web/lib/icons/triangle-down-fill-icon.tsx
new file mode 100644
index 00000000..28ed5ba6
--- /dev/null
+++ b/web/lib/icons/triangle-down-fill-icon.tsx
@@ -0,0 +1,17 @@
+// Icon from Bootstrap: https://icons.getbootstrap.com/
+export default function TriangleDownFillIcon(props: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      className={props.className}
+      viewBox="0 0 16 16"
+    >
+      <path
+        fill-rule="evenodd"
+        transform="rotate(-180 8 8)"
+        d="M7.022 1.566a1.13 1.13 0 0 1 1.96 0l6.857 11.667c.457.778-.092 1.767-.98 1.767H1.144c-.889 0-1.437-.99-.98-1.767L7.022 1.566z"
+      />
+    </svg>
+  )
+}
diff --git a/web/lib/icons/triangle-icon.tsx b/web/lib/icons/triangle-icon.tsx
deleted file mode 100644
index 813808b7..00000000
--- a/web/lib/icons/triangle-icon.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-// Icon from Bootstrap: https://icons.getbootstrap.com/
-export default function TriangleIcon(props: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="currentColor"
-      className={props.className}
-      viewBox="0 0 16 16"
-    >
-      <path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z" />
-    </svg>
-  )
-}