feat(cashflow): add exchange rate muted.

src/components/ExchangeRate/ExchangeRateMutedField.js

@@ -29,16 +29,15 @@ export function ExchangeRateMutedField({
   if (isEqual(toCurrency, fromCurrency) && !isUndefined(toCurrency)) {
     return null;
   }
-
   const content = (
-    <Menu>
+    <ExchangeRateFormGroupContent>
       <ExchangeRateInputGroup
         name={name}
         fromCurrency={fromCurrency}
         toCurrency={toCurrency}
         {...ExchangeRateprops}
       />
-    </Menu>
+    </ExchangeRateFormGroupContent>
   );
 
   return (
@@ -53,12 +52,16 @@ export function ExchangeRateMutedField({
           offset: { offset: '0, 4' },
         }}
         minimal={true}
+        usePortal={false}
+        target={<div />}
       >
-        <ExchangeRateButton
+        <ExchangeRateButton>
+          1 {fromCurrency} = {exchangeRate} {toCurrency}
+          <Button
             className={Classes.MINIMAL}
             rightIcon={<Icon icon="pen-18" />}
-        >
+            small={true}
-          1 {fromCurrency} = {exchangeRate} {toCurrency}
+          />
         </ExchangeRateButton>
       </Popover>
     </ExchangeRateFormGroup>
@@ -69,16 +72,21 @@ const ExchangeRateFormGroup = styled(FormGroup)`
   .bp3-label {
     font-size: 12px !important;
     opacity: 0.7;
-    line-height: 0.1rem;
+    line-height: 0.5rem;
   }
 `;
 
-const ExchangeRateButton = styled(Button)`
+const ExchangeRateButton = styled.div`
-  .bp3-button-text {
   display: flex;
+  align-items: center;
   font-size: 13px;
   font-weight: 500;
   color: #0d244a;
-  }
+`;
-  padding: 0;
+
+const ExchangeRateFormGroupContent = styled.div`
+  .bp3-form-group {
+    padding: 2px;
+    margin: 2px 4px !important;
+  }
 `;

src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormFields.js

@@ -112,8 +112,8 @@ function OtherIncomeFormFields({
             </FormGroup>
           </Col>
         </Row>
-      </FeatureCan>
       <BranchRowDivider />
+      </FeatureCan>
 
       <Row>
         <Col xs={5}>

src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.js

@@ -112,8 +112,8 @@ function OwnerContributionFormFields({
             </FormGroup>
           </Col>
         </Row>
-      </FeatureCan>
         <BranchRowDivider />
+      </FeatureCan>
       <Row>
         <Col xs={5}>
           {/*------------ Date -----------*/}

src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.js

@@ -110,8 +110,8 @@ function TransferFromAccountFormFields({
             </FormGroup>
           </Col>
         </Row>
-      </FeatureCan>
         <BranchRowDivider />
+      </FeatureCan>
       <Row>
         <Col xs={5}>
           {/*------------ Date -----------*/}

src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.js

@@ -111,8 +111,8 @@ function OtherExpnseFormFields({
             </FormGroup>
           </Col>
         </Row>
-      </FeatureCan>
         <BranchRowDivider />
+      </FeatureCan>
       <Row>
         <Col xs={5}>
           {/*------------ Date -----------*/}

src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.js

@@ -109,8 +109,8 @@ function OwnerDrawingsFormFields({
             </FormGroup>
           </Col>
         </Row>
-      </FeatureCan>
         <BranchRowDivider />
+      </FeatureCan>
       <Row>
         <Col xs={5}>
           {/*------------ Date -----------*/}

src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.js

@@ -110,8 +110,8 @@ function TransferToAccountFormFields({
             </FormGroup>
           </Col>
         </Row>
-      </FeatureCan>
         <BranchRowDivider />
+      </FeatureCan>
       <Row>
         <Col xs={5}>
           {/*------------ Date -----------*/}