@layerfi/components 0.1.35 → 0.1.37

package/dist/styles/index.css

@@ -11,6 +11,7 @@
 .Layer__drawer {
   --color-black: #1a1a1a;
   --color-white: white;
+  --color-blue: hsl(217 100% 92%);
   --color-info-success: hsl(145, 45%, 42%);
   --color-info-success-bg: hsl(145, 59%, 86%);
   --color-info-success-fg: hsl(145, 63%, 29%);
@@ -1020,7 +1021,7 @@
 .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__month-text--keyboard-selected,
 .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--keyboard-selected,
 .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--keyboard-selected {
-  background-color: var(--color-base-400);
+  background-color: var(--color-base-0);
   color: var(--color-base-800);
   border-color: var(--color-base-800);
   outline-color: var(--color-base-800);
@@ -2769,7 +2770,6 @@ tbody .Layer__table__empty-row:first-child {
   padding-left: var(--spacing-3xs);
 }
 .Layer__bank-transaction-row {
-  top: 1px;
   transition: all var(--transition-speed) ease-in-out;
   opacity: 0.3;
 }
@@ -2781,9 +2781,6 @@ tbody .Layer__table__empty-row:first-child {
   transform: scale(1);
   opacity: 1;
 }
-.Layer__bank-transaction-row.Layer__bank-transaction-row--removing {
-  top: 0;
-}
 .Layer__bank-transaction-row.Layer__bank-transaction-row--removing .Layer__table-cell-content {
   padding: 0 var(--spacing-md);
   overflow: hidden;
@@ -3076,9 +3073,6 @@ tbody .Layer__table__empty-row:first-child {
   opacity: 1;
   transform: scale(1);
 }
-.Layer__bank-transaction-list-item.Layer__bank-transaction-row--removing {
-  display: none;
-}
 .Layer__bank-transaction-list-item .Layer__bank-transaction-list-item__base-row {
   max-height: 60px;
   opacity: 1;
@@ -3856,7 +3850,6 @@ tbody .Layer__table__empty-row:first-child {
   margin: 0;
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-sm);
   list-style: none;
   overflow: hidden;
   max-width: 414px;
@@ -3864,7 +3857,7 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__bank-transaction-mobile-list-item {
   padding: 0;
-  margin: 0 var(--spacing-sm);
+  margin: var(--spacing-2xs);
   background: var(--color-base-0);
   box-shadow: 0px 2px 2px 0px var(--color-base-200), 0px 4px 4px 0px var(--color-base-100);
   border-radius: var(--border-radius-sm);
@@ -3886,12 +3879,24 @@ tbody .Layer__table__empty-row:first-child {
   transform: scale(1);
 }
 .Layer__bank-transaction-mobile-list-item.show.Layer__bank-transaction-row--removing {
-  opacity: 0.99;
+  opacity: 0;
+  transition: all 500ms ease-in-out, opacity 80ms ease-out;
+  overflow: hidden;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.Layer__bank-transaction-mobile-list-item.show.Layer__bank-transaction-row--removing .Layer__bank-transaction-mobile-list-item__expanded-row {
+  transition: all 380ms ease-out;
+  height: 0 !important;
+}
+.Layer__bank-transaction-mobile-list-item.show.Layer__bank-transaction-row--removing .Layer__bank-transaction-mobile-list-item__heading {
+  transition: height 180ms ease-out;
+  height: 0 !important;
 }
 .Layer__bank-transaction-mobile-list-item .Layer__bank-transaction-mobile-list-item__expanded-row {
   height: 0;
   overflow: hidden;
-  transition: all 180ms ease-in-out;
+  transition: all 180ms ease-out;
 }
 .Layer__bank-transaction-mobile-list-item .Layer__text--error {
   padding: var(--spacing-sm) 0;
@@ -4844,6 +4849,8 @@ tbody .Layer__table__empty-row:first-child {
   border-radius: var(--border-radius-sm);
   background: var(--base-transparent-1);
   transition: all 0.15s ease-out;
+  min-width: 286px;
+  box-sizing: border-box;
 }
 .Layer__linked-accounts__new-account.--as-widget {
   min-height: 90px;
@@ -4857,11 +4864,6 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__linked-accounts__new-account:hover .Layer__linked-accounts__new-account-label {
   color: var(--color-base-800);
 }
-@media screen and (max-width: 650px) {
-  .Layer__linked-accounts__new-account {
-    min-width: 150px;
-  }
-}
 .Layer__linked-accounts__new-account .Layer__linked-accounts__new-account-label {
   display: flex;
   align-items: center;
@@ -4875,6 +4877,30 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__linked-accounts__new-account .Layer__linked-accounts__new-account-label span {
   line-height: normal;
 }
+@keyframes skeletonSweep {
+  100% {
+    transform: translateX(100%);
+  }
+}
+.skeleton-loader {
+  position: relative;
+  padding: 1rem;
+  background: white;
+  border-radius: var(--border-radius-base);
+  overflow: hidden;
+}
+.skeleton-loader::after {
+  display: block;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform: translateX(-100%);
+  background: linear-gradient(90deg, transparent, rgb(255, 255, 255), transparent);
+  animation: skeletonSweep 1.5s infinite;
+}
 .Layer__linked-account-thumb {
   display: flex;
   flex-direction: column;
@@ -4884,6 +4910,8 @@ 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;
+  justify-content: space-between;
 }
 .Layer__linked-account-thumb .topbar {
   min-width: 272px;
@@ -4899,6 +4927,11 @@ tbody .Layer__table__empty-row:first-child {
   padding: var(--spacing-xs);
   box-sizing: border-box;
 }
+.Layer__linked-account-thumb .topbar.--is-syncing {
+  color: var(--color-base-500);
+  background: none;
+  z-index: 50;
+}
 .Layer__linked-account-thumb .topbar .account-institution {
   color: var(--color-base-500);
 }
@@ -4921,6 +4954,10 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__linked-account-thumb .topbar .account-name {
   flex: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 200px;
+  overflow: hidden;
 }
 .Layer__linked-account-thumb .middlebar {
   box-sizing: border-box;
@@ -4937,6 +4974,31 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__linked-account-thumb .middlebar .account-balance-text {
   color: var(--color-base-500);
 }
+.Layer__linked-account-thumb .loadingbar {
+  display: flex;
+  padding: var(--spacing-xs);
+  border-bottom-left-radius: var(--border-radius-xs);
+  border-bottom-right-radius: var(--border-radius-xs);
+  gap: var(--spacing-xs);
+  align-items: center;
+  z-index: 100;
+}
+.Layer__linked-account-thumb .loadingbar .loading-text {
+  flex: 1;
+  line-height: 140%;
+}
+.Layer__linked-account-thumb .loadingbar .loading-wrapper {
+  width: 28px;
+  height: 28px;
+  background: var(--color-blue);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.Layer__linked-account-thumb .loadingbar .syncing-data-description {
+  color: var(--color-base-500);
+}
 .Layer__linked-account-thumb .bottombar {
   box-sizing: border-box;
   display: flex;
@@ -4948,6 +5010,9 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__linked-account-thumb .bottombar .account-balance-text {
   color: var(--color-base-500);
 }
+.Layer__linked-account-thumb.--is-syncing {
+  background: hsl(200, 11%, 96%);
+}
 .Layer__linked-account-thumb.--as-widget {
   gap: var(--spacing-2xs);
 }
@@ -5323,7 +5388,7 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__panel {
   flex: 1;
   display: flex;
-  align-items: start;
+  align-items: flex-start;
   height: 100%;
 }
 .Layer__panel__content {