From 362c8391d92677afc8d890017d563b6122a454c1 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Tue, 8 Nov 2022 20:54:54 +0800
Subject: [PATCH] [questions][feat] tweak card UI

---
 .../questions/AddToListDropdown.tsx           |  2 +-
 .../questions/QuestionAggregateBadge.tsx      | 23 +++--
 .../components/questions/VotingButtons.tsx    | 56 +++++++-----
 .../card/question/BaseQuestionCard.tsx        | 90 +++++++++----------
 apps/portal/src/pages/questions/browse.tsx    |  2 +-
 5 files changed, 89 insertions(+), 84 deletions(-)

diff --git a/apps/portal/src/components/questions/AddToListDropdown.tsx b/apps/portal/src/components/questions/AddToListDropdown.tsx
index 039edd7e..d238bd6e 100644
--- a/apps/portal/src/components/questions/AddToListDropdown.tsx
+++ b/apps/portal/src/components/questions/AddToListDropdown.tsx
@@ -106,7 +106,7 @@ export default function AddToListDropdown({
 
   const CustomMenuButton = ({ children }: PropsWithChildren<unknown>) => (
     <button
-      className="focus:ring-primary-500 inline-flex w-full justify-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-100"
+      className="focus:ring-primary-500 inline-flex w-full items-center justify-center rounded-md border border-slate-300 bg-white px-2.5 py-1.5 text-xs font-medium text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-100"
       type="button"
       onClick={handleMenuButtonClick}>
       {children}
diff --git a/apps/portal/src/components/questions/QuestionAggregateBadge.tsx b/apps/portal/src/components/questions/QuestionAggregateBadge.tsx
index 9bb4bc00..fb1668d7 100644
--- a/apps/portal/src/components/questions/QuestionAggregateBadge.tsx
+++ b/apps/portal/src/components/questions/QuestionAggregateBadge.tsx
@@ -1,19 +1,16 @@
-import type { ComponentProps } from 'react';
 import { useMemo } from 'react';
 import { usePopperTooltip } from 'react-popper-tooltip';
-import { Badge } from '@tih/ui';
 
 import 'react-popper-tooltip/dist/styles.css';
 
-type BadgeProps = ComponentProps<typeof Badge>;
-
-export type QuestionAggregateBadgeProps = Omit<BadgeProps, 'label'> & {
+export type QuestionAggregateBadgeProps = Readonly<{
+  icon: (props: React.ComponentProps<'svg'>) => JSX.Element;
   statistics: Record<string, number>;
-};
+}>;
 
 export default function QuestionAggregateBadge({
+  icon: Icon,
   statistics,
-  ...badgeProps
 }: QuestionAggregateBadgeProps) {
   const { getTooltipProps, setTooltipRef, setTriggerRef, visible } =
     usePopperTooltip({
@@ -56,8 +53,16 @@ export default function QuestionAggregateBadge({
 
   return (
     <>
-      <button ref={setTriggerRef} className="rounded-full" type="button">
-        <Badge label={label} {...badgeProps} />
+      <button
+        ref={setTriggerRef}
+        className="-my-1 flex items-center rounded-md px-2
+                  py-1 text-xs font-medium text-slate-500 hover:bg-slate-100 hover:text-slate-600"
+        type="button">
+        <Icon
+          aria-hidden={true}
+          className="mr-1.5 h-5 w-5 flex-shrink-0 text-slate-400"
+        />
+        {label}
       </button>
       {visible && (
         <div ref={setTooltipRef} {...getTooltipProps()} className="z-10">
diff --git a/apps/portal/src/components/questions/VotingButtons.tsx b/apps/portal/src/components/questions/VotingButtons.tsx
index 28824715..62d4ebcf 100644
--- a/apps/portal/src/components/questions/VotingButtons.tsx
+++ b/apps/portal/src/components/questions/VotingButtons.tsx
@@ -1,8 +1,7 @@
+import clsx from 'clsx';
 import React from 'react';
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
 import type { Vote } from '@prisma/client';
-import type { ButtonSize } from '@tih/ui';
-import { Button } from '@tih/ui';
 
 import { useProtectedCallback } from '~/utils/questions/useProtectedCallback';
 
@@ -18,7 +17,7 @@ export type VotingButtonsCallbackProps = {
 };
 
 export type VotingButtonsProps = VotingButtonsCallbackProps & {
-  size?: ButtonSize;
+  size?: 'md' | 'sm';
   upvoteCount: number;
 };
 
@@ -29,11 +28,6 @@ export default function VotingButtons({
   upvoteCount,
   size = 'md',
 }: VotingButtonsProps) {
-  const upvoteButtonVariant =
-    vote?.vote === 'UPVOTE' ? 'secondary' : 'tertiary';
-  const downvoteButtonVariant =
-    vote?.vote === 'DOWNVOTE' ? 'secondary' : 'tertiary';
-
   const handleUpvoteClick = useProtectedCallback(() => {
     onUpvote();
   });
@@ -44,31 +38,45 @@ export default function VotingButtons({
 
   return (
     <div className="flex flex-col items-center">
-      <Button
-        icon={ChevronUpIcon}
-        isLabelHidden={true}
-        label="Upvote"
-        size={size}
-        variant={upvoteButtonVariant}
+      <button
+        aria-label="Upvote"
+        className="rounded-full p-1 hover:bg-slate-100"
+        type="button"
         onClick={(event) => {
           event.preventDefault();
           event.stopPropagation();
           handleUpvoteClick();
-        }}
-      />
+        }}>
+        <ChevronUpIcon
+          className={clsx(
+            size === 'sm' && 'h-5 w-5',
+            size === 'md' && 'h-8 w-8',
+            vote?.vote === 'UPVOTE'
+              ? 'text-primary-500'
+              : 'hover:text-primary-500 text-slate-400',
+          )}
+        />
+      </button>
       <p>{upvoteCount}</p>
-      <Button
-        icon={ChevronDownIcon}
-        isLabelHidden={true}
-        label="Downvote"
-        size={size}
-        variant={downvoteButtonVariant}
+      <button
+        aria-label="Downvote"
+        className="rounded-full p-1 hover:bg-slate-100"
+        type="button"
         onClick={(event) => {
           event.preventDefault();
           event.stopPropagation();
           handleDownvoteClick();
-        }}
-      />
+        }}>
+        <ChevronDownIcon
+          className={clsx(
+            size === 'sm' && 'h-5 w-5',
+            size === 'md' && 'h-8 w-8',
+            vote?.vote === 'DOWNVOTE'
+              ? 'text-danger-500'
+              : 'hover:text-danger-500 text-slate-400',
+          )}
+        />
+      </button>
     </div>
   );
 }
diff --git a/apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx b/apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx
index 2e7eff53..d3a01231 100644
--- a/apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx
+++ b/apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx
@@ -1,5 +1,10 @@
 import clsx from 'clsx';
 import { useMemo, useState } from 'react';
+import {
+  BuildingOfficeIcon,
+  MapPinIcon,
+  UserCircleIcon,
+} from '@heroicons/react/20/solid';
 import {
   ChatBubbleBottomCenterTextIcon,
   CheckIcon,
@@ -198,21 +203,24 @@ export default function BaseQuestionCard({
           </div>
         </>
       )}
-      <div className="flex flex-1 flex-col items-start gap-2">
-        <div className="flex items-baseline justify-between self-stretch">
-          <div className="flex flex-wrap items-center gap-2 text-slate-500">
+      <div className="flex flex-1 flex-col items-start gap-4">
+        <div className="flex items-center justify-between self-stretch">
+          <div className="flex flex-wrap items-center gap-3 text-slate-500">
             {showAggregateStatistics && (
               <>
                 <QuestionTypeBadge type={type} />
                 <QuestionAggregateBadge
+                  icon={BuildingOfficeIcon}
                   statistics={companies}
-                  variant="primary"
                 />
                 <QuestionAggregateBadge
+                  icon={MapPinIcon}
                   statistics={locations!}
-                  variant="success"
                 />
-                <QuestionAggregateBadge statistics={roles} variant="danger" />
+                <QuestionAggregateBadge
+                  icon={UserCircleIcon}
+                  statistics={roles}
+                />
               </>
             )}
             {timestamp !== null && (
@@ -240,59 +248,43 @@ export default function BaseQuestionCard({
         </div>
         <p
           className={clsx(
-            'whitespace-pre-line font-semibold',
+            'whitespace-pre-line text-base font-medium leading-6 text-slate-900 md:text-lg',
             truncateContent && 'line-clamp-2 text-ellipsis',
           )}>
           {content}
         </p>
+
         {!showReceivedForm &&
           (showAnswerStatistics ||
             showReceivedStatistics ||
             showCreateEncounterButton) && (
-            <div className="flex gap-2">
+            <div className="flex w-full gap-4">
               {showAnswerStatistics && (
-                <>
-                  <div className="sm:hidden">
-                    <Button
-                      addonPosition="start"
-                      icon={ChatBubbleBottomCenterTextIcon}
-                      label={`${answerCount}`}
-                      size="sm"
-                      variant="tertiary"
+                <div>
+                  <button
+                    className="-my-1 flex items-center rounded-md px-2
+                  py-1 text-xs font-medium
+                  text-slate-500 hover:bg-slate-100 hover:text-slate-600"
+                    type="button">
+                    <ChatBubbleBottomCenterTextIcon
+                      aria-hidden={true}
+                      className="mr-2 h-5 w-5"
                     />
-                  </div>
-                  <div className="hidden sm:block">
-                    <Button
-                      addonPosition="start"
-                      icon={ChatBubbleBottomCenterTextIcon}
-                      label={`${answerCount} answers`}
-                      size="sm"
-                      variant="tertiary"
-                    />
-                  </div>
-                </>
+                    {answerCount} {answerCount === 1 ? 'answer' : 'answers'}
+                  </button>
+                </div>
               )}
               {showReceivedStatistics && (
-                <>
-                  <div className="sm:hidden">
-                    <Button
-                      addonPosition="start"
-                      icon={EyeIcon}
-                      label={`${receivedCount}`}
-                      size="sm"
-                      variant="tertiary"
-                    />
-                  </div>
-                  <div className="hidden sm:block">
-                    <Button
-                      addonPosition="start"
-                      icon={EyeIcon}
-                      label={`${receivedCount} received this`}
-                      size="sm"
-                      variant="tertiary"
-                    />
-                  </div>
-                </>
+                <div>
+                  <button
+                    className="-my-1 flex items-center rounded-md px-2
+                  py-1 text-xs font-medium
+                  text-slate-500 hover:bg-slate-100 hover:text-slate-600"
+                    type="button">
+                    <EyeIcon aria-hidden={true} className="mr-2 h-5 w-5" />
+                    {receivedCount} received this
+                  </button>
+                </div>
               )}
               {showCreateEncounterButton && (
                 <Button
@@ -324,8 +316,8 @@ export default function BaseQuestionCard({
     <article
       className={clsx(
         'group flex gap-4 border-slate-300',
-        showHover && 'transition hover:bg-slate-50',
-        !hideCard && 'rounded-md border bg-white p-4',
+        showHover && 'hover:border-primary-500 transition',
+        !hideCard && 'rounded-md border bg-white p-4 sm:rounded-lg sm:p-6',
       )}>
       {cardContent}
       {showDeleteButton && (
diff --git a/apps/portal/src/pages/questions/browse.tsx b/apps/portal/src/pages/questions/browse.tsx
index 9cf9f6ab..9e6ee710 100644
--- a/apps/portal/src/pages/questions/browse.tsx
+++ b/apps/portal/src/pages/questions/browse.tsx
@@ -541,7 +541,7 @@ export default function QuestionsBrowsePage() {
                     onSortTypeChange={setSortType}
                   />
                 </div>
-                <div className="flex flex-col gap-2 pb-4">
+                <div className="flex flex-col gap-4 pb-4">
                   {(questionsQueryData?.pages ?? []).flatMap(
                     ({ data: questions }) =>
                       questions.map((question) => {