@layerfi/components 0.1.34 → 0.1.36

package/dist/styles/index.css

@@ -311,6 +311,36 @@
   background-color: var(--badge-color-error);
   color: var(--badge-bg-color-error);
 }
+.Layer__bar-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--color-base-800);
+  color: var(--color-base-50);
+  border-radius: var(--border-radius-xs);
+  padding: var(--spacing-3xs) var(--spacing-sm);
+  min-height: 52px;
+  box-shadow: 0px 0px 0px 3px var(--color-base-300);
+}
+.Layer__bar-banner__left-col {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+}
+.Layer__bar-banner__text-container__desc {
+  color: var(--color-base-300);
+}
+@container (max-width: 560px) {
+  .Layer__bar-banner--bookkeeping {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm);
+  }
+  .Layer__bar-banner--bookkeeping .Layer__icon-box {
+    display: none;
+  }
+}
 .Layer__btn {
   position: relative;
   border-radius: var(--btn-border-radius);
@@ -334,6 +364,11 @@
     0px 4px 5px 0px rgba(0, 0, 0, 0.01);
   transition: all 100ms ease-out;
   padding: 0 var(--spacing-md);
+  text-decoration: none;
+}
+.Layer__btn.Layer__btn--as-link {
+  display: inline-flex;
+  align-items: center;
 }
 .Layer__btn.Layer__back-btn {
   color: var(--btn-secondary-color);
@@ -348,6 +383,26 @@
   width: 36px;
   height: 36px;
 }
+.Layer__btn.Layer__expand-btn {
+  color: var(--btn-secondary-color);
+  background: var(--btn-secondary-bg-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  box-sizing: border-box;
+  transition: all 150ms ease-out;
+  padding: 0;
+  width: 36px;
+  height: 36px;
+}
+.Layer__btn.Layer__expand-btn svg {
+  transform: rotate(90deg);
+  transition: transform 120ms ease-in-out;
+}
+.Layer__btn.Layer__expand-btn.Layer__expand-btn--collapsed svg {
+  transform: rotate(-90deg);
+}
 .Layer__btn.Layer__btn--full-width {
   width: 100%;
 }
@@ -4716,6 +4771,16 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__chevron__up--counterclockwise {
   transform: rotate(-180deg);
 }
+.Layer__icon-box {
+  width: 32px;
+  height: 32px;
+  background-color: var(--color-base-0);
+  border-radius: var(--border-radius-3xs);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-base-1000);
+}
 .Layer__linked-accounts {
   min-height: 150px;
   box-sizing: border-box;
@@ -4779,6 +4844,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;
@@ -4792,11 +4859,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;
@@ -4856,6 +4918,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;
@@ -5033,13 +5099,29 @@ tbody .Layer__table__empty-row:first-child {
   color: var(--color-warning);
 }
 .Layer__tasks-component .Layer__tasks-header {
+  min-height: 36px;
   display: flex;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: space-between;
   gap: var(--spacing-md);
   padding: var(--spacing-md) var(--spacing-lg);
   border-bottom: 1px solid var(--color-base-300);
 }
+.Layer__tasks-component .Layer__tasks-header__left-col {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--spacing-md);
+}
+.Layer__tasks-component .Layer__tasks__content {
+  max-height: 1000px;
+  opacity: 1;
+  transition: max-height 0.18s ease-out, opacity 0.2s ease-out;
+}
+.Layer__tasks-component .Layer__tasks__content.Layer__tasks__content--collapsed {
+  opacity: 0.3;
+  max-height: 0;
+}
 .Layer__tasks-component .Layer__tasks-list {
   background-color: var(--color-base-0);
   box-shadow: 0px 0px 0px 1px var(--color-base-300);
@@ -5146,6 +5228,7 @@ tbody .Layer__table__empty-row:first-child {
   justify-content: flex-end;
   padding: var(--spacing-md) var(--spacing-sm);
   margin: 0 var(--spacing-xs);
+  isolation: isolate;
 }
 .Layer__tasks-component .Layer__tasks__pagination ul {
   margin: 0;
@@ -6310,13 +6393,13 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 }
 .Layer__accounting-overview-profit-and-loss-charts {
   display: flex;
-  flex-direction: column;
   gap: var(--spacing-md);
+  max-width: 1406px;
 }
 .Layer__component.Layer__accounting-overview-profit-and-loss .recharts-responsive-container {
   margin-top: -42px;
 }
-.accounting-overview-profit-and-loss-charts > .Layer__toggle {
+.Layer__accounting-overview-profit-and-loss-charts > .Layer__toggle {
   display: none;
 }
 @container (max-width: 1023px) {
@@ -6335,10 +6418,10 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   .Layer__accounting-overview__summaries-row .Layer__notification-card.Layer__txs-to-review {
     width: 100%;
   }
-  .accounting-overview-profit-and-loss-charts {
+  .Layer__accounting-overview-profit-and-loss-charts {
     flex-direction: column;
   }
-  .accounting-overview-profit-and-loss-charts > .Layer__toggle {
+  .Layer__accounting-overview-profit-and-loss-charts > .Layer__toggle {
     display: flex;
   }
   .Layer__component.Layer__accounting-overview-profit-and-loss-chart.accounting-overview-profit-and-loss-chart--hidden {
@@ -6362,6 +6445,9 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   background: none;
 }
 @media screen and (min-width: 1100px) {
+  .Layer__bookkeeping-overview--view .Layer__panel__content {
+    max-width: 1406px;
+  }
   .Layer__bookkeeping-overview--view .Layer__view-main {
     padding-right: 0;
   }
@@ -6381,6 +6467,7 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-md);
+  max-width: 1406px;
 }
 .bookkeeping-overview-profit-and-loss-charts > .Layer__toggle {
   display: none;
@@ -6402,10 +6489,10 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   .Layer__bookkeeping-overview__summaries-row .Layer__notification-card.Layer__txs-to-review {
     width: 100%;
   }
-  .bookkeeping-overview-profit-and-loss-charts {
+  .Layer__bookkeeping-overview-profit-and-loss-charts {
     flex-direction: column;
   }
-  .bookkeeping-overview-profit-and-loss-charts > .Layer__toggle {
+  .Layer__bookkeeping-overview-profit-and-loss-charts > .Layer__toggle {
     display: flex;
   }
 }