Merge pull request #824 from MatiasAchucarro/fix/cursor_display_issue

fixes for cursor issues
lfglabs-dev · Aug 24, 2024 · f1c74a6 · f1c74a6
2 parents 28100f6 + 3451711
commit f1c74a6
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 22 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]  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"
+      "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,6 +155,7 @@ export const columns: ColumnDef<TableInfo>[] = [
   {
     accessorKey: "apr",
     header: () => (
+      <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
@@ -164,6 +165,7 @@ export const columns: ColumnDef<TableInfo>[] = [
           <UpIcon width="10" color="#a6a5a7" />
         </div>
       </div>
+      </div>
     ),
     cell: ({ row }) => {
       const amount = parseFloat(row.getValue("apr")).toFixed(2);
@@ -173,6 +175,7 @@ export const columns: ColumnDef<TableInfo>[] = [
   {
     accessorKey: "volume",
     header: () => (
+      <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
@@ -186,6 +189,7 @@ export const columns: ColumnDef<TableInfo>[] = [
           </div>
         </div>
       </div>
+      </div>
     ),
     cell: ({ row }) => {
       const amount = parseFloat(row.getValue("volume"));
@@ -204,6 +208,7 @@ export const columns: ColumnDef<TableInfo>[] = [
   {
     accessorKey: "daily_rewards",
     header: () => (
+      <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
@@ -213,6 +218,7 @@ export const columns: ColumnDef<TableInfo>[] = [
           <UpIcon width="10" color="#a6a5a7" />
         </div>
       </div>
+      </div>
     ),
     cell: ({ row }) => {
       const amount = parseFloat(row.getValue("daily_rewards"));
@@ -362,10 +368,10 @@ const DataTable: FunctionComponent<DataTableProps> = ({ data, loading }) => {
             </div>
           </div>
           <div
-            className="flex w-full xl:justify-end flex-grow-0 justify-center items-center cursor-pointer"
+            className="flex w-full xl:justify-end flex-grow-0 justify-center items-center"
             onClick={resetFilters}
           >
-            <div className="w-fit border-[1px] border-[#f4faff4d] px-4 rounded-md">
+            <div className="w-fit  modified-cursor-pointer border-[1px] border-[#f4faff4d] px-4 rounded-md">
               <Typography type={TEXT_TYPE.BODY_DEFAULT} color="white">
                 Clear All
               </Typography>
@@ -382,16 +388,7 @@ const DataTable: FunctionComponent<DataTableProps> = ({ data, loading }) => {
                     return (
                       <TableHead
                         key={header.id}
-                        onClick={header.column.getToggleSortingHandler()}
-                        style={{
-                          cursor:
-                            header.id === "app" ||
-                            header.id === "title" ||
-                            header.id === "action"
-                              ? "initial"
-                              : "pointer",
-                        }}
-                      >
+                        onClick={header.column.getToggleSortingHandler()}>
                         {header.isPlaceholder
                           ? null
                           : flexRender(
@@ -436,13 +433,11 @@ const DataTable: FunctionComponent<DataTableProps> = ({ data, loading }) => {
         <div className="flex items-center justify-center space-x-2 pt-4">
           <div className="text-sm text-muted-foreground flex gap-8">
             <div
-              className="flex"
+              className="flex modified-cursor-pointer"
               onClick={() =>
                 table.getCanPreviousPage() ? table.previousPage() : null
               }
-              style={{
-                cursor: table.getCanPreviousPage() ? "pointer" : "not-allowed",
-              }}
+              style= {table.getCanPreviousPage() ? {} : {cursor:'not-allowed' } }
             >
               <CDNImage
                 src="/icons/chevronLeft.svg"
@@ -452,11 +447,9 @@ const DataTable: FunctionComponent<DataTableProps> = ({ data, loading }) => {
               />
             </div>
             <div
-              className="flex"
+              className="flex modified-cursor-pointer"
               onClick={() => (table.getCanNextPage() ? table.nextPage() : null)}
-              style={{
-                cursor: table.getCanNextPage() ? "pointer" : "not-allowed",
-              }}
+              style= {table.getCanNextPage() ? {} : {cursor:'not-allowed' } }
             >
               <CDNImage
                 src="/icons/chevronRight.svg"

diff --git a/components/pages/home/questAndCollectionTabs.tsx b/components/pages/home/questAndCollectionTabs.tsx
@@ -141,6 +141,7 @@ const QuestAndCollectionTabs: FunctionComponent<
               indicatorColor="secondary"
             >
               <Tab
+                className="modified-cursor-pointer"
                 disableRipple
                 sx={{
                   borderRadius: "10px",
@@ -155,6 +156,7 @@ const QuestAndCollectionTabs: FunctionComponent<
                 {...a11yProps(0)}
               />
               <Tab
+                className="modified-cursor-pointer"
                 disableRipple
                 sx={{
                   borderRadius: "10px",

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;
+}