@licklist/design 0.78.40 → 0.78.43

package/src/v2/components/Customer/CustomersList.scss

@@ -13,11 +13,12 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 1px solid #E8E9EF;
-    margin-bottom: 32px;
-    margin-left: 32px;
-    margin-right: 32px;
     padding: 0;
+
+    .new-tabs {
+      width: 100%;
+      margin-top: 0;
+    }
   }
 
   &__title-row {
@@ -98,7 +99,7 @@
     display: flex;
     flex-direction: column;
     gap: 16px;
-    padding: 0 32px 32px;
+    padding: 16px 0 16px 0;
   }
 
   .filter-section {
@@ -177,56 +178,67 @@
 
   // Cells styling (usually specific to the table in this page)
   .entity-cell {
+    position: relative;
+    overflow: hidden;
+
     &__name {
       font-size: 15px;
       font-weight: 600;
       color: var(--label-primary);
     }
+
+    &__info-wrapper {
+      position: relative;
+      height: 1.2em;
+    }
+
+    &__id,
     &__sub {
       font-size: 13px;
       color: var(--label-secondary);
-      display: block !important;
+      line-height: 1.2;
+      transition: opacity 0.2s ease, visibility 0.2s ease;
     }
+
     &__id {
-      font-size: 13px;
-      color: var(--label-secondary);
-      display: none !important;
+      position: absolute;
+      top: 0;
+      left: 0;
+      opacity: 0;
+      visibility: hidden;
     }
 
-    &:hover {
-      .entity-cell__id {
-        display: block !important;
-      }
-      .entity-cell__sub {
-        display: none !important;
-      }
+    &__sub {
+      display: block;
+      opacity: 1;
+      visibility: visible;
     }
 
-    // Ensure hover state on the row also triggers the same behavior
-    // This addresses potential flickering when moving between cells
+    &:hover,
     :is(.new-table__row:hover) & {
       .entity-cell__id {
-        display: block !important;
+        opacity: 1;
+        visibility: visible;
       }
       .entity-cell__sub {
-        display: none !important;
+        opacity: 0;
+        visibility: hidden;
       }
     }
 
-    // When entity-cell__sub is missing (like in template list),
-    // showing entity-cell__id on hover causes height jump.
-    // We only want to swap if both exist, or ensure height is stable.
+    // When entity-cell__sub is missing, always show ID if it exists
     &:not(:has(.entity-cell__sub)) {
       .entity-cell__id {
-        display: block !important;
+        position: static;
+        opacity: 1;
+        visibility: visible;
       }
     }
 
-    :is(.new-table__row:hover) &:not(:has(.entity-cell__sub)) {
-      .entity-cell__id {
-        display: block !important;
-      }
-    }
+    // Special case for templates list where sub might be a space ( )
+    // We only want to swap if the content is meaningful.
+    // If it's empty or just whitespace, we could show ID by default.
+    // For now, the opacity-based swap should handle the visual stability.
   }
 
   .type-cell {
@@ -277,12 +289,18 @@
     }
   }
 
+  .new-page-header-container {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
   &__pagination {
     margin-top: 16px;
-    padding-top: 32px;
+    padding: 32px 0 32px 0;
     border-top: 1px solid #E8E9EF;
+    display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     gap: 12px;
 
     .pagination__nav {
@@ -431,8 +449,6 @@
       flex-direction: column;
       gap: 16px;
       align-items: flex-start;
-      margin-left: 16px;
-      margin-right: 16px;
       padding: 0;
     }
 
@@ -485,7 +501,6 @@
 
     &__content {
       gap: 20px;
-      padding: 0 16px 16px;
     }
 
     .filter-section {
@@ -543,10 +558,13 @@
     }
 
     &__pagination {
-      flex-direction: column;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
       gap: 12px;
       margin-top: 12px;
-      padding-top: 24px;
+      padding: 24px 0 24px 0;
 
       .pagination__nav {
         padding: 6px 10px;
@@ -555,7 +573,7 @@
 
       .pagination__pages {
         flex-wrap: wrap;
-        justify-content: center;
+        justify-content: flex-start;
         gap: 4px;
       }
 
@@ -876,9 +894,16 @@
       padding: 0 12px 12px;
     }
 
+    &__pagination {
+      justify-content: center;
+
+      .pagination__pages {
+        justify-content: center;
+      }
+    }
+
     &__tabs-container {
-      margin-left: 12px;
-      margin-right: 12px;
+      margin: 0 12px 12px 12px;
     }
   }
 }

package/src/v2/components/NPSScore/NPSScore.scss

@@ -1,13 +1,8 @@
 .nps-score {
     width: 100%;
     margin-top: 24px;
-    padding: 0 1rem;
     box-sizing: border-box;
 
-    @media (max-width: 576px) {
-        padding: 0 16px;
-    }
-
     &__container {
         background: var(--surface-secondary);
         border-radius: 16px;

package/src/v2/components/NewPageHeader/NewPageHeader.scss

@@ -3,11 +3,9 @@
     flex-direction: column;
     align-items: flex-start;
     gap: 0;
+    margin: 20px 0 20px 0;
     align-self: stretch;
-    padding: 32px 32px 0px 32px;
-
     @media (max-width: 768px) {
-        padding: 16px 0 0 0;
         gap: 0;
     }
 }
@@ -22,7 +20,7 @@
 
     @media (max-width: 768px) {
         gap: 8px;
-        padding-top: 16px;
+        padding-top: 0;
     }
 
     &__title {

package/src/v2/components/NewTabs/NewTabs.scss

@@ -6,14 +6,9 @@
   padding-bottom: 0;
   padding-left: 0;
   padding-top: 0;
-  margin-bottom: 18px;
-  margin-top: -18px;
+  margin: 20px 0 20px 0;
   border-bottom: 1px solid var(--border-primary, #E8E9EF);
 
-  @media (max-width: 640px) {
-    padding-bottom: 8px;
-  }
-
   &__container {
     display: flex;
     gap: 0;
@@ -28,20 +23,43 @@
     margin-right: 24px;
     background: none;
     border: none;
-    border-bottom: 3.5px solid transparent;
     font-family: var(--font-family-sans);
     color: var(--label-selected, #121E52);
     cursor: pointer;
-    transition: all 0.2s;
-    margin-bottom: -1px;
+    margin-bottom: 0;
+    position: relative;
+    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 100%;
+      height: 3px;
+      background-color: transparent;
+      border-radius: 4px;
+      transition-property: all;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 0.25s;
+    }
+
+    &:hover:not(:disabled)::after {
+      background-color: var(--fill-action-secondary, #6200EE);
+      width: 50%;
+    }
 
     &:hover:not(:disabled) {
-      color: var(--fills-main-fill-primary, #14215A);
+      color: var(--fill-action-secondary, #6200EE);
+    }
+
+    &--active::after {
+      background-color: var(--fills-main-fill-primary, #14215A);
     }
 
     &--active {
       color: var(--fills-main-fill-primary, #14215A);
-      border-bottom-color: var(--fills-main-fill-primary, #14215A);
     }
 
     &:disabled {

package/src/v2/styles/tokens/_colors.scss

@@ -78,6 +78,7 @@
   --purple-700: #4600A9;
   --purple-800: #360083;
   --purple-900: #290064;
+  --deep-purple-500: #6200EE;
 
   /* Oranges */
   --orange-50: #FFF2E8;
@@ -401,6 +402,7 @@
 
   /* Fills */
   --fill-primary: var(--shade-lighter);
+  --fill-action-secondary: var(--deep-purple-500);
   --fill-secondary: var(--tone-darkest);
   --fill-white: var(--tone-lightest);
   --fill-action: var(--actions-regular);