fix: improvements to bank matching transactions

packages/webapp/src/containers/Alerts/CashFlow/AccountDeleteTransactionAlert.tsx

@@ -69,6 +69,14 @@ function AccountDeleteTransactionAlert({
                 'Cannot delete transaction converted from uncategorized transaction but you uncategorize it.',
               intent: Intent.DANGER,
             });
+          } else if (
+            errors.find((e) => e.type === 'CANNOT_DELETE_TRANSACTION_MATCHED')
+          ) {
+            AppToaster.show({
+              message:
+                'Cannot delete a transaction matched to the bank transaction',
+              intent: Intent.DANGER,
+            });
           }
         },
       )

packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransactionCheckbox.module.scss

@@ -15,7 +15,6 @@
       color: rgb(21, 82, 200),
     }
   }
-
   &:hover:not(.active){
     border-color: #c0c0c0;
   }
@@ -25,7 +24,7 @@
   margin: 0;
 }
 .checkbox:global(.bp4-control.bp4-checkbox) :global .bp4-control-indicator{
-  border-color: #CBCBCB;
+  box-shadow: 0 0 0 1px #CBCBCB;
 }
 .checkbox:global(.bp4-control.bp4-checkbox) :global .bp4-control-indicator{
   margin-right: 4px;
@@ -34,9 +33,17 @@
   width: 16px;
 }
 
