feat: add rtlcss to styled components.

src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js

@@ -18,7 +18,6 @@ import { useAccountTransactionsContext } from './AccountTransactionsProvider';
 import { handleCashFlowTransactionType } from './utils';
 
 import { compose } from 'utils';
-import { whenRtl, whenLtr } from 'utils/styled-components';
 
 /**
  * Account transactions data table.
@@ -129,8 +128,7 @@ const CashflowTransactionsTable = styled(DashboardConstrantTable)`
 
     .tbody-inner {
       .tr .td:not(:first-child) {
-        ${whenLtr(`border-left: 1px solid #e6e6e6;`)}
-        ${whenRtl(`border-right: 1px solid #e6e6e6;`)}
+        border-left: 1px solid #e6e6e6;
       }
     }
   }

src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.js

@@ -14,7 +14,6 @@ import { curry } from 'lodash/fp';
 
 import { Icon } from '../../../components';
 import { useAccountTransactionsContext } from './AccountTransactionsProvider';
-import { whenRtl, whenLtr } from 'utils/styled-components';
 
 function AccountSwitchButton() {
   const { currentAccount } = useAccountTransactionsContext();
@@ -23,7 +22,7 @@ function AccountSwitchButton() {
     <AccountSwitchButtonBase
       minimal={true}
       rightIcon={<Icon icon={'arrow-drop-down'} iconSize={24} />}
-    > 
+    >
       <AccountSwitchText>{currentAccount.name}</AccountSwitchText>
     </AccountSwitchButtonBase>
   );
@@ -161,8 +160,7 @@ const AccountBalanceAmount = styled.span`
   font-weight: 600;
   display: inline-block;
   color: rgb(31, 50, 85);
-  ${whenLtr(`margin-left: 10px;`)}
-  ${whenRtl(`margin-right: 10px;`)}
+  margin-left: 10px;
 `;
 
 const AccountSwitchItemName = styled.div`
@@ -180,7 +178,6 @@ const AccountSwitchItemUpdatedAt = styled.div`
 
 const AccountSwitchButtonBase = styled(Button)`
   .bp3-button-text {
-    ${whenLtr(`margin-right: 5px;`)}
-    ${whenRtl(`margin-left: 5px;`)}
+    margin-right: 5px;
   }
 `;

src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js

@@ -12,8 +12,6 @@ import { useSMSMessageDialogContext } from './SMSMessageDialogProvider';
 import { SMSMessagePreview } from 'components';
 import { getSMSUnits } from '../../NotifyViaSMS/utils';
 
-import { whenRtl, whenLtr } from 'utils/styled-components';
-
 /**
  * SMS message form content.
  */
@@ -98,22 +96,16 @@ const MessageVariable = styled.div`
 const FormContent = styled.div`
   display: flex;
 `;
+
 const FormFields = styled.div`
   width: 55%;
 `;
+
 const FormPreview = styled.div`
   display: flex;
   flex-direction: column;
   width: 45%;
-
-  ${whenLtr(`
-    padding-left: 25px;
-    margin-left: 25px;
-    border-left: 1px solid #dcdcdd;
-  `)}
-  ${whenRtl(`
-    padding-right: 25px;
-    margin-right: 25px;
-    border-right: 1px solid #dcdcdd;
-  `)}
+  padding-left: 25px;
+  margin-left: 25px;
+  border-left: 1px solid #dcdcdd;
 `;

src/containers/NotifyViaSMS/NotifyViaSMSForm.js

@@ -15,7 +15,6 @@ import { FormObserver, SMSMessagePreview } from 'components';
 import { transformToForm, safeInvoke } from 'utils';
 import { getSMSUnits } from './utils';
 
-import { whenRtl, whenLtr } from 'utils/styled-components';
 
 const defaultInitialValues = {
   notification_key: '',
@@ -147,17 +146,9 @@ const SMSPreviewSectionRoot = styled.div`
   display: flex;
   flex-direction: column;
   width: 45%;
-
-  ${whenLtr(`
-    padding-left: 25px;
-    margin-left: 25px;
-    border-left: 1px solid #dcdcdd;
-  `)}
-  ${whenRtl(`
-    padding-right: 25px;
-    margin-right: 25px;
-    border-right: 1px solid #dcdcdd;
-  `)}
+  padding-left: 25px;
+  margin-left: 25px;
+  border-left: 1px solid #dcdcdd;
 `;
 
 const SMSPreviewSectionNote = styled.div`