From fd49ccea39b94f4cbfa9aa80f4f03f52ed4b1f7a Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Sat, 21 May 2022 14:33:10 -0700
Subject: [PATCH] Use triangles instead of planes

---
 web/components/contract/contract-card.tsx | 16 ++++++++--------
 web/lib/icons/triangle-fill-icon.tsx      | 16 ++++++++++++++++
 web/lib/icons/triangle-icon.tsx           | 13 +++++++++++++
 3 files changed, 37 insertions(+), 8 deletions(-)
 create mode 100644 web/lib/icons/triangle-fill-icon.tsx
 create 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 43f009a0..8e85c5d3 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 { PaperAirplaneIcon } from '@heroicons/react/outline'
-import { PaperAirplaneIcon as SolidPlaneIcon } from '@heroicons/react/solid'
+import TriangleIcon from 'web/lib/icons/triangle-icon'
+import TriangleFillIcon from 'web/lib/icons/triangle-fill-icon'
 
 // Return a number from 0 to 1 for this contract
 // Resolved contracts are set to 1, for coloring purposes (even if NO)
@@ -128,11 +128,11 @@ export function ContractCard(props: {
 
           <Col className="gap-2">
             {contract.createdTime % 3 == 0 ? (
-              <SolidPlaneIcon
-                className={clsx('mx-auto h-6 w-6', `text-${color}`)}
+              <TriangleFillIcon
+                className={clsx('mx-auto h-5 w-5', `text-${color}`)}
               />
             ) : (
-              <PaperAirplaneIcon className="mx-auto h-6 w-6 text-gray-400" />
+              <TriangleFillIcon className="mx-auto h-5 w-5 text-gray-200" />
             )}
 
             {outcomeType === 'BINARY' && (
@@ -158,11 +158,11 @@ export function ContractCard(props: {
             )}
 
             {contract.createdTime % 3 == 2 ? (
-              <SolidPlaneIcon
-                className={clsx('mx-auto h-6 w-6 rotate-180', `text-${color}`)}
+              <TriangleFillIcon
+                className={clsx('mx-auto h-5 w-5 rotate-180', `text-${color}`)}
               />
             ) : (
-              <PaperAirplaneIcon className="mx-auto h-6 w-6 rotate-180 text-gray-400" />
+              <TriangleFillIcon className="mx-auto h-5 w-5 rotate-180 text-gray-200" />
             )}
           </Col>
         </Row>
diff --git a/web/lib/icons/triangle-fill-icon.tsx b/web/lib/icons/triangle-fill-icon.tsx
new file mode 100644
index 00000000..e24c005f
--- /dev/null
+++ b/web/lib/icons/triangle-fill-icon.tsx
@@ -0,0 +1,16 @@
+// Icon from Bootstrap: https://icons.getbootstrap.com/
+export default function TriangleFillIcon(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"
+        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
new file mode 100644
index 00000000..813808b7
--- /dev/null
+++ b/web/lib/icons/triangle-icon.tsx
@@ -0,0 +1,13 @@
+// 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>
+  )
+}