extracted all strings from html lines

2025-12-13 17:56:25 +00:00 · 2018-03-06 14:07:04 +01:00
parent 63d39a81aa
commit fe9afc8952
24 changed files with 302 additions and 111 deletions
--- a/browser/lib/i18n.js
+++ b/browser/lib/i18n.js
@@ -2,6 +2,6 @@
 const i18n = new (require('i18n-2'))({
    // setup some locales - other locales default to the first locale
    locales: ['en', 'de', 'fr']
-  });
+});

 export default i18n;
--- a/browser/main/Detail/InfoPanel.js
+++ b/browser/main/Detail/InfoPanel.js
@@ -82,7 +82,7 @@ class InfoPanel extends React.Component {

          <button styleName='export--enable' onClick={(e) => exportAsHtml(e)}>
            <i className='fa fa-html5' />
-            <p>{i18n.__('.html</p')}</p>
+            <p>{i18n.__('.html')}</p>
          </button>

          <button styleName='export--enable' onClick={(e) => print(e)}>
--- a/browser/main/Detail/InfoPanelTrashed.js
+++ b/browser/main/Detail/InfoPanelTrashed.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './InfoPanel.styl'
+import i18n from 'browser/lib/i18n'

 const InfoPanelTrashed = ({
  storageName, folderName, updatedAt, createdAt, exportAsMd, exportAsTxt, exportAsHtml
@@ -9,24 +10,24 @@ const InfoPanelTrashed = ({
  <div className='infoPanel' styleName='control-infoButton-panel-trash' style={{display: 'none'}}>
    <div>
      <p styleName='modification-date'>{updatedAt}</p>
-      <p styleName='modification-date-desc'>MODIFICATION DATE</p>
+      <p styleName='modification-date-desc'>{i18n.__('MODIFICATION DATE')}</p>
    </div>

    <hr />

    <div>
      <p styleName='infoPanel-default'>{storageName}</p>
-      <p styleName='infoPanel-sub'>STORAGE</p>
+      <p styleName='infoPanel-sub'>{i18n.__('STORAGE')}</p>
    </div>

    <div>
      <p styleName='infoPanel-default'><text styleName='infoPanel-trash'>Trash</text>{folderName}</p>
-      <p styleName='infoPanel-sub'>FOLDER</p>
+      <p styleName='infoPanel-sub'>{i18n.__('FOLDER')}</p>
    </div>

    <div>
      <p styleName='infoPanel-default'>{createdAt}</p>
-      <p styleName='infoPanel-sub'>CREATION DATE</p>
+      <p styleName='infoPanel-sub'>{i18n.__('CREATION DATE')}</p>
    </div>

    <div id='export-wrap'>
--- a/browser/main/Detail/PermanentDeleteButton.js
+++ b/browser/main/Detail/PermanentDeleteButton.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TrashButton.styl'
+import i18n from 'browser/lib/i18n'

 const PermanentDeleteButton = ({
  onClick
@@ -10,7 +11,7 @@ const PermanentDeleteButton = ({
    onClick={(e) => onClick(e)}
  >
    <img styleName='iconInfo' src='../resources/icon/icon-trash.svg' />
-    <span styleName='tooltip'>Permanent Delete</span>
+    <span styleName='tooltip'>{i18n.__('Permanent Delete')}</span>
  </button>
 )

--- a/browser/main/Detail/RestoreButton.js
+++ b/browser/main/Detail/RestoreButton.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './RestoreButton.styl'
+import i18n from 'browser/lib/i18n'

 const RestoreButton = ({
  onClick
@@ -10,7 +11,7 @@ const RestoreButton = ({
    onClick={onClick}
  >
    <i className='fa fa-undo fa-fw' styleName='iconRestore' />
-    <span styleName='tooltip'>Restore</span>
+    <span styleName='tooltip'>{i18n.__('Restore')}</span>
  </button>
 )

--- a/browser/main/Detail/ToggleModeButton.js
+++ b/browser/main/Detail/ToggleModeButton.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './ToggleModeButton.styl'
+import i18n from 'browser/lib/i18n'

 const ToggleModeButton = ({
  onClick, editorType
@@ -13,7 +14,7 @@ const ToggleModeButton = ({
    <div styleName={editorType === 'EDITOR_PREVIEW' ? 'active' : 'non-active'} onClick={() => onClick('EDITOR_PREVIEW')}>
      <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '' : '../resources/icon/icon-mode-split-on-active.svg'} />
    </div>
-    <span styleName='tooltip'>Toggle Mode</span>
+    <span styleName='tooltip'>{i18n.__('Toggle Mode')}</span>
  </div>
 )

--- a/browser/main/Detail/TrashButton.js
+++ b/browser/main/Detail/TrashButton.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TrashButton.styl'
+import i18n from 'browser/lib/i18n'

 const TrashButton = ({
  onClick
@@ -10,7 +11,7 @@ const TrashButton = ({
    onClick={(e) => onClick(e)}
  >
    <img styleName='iconInfo' src='../resources/icon/icon-trash.svg' />
-    <span styleName='tooltip'>Trash</span>
+    <span styleName='tooltip'>{i18n.__('Trash')}</span>
  </button>
 )

--- a/browser/main/NewNoteButton/index.js
+++ b/browser/main/NewNoteButton/index.js
@@ -6,6 +6,7 @@ import _ from 'lodash'
 import modal from 'browser/main/lib/modal'
 import NewNoteModal from 'browser/main/modals/NewNoteModal'
 import eventEmitter from 'browser/main/lib/eventEmitter'
+import i18n from 'browser/lib/i18n'

 const { remote } = require('electron')
 const { dialog } = remote
@@ -86,7 +87,7 @@ class NewNoteButton extends React.Component {
            onClick={(e) => this.handleNewNoteButtonClick(e)}>
            <img styleName='iconTag' src='../resources/icon/icon-newnote.svg' />
            <span styleName='control-newNoteButton-tooltip'>
-              Make a note {OSX ? '⌘' : 'Ctrl'} + N
+              {i18n.__('Make a note')} {OSX ? '⌘' : i18n.__('Ctrl')} + N
            </span>
          </button>
        </div>
--- a/browser/main/SideNav/ListButton.js
+++ b/browser/main/SideNav/ListButton.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './SwitchButton.styl'
+import i18n from 'browser/lib/i18n'

 const ListButton = ({
  onClick, isTagActive
@@ -12,7 +13,7 @@ const ListButton = ({
        : '../resources/icon/icon-list-active.svg'
    }
    />
-    <span styleName='tooltip'>Notes</span>
+    <span styleName='tooltip'>{i18n.__('Notes')}</span>
  </button>
 )

--- a/browser/main/SideNav/PreferenceButton.js
+++ b/browser/main/SideNav/PreferenceButton.js
@@ -2,13 +2,14 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './PreferenceButton.styl'
+import i18n from 'browser/lib/i18n'

 const PreferenceButton = ({
  onClick
 }) => (
  <button styleName='top-menu-preference' onClick={(e) => onClick(e)}>
    <img styleName='iconTag' src='../resources/icon/icon-setting.svg' />
-    <span styleName='tooltip'>Preferences</span>
+    <span styleName='tooltip'>{i18n.__('Preferences')}</span>
  </button>
 )

--- a/browser/main/SideNav/TagButton.js
+++ b/browser/main/SideNav/TagButton.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './SwitchButton.styl'
+import i18n from 'browser/lib/i18n'

 const TagButton = ({
  onClick, isTagActive
@@ -12,7 +13,7 @@ const TagButton = ({
        : '../resources/icon/icon-tag.svg'
    }
    />
-    <span styleName='tooltip'>Tags</span>
+    <span styleName='tooltip'>{i18n.__('Tags')}</span>
  </button>
 )

--- a/browser/main/StatusBar/index.js
+++ b/browser/main/StatusBar/index.js
@@ -3,6 +3,7 @@ import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './StatusBar.styl'
 import ZoomManager from 'browser/main/lib/ZoomManager'
+import i18n from 'browser/lib/i18n'

 const electron = require('electron')
 const { remote, ipcRenderer } = electron
@@ -62,7 +63,7 @@ class StatusBar extends React.Component {

        {status.updateReady
          ? <button onClick={this.updateApp} styleName='update'>
-            <i styleName='update-icon' className='fa fa-cloud-download' /> Ready to Update!
+            <i styleName='update-icon' className='fa fa-cloud-download' /> {i18n.__('Ready to Update!')}
          </button>
          : null
        }
--- a/browser/main/TopBar/index.js
+++ b/browser/main/TopBar/index.js
@@ -5,6 +5,7 @@ import styles from './TopBar.styl'
 import _ from 'lodash'
 import ee from 'browser/main/lib/eventEmitter'
 import NewNoteButton from 'browser/main/NewNoteButton'
+import i18n from 'browser/lib/i18n'

 class TopBar extends React.Component {
  constructor (props) {
@@ -185,7 +186,7 @@ class TopBar extends React.Component {
                  onClick={(e) => this.handleSearchClearButton(e)}
                >
                  <i className='fa fa-fw fa-times' />
-                  <span styleName='control-search-input-clear-tooltip'>Clear Search</span>
+                  <span styleName='control-search-input-clear-tooltip'>{i18n.__('Clear Search')}</span>
                </button>
              }
            </div>
--- a/browser/main/modals/NewNoteModal.js
+++ b/browser/main/modals/NewNoteModal.js
@@ -6,6 +6,7 @@ import { hashHistory } from 'react-router'
 import ee from 'browser/main/lib/eventEmitter'
 import ModalEscButton from 'browser/components/ModalEscButton'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
+import i18n from 'browser/lib/i18n'

 class NewNoteModal extends React.Component {
  constructor (props) {
@@ -122,8 +123,8 @@ class NewNoteModal extends React.Component {
            <i styleName='control-button-icon'
              className='fa fa-file-text-o'
            /><br />
-            <span styleName='control-button-label'>Markdown Note</span><br />
-            <span styleName='control-button-description'>This format is for creating text documents. Checklists, code blocks and Latex blocks are available.</span>
+            <span styleName='control-button-label'>{i18n.__('Markdown Note')}</span><br />
+            <span styleName='control-button-description'>{i18n.__('This format is for creating text documents. Checklists, code blocks and Latex blocks are available.')}</span>
          </button>

          <button styleName='control-button'
@@ -134,13 +135,13 @@ class NewNoteModal extends React.Component {
            <i styleName='control-button-icon'
              className='fa fa-code'
            /><br />
-            <span styleName='control-button-label'>Snippet Note</span><br />
-            <span styleName='control-button-description'>This format is for creating code snippets. Multiple snippets can be grouped into a single note.
+            <span styleName='control-button-label'>{i18n.__('Snippet Note')}</span><br />
+            <span styleName='control-button-description'>{i18n.__('This format is for creating code snippets. Multiple snippets can be grouped into a single note.')}
            </span>
          </button>

        </div>
-        <div styleName='description'><i className='fa fa-arrows-h' /> Tab to switch format</div>
+        <div styleName='description'><i className='fa fa-arrows-h' />{i18n.__('Tab to switch format')}</div>

      </div>
    )
--- a/browser/main/modals/PreferencesModal/Crowdfunding.js
+++ b/browser/main/modals/PreferencesModal/Crowdfunding.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './Crowdfunding.styl'
+import i18n from 'browser/lib/i18n'

 const electron = require('electron')
 const { shell } = electron
@@ -21,22 +22,22 @@ class Crowdfunding extends React.Component {
  render () {
    return (
      <div styleName='root'>
-        <div styleName='header'>Crowdfunding</div>
-        <p>Dear everyone,</p>
+        <div styleName='header'>{i18n.__('Crowdfunding')}</div>
+        <p>{i18n.__('Dear everyone,')}</p>
        <br />
-        <p>Thank you for using Boostnote!</p>
-        <p>Boostnote is used in about 200 different countries and regions by an awesome community of developers.</p>
+        <p>{i18n.__('Thank you for using Boostnote!')}</p>
+        <p>{i18n.__('Boostnote is used in about 200 different countries and regions by an awesome community of developers.')}</p>
        <br />
-        <p>To continue supporting this growth, and to satisfy community expectations,</p>
-        <p>we would like to invest more time and resources in this project.</p>
+        <p>{i18n.__('To continue supporting this growth, and to satisfy community expectations,')}</p>
+        <p>{i18n.__('we would like to invest more time and resources in this project.')}</p>
        <br />
-        <p>If you like this project and see its potential, you can help by supporting us on OpenCollective!</p>
+        <p>{i18n.__('If you like this project and see its potential, you can help by supporting us on OpenCollective!')}</p>
        <br />
-        <p>Thanks,</p>
-        <p>Boostnote maintainers</p>
+        <p>{i18n.__('Thanks,')}</p>
+        <p>{i18n.__('Boostnote maintainers')}</p>
        <br />
        <button styleName='cf-link'>
-          <a href='https://opencollective.com/boostnoteio' onClick={(e) => this.handleLinkClick(e)}>Support via OpenCollective</a>
+          <a href='https://opencollective.com/boostnoteio' onClick={(e) => this.handleLinkClick(e)}>{i18n.__('Support via OpenCollective')}</a>
        </button>
      </div>
    )
--- a/browser/main/modals/PreferencesModal/FolderItem.js
+++ b/browser/main/modals/PreferencesModal/FolderItem.js
@@ -7,6 +7,7 @@ import dataApi from 'browser/main/lib/dataApi'
 import store from 'browser/main/store'
 import { SketchPicker } from 'react-color'
 import { SortableElement, SortableHandle } from 'react-sortable-hoc'
+import i18n from 'browser/lib/i18n'

 class FolderItem extends React.Component {
  constructor (props) {
@@ -179,18 +180,18 @@ class FolderItem extends React.Component {
    return (
      <div styleName='folderItem'>
        <div styleName='folderItem-left'>
-          Are you sure to <span styleName='folderItem-left-danger'>delete</span> this folder?
+        {i18n.__('Are you sure to ')} <span styleName='folderItem-left-danger'>{i18n.__(' delete')}</span> {i18n.__('this folder?')}
        </div>
        <div styleName='folderItem-right'>
          <button styleName='folderItem-right-dangerButton'
            onClick={(e) => this.handleDeleteConfirmButtonClick(e)}
          >
-            Confirm
+            {i18n.__('Confirm')}
          </button>
          <button styleName='folderItem-right-button'
            onClick={(e) => this.handleCancelButtonClick(e)}
          >
-            Cancel
+            {i18n.__('Cancel')}
          </button>
        </div>
      </div>
@@ -231,12 +232,12 @@ class FolderItem extends React.Component {
          <button styleName='folderItem-right-button'
            onClick={(e) => this.handleEditButtonClick(e)}
          >
-            Edit
+            {i18n.__('Edit')}
          </button>
          <button styleName='folderItem-right-button'
            onClick={(e) => this.handleDeleteButtonClick(e)}
          >
-            Delete
+            {i18n.__('Delete')}
          </button>
        </div>
      </div>
--- a/browser/main/modals/PreferencesModal/InfoTab.js
+++ b/browser/main/modals/PreferencesModal/InfoTab.js
@@ -5,6 +5,7 @@ import ConfigManager from 'browser/main/lib/ConfigManager'
 import store from 'browser/main/store'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import _ from 'lodash'
+import i18n from 'browser/lib/i18n'

 const electron = require('electron')
 const { shell, remote } = electron
@@ -69,48 +70,48 @@ class InfoTab extends React.Component {
    return (
      <div styleName='root'>

-        <div styleName='header--sub'>Community</div>
+        <div styleName='header--sub'>{i18n.__('Community')}</div>
        <div styleName='top'>
          <ul styleName='list'>
            <li>
              <a href='https://boostnote.io/#subscribe'
                onClick={(e) => this.handleLinkClick(e)}
-              >Subscribe to Newsletter</a>
+              >{i18n.__('Subscribe to Newsletter')}</a>
            </li>
            <li>
              <a href='https://github.com/BoostIO/Boostnote/issues'
                onClick={(e) => this.handleLinkClick(e)}
-              >GitHub</a>
+              >{i18n.__('GitHub')}</a>
            </li>
            <li>
              <a href='https://boostlog.io/@junp1234'
                onClick={(e) => this.handleLinkClick(e)}
-              >Blog</a>
+              >{i18n.__('Blog')}</a>
            </li>
            <li>
              <a href='https://www.facebook.com/groups/boostnote'
                onClick={(e) => this.handleLinkClick(e)}
-              >Facebook Group</a>
+              >{i18n.__('Facebook Group')}</a>
            </li>
            <li>
              <a href='https://twitter.com/boostnoteapp'
                onClick={(e) => this.handleLinkClick(e)}
-              >Twitter</a>
+              >{i18n.__('Twitter')}</a>
            </li>
          </ul>
        </div>

        <hr />

-        <div styleName='header--sub'>About</div>
+        <div styleName='header--sub'>{i18n.__('About')}</div>

        <div styleName='top'>
          <div styleName='icon-space'>
            <img styleName='icon' src='../resources/app.png' width='92' height='92' />
            <div styleName='icon-right'>
-              <div styleName='appId'>Boostnote {appVersion}</div>
+              <div styleName='appId'>{i18n.__('Boostnote')} {appVersion}</div>
              <div styleName='description'>
-                An open source note-taking app made for programmers just like you.
+                {i18n.__('An open source note-taking app made for programmers just like you.')}
              </div>
            </div>
          </div>
@@ -120,34 +121,34 @@ class InfoTab extends React.Component {
          <li>
            <a href='https://boostnote.io'
              onClick={(e) => this.handleLinkClick(e)}
-            >Website</a>
+            >{i18n.__('Website')}</a>
          </li>
          <li>
            <a href='https://github.com/BoostIO/Boostnote/blob/master/docs/build.md'
              onClick={(e) => this.handleLinkClick(e)}
-            >Development</a> : Development configurations for Boostnote.
+            >{i18n.__('Development')}</a>{i18n.__(' : Development configurations for Boostnote.')}
          </li>
          <li styleName='cc'>
-            Copyright (C) 2017 - 2018 BoostIO
+            {i18n.__('Copyright (C) 2017 - 2018 BoostIO')}
          </li>
          <li styleName='cc'>
-            License: GPL v3
+            {i18n.__('License: GPL v3')}
          </li>
        </ul>

        <hr styleName='separate-line' />

-        <div styleName='policy'>Analytics</div>
-        <div>Boostnote collects anonymous data for the sole purpose of improving the application, and strictly does not collect any personal information such the contents of your notes.</div>
-        <div>You can see how it works on <a href='https://github.com/BoostIO/Boostnote' onClick={(e) => this.handleLinkClick(e)}>GitHub</a>.</div>
+        <div styleName='policy'>{i18n.__('Analytics')}</div>
+        <div>{i18n.__('Boostnote collects anonymous data for the sole purpose of improving the application, and strictly does not collect any personal information such the contents of your notes.')}</div>
+        <div>{i18n.__('You can see how it works on ')}<a href='https://github.com/BoostIO/Boostnote' onClick={(e) => this.handleLinkClick(e)}>GitHub</a>.</div>
        <br />
-        <div>You can choose to enable or disable this option.</div>
+        <div>{i18n.__('You can choose to enable or disable this option.')}</div>
        <input onChange={(e) => this.handleConfigChange(e)}
          checked={this.state.config.amaEnabled}
          ref='amaEnabled'
          type='checkbox'
        />
-        Enable analytics to help improve Boostnote<br />
+        {i18n.__('Enable analytics to help improve Boostnote')}<br />
        <button styleName='policy-submit' onClick={(e) => this.handleSaveButtonClick(e)}>Save</button>
        <br />
        {this.infoMessage()}
--- a/browser/main/modals/PreferencesModal/StorageItem.js
+++ b/browser/main/modals/PreferencesModal/StorageItem.js
@@ -6,6 +6,7 @@ import consts from 'browser/lib/consts'
 import dataApi from 'browser/main/lib/dataApi'
 import store from 'browser/main/store'
 import FolderList from './FolderList'
+import i18n from 'browser/lib/i18n'

 const { shell, remote } = require('electron')
 const { dialog } = remote
@@ -127,7 +128,7 @@ class StorageItem extends React.Component {
              <i className='fa fa-plus' />
              <span styleName='header-control-button-tooltip'
                style={{left: -20}}
-              >Add Folder</span>
+              >{i18n.__('Add Folder')}</span>
            </button>
            <button styleName='header-control-button'
              onClick={(e) => this.handleExternalButtonClick(e)}
@@ -135,7 +136,7 @@ class StorageItem extends React.Component {
              <i className='fa fa-external-link' />
              <span styleName='header-control-button-tooltip'
                style={{left: -50}}
-              >Open Storage folder</span>
+              >{i18n.__('Open Storage folder')}</span>
            </button>
            <button styleName='header-control-button'
              onClick={(e) => this.handleUnlinkButtonClick(e)}
@@ -143,7 +144,7 @@ class StorageItem extends React.Component {
              <i className='fa fa-unlink' />
              <span styleName='header-control-button-tooltip'
                style={{left: -10}}
-              >Unlink</span>
+              >{i18n.__('Unlink')}</span>
            </button>
          </div>
        </div>
--- a/browser/main/modals/PreferencesModal/StoragesTab.js
+++ b/browser/main/modals/PreferencesModal/StoragesTab.js
@@ -4,6 +4,7 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './StoragesTab.styl'
 import dataApi from 'browser/main/lib/dataApi'
 import StorageItem from './StorageItem'
+import i18n from 'browser/lib/i18n'

 const electron = require('electron')
 const { shell, remote } = electron
@@ -69,16 +70,16 @@ class StoragesTab extends React.Component {
    })
    return (
      <div styleName='list'>
-        <div styleName='header'>Storages</div>
+        <div styleName='header'>{i18n.__('Storages')}</div>
        {storageList.length > 0
          ? storageList
-          : <div styleName='list-empty'>No storage found.</div>
+          : <div styleName='list-empty'>{i18n.__('No storage found.')}</div>
        }
        <div styleName='list-control'>
          <button styleName='list-control-addStorageButton'
            onClick={(e) => this.handleAddStorageButton(e)}
          >
-            <i className='fa fa-plus' /> Add Storage Location
+            <i className='fa fa-plus' /> {i18n.__('Add Storage Location')}
          </button>
        </div>
      </div>
@@ -140,13 +141,13 @@ class StoragesTab extends React.Component {
    return (
      <div styleName='addStorage'>

-        <div styleName='addStorage-header'>Add Storage</div>
+        <div styleName='addStorage-header'>{i18n.__('Add Storage')}</div>

        <div styleName='addStorage-body'>

          <div styleName='addStorage-body-section'>
            <div styleName='addStorage-body-section-label'>
-              Name
+            {i18n.__('Name')}
            </div>
            <div styleName='addStorage-body-section-name'>
              <input styleName='addStorage-body-section-name-input'
@@ -158,25 +159,25 @@ class StoragesTab extends React.Component {
          </div>

          <div styleName='addStorage-body-section'>
-            <div styleName='addStorage-body-section-label'>Type</div>
+            <div styleName='addStorage-body-section-label'>{i18n.__('Type')}</div>
            <div styleName='addStorage-body-section-type'>
              <select styleName='addStorage-body-section-type-select'
                value={this.state.newStorage.type}
                readOnly
              >
-                <option value='FILESYSTEM'>File System</option>
+                <option value='FILESYSTEM'>{i18n.__('File System')}</option>
              </select>
              <div styleName='addStorage-body-section-type-description'>
-                Setting up 3rd-party cloud storage integration:{' '}
+              {i18n.__('Setting up 3rd-party cloud storage integration:')}{' '}
                <a href='https://github.com/BoostIO/Boostnote/wiki/Cloud-Syncing-and-Backup'
                  onClick={(e) => this.handleLinkClick(e)}
-                >Cloud-Syncing-and-Backup</a>
+                >{i18n.__('Cloud-Syncing-and-Backup')}</a>
              </div>
            </div>
          </div>

          <div styleName='addStorage-body-section'>
-            <div styleName='addStorage-body-section-label'>Location
+            <div styleName='addStorage-body-section-label'>{i18n.__('Location')}
            </div>
            <div styleName='addStorage-body-section-path'>
              <input styleName='addStorage-body-section-path-input'
@@ -196,10 +197,10 @@ class StoragesTab extends React.Component {
          <div styleName='addStorage-body-control'>
            <button styleName='addStorage-body-control-createButton'
              onClick={(e) => this.handleAddStorageCreateButton(e)}
-            >Add</button>
+            >{i18n.__('Add')}</button>
            <button styleName='addStorage-body-control-cancelButton'
              onClick={(e) => this.handleAddStorageCancelButton(e)}
-            >Cancel</button>
+            >{i18n.__('Cancel')}</button>
          </div>

        </div>
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -9,6 +9,7 @@ import ReactCodeMirror from 'react-codemirror'
 import CodeMirror from 'codemirror'
 import 'codemirror-mode-elixir'
 import _ from 'lodash'
+import i18n from 'browser/lib/i18n'

 const OSX = global.process.platform === 'darwin'

@@ -151,19 +152,19 @@ class UiTab extends React.Component {
    return (
      <div styleName='root'>
        <div styleName='group'>
-          <div styleName='group-header'>Interface</div>
+          <div styleName='group-header'>{i18n.__('Interface')}</div>

          <div styleName='group-section'>
-            Interface Theme
+          {i18n.__('Interface Theme')}
            <div styleName='group-section-control'>
              <select value={config.ui.theme}
                onChange={(e) => this.handleUIChange(e)}
                ref='uiTheme'
              >
-                <option value='default'>Default</option>
-                <option value='white'>White</option>
-                <option value='solarized-dark'>Solarized Dark</option>
-                <option value='dark'>Dark</option>
+                <option value='default'>{i18n.__('Default')}</option>
+                <option value='white'>{i18n.__('White')}</option>
+                <option value='solarized-dark'>{i18n.__('Solarized Dark')}</option>
+                <option value='dark'>{i18n.__('Dark')}</option>
              </select>
            </div>
          </div>
@@ -174,7 +175,7 @@ class UiTab extends React.Component {
                ref='showCopyNotification'
                type='checkbox'
              />&nbsp;
-              Show &quot;Saved to Clipboard&quot; notification when copying
+              {i18n.__('Show &quot;Saved to Clipboard&quot; notification when copying')}
            </label>
          </div>
          <div styleName='group-checkBoxSection'>
@@ -184,7 +185,7 @@ class UiTab extends React.Component {
                ref='confirmDeletion'
                type='checkbox'
              />&nbsp;
-              Show a confirmation dialog when deleting notes
+              {i18n.__('Show a confirmation dialog when deleting notes')}
            </label>
          </div>
          {
@@ -206,7 +207,7 @@ class UiTab extends React.Component {

          <div styleName='group-section'>
            <div styleName='group-section-label'>
-              Editor Theme
+            {i18n.__('Editor Theme')}
            </div>
            <div styleName='group-section-control'>
              <select value={config.editor.theme}
@@ -226,7 +227,7 @@ class UiTab extends React.Component {
          </div>
          <div styleName='group-section'>
            <div styleName='group-section-label'>
-              Editor Font Size
+            {i18n.__('Editor Font Size')}
            </div>
            <div styleName='group-section-control'>
              <input styleName='group-section-control-input'
@@ -239,7 +240,7 @@ class UiTab extends React.Component {
          </div>
          <div styleName='group-section'>
            <div styleName='group-section-label'>
-              Editor Font Family
+            {i18n.__('Editor Font Family')}
            </div>
            <div styleName='group-section-control'>
              <input styleName='group-section-control-input'
@@ -252,7 +253,7 @@ class UiTab extends React.Component {
          </div>
          <div styleName='group-section'>
            <div styleName='group-section-label'>
-              Editor Indent Style
+            {i18n.__('Editor Indent Style')}
            </div>
            <div styleName='group-section-control'>
              <select value={config.editor.indentSize}
@@ -268,42 +269,42 @@ class UiTab extends React.Component {
                ref='editorIndentType'
                onChange={(e) => this.handleUIChange(e)}
              >
-                <option value='space'>Spaces</option>
-                <option value='tab'>Tabs</option>
+                <option value='space'>{i18n.__('Spaces')}</option>
+                <option value='tab'>{i18n.__('Tabs')}</option>
              </select>
            </div>
          </div>

          <div styleName='group-section'>
            <div styleName='group-section-label'>
-              Switch to Preview
+              {i18n.__('Switch to Preview')}
            </div>
            <div styleName='group-section-control'>
              <select value={config.editor.switchPreview}
                ref='editorSwitchPreview'
                onChange={(e) => this.handleUIChange(e)}
              >
-                <option value='BLUR'>When Editor Blurred</option>
-                <option value='DBL_CLICK'>When Editor Blurred, Edit On Double Click</option>
-                <option value='RIGHTCLICK'>On Right Click</option>
+                <option value='BLUR'>{i18n.__('When Editor Blurred')}</option>
+                <option value='DBL_CLICK'>{i18n.__('When Editor Blurred, Edit On Double Click')}</option>
+                <option value='RIGHTCLICK'>{i18n.__('On Right Click')}</option>
              </select>
            </div>
          </div>

          <div styleName='group-section'>
            <div styleName='group-section-label'>
-              Editor Keymap
+              {i18n.__('Editor Keymap')}
            </div>
            <div styleName='group-section-control'>
              <select value={config.editor.keyMap}
                ref='editorKeyMap'
                onChange={(e) => this.handleUIChange(e)}
              >
-                <option value='sublime'>default</option>
-                <option value='vim'>vim</option>
-                <option value='emacs'>emacs</option>
+                <option value='sublime'>{i18n.__('default')}</option>
+                <option value='vim'>{i18n.__('vim')}</option>
+                <option value='emacs'>{i18n.__('emacs')}</option>
              </select>
-              <p styleName='note-for-keymap'>⚠️ Please restart boostnote after you change the keymap</p>
+              <p styleName='note-for-keymap'>{i18n.__('⚠️ Please restart boostnote after you change the keymap')}</p>
            </div>
          </div>

@@ -314,7 +315,7 @@ class UiTab extends React.Component {
                ref='editorDisplayLineNumbers'
                type='checkbox'
              />&nbsp;
-              Show line numbers in the editor
+              {i18n.__('Show line numbers in the editor')}
            </label>
          </div>

@@ -325,7 +326,7 @@ class UiTab extends React.Component {
                ref='scrollPastEnd'
                type='checkbox'
              />&nbsp;
-              Allow editor to scroll past the last line
+              {i18n.__('Allow editor to scroll past the last line')}
            </label>
          </div>

@@ -336,14 +337,14 @@ class UiTab extends React.Component {
                ref='editorFetchUrlTitle'
                type='checkbox'
              />&nbsp;
-              Bring in web page title when pasting URL on editor
+              {i18n.__('Bring in web page title when pasting URL on editor')}
            </label>
          </div>

          <div styleName='group-header2'>Preview</div>
          <div styleName='group-section'>
            <div styleName='group-section-label'>
-              Preview Font Size
+              {i18n.__('Preview Font Size')}
            </div>
            <div styleName='group-section-control'>
              <input styleName='group-section-control-input'
@@ -356,7 +357,7 @@ class UiTab extends React.Component {
          </div>
          <div styleName='group-section'>
            <div styleName='group-section-label'>
-              Preview Font Family
+              {i18n.__('Preview Font Family')}
            </div>
            <div styleName='group-section-control'>
              <input styleName='group-section-control-input'
@@ -368,7 +369,7 @@ class UiTab extends React.Component {
            </div>
          </div>
          <div styleName='group-section'>
-            <div styleName='group-section-label'>Code block Theme</div>
+            <div styleName='group-section-label'>{i18n.__('Code block Theme')}</div>
            <div styleName='group-section-control'>
              <select value={config.preview.codeBlockTheme}
                ref='previewCodeBlockTheme'
@@ -389,7 +390,7 @@ class UiTab extends React.Component {
                ref='previewScrollPastEnd'
                type='checkbox'
              />&nbsp;
-              Allow preview to scroll past the last line
+              {i18n.__('Allow preview to scroll past the last line')}
            </label>
          </div>
          <div styleName='group-checkBoxSection'>
@@ -399,12 +400,12 @@ class UiTab extends React.Component {
                ref='previewLineNumber'
                type='checkbox'
              />&nbsp;
-              Show line numbers for preview code blocks
+              {i18n.__('Show line numbers for preview code blocks')}
            </label>
          </div>
          <div styleName='group-section'>
            <div styleName='group-section-label'>
-              LaTeX Inline Open Delimiter
+              {i18n.__('LaTeX Inline Open Delimiter')}
            </div>
            <div styleName='group-section-control'>
              <input styleName='group-section-control-input'
@@ -417,7 +418,7 @@ class UiTab extends React.Component {
          </div>
          <div styleName='group-section'>
            <div styleName='group-section-label'>
-              LaTeX Inline Close Delimiter
+              {i18n.__('LaTeX Inline Close Delimiter')}
            </div>
            <div styleName='group-section-control'>
              <input styleName='group-section-control-input'
@@ -430,7 +431,7 @@ class UiTab extends React.Component {
          </div>
          <div styleName='group-section'>
            <div styleName='group-section-label'>
-              LaTeX Block Open Delimiter
+              {i18n.__('LaTeX Block Open Delimiter')}
            </div>
            <div styleName='group-section-control'>
              <input styleName='group-section-control-input'
@@ -443,7 +444,7 @@ class UiTab extends React.Component {
          </div>
          <div styleName='group-section'>
            <div styleName='group-section-label'>
-              LaTeX Block Close Delimiter
+              {i18n.__('LaTeX Block Close Delimiter')}
            </div>
            <div styleName='group-section-control'>
              <input styleName='group-section-control-input'
--- a/browser/main/modals/PreferencesModal/index.js
+++ b/browser/main/modals/PreferencesModal/index.js
@@ -12,6 +12,7 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './PreferencesModal.styl'
 import RealtimeNotification from 'browser/components/RealtimeNotification'
 import _ from 'lodash'
+import i18n from 'browser/lib/i18n'

 class Preferences extends React.Component {
  constructor (props) {
@@ -151,7 +152,7 @@ class Preferences extends React.Component {
        onKeyDown={(e) => this.handleKeyDown(e)}
      >
        <div styleName='top-bar'>
-          <p>Your preferences for Boostnote</p>
+          <p>{i18n.__('Your preferences for Boostnote')}</p>
        </div>
        <ModalEscButton handleEscButtonClick={(e) => this.handleEscButtonClick(e)} />
        <div styleName='nav'>
--- a/browser/main/modals/RenameFolderModal.js
+++ b/browser/main/modals/RenameFolderModal.js
@@ -5,6 +5,7 @@ import styles from './RenameFolderModal.styl'
 import dataApi from 'browser/main/lib/dataApi'
 import store from 'browser/main/store'
 import ModalEscButton from 'browser/components/ModalEscButton'
+import i18n from 'browser/lib/i18n'

 class RenameFolderModal extends React.Component {
  constructor (props) {
@@ -72,7 +73,7 @@ class RenameFolderModal extends React.Component {
        onKeyDown={(e) => this.handleKeyDown(e)}
      >
        <div styleName='header'>
-          <div styleName='title'>Rename Folder</div>
+          <div styleName='title'>{i18n.__('Rename Folder')}</div>
        </div>
        <ModalEscButton handleEscButtonClick={(e) => this.handleCloseButtonClick(e)} />