From 05c29ba6677f7e4bec01f87e4dd67e0cfe0404fc Mon Sep 17 00:00:00 2001
From: vwh <vwhe@proton.me>
Date: Wed, 7 Aug 2024 08:22:29 +0300
Subject: [PATCH] UI changes

---
 src/components/table/stats-message.tsx | 31 +++++++++++++++++---------
 src/components/table/table-data.tsx    |  2 +-
 src/hooks/usePagination.ts             |  2 +-
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/components/table/stats-message.tsx b/src/components/table/stats-message.tsx
index 6b593d1..1cf0268 100644
--- a/src/components/table/stats-message.tsx
+++ b/src/components/table/stats-message.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import {
   AlertTriangleIcon,
-  LoaderIcon,
+  Loader2Icon,
   CheckCircleIcon,
-  TextSearchIcon
+  InfoIcon
 } from "lucide-react";
 
 type MessageType = "error" | "loading" | "success" | "info";
@@ -17,32 +17,41 @@ interface StatusMessageProps {
 export default function StatusMessage({
   type,
   children,
-  className
+  className = ""
 }: StatusMessageProps) {
+  const baseClasses = "flex items-center p-4 rounded-lg shadow-md";
   let icon;
+  let typeClasses;
+
   switch (type) {
     case "error":
-      icon = <AlertTriangleIcon className="h-6 w-6 text-red-500" />;
+      icon = <AlertTriangleIcon className="mr-3 h-6 w-6 text-red-500" />;
+      typeClasses = "bg-red-100 text-red-800 border-l-4 border-red-500";
       break;
     case "loading":
-      icon = <LoaderIcon className="h-6 w-6 animate-spin" />;
+      icon = (
+        <Loader2Icon className="mr-3 h-6 w-6 animate-spin text-blue-500" />
+      );
+      typeClasses = "bg-blue-100 text-blue-800 border-l-4 border-blue-500";
       break;
     case "success":
-      icon = <CheckCircleIcon className="h-6 w-6 text-green-500" />;
+      icon = <CheckCircleIcon className="mr-3 h-6 w-6 text-green-500" />;
+      typeClasses = "bg-green-100 text-green-800 border-l-4 border-green-500";
       break;
     case "info":
-      icon = <TextSearchIcon className="h-6 w-6" />;
+      icon = <InfoIcon className="mr-3 h-6 w-6 text-yellow-500" />;
+      typeClasses =
+        "bg-yellow-100 text-yellow-800 border-l-4 border-yellow-500";
       break;
     default:
       icon = null;
+      typeClasses = "";
   }
 
   return (
-    <div
-      className={`${className} flex items-center justify-center gap-3 rounded border p-4`}
-    >
+    <div className={`${baseClasses} ${typeClasses} ${className}`}>
       {icon}
-      <span className="font-semibold">{children}</span>
+      <span className="font-medium">{children}</span>
     </div>
   );
 }
diff --git a/src/components/table/table-data.tsx b/src/components/table/table-data.tsx
index 47d7b31..18943fb 100644
--- a/src/components/table/table-data.tsx
+++ b/src/components/table/table-data.tsx
@@ -142,7 +142,7 @@ const TableBodyCell: React.FC<{ value: any; dataType?: string }> = React.memo(
     };
 
     return (
-      <TableCell dataType={dataType} className="px-3 py-3 text-sm">
+      <TableCell dataType={dataType} className="px-5 py-3 text-sm">
         {renderCellContent()}
       </TableCell>
     );
diff --git a/src/hooks/usePagination.ts b/src/hooks/usePagination.ts
index 4817558..22f3108 100644
--- a/src/hooks/usePagination.ts
+++ b/src/hooks/usePagination.ts
@@ -32,7 +32,7 @@ export function usePagination(rowPerPageOrAuto: "auto" | number) {
     let rowHeight = defaultRowHeight;
     for (const threshold of thresholds) {
       if (screenHeight > threshold.height) {
-        rowHeight = threshold.rowHeight;
+        rowHeight = threshold.rowHeight - 10;
         break;
       }
     }