Update table styles to fix cell backgrounds

AudiusProject · Nov 17, 2023 · 7c5f003 · 7c5f003
1 parent e69bdf5
commit 7c5f003
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/packages/web/src/components/table/Table.module.css b/packages/web/src/components/table/Table.module.css
@@ -37,6 +37,7 @@
   position: relative;
   overflow: hidden;
   min-width: 0px !important;
+  background-color: var(--white);
 }
 
 .cellSection {
@@ -196,21 +197,24 @@
   position: relative;
   flex: 1 1 0;
   overflow: hidden;
-  background: var(--white);
+  background-color: var(--white);
   min-width: 0px !important;
   color: var(--neutral);
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
 }
+.tableRow > .tableCell {
+  background-color: var(--white);
+}
 
 .tableRow.active {
   color: var(--primary);
 }
 
 .tableRow:hover:not(.skeletonRow),
-.tableRow:hover > td {
-  z-index: 1;
+.tableRow:hover > .tableCell {
+  z-index: 3;
   box-shadow: 0 1px 0 0 var(--neutral-light-8),
     0 -1px 0 0 var(--neutral-light-8);
   transition: all 0.07s ease-in-out;
@@ -223,6 +227,7 @@
   background-color: var(--neutral-light-9);
 }
 
+
 .tableRow.disabled:hover {
   box-shadow: none;
   background-color: var(--neutral-light-9);
@@ -236,7 +241,7 @@
   justify-content: center;
   height: 64px;
   padding: 20px 12px;
-  background: transparent;
+  background-color: transparent;
   user-select: none;
   transition: all 0.05s ease-in-out;
 }
@@ -300,8 +305,8 @@
 .cellSectionEnd {
   position: sticky !important;
   right: 0;
-  z-index: 2;
-  background-color: var(--white);
+  /* z-index: 3; */
+  /* background-color: inherit; */
 }
 
 .cellSectionEnd.menu {

diff --git a/packages/web/src/components/tracks-table/TracksTable.module.css b/packages/web/src/components/tracks-table/TracksTable.module.css
@@ -97,6 +97,11 @@
   background-color: var(--neutral-light-9);
 }
 
+.tableRow.disabled * {
+  color: var(--neutral-light-4);
+  background-color: var(--neutral-light-9);
+}
+
 .tableRow.disabled:hover {
   box-shadow: none;
   background-color: var(--neutral-light-9);
@@ -112,15 +117,15 @@
 }
 
 .tableRow.lockedRow {
-  background: var(--white);
+  background-color: var(--white);
 }
 
 .locked {
   margin-left: var(--unit-1);
   display: flex;
   align-items: center;
   padding: 2px var(--unit-2);
-  background: var(--accent-blue);
+  background-color: var(--accent-blue);
   border-radius: 80px;
   font-weight: var(--font-demi-bold);
   font-size: var(--font-2xs);