From 3d368216b2c6c76335bc6b4bf27225b2dd8d1b53 Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Sat, 21 May 2022 11:58:22 -0700
Subject: [PATCH] Play with using 3 icons for 1-click usage

---
 web/components/contract/contract-card.tsx | 28 +++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/web/components/contract/contract-card.tsx b/web/components/contract/contract-card.tsx
index cf910ef3..42585b25 100644
--- a/web/components/contract/contract-card.tsx
+++ b/web/components/contract/contract-card.tsx
@@ -27,6 +27,12 @@ import {
 import { getOutcomeProbability, getTopAnswer } from 'common/calculate'
 import { AbbrContractDetails } from './contract-details'
 import { getExpectedValue, getValueFromBucket } from 'common/calculate-dpm'
+import {
+  ArrowCircleUpIcon,
+  ArrowCircleDownIcon,
+  StarIcon,
+  PaperAirplaneIcon,
+} from '@heroicons/react/outline'
 
 // Return a number from 0 to 1 for this contract
 // Resolved contracts are set to 1, for coloring purposes (even if NO)
@@ -135,6 +141,28 @@ export function ContractCard(props: {
           />
         )}
 
+        {/* Show a row with 3 clickable icons: star, upvote, downvote */}
+        <div className="grid grid-cols-3">
+          <PaperAirplaneIcon
+            className={clsx(
+              'mx-auto h-5 w-5',
+              contract.createdTime % 3 == 0 ? 'text-primary' : 'text-gray-400'
+            )}
+          />
+          <StarIcon
+            className={clsx(
+              'mx-auto h-5 w-5',
+              contract.createdTime % 3 == 1 ? 'text-blue-400' : 'text-gray-400'
+            )}
+          />
+          <PaperAirplaneIcon
+            className={clsx(
+              'mx-auto h-5 w-5 rotate-180',
+              contract.createdTime % 3 == 2 ? 'text-red-400' : 'text-gray-400'
+            )}
+          />
+        </div>
+
         <div
           className={clsx(
             'absolute right-0 top-0 w-2 rounded-tr-md',