Show category on market card (#197)

* Show category on market card

* Show multiple categories in contract description

* Tweak layout of contract card and show multiple categories

web/components/contract/contract-card.tsx

@@ -9,7 +9,6 @@ import {
   getBinaryProbPercent,
 } from 'web/lib/firebase/contracts'
 import { Col } from '../layout/col'
-import { Spacer } from '../layout/spacer'
 import {
   Binary,
   CPMM,
@@ -25,6 +24,8 @@ import {
 } from '../outcome-label'
 import { getOutcomeProbability, getTopAnswer } from 'common/calculate'
 import { AbbrContractDetails } from './contract-details'
+import { TagsList } from '../tags-list'
+import { CATEGORY_LIST } from 'common/categories'
 
 export function ContractCard(props: {
   contract: Contract
@@ -35,11 +36,16 @@ export function ContractCard(props: {
   const { contract, showHotVolume, showCloseTime, className } = props
   const { question, outcomeType, resolution } = contract
 
+  const { tags } = contract
+  const categories = tags.filter((tag) =>
+    CATEGORY_LIST.includes(tag.toLowerCase())
+  )
+
   return (
     <div>
-      <div
+      <Col
         className={clsx(
-          'relative rounded-lg bg-white p-6 shadow-md hover:bg-gray-100',
+          'relative gap-3 rounded-lg bg-white p-6 shadow-md hover:bg-gray-100',
           className
         )}
       >
@@ -52,26 +58,27 @@ export function ContractCard(props: {
           showHotVolume={showHotVolume}
           showCloseTime={showCloseTime}
         />
-        <Spacer h={3} />
 
-        <Row
-          className={clsx(
-            'justify-between gap-4',
-            outcomeType === 'FREE_RESPONSE' && 'flex-col items-start !gap-2'
-          )}
-        >
+        <Row className={clsx('justify-between gap-4')}>
+          <Col className="gap-3">
             <p
               className="break-words font-medium text-indigo-700"
               style={{ /* For iOS safari */ wordBreak: 'break-word' }}
             >
               {question}
             </p>
+            {outcomeType !== 'FREE_RESPONSE' && categories.length > 0 && (
+              <TagsList tags={categories} noLabel />
+            )}
+          </Col>
           {outcomeType === 'BINARY' && (
             <BinaryResolutionOrChance
               className="items-center"
               contract={contract}
             />
           )}
+        </Row>
+
         {outcomeType === 'FREE_RESPONSE' && (
           <FreeResponseResolutionOrChance
             className="self-end text-gray-600"
@@ -79,8 +86,11 @@ export function ContractCard(props: {
             truncate="long"
           />
         )}
-        </Row>
-      </div>
+
+        {outcomeType === 'FREE_RESPONSE' && categories.length > 0 && (
+          <TagsList tags={categories} noLabel />
+        )}
+      </Col>
     </div>
   )
 }

web/components/contract/contract-description.tsx

@@ -39,7 +39,9 @@ export function ContractDescription(props: {
   if (!isCreator && !contract.description.trim()) return null
 
   const { tags } = contract
-  const category = tags.find((tag) => CATEGORY_LIST.includes(tag.toLowerCase()))
+  const categories = tags.filter((tag) =>
+    CATEGORY_LIST.includes(tag.toLowerCase())
+  )
 
   return (
     <div
@@ -50,9 +52,9 @@ export function ContractDescription(props: {
     >
       <Linkify text={contract.description} />
 
-      {category && (
+      {categories.length > 0 && (
         <div className="mt-4">
-          <TagsList tags={[category]} label="Category" />
+          <TagsList tags={categories} label="Category" />
         </div>
       )}