@layerfi/components 0.1.38 → 0.1.40

package/dist/styles/index.css

@@ -3170,8 +3170,62 @@ tbody .Layer__table__empty-row:first-child {
   max-width: var(--max-component-width);
   overflow: auto;
 }
-.Layer__bank-transactions__loader-container {
-  padding: var(--spacing-2xl);
+.Layer__syncing__info {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding: 0 var(--spacing-md);
+  margin-left: var(--spacing-md);
+  font-size: var(--text-sm);
+  border-left: 1px solid var(--border-color);
+}
+.Layer__bank-transaction-row__expand-button:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+.Layer__bank-transaction-row__expand-button:disabled:hover {
+  background-color: var(--color-base-0);
+  color: var(--color-base-500);
+}
+.Layer__bank-transaction__submit-btn:disabled {
+  background-color: var(--color-base-50);
+  cursor: default;
+}
+.Layer__bank-transaction__submit-btn:disabled:hover {
+  color: var(--color-base-500);
+}
+.Layer__bank-transaction__submit-btn:disabled:hover .Layer__btn-icon--primary {
+  color: var(--color-base-500);
+}
+.Layer__bank-transaction__submit-btn:disabled:active {
+  box-shadow: none;
+}
+.Layer__bank-transaction__submit-btn:disabled .Layer__btn-icon--primary {
+  background-color: var(--color-base-100);
+}
+.Layer__bank-transactions__header--mobile .Layer__syncing-component {
+  border-width: 0;
+  padding: 0 var(--spacing-xs);
+  margin-left: 0;
+}
+.Layer__syncing__info__text {
+  display: flex;
+  flex-direction: column;
+  color: var(--color-base-500);
+  gap: var(--spacing-4xs);
+}
+.Layer__syncing__info__text span:first-child {
+  color: var(--color-base-800);
+}
+.Layer__header__actions-wrapper {
+  display: flex;
+  align-items: center;
+}
+.Layer__bank-transactions__list-loader {
+  padding: var(--spacing-lg) var(--spacing-md);
+}
+.Layer__bank-transactions__loader-row {
+  padding: var(--spacing-xs) var(--spacing-md);
 }
 .Layer__bank-transactions__header {
   position: sticky;
@@ -3185,6 +3239,11 @@ tbody .Layer__table__empty-row:first-child {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  min-height: 40px;
+}
+.Layer__bank-transactions__header__content-title {
+  display: flex;
+  align-items: center;
 }
 .Layer__bank-transactions__header.Layer__bank-transactions__header--mobile {
   background-color: transparent;
@@ -3223,6 +3282,31 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__bank-transactions__table {
   border-bottom: 1px solid var(--border-color);
 }
+.Layer__bank-transactions__table .Layer__skeleton-table-body__loader td:last-child {
+  position: sticky;
+  min-width: 430px;
+  width: 430px;
+  max-width: 430px;
+  box-sizing: border-box;
+  right: 0;
+  z-index: 2;
+  border-left: 1px solid var(--border-color);
+  background-color: var(--color-base-0);
+}
+.Layer__bank-transactions__table .Layer__skeleton-table-body__loader td:last-child .Layer__bank-transaction-row__actions-disabled {
+  transition: all var(--transition-speed) ease-out;
+  padding-right: var(--spacing-xs);
+  padding-left: 0;
+}
+.Layer__bank-transactions__table .Layer__skeleton-table-body__loader td:last-child .Layer__bank-transaction-row__actions-disabled .Layer__select--is-disabled {
+  cursor: default;
+}
+.Layer__bank-transactions__table .Layer__skeleton-table-body__loader td:last-child .Layer__bank-transaction-row__actions-disabled .Layer__select--is-disabled .Layer__select__control--is-disabled {
+  background-color: var(--color-base-50);
+  border: none;
+  box-shadow: none;
+  cursor: default;
+}
 .Layer__bank-transactions__table .Layer__table-header {
   background-color: var(--table-bg);
   border-bottom: 1px solid var(--border-color);
@@ -3647,6 +3731,10 @@ tbody .Layer__table__empty-row:first-child {
     width: 160px;
     max-width: 160px;
   }
+  .Layer__bank-transactions__table .Layer__skeleton-table-body__loader td:last-child .Layer__bank-transaction-row__actions-disabled {
+    padding-right: var(--spacing-md);
+    padding-left: var(--spacing-md);
+  }
 }
 .Layer__bank-transaction-row:not(.Layer__bank-transaction-row--expanded) .Layer__bank-transactions__account-col,
 .Layer__bank-transaction-row:not(.Layer__bank-transaction-row--expanded) .Layer__bank-transactions__tx-col {
@@ -5275,7 +5363,7 @@ tbody .Layer__table__empty-row:first-child {
   justify-content: center;
   flex: 1;
   max-width: 272px;
-  min-height: 115px;
+  min-height: 136px;
   padding: var(--spacing-2xs);
   border-radius: var(--border-radius-sm);
   background: var(--base-transparent-1);
@@ -5287,7 +5375,7 @@ tbody .Layer__table__empty-row:first-child {
   min-height: 90px;
 }
 .Layer__linked-accounts__new-account.--show-ledger-balance {
-  min-height: 135px;
+  min-height: 156px;
 }
 .Layer__linked-accounts__new-account:hover {
   background: var(--base-transparent-2);
@@ -5341,9 +5429,13 @@ tbody .Layer__table__empty-row:first-child {
   background: var(--color-base-0);
   border: 1px solid var(--color-base-100);
   box-sizing: border-box;
-  min-width: 286px;
+  width: 286px;
+  height: 136px;
   justify-content: space-between;
 }
+.Layer__linked-account-thumb.--show-ledger-balance {
+  height: 154px;
+}
 .Layer__linked-account-thumb .topbar {
   min-width: 272px;
   display: flex;
@@ -5358,6 +5450,9 @@ tbody .Layer__table__empty-row:first-child {
   padding: var(--spacing-xs);
   box-sizing: border-box;
 }
+.Layer__linked-account-thumb .topbar.--hide-ledger-balance {
+  padding-bottom: var(--spacing-sm);
+}
 .Layer__linked-account-thumb .topbar.--is-syncing {
   color: var(--color-base-500);
   background: none;
@@ -5396,7 +5491,7 @@ tbody .Layer__table__empty-row:first-child {
   align-items: center;
   justify-content: space-between;
   background: var(--color-base-50);
-  padding: var(--spacing-xs);
+  padding: 0 var(--spacing-xs);
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   border-bottom-left-radius: var(--border-radius-xs);
@@ -5404,6 +5499,7 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__linked-account-thumb .middlebar .account-balance-text {
   color: var(--color-base-500);
+  padding: var(--spacing-sm) 0;
 }
 .Layer__linked-account-thumb .loadingbar {
   display: flex;
@@ -5435,8 +5531,7 @@ tbody .Layer__table__empty-row:first-child {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 20px;
-  padding: var(--spacing-3xs) var(--spacing-xs) 0;
+  padding: var(--spacing-3xs) var(--spacing-xs);
 }
 .Layer__linked-account-thumb .bottombar .account-balance-text {
   color: var(--color-base-500);
@@ -5542,10 +5637,21 @@ tbody .Layer__table__empty-row:first-child {
   background-color: var(--color-base-100);
   border-radius: 50%;
 }
+.Layer__loader--with-bg {
+  background-color: var(--color-base-400);
+  color: var(--text-color-primary);
+  padding: 0;
+  border-radius: 50%;
+}
+.Layer__skeleton-loader__row {
+  padding: 0 var(--spacing-md);
+  border-bottom: 1px solid var(--border-color);
+  height: 63px;
+}
 .Layer__skeleton-loader {
   width: 100%;
   height: 12px;
-  background-color: red;
+  border-radius: 4px;
 }
 @keyframes shine {
   to {
@@ -5554,10 +5660,52 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__anim--skeleton-loading {
   background: var(--color-base-100);
-  background: linear-gradient(110deg, var(--color-base-50) 8%, var(--color-base-100) 18%, var(--color-base-50) 33%, var(--color-base-50) 50%);
-  border-radius: var(--border-radius-4xs);
+  background: linear-gradient(110deg, var(--color-base-50) 0%, var(--color-base-0) 28%, var(--color-base-50) 50%, var(--color-base-50) 100%);
+  border-radius: 4px;
   background-size: 200% 100%;
-  animation: 1.2s shine linear infinite;
+  animation: 1.5s shine linear infinite;
+}
+.Layer__syncing-component {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-md);
+}
+.Layer__syncing-component.Layer__syncing-component--with-border {
+  border-left: 1px solid var(--border-color);
+  padding: 0 var(--spacing-md);
+  margin-left: var(--spacing-md);
+}
+.Layer__syncing-component .Layer__syncing-component__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4xs);
+}
+.Layer__syncing-component .Layer__syncing-component__content .Layer__syncing-component__title {
+  color: var(--text-color-primary);
+  font-size: var(--text-sm);
+  font-weight: 540;
+}
+.Layer__syncing-component .Layer__syncing-component__content .Layer__syncing-component__message {
+  color: var(--color-base-500);
+  font-size: var(--text-sm);
+  font-weight: 460;
+}
+.Layer__syncing-component .Layer__icon-btn {
+  color: var(--color-base-1000);
+  box-shadow: 0px 1px 2px 0px var(--base-transparent-6, rgba(17, 17, 17, 0.06)), 0px 0px 0px 1px var(--base-300, #eaeaea);
+}
+.Layer__syncing-component .Layer__icon-btn svg {
+  transition: transform 0.3s ease;
+}
+.Layer__syncing-component .Layer__icon-btn:hover svg {
+  transform: rotate(180deg);
+}
+.Layer__bank-transactions__header--mobile .Layer__syncing-component.Layer__syncing-component--with-border {
+  border-width: 0;
+  padding: 0;
+  padding-left: var(--spacing-sm);
+  margin-left: 0;
 }
 .Layer__tasks-component {
   display: flex;