Various polishes on Modal refactoring

- use overlayScrollbar from electron blink features, to prevent
scrollbar taking space. as a side effect we can now scroll by holding
scrollbar with mouse left button. this is a native behavior that we
should not decide to remove for users
- update bottom white gradient to prevent overlapping scrollbar
- make account settings modal scrollable, but increase it's default
height so no weird Select triggering scroll when opening
- remove GrowScroll from release notes modal so we don't have two nested
scrolls (was producing really weird behaviour, scrollbar thumb not
indicating scroll % properly)

src/components/base/Modal/ModalBody.js

@@ -90,7 +90,7 @@ const GRADIENT_STYLE = {
   position: 'absolute',
   bottom: 0,
   left: 0,
-  right: 6,
+  right: 20,
 }
 
 const GRADIENT_WRAPPER_STYLE = {

src/components/modals/AccountSettingRenderBody.js

@@ -23,6 +23,7 @@ import TrackPage from 'analytics/TrackPage'
 import Spoiler from 'components/base/Spoiler'
 import CryptoCurrencyIcon from 'components/CryptoCurrencyIcon'
 import Box from 'components/base/Box'
+import Space from 'components/base/Space'
 import Button from 'components/base/Button'
 import Input from 'components/base/Input'
 import Select from 'components/base/Select'
@@ -203,7 +204,6 @@ class AccountSettingRenderBody extends PureComponent<Props, State> {
 
     return (
       <ModalBody
-        noScroll
         onClose={onClose}
         title={t('account.settings.title')}
         render={() => (
@@ -266,8 +266,7 @@ class AccountSettingRenderBody extends PureComponent<Props, State> {
             ) : null}
             <Spoiler textTransform title={t('account.settings.advancedLogs')}>
               <SyncAgo date={account.lastSyncDate} />
-              <textarea
-                readOnly
+              <div
                 style={{
                   userSelect: 'text',
                   border: '1px dashed #f9f9f9',
@@ -275,13 +274,16 @@ class AccountSettingRenderBody extends PureComponent<Props, State> {
                   color: '#000',
                   fontFamily: 'monospace',
                   fontSize: '10px',
-                  height: 200,
                   outline: 'none',
                   padding: '20px',
                   width: '100%',
+                  whiteSpace: 'pre-wrap',
+                  wordWrap: 'break-word',
+                  overflow: 'auto',
                 }}
-                value={JSON.stringify(usefulData, null, 2)}
-              />
+              >
+                {JSON.stringify(usefulData, null, 2)}
+              </div>
             </Spoiler>
             <ConfirmModal
               analyticsName="RemoveAccount"
@@ -294,6 +296,7 @@ class AccountSettingRenderBody extends PureComponent<Props, State> {
               subTitle={t('common.areYouSure')}
               desc={t('settings.removeAccountModal.desc')}
             />
+            <Space of={20} />
           </Fragment>
         )}
         renderFooter={() => (

src/components/modals/ReleaseNotes/ReleaseNotesBody.js

@@ -7,7 +7,6 @@ import network from 'api/network'
 
 import Button from 'components/base/Button'
 import Box from 'components/base/Box'
-import GrowScroll from 'components/base/GrowScroll'
 import Text from 'components/base/Text'
 import Spinner from 'components/base/Spinner'
 import GradientBox from 'components/GradientBox'
@@ -121,9 +120,9 @@ class ReleaseNotesBody extends PureComponent<Props, State> {
         render={() => (
           <Box relative style={{ height: 500 }} px={0} pb={0}>
             <TrackPage category="Modal" name="ReleaseNotes" />
-            <GrowScroll px={5} pb={8}>
+            <Box px={5} pb={8}>
               {this.renderContent()}
-            </GrowScroll>
+            </Box>
             <GradientBox />
           </Box>
         )}

src/main/app.js

@@ -84,6 +84,7 @@ const defaultWindowOptions = {
 
   backgroundColor: '#fff',
   webPreferences: {
+    blinkFeatures: 'OverlayScrollbars',
     devTools,
     // Enable, among other things, the ResizeObserver
     experimentalFeatures: true,