From 3b3664faecd910c1873779a9a9589d60e1ddb295 Mon Sep 17 00:00:00 2001
From: Corantin <corantin.noll@gmail.com>
Date: Thu, 17 Oct 2024 23:45:09 -0400
Subject: [PATCH] :art: Refactor button and dispute components

- Defaulted className and tooltipClassName to empty string in Button component
- Added duplicate condition check for cooldown in DisputeButton
- Changed some method from 'some' to 'find' for better performance
- Adjusted tooltip message source and added tooltipSide property
- Updated ProposalTimeline with dynamic ruling timeout display
- Fixed styling issues across multiple components
---
 apps/web/components/Button.tsx           |  7 +++----
 apps/web/components/DisputeButton.tsx    | 22 ++++++++++++++--------
 apps/web/components/ProposalTimeline.tsx | 14 ++++++++++----
 3 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/apps/web/components/Button.tsx b/apps/web/components/Button.tsx
index bb27cbc54..caf64f86c 100644
--- a/apps/web/components/Button.tsx
+++ b/apps/web/components/Button.tsx
@@ -70,11 +70,11 @@ const btnStyles: BtnStyles = {
 
 export function Button({
   onClick,
-  className: styles,
+  className: styles = "",
   disabled = false,
   tooltip,
   showToolTip = true,
-  tooltipClassName: tooltipStyles,
+  tooltipClassName: tooltipStyles = "",
   tooltipSide = "tooltip-top",
   children,
   btnStyle = "filled",
@@ -86,8 +86,7 @@ export function Button({
   const buttonElement = (
     <button
       type={type}
-      className={`${btnStyles[btnStyle][disabled ? "disabled" : color]}
-      flex relative cursor-pointer  justify-center rounded-lg px-6 py-4 transition-all ease-out disabled:cursor-not-allowed h-fit ${styles}`}
+      className={`${btnStyles[btnStyle][disabled ? "disabled" : color]} flex relative cursor-pointer  justify-center rounded-lg px-6 py-4 transition-all ease-out disabled:cursor-not-allowed h-fit ${styles}`}
       onClick={onClick}
       disabled={disabled || isLoading}
     >
diff --git a/apps/web/components/DisputeButton.tsx b/apps/web/components/DisputeButton.tsx
index 3773197ea..d2001c5ac 100644
--- a/apps/web/components/DisputeButton.tsx
+++ b/apps/web/components/DisputeButton.tsx
@@ -258,6 +258,10 @@ export const DisputeButton: FC<Props> = ({ proposalData }) => {
         condition: isCooldown,
         message: "Please wait 2 hours before submitting another dispute",
       },
+      {
+        condition: isCooldown,
+        message: "Please wait 2 hours before submitting another dispute",
+      },
     ],
     [isEnoughBalance, isCooldown],
   );
@@ -270,7 +274,7 @@ export const DisputeButton: FC<Props> = ({ proposalData }) => {
   );
 
   const content = (
-    <div className="flex md:flex-col gap-10 flex-wrap">
+    <div className="flex md:flex-col gap-10 flex-wrap w-[600px]">
       {proposalStatus !== "active" ?
         <div className="p-16 rounded-lg">
           {disputes.map((dispute) => (
@@ -310,7 +314,7 @@ export const DisputeButton: FC<Props> = ({ proposalData }) => {
     },
   ];
 
-  const disableTribunalSafeButtons = disableTribunalSafeBtnCondition.some(
+  const disableTribunalSafeButtons = disableTribunalSafeBtnCondition.find(
     (cond) => cond.condition,
   );
 
@@ -328,7 +332,8 @@ export const DisputeButton: FC<Props> = ({ proposalData }) => {
                 btnStyle="outline"
                 onClick={() => handleSubmitRuling(ABSTAINED_RULING)}
                 isLoading={rulingLoading === ABSTAINED_RULING}
-                disabled={disableTribunalSafeButtons}
+                disabled={!!disableTribunalSafeButtons}
+                tooltip={disableTribunalSafeButtons?.message}
               >
                 <InfoWrapper
                   className={"[&>svg]:text-secondary-content"}
@@ -346,8 +351,8 @@ export const DisputeButton: FC<Props> = ({ proposalData }) => {
                     btnStyle="outline"
                     onClick={() => handleSubmitRuling(APPROVED_RULING)}
                     isLoading={rulingLoading === APPROVED_RULING}
-                    disabled={disableTribunalSafeButtons}
-                    tooltip={tooltipMessage}
+                    disabled={!!disableTribunalSafeButtons}
+                    tooltip={disableTribunalSafeButtons?.message}
                   >
                     <InfoWrapper
                       className="[&>svg]:text-primary-content"
@@ -363,11 +368,12 @@ export const DisputeButton: FC<Props> = ({ proposalData }) => {
                     btnStyle="outline"
                     onClick={() => handleSubmitRuling(REJECTED_RULING)}
                     isLoading={rulingLoading === REJECTED_RULING}
-                    disabled={disableTribunalSafeButtons}
-                    tooltip={tooltipMessage}
+                    disabled={!!disableTribunalSafeButtons}
+                    tooltip={disableTribunalSafeButtons?.message}
+                    tooltipSide="tooltip-left"
                   >
                     <InfoWrapper
-                      className="[&>svg]:text-error"
+                      className="[&>svg]:!text-error tooltip-left"
                       tooltip={
                         "Reject if the proposal violates the rules outlined in the community covenant."
                       }
diff --git a/apps/web/components/ProposalTimeline.tsx b/apps/web/components/ProposalTimeline.tsx
index 9f11e11a9..3a219e28f 100644
--- a/apps/web/components/ProposalTimeline.tsx
+++ b/apps/web/components/ProposalTimeline.tsx
@@ -9,6 +9,7 @@ import { Countdown } from "./Countdown";
 import { DateComponent } from "./DateComponent";
 import { InfoWrapper } from "./InfoWrapper";
 import { DisputeOutcome, DisputeStatus, ProposalStatus } from "@/types";
+import { convertSecondsToReadableTime } from "@/utils/numbers";
 
 type Props = {
   proposalData: Pick<CVProposal, "createdAt" | "proposalStatus"> & {
@@ -36,7 +37,7 @@ type Props = {
 export const ProposalTimeline: FC<Props> = ({
   proposalData,
   disputes = [],
-  className,
+  className = "",
 }) => {
   const arbitrationConfig = proposalData.arbitrableConfig;
   const defaultRuling = DisputeOutcome[arbitrationConfig.defaultRuling];
@@ -65,7 +66,7 @@ export const ProposalTimeline: FC<Props> = ({
 
   return (
     <ul
-      className={`timeline timeline-vertical sm:timeline-horizontal mt-5 ${className}`}
+      className={`timeline timeline-vertical sm:timeline-horizontal mt-5 w-fit ${className}`}
     >
       <li className="flex-grow">
         <div className="timeline-start text-sm opacity-60">
@@ -87,6 +88,11 @@ export const ProposalTimeline: FC<Props> = ({
         const isLastDispute = index === disputes.length - 1;
         const timeoutTimestamp =
           +dispute.createdAt + +arbitrationConfig.defaultRulingTimeout;
+
+        const rulingTimeout = convertSecondsToReadableTime(
+          arbitrationConfig.defaultRulingTimeout,
+        );
+
         return (
           <Fragment key={dispute.id}>
             <li className="flex-grow">
@@ -107,7 +113,7 @@ export const ProposalTimeline: FC<Props> = ({
                 <div className="timeline-start shadow-lg p-2 border border-tertiary-content rounded-lg flex items-center">
                   <InfoWrapper
                     className="[&>svg]:text-tertiary-content m-0.5"
-                    tooltip={`The tribunal safe has 3 days to rule the dispute. Past this delay and considering the abstain behavior on this pool, this proposal will be ${defaultRuling === "rejected" ? "closed as rejected" : "back to active"} and both collateral will be restored.`}
+                    tooltip={`The tribunal safe has ${rulingTimeout.value} ${rulingTimeout.unit} to rule the dispute. Past this delay and considering the abstain behavior on this pool, this proposal will be ${defaultRuling === "rejected" ? "closed as rejected" : "back to active"} and both collateral will be restored.`}
                   >
                     <Countdown endTimestamp={timeoutTimestamp} />
                   </InfoWrapper>
@@ -135,7 +141,7 @@ export const ProposalTimeline: FC<Props> = ({
                           "Pool default ruling on timeout is to Approve"
                         : "The proposal will be closed as rejected."
                       }
-                      className={`[&>svg]:text-error-content [&:before]:ml-[-26px] ${isTimeout && defaultRuling === "approved" && "[&>svg]:opacity-50"}`}
+                      className={`[&>svg]:!text-error-content [&:before]:ml-[-26px] ${isTimeout && defaultRuling === "approved" && "[&>svg]:opacity-50"}`}
                     >
                       <span
                         className={`${isTimeout && defaultRuling === "approved" && "opacity-50"}`}