refactor: minor fixes to home component styles

Author: kyrers

web/src/components/RegistryCard/StatusBanner.tsx

@@ -38,24 +38,28 @@ export const mapFromSubgraphStatus = (status: string, isDisputed: boolean) => {
       return Status.ClearingPending;
   }
 };
+
+const statusStyles: Record<Status, string> = {
+  [Status.RegistrationPending]:
+    "border-t-klerosUIComponentsPrimaryBlue bg-klerosUIComponentsMediumBlue [&_.front-color]:text-klerosUIComponentsPrimaryBlue [&_.dot::before]:bg-klerosUIComponentsPrimaryBlue",
+  [Status.ClearingPending]:
+    "border-t-klerosUIComponentsPrimaryBlue bg-klerosUIComponentsMediumBlue [&_.front-color]:text-klerosUIComponentsPrimaryBlue [&_.dot::before]:bg-klerosUIComponentsPrimaryBlue",
+  [Status.Disputed]:
+    "border-t-klerosUIComponentsSecondaryPurple bg-klerosUIComponentsMediumPurple [&_.front-color]:text-klerosUIComponentsSecondaryPurple [&_.dot::before]:bg-klerosUIComponentsSecondaryPurple",
+  [Status.Included]:
+    "border-t-klerosUIComponentsSuccess bg-klerosUIComponentsSuccessLight [&_.front-color]:text-klerosUIComponentsSuccess [&_.dot::before]:bg-klerosUIComponentsSuccess",
+  [Status.Removed]:
+    "border-t-klerosUIComponentsError bg-klerosUIComponentsErrorLight [&_.front-color]:text-klerosUIComponentsError [&_.dot::before]:bg-klerosUIComponentsError",
+};
+
 const StatusBanner: React.FC<IStatusBanner> = ({ status, isListView = false }) => (
   <div
     className={cn(
       "flex items-center justify-between px-6 rounded-t-[3px]",
       isListView ? "h-min" : "h-11",
       isListView && "p-0",
       "[&_.dot::before]:content-[''] [&_.dot::before]:inline-block [&_.dot::before]:h-2 [&_.dot::before]:w-2 [&_.dot::before]:rounded-[50%] [&_.dot::before]:mr-2",
-      !isListView && [
-        "border-t-[5px]",
-        (status === Status.RegistrationPending || status === Status.ClearingPending) &&
-          "border-t-klerosUIComponentsPrimaryBlue bg-klerosUIComponentsMediumBlue [&_.front-color]:text-klerosUIComponentsPrimaryBlue [&_.dot::before]:bg-klerosUIComponentsPrimaryBlue",
-        status === Status.Disputed &&
-          "border-t-klerosUIComponentsSecondaryPurple bg-klerosUIComponentsMediumPurple [&_.front-color]:text-klerosUIComponentsSecondaryPurple [&_.dot::before]:bg-klerosUIComponentsSecondaryPurple",
-        status === Status.Included &&
-          "border-t-klerosUIComponentsSuccess bg-klerosUIComponentsSuccessLight [&_.front-color]:text-klerosUIComponentsSuccess [&_.dot::before]:bg-klerosUIComponentsSuccess",
-        status === Status.Removed &&
-          "border-t-klerosUIComponentsError bg-klerosUIComponentsErrorLight [&_.front-color]:text-klerosUIComponentsError [&_.dot::before]:bg-klerosUIComponentsError",
-      ]
+      !isListView && ["border-t-[5px]", statusStyles[status]]
     )}
   >
     <label className="front-color dot">{getStatusLabel(status)}</label>

web/src/components/TruncatedText.tsx

@@ -14,7 +14,7 @@ interface ITruncatedText {
  */
 const TruncatedText: React.FC<ITruncatedText> = ({ text, maxLength, className }) => {
   const truncatedText = text?.length <= maxLength ? text : text?.slice(0, maxLength) + "…";
-  return <h3 className={cn("font-normal m-0", className)}>{truncatedText}</h3>;
+  return <div className={cn("text-klerosUIComponentsPrimaryText font-normal m-0", className)}>{truncatedText}</div>;
 };
 
 export default TruncatedText;