+.checkbox:global(.bp4-control.bp4-checkbox) :global input:checked ~ .bp4-control-indicator{
+  box-shadow:  0 0 0 1px #0069ff;
+}
+
 .label {
-  color: #10161A;
-  font-size: 15px;
+  color: #252A33;
+  font-size: 15px; 
+}
+.label :global strong {
+  font-weight: 500;
+  font-variant-numeric:tabular-nums;
 }
 
 .date {

packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransactionCheckbox.tsx

@@ -9,7 +9,7 @@ export interface MatchTransactionCheckboxProps {
   active?: boolean;
   initialActive?: boolean;
   onChange?: (state: boolean) => void;
-  label: string;
+  label: string | React.ReactNode;
   date: string;
 }
 
@@ -43,7 +43,7 @@ export function MatchTransactionCheckbox({
       position="apart"
       onClick={handleClick}
     >
-      <Stack spacing={3}>
+      <Stack spacing={2}>
         <span className={styles.label}>{label}</span>
         <Text className={styles.date}>Date: {date}</Text>
       </Stack>

packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingTransaction.tsx

@@ -237,9 +237,6 @@ function PossibleMatchingTransactions() {
       <Box className={styles.matchBar}>
         <Stack spacing={2}>
           <h2 className={styles.matchBarTitle}>Possible Matches</h2>
-          <Text style={{ fontSize: 12, color: '#5C7080' }}>
-            Transactions up to 20 Aug 2019
-          </Text>
         </Stack>
       </Box>
 
@@ -247,7 +244,12 @@ function PossibleMatchingTransactions() {
         {possibleMatches.map((match, index) => (
           <MatchTransactionField
             key={index}
-            label={`${match.transsactionTypeFormatted} for ${match.amountFormatted}`}
+            label={
+              <>
+                {`${match.transsactionTypeFormatted} for `}
+                <strong>{match.amountFormatted}</strong>
+              </>
+            }
             date={match.dateFormatted}
             transactionId={match.referenceId}
             transactionType={match.referenceType}
@@ -329,7 +331,7 @@ const MatchTransactionFooter = R.compose(withBankingActions)(
               </AnchorButton>
             )}
             <Text
-              style={{ fontSize: 14, marginLeft: 'auto', color: '#5F6B7C' }}
+              style={{ fontSize: 14, marginLeft: 'auto', color: '#404854' }}
               tagName="span"
             >
               Pending <FormatNumber value={totalPending} currency={'USD'} />
@@ -343,8 +345,8 @@ const MatchTransactionFooter = R.compose(withBankingActions)(
               intent={Intent.PRIMARY}
               style={{ minWidth: 85 }}
               onClick={handleSubmitBtnClick}
-              // loading={isSubmitting}
-              // disabled={submitDisabled}
+              loading={isSubmitting}
+              disabled={submitDisabled}
             >
               Match
             </Button>

packages/webapp/src/style/_variables.scss

@@ -50,3 +50,9 @@ $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='ht
 // z-indexs
 $zindex-dashboard-splash-screen: 39;
 $zindex-toast: 40;
+
+// Controls
+$control-checked-background-color: #0069ff !default;
+$control-checked-background-color-hover: #0069ff !default;
+$control-checked-background-color-active: #0069ff !default;
+$control-box-shadow: inset 0 0 0 1px #666 !default;

packages/webapp/src/style/objects/form.scss

@@ -271,203 +271,6 @@ label.bp4-label {
 .select-list--tooltip-items .bp4-popover-target {
   display: block;
 }
-
-@mixin control-checked-colors($selector: ':checked') {
-  input#{$selector}~.#{$ns}-control-indicator {
-    box-shadow: none;
-    background-color: $control-checked-background-color;
-    color: $white;
-  }
-
-  &:hover input#{$selector}~.#{$ns}-control-indicator {
-    box-shadow: none;
-    background-color: $control-checked-background-color-hover;
-    border-color: $control-checked-background-color-active;
-  }
-
-  input:not(:disabled):active#{$selector}~.#{$ns}-control-indicator {
-    box-shadow: none;
-    background-color: $control-checked-background-color-active;
-    border-color: $control-checked-background-color-active;
-  }
-
-  input:disabled#{$selector}~.#{$ns}-control-indicator {
-    box-shadow: none;
-    background: rgba($control-checked-background-color, 0.5);
-  }
-}
-
-///@extend
-.#{$ns}-control {
-  input:checked~.#{$ns}-control-indicator {
-    box-shadow: none;
-    background-color: transparent;
-    background-image: none;
-  }
-
-  &:hover input:checked~.#{$ns}-control-indicator {
-    box-shadow: none;
-    background-color: transparent;
-  }
-
-  input:not(:disabled):active:checked~.#{$ns}-control-indicator {
-    box-shadow: none;
-    background: transparent;
-  }
-
-  input:disabled:checked~.#{$ns}-control-indicator {
-    box-shadow: none;
-    background: transparent;
-  }
-
-  &.#{$ns}-disabled {
-    cursor: not-allowed;
-    color: $pt-text-color-disabled;
-  }
-
-  &.#{$ns}-inline {
-    display: inline-block;
-    margin-right: $pt-grid-size * 2;
-  }
-
-  .#{$ns}-control-indicator {
-    box-shadow: 0 0 0 transparent;
-    background-clip: padding-box;
-    background-color: transparent;
-    background-image: none;
-    width: 18px;
-    height: 18px;
-
-    &::before {
-      width: 18px;
-      height: 18px;
-    }
-  }
-
-  &.bp4-large .#{$ns}-control-indicator {
-    width: 20px;
-    height: 20px;
-
-    &::before {
-      width: 20px;
-      height: 20px;
-    }
-  }
-
-  &:hover .#{$ns}-control-indicator {
-    background-color: transparent;
-  }
-
-  input:not(:disabled):active~.#{$ns}-control-indicator {
-    box-shadow: 0 0 0 transparent;
-    background: transparent;
-  }
-
-  /*
-    Checkbox
-
-    Markup:
-    <label class="#{$ns}-control #{$ns}-checkbox {{.modifier}}">
-      <input type="checkbox" {{:modifier}} />
-      <span class="#{$ns}-control-indicator"></span>
-      Checkbox
-    </label>
-
-    :checked  - Checked
-    :disabled - Disabled. Also add <code>.#{$ns}-disabled</code> to <code>.#{$ns}-control</code> to change text color (not shown below).
-    :indeterminate - Indeterminate. Note that this style can only be achieved via JavaScript
-                     <code>input.indeterminate = true</code>.
-    .#{$ns}-align-right - Right-aligned indicator
-    .#{$ns}-large - Large
-
-    Styleguide checkbox
-  */
-  &.#{$ns}-checkbox {
-    &:hover input:indeterminate~.#{$ns}-control-indicator {
-      // box-shadow: 0 0 0 transparent;
-    }
-
-    @mixin indicator-inline-icon($icon) {
-      &::before {
-        // embed SVG icon image as backgroud-image above gradient.
-        // the SVG image content is inlined into the CSS, so use this sparingly.
-        height: 100%;
-        width: 100%;
-      }
-    }
-
-    @include control-checked-colors(':checked');
-
-    // make :indeterminate look like :checked _for Checkbox only_
-    @include control-checked-colors(':indeterminate');
-
-    .#{$ns}-control-indicator {
-      border: 1px solid #c6c6c6;
-      border-radius: $pt-border-radius;
-      background-color: #fff;
-    }
-
-    input:checked~.#{$ns}-control-indicator {
-      background-image: escape-svg($form-check-input-checked-bg-image);
-      border-color: $form-check-input-checked-bg-color;
-      background-color: $form-check-input-checked-bg-color;
-    }
-
-    input:indeterminate~.#{$ns}-control-indicator {
-      // background-image: escape-svg($form-check-input-indeterminate-bg-image);
-      border-color: $form-check-input-checked-bg-color;
-      background-color: $form-check-input-checked-bg-color;
-      box-shadow: 0 0 0 0 transparent;
-    }
-  }
-
-  /*
-    Radio
-
-    Markup:
-    <label class="#{$ns}-control #{$ns}-radio {{.modifier}}">
-      <input type="radio" name="docs-radio-regular" {{:modifier}} />
-      <span class="#{$ns}-control-indicator"></span>
-      Radio
-    </label>
-
-    :checked  - Selected
-    :disabled - Disabled. Also add <code>.#{$ns}-disabled</code> to <code>.#{$ns}-control</code> to change text color (not shown below).
-    .#{$ns}-align-right - Right-aligned indicator
-    .#{$ns}-large - Large
-
-    Styleguide radio
-  */
-  &.#{$ns}-radio {
-    .#{$ns}-control-indicator {
-      border: 2px solid #cecece;
-      background-color: #fff;
-
-      &::before {
-        height: 14px;
-        width: 14px;
-      }
-    }
-
-    input:checked~.#{$ns}-control-indicator {
-      border-color: $form-check-input-checked-bg-color;
-
-      &::before {
-        background-image: radial-gradient($form-check-input-checked-bg-color 40%,
-            transparent 40%);
-      }
-    }
-
-    input:checked:disabled~.#{$ns}-control-indicator::before {
-      opacity: 0.5;
-    }
-
-    input:focus~.#{$ns}-control-indicator {
-      -moz-outline-radius: $control-indicator-size;
-    }
-  }
-}
-
 .bp4-menu-item::before,
 .bp4-menu-item>.bp4-icon {
   color: #4b5d6b;