Fix cursor pointer for table rows and navigation icons

lfglabs-dev · Aug 23, 2024 · 3451711 · 3451711
1 parent 813a6c4
commit 3451711
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 13 deletions.
diff --git a/components/UI/table/table.tsx b/components/UI/table/table.tsx
@@ -55,7 +55,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={
-      "hover:bg-[#18181A]  border-[1px] border-[#f4faff4d] transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted border-r-0 border-l-0 grid grid-cols-[minmax(min-content,0.5fr)_minmax(min-content,2fr)_minmax(min-content,2fr)_minmax(min-content,1fr)_minmax(min-content,1fr)_minmax(min-content,1fr)] items-center"
+      "hover:bg-[#18181A] modified-cursor-pointer  border-[1px] border-[#f4faff4d] transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted border-r-0 border-l-0 grid grid-cols-[minmax(min-content,0.5fr)_minmax(min-content,2fr)_minmax(min-content,2fr)_minmax(min-content,1fr)_minmax(min-content,1fr)_minmax(min-content,1fr)] items-center"
     }
     {...props}
   />
@@ -69,7 +69,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={
-      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] flex items-center"
+      "h-10 px-2 text-left align-middle modified-cursor-normal font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] flex items-center"
     }
     {...props}
   />

diff --git a/components/discover/defiTable.tsx b/components/discover/defiTable.tsx
@@ -155,7 +155,7 @@ export const columns: ColumnDef<TableInfo>[] = [
   {
     accessorKey: "apr",
     header: () => (
-      <div className="flex irems-center modified-cursor-pointer w-full h-full">
+      <div className="flex items-center modified-cursor-pointer w-full h-full">
       <div className="flex flex-row gap-2 items-center">
         <Typography type={TEXT_TYPE.BODY_SMALL} color="textGray">
           APR
@@ -165,7 +165,7 @@ export const columns: ColumnDef<TableInfo>[] = [
           <UpIcon width="10" color="#a6a5a7" />
         </div>
       </div>
-    </div>
+      </div>
     ),
     cell: ({ row }) => {
       const amount = parseFloat(row.getValue("apr")).toFixed(2);
@@ -175,7 +175,7 @@ export const columns: ColumnDef<TableInfo>[] = [
   {
     accessorKey: "volume",
     header: () => (
-      <div className="flex irems-center modified-cursor-pointer w-full h-full">
+      <div className="flex items-center modified-cursor-pointer w-full h-full">
       <div className="flex flex-row gap-2 items-center">
         <Typography type={TEXT_TYPE.BODY_SMALL} color="textGray">
           TVL
@@ -208,8 +208,7 @@ export const columns: ColumnDef<TableInfo>[] = [
   {
     accessorKey: "daily_rewards",
     header: () => (
-      <div className="flex irems-center modified-cursor-pointer w-full h-full">
-
+      <div className="flex items-center modified-cursor-pointer w-full h-full">
       <div className="flex flex-row gap-2 items-center justify-end">
         <Typography type={TEXT_TYPE.BODY_SMALL} color="textGray">
           Daily Rewards
@@ -432,9 +431,7 @@ const DataTable: FunctionComponent<DataTableProps> = ({ data, loading }) => {
               onClick={() =>
                 table.getCanPreviousPage() ? table.previousPage() : null
               }
-              style={{
-                cursor: table.getCanPreviousPage() ? "inherit" : "not-allowed",
-              }}
+              style= {table.getCanPreviousPage() ? {} : {cursor:'not-allowed' } }
             >
               <CDNImage
                 src="/icons/chevronLeft.svg"
@@ -446,9 +443,7 @@ const DataTable: FunctionComponent<DataTableProps> = ({ data, loading }) => {
             <div
               className="flex modified-cursor-pointer"
               onClick={() => (table.getCanNextPage() ? table.nextPage() : null)}
-              style={{
-                cursor: table.getCanNextPage() ? "inherit" : "not-allowed",
-              }}
+              style= {table.getCanNextPage() ? {} : {cursor:'not-allowed' } }
             >
               <CDNImage
                 src="/icons/chevronRight.svg"

diff --git a/styles/globals.css b/styles/globals.css
@@ -120,3 +120,7 @@ a,
 button {
   cursor: url(../public/icons/pointer-cursor.png), auto;
 }
+
+.modified-cursor-normal{
+  cursor: url(../public/icons/cursor.png), auto;
+}