made escButton ReactComponent

browser/main/modals/PreferencesModal/PreferencesModal.styl

@@ -20,17 +20,6 @@ top-bar--height = 50px
     font-size 18px
     line-height top-bar--height
 
-.top-bar-close
-  position absolute
-  background-color transparent
-  color $ui-inactive-text-color
-  border none
-  top 0
-  right 0
-  text-align center
-  width top-bar--height
-  height top-bar--height
-
 .nav
   absolute top left right
   top top-bar--height
@@ -95,4 +84,4 @@ body[data-theme="dark"]
     color white
     background-color $dark-primary-button-background--active
     &:hover
-      color white
+      color white

browser/main/modals/PreferencesModal/index.js

@@ -5,6 +5,7 @@ import HotkeyTab from './HotkeyTab'
 import UiTab from './UiTab'
 import InfoTab from './InfoTab'
 import StoragesTab from './StoragesTab'
+import ModalEscButton from 'browser/components/ModalEscButton'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './PreferencesModal.styl'
 
@@ -117,10 +118,7 @@ class Preferences extends React.Component {
         <div styleName='top-bar'>
           <p>Your menu for Boostnote</p>
         </div>
-        <button styleName='top-bar-close' onClick={(e) => this.handleEscButtonClick(e)}>
-          <div styleName='top-bar-close-mark'>×</div>
-          <div styleName='top-bar-close-text'>esc</div>
-        </button>
+        <ModalEscButton handleEscButtonClick={(e) => this.handleEscButtonClick(e)} />
         <div styleName='nav'>
           {navButtons}
         </div>