@layerfi/components 0.1.24 → 0.1.26

package/dist/styles/index.css

@@ -575,12 +575,25 @@
 .Layer__component .recharts-responsive-container .recharts-cartesian-axis-line {
   stroke: var(--color-base-300);
 }
+.Layer__component .recharts-responsive-container .recharts-cartesian-axis-tick-line {
+  stroke: var(--color-base-300);
+}
 .Layer__component .recharts-responsive-container.Layer__chart-container {
   padding-top: 42px;
 }
 .Layer__chart-container {
   min-height: 300px;
 }
+.Layer__chart-legend-list {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  gap: var(--spacing-sm);
+  list-style: none;
+  justify-content: flex-end;
+}
 .Layer__chart__tooltip {
   background-color: var(--color-base-1000);
   padding: var(--spacing-2xs) var(--spacing-sm);
@@ -622,7 +635,7 @@
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-@media screen and (min-width: 500px) {
+@media screen and (min-width: 760px) {
   .Layer__date-month-picker__wrapper.Layer__date-month-picker__wrapper--current-date-option .Layer__date-month-picker {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
@@ -694,7 +707,7 @@
   background: linear-gradient(-90deg, #fff 50%, rgba(255, 255, 255, 0) 100%);
   z-index: 2;
 }
-@media screen and (max-width: 500px) {
+@media screen and (max-width: 760px) {
   .Layer__date-month-picker__wrapper .Layer__date-month-picker {
     border: none;
     background: none;
@@ -868,7 +881,7 @@
   align-items: center;
   gap: var(--spacing-sm);
 }
-@container (max-width: 700px) {
+@container (max-width: 760px) {
   .Layer__component-header {
     padding: var(--spacing-md);
   }
@@ -1088,6 +1101,13 @@
   cursor: pointer;
   position: relative;
   isolation: isolate;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 .Layer__toggle .Layer__toggle-option-content {
   display: flex;
@@ -1659,6 +1679,13 @@
   position: relative;
   isolation: isolate;
   gap: var(--spacing-xs);
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 .Layer__tabs .Layer__tabs-option-content {
   display: flex;
@@ -2833,7 +2860,7 @@
     row-gap: var(--spacing-sm);
   }
 }
-@container (max-width: 700px) {
+@container (max-width: 760px) {
   .Layer__bank-transactions__header {
     box-shadow: 0px -1px 0px 0px rgba(23, 51, 45, 0.16) inset;
     background-color: var(--table-bg);
@@ -3112,7 +3139,7 @@
 .Layer__bank-transaction-mobile-list-item__match-item.Layer__bank-transaction-mobile-list-item__match-item--selected .Layer__bank-transaction-mobile-list-item__match-item__name {
   color: var(--color-base-1000);
 }
-@container (max-width: 700px) {
+@container (max-width: 760px) {
   .Layer__expanded-bank-transaction-row__match-table .Layer__expanded-bank-transaction-row__match-table__header {
     display: none;
   }
@@ -3402,6 +3429,7 @@
   flex-direction: column;
   gap: var(--spacing-sm);
   list-style: none;
+  overflow: hidden;
 }
 .Layer__bank-transaction-mobile-list-item {
   padding: 0;
@@ -3413,11 +3441,22 @@
   transform: scale(0.96);
   transition: all 180ms ease-in-out;
   cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  box-sizing: border-box;
 }
 .Layer__bank-transaction-mobile-list-item.show {
   opacity: 1;
   transform: scale(1);
 }
+.Layer__bank-transaction-mobile-list-item.show.Layer__bank-transaction-row--removing {
+  opacity: 0.99999;
+}
 .Layer__bank-transaction-mobile-list-item .Layer__bank-transaction-mobile-list-item__expanded-row {
   height: 0;
   overflow: hidden;
@@ -3429,11 +3468,18 @@
   text-align: center;
 }
 .Layer__bank-transaction-mobile-list-item__heading {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+.Layer__bank-transaction-mobile-list-item__heading__content {
   display: flex;
+  width: 100%;
   align-items: flex-start;
   justify-content: space-between;
   gap: var(--spacing-xs);
   padding: var(--spacing-sm);
+  box-sizing: border-box;
 }
 .Layer__bank-transaction-mobile-list-item__heading__main {
   display: flex;
@@ -3561,6 +3607,11 @@
 .Layer__bank-transaction-mobile-list-item__switch-form-btns > .Layer__text-btn {
   color: var(--color-base-1000);
 }
+.Layer__bank-transaction-mobile-list-item__categories_list-title {
+  padding-top: var(--spacing-2xs);
+  padding-bottom: var(--spacing-lg);
+  font-size: 18px;
+}
 .Layer__component-container.Layer__chart-of-accounts {
   display: flex;
   align-items: stretch;
@@ -4191,7 +4242,7 @@
   left: 0;
   right: 0;
   z-index: 9999;
-  background: var(--color-base-100);
+  background: var(--color-base-0);
   width: 100%;
   max-height: 80%;
   overflow-y: auto;
@@ -4258,7 +4309,8 @@
 @media screen and (max-width: 650px) {
   .Layer__linked-accounts__list {
     flex-wrap: nowrap;
-    max-width: none;
+    overflow-x: scroll;
+    overflow-y: hidden;
   }
 }
 .Layer__linked-accounts__header + .Layer__linked-accounts__list {
@@ -4299,7 +4351,7 @@
 }
 @media screen and (max-width: 650px) {
   .Layer__linked-accounts__new-account {
-    margin-right: var(--spacing-lg);
+    min-width: 150px;
   }
 }
 .Layer__linked-accounts__new-account .Layer__linked-accounts__new-account-label {
@@ -5003,15 +5055,12 @@
 }
 .Layer__profit-and-loss-chart .legend-item-0 {
   fill: var(--bar-color-income);
-  stroke: var(--bar-color-income);
 }
 .Layer__profit-and-loss-chart .legend-item-1 {
   fill: var(--bar-color-expenses);
-  stroke: var(--bar-color-expenses);
 }
 .Layer__profit-and-loss-chart .legend-item-2 {
   fill: var(--base-transparent-16-light);
-  stroke: var(--bar-color-income);
 }
 .Layer__profit-and-loss-chart__selection-indicator {
   stroke: var(--chart-indicator-color);