Repository: busyorg/busy
Pull request #649 (2017-08-24 14:17:29)

Use JSON translations


Patch:
diff --git a/src/app/Sidebar/LeftSidebar.js b/src/app/Sidebar/LeftSidebar.js
index f4ba744a..1491bd7a 100644
--- a/src/app/Sidebar/LeftSidebar.js
+++ b/src/app/Sidebar/LeftSidebar.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { injectIntl, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import _ from 'lodash';
-import { FormattedDate } from 'react-intl';
 import { Route, Switch } from 'react-router-dom';
 import urlParse from 'url-parse';
 
@@ -14,17 +14,13 @@ import Sidenav from '../../components/Navigation/Sidenav';
 import Action from '../../components/Button/Action';
 
 class SidebarWithTopics extends React.PureComponent {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      isFetching: true,
-      isLoaded: false,
-      categories: [],
-      props: {},
-      menu: 'categories',
-    };
-  }
+  state = {
+    isFetching: true,
+    isLoaded: false,
+    categories: [],
+    props: {},
+    menu: 'categories',
+  };
 
   componentWillMount() {
     api.getState('trending/busy', (err, result) => {
@@ -42,11 +38,11 @@ class SidebarWithTopics extends React.PureComponent {
   }
 
   render() {
-    return <Topics title="Trending topics" topics={this.state.categories} />;
+    return <Topics topics={this.state.categories} />;
   }
 }
 
-const LeftSidebar = ({ authenticatedUser, user }) => {
+const LeftSidebar = injectIntl(({ authenticatedUser, user, intl }) => {
   const location = user && _.get(user.json_metadata, 'profile.location');
   let website = user && _.get(user.json_metadata, 'profile.website');
 
@@ -81,8 +77,17 @@ const LeftSidebar = ({ authenticatedUser, user }) => {
                 </div>}
                 <div>
                   <i className="iconfont icon-time text-icon" />
-                  Joined{' '}
-                  <FormattedDate value={user.created} year="numeric" month="long" day="numeric" />
+                  <FormattedMessage
+                    id="joined_date"
+                    defaultMessage="Joined {date}"
+                    values={{
+                      date: intl.formatDate(user.created, {
+                        year: 'numeric',
+                        month: 'long',
+                        day: 'numeric',
+                      }),
+                    }}
+                  />
                 </div>
               </div>
             </div>}
@@ -99,7 +104,7 @@ const LeftSidebar = ({ authenticatedUser, user }) => {
         </div>)}
     />
   </Switch>);
-};
+});
 
 LeftSidebar.propTypes = {
   authenticatedUser: PropTypes.shape().isRequired,
diff --git a/src/auth/Signup.js b/src/auth/Signup.js
index 5a70dd7e..b2a12701 100644
--- a/src/auth/Signup.js
+++ b/src/auth/Signup.js
@@ -1,5 +1,6 @@
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
 
-const SignUp = () => <div>Sign up</div>;
+const SignUp = () => <FormattedMessage id="signup" defaultMessage="Sign up" />;
 
 export default SignUp;
diff --git a/src/bookmarks/Bookmarks.js b/src/bookmarks/Bookmarks.js
index 756ca2b4..d53c73a6 100644
--- a/src/bookmarks/Bookmarks.js
+++ b/src/bookmarks/Bookmarks.js
@@ -61,10 +61,7 @@ export default class Bookmarks extends React.Component {
             !content.length &&
             <div className="container">
               <h3 className="text-center">
-                <FormattedMessage
-                  id="empty_bookmarks"
-                  defaultMessage="You don't have any story saved."
-                />
+                <FormattedMessage id="bookmarks_empty" defaultMessage="You don't have any story saved." />
               </h3>
             </div>}
         </div>
diff --git a/src/components/Button/Follow.js b/src/components/Button/Follow.js
index b1a6afa5..4c795c85 100644
--- a/src/components/Button/Follow.js
+++ b/src/components/Button/Follow.js
@@ -1,11 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { injectIntl } from 'react-intl';
 import { Icon } from 'antd';
 import './Follow.less';
 
+@injectIntl
 class Follow extends React.Component {
   static propTypes = {
+    intl: PropTypes.shape().isRequired,
     isFollowed: PropTypes.bool,
     pending: PropTypes.bool,
     onClick: PropTypes.func,
@@ -35,20 +38,20 @@ class Follow extends React.Component {
   };
 
   render() {
-    const { isFollowed, pending } = this.props;
+    const { intl, isFollowed, pending } = this.props;
     const { isHovered } = this.state;
 
-    let followingText = 'Follow'; // default text
+    let followingText = intl.formatMessage({ id: 'follow' });
     if (isFollowed && !(isHovered || pending)) {
-      followingText = 'Followed';
+      followingText = intl.formatMessage({ id: 'following' });
     } else if (isFollowed && isHovered && !pending) {
-      followingText = 'Unfollow';
+      followingText = intl.formatMessage({ id: 'unfollow' });
     } else if (isFollowed && pending) {
-      followingText = 'Unfollowing';
+      followingText = intl.formatMessage({ id: 'unfollowing' });
     } else if (!isFollowed && isHovered && !pending) {
-      followingText = 'Follow';
+      followingText = intl.formatMessage({ id: 'follow' });
     } else if (!isFollowed && pending) {
-      followingText = 'Following';
+      followingText = intl.formatMessage({ id: 'following' });
     }
 
     return (
diff --git a/src/components/Comments/Comment.js b/src/components/Comments/Comment.js
index 62bc01dc..0b9faae6 100644
--- a/src/components/Comments/Comment.js
+++ b/src/components/Comments/Comment.js
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import numeral from 'numeral';
 import { take, find } from 'lodash';
 import { Link } from 'react-router-dom';
-import { FormattedRelative, FormattedDate, FormattedTime } from 'react-intl';
+import { injectIntl, FormattedRelative, FormattedDate, FormattedTime, FormattedMessage } from 'react-intl';
 import { Icon, Tag, Tooltip } from 'antd';
 import { formatter } from 'steem';
 import { getUpvotes, getDownvotes } from '../../helpers/voteHelpers';
@@ -17,8 +17,10 @@ import Avatar from '../Avatar';
 import Body from '../Story/Body';
 import './Comment.less';
 
+@injectIntl
 class Comment extends React.Component {
   static propTypes = {
+    intl: PropTypes.shape().isRequired,
     authenticated: PropTypes.bool.isRequired,
     username: PropTypes.string,
     comment: PropTypes.shape().isRequired,
@@ -123,6 +125,7 @@ class Comment extends React.Component {
 
   render() {
     const {
+      intl,
       authenticated,
       username,
       comment,
@@ -186,13 +189,13 @@ class Comment extends React.Component {
         <div className="Comment__text">
           <Link to={`/@${comment.author}`}>
             {comment.author}
-            <Tooltip title="Reputation score">
+            <Tooltip title={intl.formatMessage({ id: 'reputation_score', defaultMessage: 'Reputation score' })}>
               <Tag>
                 {formatter.reputation(comment.author_reputation)}
               </Tag>
             </Tooltip>
             {(comment.author === rootPostAuthor) &&
-              <Tooltip title="Original poster">
+              <Tooltip title={intl.formatMessage({ id: 'original_poster', defaultMessage: 'Original poster' })}>
                 <Tag color="#4f545c">OP</Tag>
               </Tooltip>
             }
@@ -213,11 +216,13 @@ class Comment extends React.Component {
           </span>
           <div className="Comment__content">
             {this.state.collapsed
-              ? <div className="Comment__content__collapsed">Comment collapsed</div>
+              ? <div className="Comment__content__collapsed">
+                <FormattedMessage id="comment_collapsed" defaultMessage="Comment collapsed" />
+              </div>
               : <Body body={comment.body} />}
           </div>
           <div className="Comment__footer">
-            <Tooltip title="Like">
+            <Tooltip title={intl.formatMessage({ id: 'like', defaultMessage: 'Like' })}>
               <a
                 role="presentation"
                 className={classNames('Comment__footer__link', {
@@ -240,14 +245,14 @@ class Comment extends React.Component {
                   <div>
                     {upVotesPreview}
                     {upVotesMore}
-                    {upVotesPreview.length === 0 && 'No likes yet.'}
+                    {upVotesPreview.length === 0 && <FormattedMessage id="no_likes" defaultMessage="No likes yet" />}
                   </div>
                 }
               >
                 {likesValue}
               </Tooltip>
             </span>
-            <Tooltip title="Dislike">
+            <Tooltip title={intl.formatMessage({ id: 'dislike', defaultMessage: 'Dislike' })}>
               <a
                 role="presentation"
                 className={classNames('Comment__footer__link', {
@@ -270,7 +275,7 @@ class Comment extends React.Component {
                   <div>
                     {downVotesPreview}
                     {downVotesMore}
-                    {downVotes.length === 0 && 'No dislikes!'}
+                    {downVotes.length === 0 && <FormattedMessage id="no_dislikes" defaultMessage="No dislikes" />}
                   </div>
                 }
               >
@@ -293,7 +298,7 @@ class Comment extends React.Component {
                   })}
                   onClick={() => this.handleReplyClick()}
                 >
-                  Reply
+                  <FormattedMessage id="reply" defaultMessage="Reply" />
                 </a>
               </span>}
           </div>
@@ -321,6 +326,7 @@ class Comment extends React.Component {
               sortComments(commentsChildren[comment.id], sort).map(child =>
                 (<Comment
                   key={child.id}
+                  intl={this.props.intl}
                   authenticated={authenticated}
                   username={username}
                   comment={child}
diff --git a/src/components/Comments/CommentForm.js b/src/components/Comments/CommentForm.js
index 1fca0fcc..b8905689 100644
--- a/src/components/Comments/CommentForm.js
+++ b/src/components/Comments/CommentForm.js
@@ -1,12 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
+import { injectIntl, FormattedMessage } from 'react-intl';
 import { Input, Icon } from 'antd';
 import Avatar from '../Avatar';
 import './CommentForm.less';
 
+@injectIntl
 class CommentForm extends React.Component {
   static propTypes = {
+    intl: PropTypes.shape().isRequired,
     parentPost: PropTypes.shape().isRequired,
     username: PropTypes.string.isRequired,
     isSmall: PropTypes.bool,
@@ -109,7 +112,7 @@ class CommentForm extends React.Component {
   };
 
   render() {
-    const { username, isSmall, isLoading } = this.props;
+    const { intl, username, isSmall, isLoading } = this.props;
     const buttonClass = isLoading ? 'CommentForm__button_disabled' : 'CommentForm__button_primary';
 
     return (
@@ -121,14 +124,14 @@ class CommentForm extends React.Component {
             ref={ref => this.setInput(ref)}
             value={this.state.inputValue}
             onChange={this.handleCommentTextChange}
-            placeholder="Write a comment"
+            placeholder={intl.formatMessage({ id: 'comment_placeholder', defaultMessage: 'Write a comment' })}
             disabled={isLoading}
           />
           <p className="CommentForm__imagebox">
             <input type="file" id={`inputfile${this.props.parentPost.id}`} onChange={this.handleImageChange} />
             <label htmlFor={`inputfile${this.props.parentPost.id}`}>
               {(this.state.imageUploading) ? <Icon type="loading" /> : <i className="iconfont icon-picture" />}
-              {(this.state.imageUploading) ? 'Uploading your image' : 'Select image or paste it from the clipboard.'}
+              {(this.state.imageUploading) ? <FormattedMessage id="image_uploading" defaultMessage="Uploading your image..." /> : <FormattedMessage id="select_or_past_image" defaultMessage="Select image or paste it from the clipboard." />}
             </label>
           </p>
           <button
@@ -137,7 +140,7 @@ class CommentForm extends React.Component {
             className={`CommentForm__button ${buttonClass}`}
           >
             {isLoading && <Icon type="loading" />}
-            {isLoading ? 'Commenting' : 'Comment'}
+            {isLoading ? <FormattedMessage id="comment_send_progress" defaultMessage="Commenting" /> : <FormattedMessage id="comment_send" defaultMessage="Comment" />}
           </button>
         </div>
       </div>
diff --git a/src/components/Comments/Comments.js b/src/components/Comments/Comments.js
index 0cf45d6e..d39ebdc3 100644
--- a/src/components/Comments/Comments.js
+++ b/src/components/Comments/Comments.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { FormattedMessage } from 'react-intl';
 import { sortComments } from '../../helpers/sortHelpers';
 import Loading from '../Icon/Loading';
 import CommentForm from './CommentForm';
@@ -104,20 +105,22 @@ class Comments extends React.Component {
     return (
       <div className="Comments">
         <div className="Comments__header">
-          <h2>Comments</h2>
+          <h2>
+            <FormattedMessage id="comments" defaultMessage="Comments" />
+          </h2>
           <div
             role="presentation"
             className="Comments__header__sort"
             onClick={this.handleSortClick}
           >
             <a className={classNames({ active: sort === 'BEST' })} data-type="BEST">
-              Best
+              <FormattedMessage id="sort_best" defaultMessage="Best" />
             </a>
             <a className={classNames({ active: sort === 'NEWEST' })} data-type="NEWEST">
-              Newest
+              <FormattedMessage id="sort_newest" defaultMessage="Newest" />
             </a>
             <a className={classNames({ active: sort === 'OLDEST' })} data-type="OLDEST">
-              Oldest
+              <FormattedMessage id="sort_oldest" defaultMessage="Oldest" />
             </a>
           </div>
         </div>
diff --git a/src/components/Editor/Editor.js b/src/components/Editor/Editor.js
index 3bf23c3a..45e68dee 100644
--- a/src/components/Editor/Editor.js
+++ b/src/components/Editor/Editor.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
+import { injectIntl, FormattedMessage } from 'react-intl';
 import { HotKeys } from 'react-hotkeys';
 import { throttle } from 'lodash';
 import isArray from 'lodash/isArray';
@@ -12,8 +13,10 @@ import './Editor.less';
 
 const TabPane = Tabs.TabPane;
 
+@injectIntl
 class Editor extends React.Component {
   static propTypes = {
+    intl: PropTypes.shape().isRequired,
     form: PropTypes.shape().isRequired,
     title: PropTypes.string,
     topics: PropTypes.arrayOf(PropTypes.string),
@@ -336,15 +339,15 @@ class Editor extends React.Component {
 
   render() {
     const { getFieldDecorator } = this.props.form;
-    const { loading } = this.props;
+    const { intl, loading } = this.props;
 
     return (
       <Form className="Editor" layout="vertical" onSubmit={this.handleSubmit}>
-        <Form.Item label={<span className="Editor__label">Title</span>}>
+        <Form.Item label={<span className="Editor__label"><FormattedMessage id="title" defaultMessage="Title" /></span>}>
           {getFieldDecorator('title', {
             rules: [
-              { required: true, message: 'Please enter a title' },
-              { max: 255, message: "Title can't be longer than 255 characters" },
+              { required: true, message: intl.formatMessage({ id: 'title_error_empty', defaultMessage: 'title_error_empty' }) },
+              { max: 255, message: intl.formatMessage({ id: 'title_error_too_long', defaultMessage: "Title can't be longer than 255 characters." }) },
             ],
           })(
             <Input
@@ -353,17 +356,17 @@ class Editor extends React.Component {
               }}
               onChange={this.onUpdate}
               className="Editor__title"
-              placeholder="Add title"
+              placeholder={intl.formatMessage({ id: 'title_placeholder', defaultMessage: 'Add title' })}
             />,
           )}
         </Form.Item>
         <Form.Item
-          label={<span className="Editor__label">Topics</span>}
-          extra="Separate topics with commas. Only lowercase letters, numbers and hyphen character is permited."
+          label={<span className="Editor__label"><FormattedMessage id="topics" defaultMessage="Topics" /></span>}
+          extra={intl.formatMessage({ id: 'topics_extra', defaultMessage: 'Separate topics with commas. Only lowercase letters, numbers and hyphen character is permited.' })}
         >
           {getFieldDecorator('topics', {
             rules: [
-              { required: true, message: 'Please enter topics', type: 'array' },
+              { required: true, message: intl.formatMessage({ id: 'topics_error_empty', defaultMessage: 'Please enter topics.' }), type: 'array' },
               { validator: this.checkTopics },
             ],
           })(
@@ -374,7 +377,7 @@ class Editor extends React.Component {
               onChange={this.onUpdate}
               className="Editor__topics"
               mode="tags"
-              placeholder="Add story topics here"
+              placeholder={intl.formatMessage({ id: 'topics_placeholder', defaultMessage: 'Add story topics here' })}
               dropdownStyle={{ display: 'none' }}
               tokenSeparators={[' ', ',']}
             />,
@@ -382,52 +385,72 @@ class Editor extends React.Component {
         </Form.Item>
         <Form.Item
           validateStatus={this.state.noContent ? 'error' : ''}
-          help={this.state.noContent ? "Story content can't be empty" : ''}
+          help={this.state.noContent && intl.formatMessage({ id: 'story_error_empty', defaultMessage: "Story content can't be empty." })}
         >
           <Tabs defaultActiveKey="1">
-            <TabPane tab="Editor" key="1">
+            <TabPane tab={intl.formatMessage({ id: 'editor', defaultMessage: 'Editor' })} key="1">
               <EditorToolbar onSelect={this.insertCode} />
               <HotKeys keyMap={Editor.hotkeys} handlers={this.handlers}>
                 <Input
                   onChange={this.onUpdate}
                   ref={ref => this.setInput(ref)}
                   type="textarea"
-                  placeholder="Write your story..."
+                  placeholder={intl.formatMessage({ id: 'story_placeholder', defaultMessage: 'Write your story...' })}
                 />
               </HotKeys>
               <p className="Editor__imagebox">
                 <input type="file" id="inputfile" onChange={this.handleImageChange} />
                 <label htmlFor="inputfile">
                   {(this.state.imageUploading) ? <Icon type="loading" /> : <i className="iconfont icon-picture" />}
-                  {(this.state.imageUploading) ? 'Uploading your image' : 'Select image or paste it from the clipboard.'}
+                  {(this.state.imageUploading) ?
+                    <FormattedMessage id="image_uploading" defaultMessage="Uploading your image..." /> :
+                    <FormattedMessage id="select_or_past_image" defaultMessage="Select image or paste it from the clipboard." />
+                  }
                 </label>
               </p>
             </TabPane>
-            <TabPane tab="Preview" key="2">
+            <TabPane tab={intl.formatMessage({ id: 'preview', defaultMessage: 'Preview' })} key="2">
               <Body full body={this.state.contentHtml} />
             </TabPane>
           </Tabs>
         </Form.Item>
-        <Form.Item label={<span className="Editor__label">Reward</span>}>
+        <Form.Item label={<span className="Editor__label"><FormattedMessage id="reward" defaultMessage="Rward" /></span>}>
           {getFieldDecorator('reward', { initialValue: '50' })(
             <Select onChange={this.onUpdate}>
-              <Select.Option value="100">100% Steem Power</Select.Option>
-              <Select.Option value="50">50% SBD and 50% SP</Select.Option>
-              <Select.Option value="0">Declined</Select.Option>
+              <Select.Option value="100">
+                <FormattedMessage id="reward_option_100" defaultMessage="100% Steem Power" />
+              </Select.Option>
+              <Select.Option value="50">
+                <FormattedMessage id="reward_option_50" defaultMessage="50% SBD and 50% SP" />
+              </Select.Option>
+              <Select.Option value="0">
+                <FormattedMessage id="reward_option_0" defaultMessage="Declined" />
+              </Select.Option>
             </Select>,
           )}
         </Form.Item>
         <Form.Item>
           {getFieldDecorator('upvote', { valuePropName: 'checked', initialValue: true })(
-            <Checkbox onChange={this.onUpdate}>Upvote this post</Checkbox>,
+            <Checkbox onChange={this.onUpdate}>
+              <FormattedMessage id="like_post" defaultMessage="Like this post" />
+            </Checkbox>,
           )}
         </Form.Item>
         <div className="Editor__bottom">
           <span className="Editor__bottom__info">
-            <i className="iconfont icon-markdown" /> Styling with markdown is supported
+            <i className="iconfont icon-markdown" />
+            {' '}
+            <FormattedMessage id="markdown_supported" defaultMessage="Styling with markdown supported" />
           </span>
           <Form.Item className="Editor__bottom__submit">
-            <Action loading={loading} disabled={loading} text={loading ? 'Submitting' : 'Post'} />
+            <Action
+              loading={loading}
+              disabled={loading}
+              text={intl.formatMessage({
+                id: loading ? 'post_send_progress' : 'post_send',
+                defaultMessage: loading ? 'Submitting' : 'Post',
+              })}
+            />
           </Form.Item>
         </div>
       </Form>
diff --git a/src/components/Editor/EditorToolbar.js b/src/components/Editor/EditorToolbar.js
index f33a757b..9fcdc76e 100644
--- a/src/components/Editor/EditorToolbar.js
+++ b/src/components/Editor/EditorToolbar.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { injectIntl } from 'react-intl';
 import { Button, Tooltip, Menu, Dropdown, Icon } from 'antd';
 import './EditorToolbar.less';
 
@@ -12,7 +13,7 @@ const tooltip = (description, shortcut) =>
     </b>
   </span>);
 
-const EditorToolbar = ({ onSelect }) => {
+const EditorToolbar = ({ intl, onSelect }) => {
   const menu = (
     <Menu onClick={e => onSelect(e.key)}>
       <Menu.Item key="h1"><h1>Heading 1</h1></Menu.Item>
@@ -31,27 +32,27 @@ const EditorToolbar = ({ onSelect }) => {
           <i className="iconfont icon-fontsize" /> <Icon type="down" />
         </Button>
       </Dropdown>
-      <Tooltip title={tooltip('Add bold', 'Ctrl+b')}>
+      <Tooltip title={tooltip(intl.formatMessage({ id: 'bold', defaultMessage: 'Add bold' }), 'Ctrl+b')}>
         <Button className="EditorToolbar__button" onClick={() => onSelect('b')}>
           <i className="iconfont icon-bold" />
         </Button>
       </Tooltip>
-      <Tooltip title={tooltip('Add italic', 'Ctrl+i')}>
+      <Tooltip title={tooltip(intl.formatMessage({ id: 'italic', defaultMessage: 'Add italic' }), 'Ctrl+i')}>
         <Button className="EditorToolbar__button" onClick={() => onSelect('i')}>
           <i className="iconfont icon-italic" />
         </Button>
       </Tooltip>
-      <Tooltip title={tooltip('Add quote', 'Ctrl+q')}>
+      <Tooltip title={tooltip(intl.formatMessage({ id: 'quote', defaultMessage: 'Add quote' }), 'Ctrl+q')}>
         <Button className="EditorToolbar__button" onClick={() => onSelect('q')}>
           <i className="iconfont icon-q1" />
         </Button>
       </Tooltip>
-      <Tooltip title={tooltip('Add link', 'Ctrl+k')}>
+      <Tooltip title={tooltip(intl.formatMessage({ id: 'link', defaultMessage: 'Add link' }), 'Ctrl+k')}>
         <Button className="EditorToolbar__button" onClick={() => onSelect('link')}>
           <i className="iconfont icon-link" />
         </Button>
       </Tooltip>
-      <Tooltip title={tooltip('Add image', 'Ctrl+m')}>
+      <Tooltip title={tooltip(intl.formatMessage({ id: 'image', defaultMessage: 'Add image' }), 'Ctrl+m')}>
         <Button className="EditorToolbar__button" onClick={() => onSelect('image')}>
           <i className="iconfont icon-picture" />
         </Button>
@@ -61,6 +62,7 @@ const EditorToolbar = ({ onSelect }) => {
 };
 
 EditorToolbar.propTypes = {
+  intl: PropTypes.shape().isRequired,
   onSelect: PropTypes.func,
 };
 
@@ -68,4 +70,4 @@ EditorToolbar.defaultProps = {
   onSelect: () => {},
 };
 
-export default EditorToolbar;
+export default injectIntl(EditorToolbar);
diff --git a/src/components/FavoriteButton.js b/src/components/FavoriteButton.js
index e4bf6fba..406f9f8b 100644
--- a/src/components/FavoriteButton.js
+++ b/src/components/FavoriteButton.js
@@ -8,8 +8,8 @@ import './FavoriteButton.less';
 const FavoriteButton = ({ intl, isFavorited, onClick }) =>
   (<Tooltip
     title={intl.formatMessage({
-      id: isFavorited ? '@tooltip_remove_fav' : '@tooltip_add_fav',
-      defaultMessage: isFavorited ? 'Remove from favorites' : 'Add in favorites',
+      id: isFavorited ? 'remove_from_favorites' : 'add_to_favorites',
+      defaultMessage: isFavorited ? 'Remove from favorites' : 'Add to favorites',
     })}
   >
     <a
diff --git a/src/components/Hero.js b/src/components/Hero.js
index f3e6a636..6706a167 100644
--- a/src/components/Hero.js
+++ b/src/components/Hero.js
@@ -7,14 +7,11 @@ const Hero = () =>
   (<div className="Hero">
     <div className="container container-small">
       <h1 className="hero-message">
-        <FormattedMessage
-          id="hero"
-          defaultMessage="Ensuring compensation for the creators of value"
-        />
+        <FormattedMessage id="hero" defaultMessage="Ensuring compensation for the creators of value" />
       </h1>
       <Link to="/signup">
         <button className="ant-btn-lg hero-signup">
-          <FormattedMessage id="signup" defaultMessage="Sign Up" />
+          <FormattedMessage id="signup" defaultMessage="Sign up" />
         </button>
       </Link>
     </div>
diff --git a/src/components/Navigation/Sidenav.js b/src/components/Navigation/Sidenav.js
index 47feb4fe..b490ec10 100644
--- a/src/components/Navigation/Sidenav.js
+++ b/src/components/Navigation/Sidenav.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
 import { NavLink } from 'react-router-dom';
 import './Sidenav.less';
 
@@ -9,22 +10,26 @@ const Sidenav = ({ username }) =>
       <ul className="Sidenav">
         <li>
           <NavLink to={`/@${username}`} activeClassName="Sidenav__item--active">
-            <i className="iconfont icon-mine" /> My Profile
+            <i className="iconfont icon-mine" />
+            <FormattedMessage id="my_profile" defaultMessage="My profile" />
           </NavLink>
         </li>
         <li>
           <NavLink to="/" activeClassName="Sidenav__item--active" exact>
-            <i className="iconfont icon-clock" /> Feed
+            <i className="iconfont icon-clock" />
+            <FormattedMessage id="feed" defaultMessage="Feed" />
           </NavLink>
         </li>
         <li>
           <NavLink to="/trending" activeClassName="Sidenav__item--active">
-            <i className="iconfont icon-headlines" /> News
+            <i className="iconfont icon-headlines" />
+            <FormattedMessage id="news" defaultMessage="News" />
           </NavLink>
         </li>
         <li>
           <NavLink to={`/@${username}/transfers`} activeClassName="Sidenav__item--active">
-            <i className="iconfont icon-wallet" /> Wallet
+            <i className="iconfont icon-wallet" />
+            <FormattedMessage id="wallet" defaultMessage="Wallet" />
           </NavLink>
         </li>
       </ul>}
diff --git a/src/components/Navigation/Topnav.js b/src/components/Navigation/Topnav.js
index 5abf0b52..152fef4a 100644
--- a/src/components/Navigation/Topnav.js
+++ b/src/components/Navigation/Topnav.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { injectIntl, FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { Menu, Popover, Tooltip, Input, Badge } from 'antd';
 import steemconnect from 'sc2-sdk';
@@ -10,6 +11,7 @@ import PopoverMenu, { PopoverMenuItem } from '../PopoverMenu/PopoverMenu';
 import './Topnav.less';
 
 const Topnav = ({
+  intl,
   username,
   onNotificationClick,
   onSeeAllClick,
@@ -26,7 +28,7 @@ const Topnav = ({
       <div className="Topnav__menu-container">
         <Menu selectedKeys={[]} className="Topnav__menu-container__menu" mode="horizontal">
           <Menu.Item key="write">
-            <Tooltip placement="bottom" title="Write post">
+            <Tooltip placement="bottom" title={intl.formatMessage({ id: 'write_post', defaultMessage: 'Write post' })}>
               <Link to="/write" className="Topnav__link">
                 <i className="iconfont icon-write" />
               </Link>
@@ -56,9 +58,9 @@ const Topnav = ({
                   onSeeAllClick={onSeeAllClick}
                 />
               }
-              title="Notifications"
+              title={intl.formatMessage({ id: 'notifications', defaultMessage: 'Notifications' })}
             >
-              <Tooltip className="Notifications__tooltip" placement="bottom" title="Notifications">
+              <Tooltip className="Notifications__tooltip" placement="bottom" title={intl.formatMessage({ id: 'notifications', defaultMessage: 'Notifications' })}>
                 <Badge count={notificationsCount}>
                   <i className="iconfont icon-remind" />
                 </Badge>
@@ -71,9 +73,15 @@ const Topnav = ({
               trigger="click"
               content={
                 <PopoverMenu onSelect={onMenuItemClick}>
-                  <PopoverMenuItem key="activity">Activity</PopoverMenuItem>
-                  <PopoverMenuItem key="settings">Settings</PopoverMenuItem>
-                  <PopoverMenuItem key="logout">Logout</PopoverMenuItem>
+                  <PopoverMenuItem key="activity">
+                    <FormattedMessage id="activity" defaultMessage="Activity" />
+                  </PopoverMenuItem>
+                  <PopoverMenuItem key="settings">
+                    <FormattedMessage id="settings" defaultMessage="Settings" />
+                  </PopoverMenuItem>
+                  <PopoverMenuItem key="logout">
+                    <FormattedMessage id="logout" defaultMessage="Logout" />
+                  </PopoverMenuItem>
                 </PopoverMenu>
               }
             >
@@ -88,13 +96,17 @@ const Topnav = ({
       <div className="Topnav__menu-container">
         <Menu className="Topnav__menu-container__menu" mode="horizontal">
           <Menu.Item key="signup">
-            <Link to="/signup">Sign up</Link>
+            <Link to="/signup">
+              <FormattedMessage id="signup" defaultMessage="Sign up" />
+            </Link>
           </Menu.Item>
           <Menu.Item key="divider" disabled>
             |
           </Menu.Item>
           <Menu.Item key="login">
-            <a href={steemconnect.getLoginURL()}>Log in</a>
+            <a href={steemconnect.getLoginURL()}>
+              <FormattedMessage id="login" defaultMessage="Log in" />
+            </a>
           </Menu.Item>
         </Menu>
       </div>
@@ -111,7 +123,7 @@ const Topnav = ({
         </div>
         <div className="center">
           <div className="Topnav__input-container">
-            <Input placeholder="Search..." />
+            <Input placeholder={intl.formatMessage({ id: 'search_placeholder', defaultMessage: 'Search...' })} />
             <i className="iconfont icon-search" />
           </div>
         </div>
@@ -124,6 +136,7 @@ const Topnav = ({
 };
 
 Topnav.propTypes = {
+  intl: PropTypes.shape().isRequired,
   username: PropTypes.string,
   onNotificationClick: PropTypes.func,
   onSeeAllClick: PropTypes.func,
@@ -139,4 +152,4 @@ Topnav.defaultProps = {
   notifications: [],
 };
 
-export default Topnav;
+export default injectIntl(Topnav);
diff --git a/src/components/PayoutDetail.js b/src/components/PayoutDetail.js
index 4c07e6b1..251c3da6 100644
--- a/src/components/PayoutDetail.js
+++ b/src/components/PayoutDetail.js
@@ -1,43 +1,34 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { injectIntl, FormattedMessage } from 'react-intl';
 import _ from 'lodash';
 import numeral from 'numeral';
-import { FormattedRelative } from 'react-intl';
 import { calculatePayout } from '../vendor/steemitHelpers';
 
-const AmountWithLabel = ({ label, amount }) =>
-  (_.isNumber(amount)
-    ? <div>
-      {label}: {numeral(amount).format('$0,0.00')}
-    </div>
-    : null);
+const AmountWithLabel = ({ id, defaultMessage, nonzero, amount }) =>
+  _.isNumber(amount) && (nonzero ? amount !== 0 : true) && <div>
+    <FormattedMessage
+      id={id}
+      defaultMessage={defaultMessage}
+      values={{
+        amount: numeral(amount).format('$0,0.00'),
+      }}
+    />
+  </div>;
 
 AmountWithLabel.propTypes = {
-  label: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  defaultMessage: PropTypes.string.isRequired,
+  nonzero: PropTypes.bool,
   amount: PropTypes.number,
 };
 
 AmountWithLabel.defaultProps = {
+  nonzero: false,
   amount: 0,
 };
 
-const AmountWithLabelNonZero = ({ label, amount }) =>
-  (_.isNumber(amount) && amount !== 0
-    ? <div>
-      {label}: {numeral(amount).format('$0,0.00')}
-    </div>
-    : null);
-
-AmountWithLabelNonZero.propTypes = {
-  label: PropTypes.string.isRequired,
-  amount: PropTypes.number,
-};
-
-AmountWithLabelNonZero.defaultProps = {
-  amount: 0,
-};
-
-const PayoutDetail = ({ post }) => {
+const PayoutDetail = ({ intl, post }) => {
   const {
     payoutLimitHit,
     potentialPayout,
@@ -50,22 +41,22 @@ const PayoutDetail = ({ post }) => {
   } = calculatePayout(post);
 
   if (isPayoutDeclined) {
-    return <div>Declined Payout</div>;
+    return <FormattedMessage id="payout_declined" defaultMessage="Payout declined" />;
   }
 
   return (
     <div>
-      {payoutLimitHit && <div>Payout limit reached on this post</div>}
-      <AmountWithLabelNonZero label="Promoted" amount={promotionCost} />
+      {payoutLimitHit && <FormattedMessage id="payout_limit_reached" defaultMessage="Payout limit reached on this post" />}
+      <AmountWithLabel nonzero id="payout_promoted_amount" defaultMessage="Promoted: {amount}" amount={promotionCost} />
       {cashoutInTime ?
         <div>
-          <AmountWithLabel label="Potential Payout" amount={potentialPayout} />
-          Will release <FormattedRelative value={cashoutInTime} />
+          <AmountWithLabel id="payout_potential_payout_amount" defaultMessage="Potential Payout: {amount}" amount={potentialPayout} />
+          <FormattedMessage id="payout_will_release_in_time" defaultMessage="Will release {time}" values={{ time: intl.formatRelative(cashoutInTime) }} />
         </div> :
         <div>
-          <AmountWithLabel label="Total Past Payouts" amount={pastPayouts} />
-          <AmountWithLabel label="Author Payout" amount={authorPayouts} />
-          <AmountWithLabel label="Curators Payout" amount={curatorPayouts} />
+          <AmountWithLabel id="payout_total_past_payout_amount" defaultMessage="Total Past Payouts: {amount}" amount={pastPayouts} />
+          <AmountWithLabel id="payout_author_payout_amount" defaultMessage="Author Payout: {amount}" amount={authorPayouts} />
+          <AmountWithLabel id="payout_curators_payout_amount" defaultMessage="Curators payout: {amount}" amount={curatorPayouts} />
         </div>
       }
     </div>
@@ -73,7 +64,8 @@ const PayoutDetail = ({ post }) => {
 };
 
 PayoutDetail.propTypes = {
+  intl: PropTypes.shape().isRequired,
   post: PropTypes.shape().isRequired,
 };
 
-export default PayoutDetail;
+export default injectIntl(PayoutDetail);
diff --git a/src/components/Sidebar/InterestingPeople.js b/src/components/Sidebar/InterestingPeople.js
index c5c8d3f7..195f3b54 100644
--- a/src/components/Sidebar/InterestingPeople.js
+++ b/src/components/Sidebar/InterestingPeople.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 import User from './User';
 import './InterestingPeople.less';
@@ -8,12 +9,16 @@ const InterestingPeople = ({ users }) =>
   (<div className="InterestingPeople">
     <div className="InterestingPeople__container">
       <h4 className="InterestingPeople__title">
-        <i className="iconfont icon-group InterestingPeople__icon" /> Interesting People
+        <i className="iconfont icon-group InterestingPeople__icon" />
+        {' '}
+        <FormattedMessage id="interesting_people" defaultMessage="Interesting People" />
       </h4>
       <div className="InterestingPeople__divider" />
       {users && users.map(user => <User key={user.name} user={user} />)}
       <h4 className="InterestingPeople__more">
-        <Link to={'/latest-comments'}>Discover More People</Link>
+        <Link to={'/latest-comments'}>
+          <FormattedMessage id="discover_more_people" defaultMessage="Discover More People" />
+        </Link>
       </h4>
     </div>
   </div>);
diff --git a/src/components/Sidebar/SignUp.js b/src/components/Sidebar/SignUp.js
index e46faf5d..ab66b1d2 100644
--- a/src/components/Sidebar/SignUp.js
+++ b/src/components/Sidebar/SignUp.js
@@ -1,12 +1,17 @@
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 import './SignUp.less';
 
 const SignUp = () =>
   (<div className="SignUp">
-    <h3 className="SignUp__title">New to Busy?</h3>
+    <h3 className="SignUp__title">
+      <FormattedMessage id="new_to_busy" defaultMessage="New to Busy?" />
+    </h3>
     <Link to="/signup">
-      <button className="SignUp__button">Sign up</button>
+      <button className="SignUp__button">
+        <FormattedMessage id="signup" defaultMessage="Sign up" />
+      </button>
     </Link>
   </div>);
 
diff --git a/src/components/Sidebar/StartNow.js b/src/components/Sidebar/StartNow.js
index 1a5f2cbb..e0d8ea44 100644
--- a/src/components/Sidebar/StartNow.js
+++ b/src/components/Sidebar/StartNow.js
@@ -1,12 +1,17 @@
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 import './StartNow.less';
 
 const StartNow = () =>
   (<div className="StartNow">
-    <h3 className="StartNow__title">Never wrote a post?</h3>
+    <h3 className="StartNow__title">
+      <FormattedMessage id="never_written_post" defaultMessage="Never written a post?" />
+    </h3>
     <Link to="/write">
-      <button className="StartNow__button">Start Now</button>
+      <button className="StartNow__button">
+        <FormattedMessage id="start_now" defaultMessage="Start now" />
+      </button>
     </Link>
   </div>);
 
diff --git a/src/components/Sidebar/Topics.js b/src/components/Sidebar/Topics.js
index 82915b2e..6233e6e9 100644
--- a/src/components/Sidebar/Topics.js
+++ b/src/components/Sidebar/Topics.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
 import Topic from '../Button/Topic';
 import './Topics.less';
 
 class Topics extends React.Component {
   static propTypes = {
-    title: PropTypes.string.isRequired,
     favorite: PropTypes.bool,
     topics: PropTypes.arrayOf(PropTypes.string),
     maxItems: PropTypes.number,
@@ -29,14 +29,14 @@ class Topics extends React.Component {
   }
 
   render() {
-    const { title, topics, favorite, maxItems } = this.props;
+    const { topics, favorite, maxItems } = this.props;
 
     const displayedTopics = this.state.showMore ? topics : topics.slice(0, maxItems);
 
     return (
       <div className="Topics">
         <h4>
-          {title}
+          <FormattedMessage id={favorite ? 'favorite_topics' : 'trending_topics'} defaultMessage={favorite ? 'Favorite topics' : 'Trending topics'} />
         </h4>
         <ul className="Topics__list">
           {displayedTopics.map(topic =>
@@ -47,12 +47,12 @@ class Topics extends React.Component {
         </ul>
         {topics.length > maxItems && !this.state.showMore
           ? <h5 role="presentation" onClick={() => this.changeVisibility(true)}>
-              View more
+            <FormattedMessage id="show_more" defaultMessage="View more" />
           </h5>
           : null}
         {topics.length > maxItems && this.state.showMore
           ? <h5 role="presentation" onClick={() => this.changeVisibility(false)}>
-              View less
+            <FormattedMessage id="show_less" defaultMessage="View less" />
           </h5>
           : null}
       </div>
diff --git a/src/components/Story/Story.js b/src/components/Story/Story.js
index fe3451bc..df3ec290 100644
--- a/src/components/Story/Story.js
+++ b/src/components/Story/Story.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormattedRelative, FormattedDate, FormattedTime } from 'react-intl';
+import { injectIntl, FormattedMessage, FormattedRelative, FormattedDate, FormattedTime } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { Tag, Icon, Popover, Tooltip } from 'antd';
 import { formatter } from 'steem';
@@ -11,8 +11,10 @@ import Topic from '../Button/Topic';
 import PopoverMenu, { PopoverMenuItem } from '../PopoverMenu/PopoverMenu';
 import './Story.less';
 
+@injectIntl
 class Story extends React.Component {
   static propTypes = {
+    intl: PropTypes.shape().isRequired,
     post: PropTypes.shape().isRequired,
     postState: PropTypes.shape().isRequired,
     pendingLike: PropTypes.bool,
@@ -52,6 +54,7 @@ class Story extends React.Component {
 
   render() {
     const {
+      intl,
       post,
       postState,
       pendingLike,
@@ -84,11 +87,14 @@ class Story extends React.Component {
                 {`${followText} ${post.author}`}
               </PopoverMenuItem>
               <PopoverMenuItem key="save">
-                <i className="iconfont icon-collection" />{' '}
-                {postState.isSaved ? 'Unsave post' : 'Save post'}
+                <i className="iconfont icon-collection" />
+                {' '}
+                <FormattedMessage id={postState.isSaved ? 'unsave_post' : 'save_post'} defaultMessage={postState.isSaved ? 'Unsave post' : 'Save post'} />
               </PopoverMenuItem>
               <PopoverMenuItem key="report">
-                <i className="iconfont icon-flag" /> Report post
+                <i className="iconfont icon-flag" />
+                {' '}
+                <FormattedMessage id="report_post" defaultMessage="Report post" />
               </PopoverMenuItem>
             </PopoverMenu>
           }
@@ -103,7 +109,7 @@ class Story extends React.Component {
             <Link to={`/@${post.author}`}>
               <h4>
                 {post.author}
-                <Tooltip title="Reputation score">
+                <Tooltip title={intl.formatMessage({ id: 'reputation_score' })}>
                   <Tag>
                     {formatter.reputation(post.author_reputation)}
                   </Tag>
diff --git a/src/components/Story/StoryFooter.js b/src/components/Story/StoryFooter.js
index 02f16945..38939610 100644
--- a/src/components/Story/StoryFooter.js
+++ b/src/components/Story/StoryFooter.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { injectIntl, FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 import numeral from 'numeral';
 import { take } from 'lodash';
@@ -12,8 +13,10 @@ import ReactionsModal from '../Reactions/ReactionsModal';
 import PayoutDetail from '../PayoutDetail';
 import './StoryFooter.less';
 
+@injectIntl
 class StoryFooter extends React.Component {
   static propTypes = {
+    intl: PropTypes.shape().isRequired,
     post: PropTypes.shape().isRequired,
     postState: PropTypes.shape().isRequired,
     pendingLike: PropTypes.bool,
@@ -27,14 +30,11 @@ class StoryFooter extends React.Component {
     onShareClick: () => {},
   };
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      shareModalVisible: false,
-      shareModalLoading: false,
-      reactionsModalVisible: false,
-    };
-  }
+  state = {
+    shareModalVisible: false,
+    shareModalLoading: false,
+    reactionsModalVisible: false,
+  };
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.postState.isReblogging !== this.props.postState.isReblogging) {
@@ -77,7 +77,7 @@ class StoryFooter extends React.Component {
   })
 
   render() {
-    const { post, postState, pendingLike, onLikeClick } = this.props;
+    const { intl, post, postState, pendingLike, onLikeClick } = this.props;
 
     const payout = calculatePayout(post);
 
@@ -118,11 +118,11 @@ class StoryFooter extends React.Component {
             </span>
           </Tooltip>
           {post.percent_steem_dollars === 0 &&
-            <Tooltip title="100% Steem Power">
+            <Tooltip title={intl.formatMessage({ id: 'reward_option_100', defaultMessage: '100% Steem Power' })}>
               <i className="iconfont icon-flashlight" />
             </Tooltip>}
         </span>
-        <Tooltip title="Like">
+        <Tooltip title={intl.formatMessage({ id: 'like' })}>
           <a role="presentation" className={likeClass} onClick={() => onLikeClick()}>
             {pendingLike ? <Icon type="loading" /> : <i className="iconfont icon-praise_fill" />}
           </a>
@@ -139,14 +139,14 @@ class StoryFooter extends React.Component {
               <div>
                 {upVotesPreview}
                 {upVotesMore}
-                {upVotesPreview.length === 0 && 'No likes yet.'}
+                {upVotesPreview.length === 0 && <FormattedMessage id="no_likes" defaultMessage="No likes yet" />}
               </div>
             }
           >
             {likesValue}
           </Tooltip>
         </span>
-        <Tooltip title="Comment">
+        <Tooltip title={intl.formatMessage({ id: 'comment', defaultMessage: 'Comment' })}>
           <Link
             className="StoryFooter__link"
             to={{
@@ -161,7 +161,10 @@ class StoryFooter extends React.Component {
           {commentsValue}
         </span>
         {post.parent_author === '' && <Tooltip
-          title={postState.isReblogged ? 'You already reblogged this post' : 'Reblog'}
+          title={intl.formatMessage({
+            id: postState.reblogged ? 'reblog_reblogged' : 'reblog',
+            defaultMessage: postState.reblogged ? 'You already reblogged this post' : 'Reblog',
+          })}
         >
           <a role="presentation" className={rebloggedClass} onClick={this.handleShareClick}>
             <i className="iconfont icon-share1 StoryFooter__share" />
@@ -169,14 +172,15 @@ class StoryFooter extends React.Component {
         </Tooltip>}
         {!postState.isReblogged &&
           <Modal
-            title="Reblog this post?"
+            title={intl.formatMessage({ id: 'reblog_modal_title', defaultMessage: 'Reblog this post?' })}
             visible={this.state.shareModalVisible}
             confirmLoading={this.state.shareModalLoading}
-            okText="Reblog"
+            okText={intl.formatMessage({ id: 'reblog', defaultMessage: 'Reblog' })}
+            cancelText={intl.formatMessage({ id: 'cancel', defaultMessage: 'Cancel' })}
             onOk={this.handleShareOk}
             onCancel={this.handleShareCancel}
           >
-            This post will appear on your personal feed. This action <b>cannot</b> be reversed.
+            <FormattedMessage id="reblog_modal_content" defaultMessage="This post will appear on your personal feed. This action cannot be reversed." />
           </Modal>}
         <ReactionsModal
           visible={this.state.reactionsModalVisible}
diff --git a/src/components/Story/StoryFull.js b/src/components/Story/StoryFull.js
index d7f83f87..2db20f90 100644
--- a/src/components/Story/StoryFull.js
+++ b/src/components/Story/StoryFull.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
-import { FormattedRelative, FormattedDate, FormattedTime } from 'react-intl';
+import { injectIntl, FormattedMessage, FormattedRelative, FormattedDate, FormattedTime } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { Tag, Icon, Popover, Tooltip } from 'antd';
 import Lightbox from 'react-image-lightbox';
@@ -13,8 +13,10 @@ import Topic from '../Button/Topic';
 import PopoverMenu, { PopoverMenuItem } from '../PopoverMenu/PopoverMenu';
 import './StoryFull.less';
 
+@injectIntl
 class StoryFull extends React.Component {
   static propTypes = {
+    intl: PropTypes.shape().isRequired,
     post: PropTypes.shape().isRequired,
     postState: PropTypes.shape().isRequired,
     pendingLike: PropTypes.bool,
@@ -90,6 +92,7 @@ class StoryFull extends React.Component {
 
   render() {
     const {
+      intl,
       post,
       postState,
       pendingLike,
@@ -123,7 +126,11 @@ class StoryFull extends React.Component {
         </h1>
         <h3 className="StoryFull__comments_title">
           <a href="#comments">
-            {commentCount} Comments
+            <FormattedMessage
+              id="comments_count"
+              values={{ count: commentCount }}
+              defaultMessage="{count} comments"
+            />
           </a>
         </h3>
         <div className="StoryFull__header">
@@ -133,7 +140,7 @@ class StoryFull extends React.Component {
           <div className="StoryFull__header__text">
             <Link to={`/@${post.author}`}>
               {post.author}
-              <Tooltip title="Reputation score">
+              <Tooltip title={intl.formatMessage({ id: 'reputation_score', defaultMessage: 'Reputation score' })}>
                 <Tag>
                   {formatter.reputation(post.author_reputation)}
                 </Tag>
@@ -162,11 +169,17 @@ class StoryFull extends React.Component {
                   {`${followText} ${post.author}`}
                 </PopoverMenuItem>
                 <PopoverMenuItem key="save">
-                  <i className="iconfont icon-collection" />{' '}
-                  {postState.isSaved ? 'Unsave post' : 'Save post'}
+                  <i className="iconfont icon-collection" />
+                  {' '}
+                  <FormattedMessage
+                    id={postState.isSaved ? 'unsave_post' : 'save_post'}
+                    defaultMessage={postState.isSaved ? 'Unsave post' : 'Save post'}
+                  />
                 </PopoverMenuItem>
                 <PopoverMenuItem key="report">
-                  <i className="iconfont icon-flag" /> Report post
+                  <i className="iconfont icon-flag" />
+                  {' '}
+                  <FormattedMessage id="report_post" defaultMessage="Report post" />
                 </PopoverMenuItem>
               </PopoverMenu>
             }
diff --git a/src/components/TopicSelector.js b/src/components/TopicSelector.js
index 36f8eba3..e6871f5e 100644
--- a/src/components/TopicSelector.js
+++ b/src/components/TopicSelector.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
 import { Popover } from 'antd';
 import PopoverMenu, { PopoverMenuItem } from './PopoverMenu/PopoverMenu';
 import Topic from './Button/Topic';
@@ -52,18 +53,28 @@ class TopicSelector extends React.Component {
             )}
         </div>
         <div className="TopicSelector__sort">
-          Sort by:
+          <FormattedMessage id="sort_by" defaultMessage="Sort by" />
           <Popover
             trigger="click"
             visible={popoverVisible}
             onVisibleChange={this.onVisibleChange}
             content={
               <PopoverMenu bold={bold} onSelect={this.onSelect}>
-                <PopoverMenuItem key="trending">Trending</PopoverMenuItem>
-                <PopoverMenuItem key="created">Created</PopoverMenuItem>
-                <PopoverMenuItem key="active">Active</PopoverMenuItem>
-                <PopoverMenuItem key="hot">Hot</PopoverMenuItem>
-                <PopoverMenuItem key="promoted">Promoted</PopoverMenuItem>
+                <PopoverMenuItem key="trending">
+                  <FormattedMessage id="sort_trending" defaultMessage="Trending" />
+                </PopoverMenuItem>
+                <PopoverMenuItem key="created">
+                  <FormattedMessage id="sort_created" defaultMessage="Created" />
+                </PopoverMenuItem>
+                <PopoverMenuItem key="active">
+                  <FormattedMessage id="sort_active" defaultMessage="Active" />
+                </PopoverMenuItem>
+                <PopoverMenuItem key="hot">
+                  <FormattedMessage id="sort_hot" defaultMessage="Hot" />
+                </PopoverMenuItem>
+                <PopoverMenuItem key="promoted">
+                  <formatMessage id="sort_promoted" defaultMessage="Promoted" />
+                </PopoverMenuItem>
               </PopoverMenu>
             }
           >
diff --git a/src/components/UserHeader.js b/src/components/UserHeader.js
index 4cc2fc00..ed7ee51e 100644
--- a/src/components/UserHeader.js
+++ b/src/components/UserHeader.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { injectIntl } from 'react-intl';
 import { Tag, Tooltip, Popover } from 'antd';
 import { formatter } from 'steem';
 import Avatar from './Avatar';
@@ -9,6 +10,7 @@ import PopoverMenu, { PopoverMenuItem } from './PopoverMenu/PopoverMenu';
 import './UserHeader.less';
 
 const UserHeader = ({
+  intl,
   authenticated,
   username,
   handle,
@@ -26,7 +28,7 @@ const UserHeader = ({
         <div className="UserHeader__row">
           <h2 className="UserHeader__user__username">
             {username}
-            <Tooltip title="Reputation score">
+            <Tooltip title={intl.formatMessage({ id: 'reputation_score', defaultMessage: 'Reputation Score' })}>
               <Tag>
                 {formatter.reputation(userReputation)}
               </Tag>
@@ -35,7 +37,7 @@ const UserHeader = ({
           <div className="UserHeader__user__button">
             {authenticated &&
               (isSameUser
-                ? <Action small text="Edit profile" />
+                ? <Action small text={intl.formatMessage({ id: 'edit_profile', defaultMessage: 'Editr profile' })} />
                 : <FollowButton username={username} />)
             }
           </div>
@@ -64,6 +66,7 @@ const UserHeader = ({
   </div>);
 
 UserHeader.propTypes = {
+  intl: PropTypes.shape().isRequired,
   authenticated: PropTypes.bool.isRequired,
   username: PropTypes.string,
   handle: PropTypes.string,
@@ -83,4 +86,4 @@ UserHeader.defaultProps = {
   isSameUser: false,
 };
 
-export default UserHeader;
+export default injectIntl(UserHeader);
diff --git a/src/components/UserMenu.js b/src/components/UserMenu.js
index 5280304b..bf4f7c3d 100644
--- a/src/components/UserMenu.js
+++ b/src/components/UserMenu.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
 import numeral from 'numeral';
 import { Menu } from 'antd';
 import './UserMenu.less';
@@ -60,26 +61,20 @@ class UserMenu extends React.Component {
             mode="horizontal"
           >
             <Menu.Item key="discussions" className="UserMenu__item">
-              Discussions
+              <FormattedMessage id="discussions" defaultMessage="Discussions" />
               <span className="UserMenu__badge">{discussionsValue}</span>
             </Menu.Item>
             <Menu.Item key="comments" className="UserMenu__item">
-              <strong>
-                Comments
-                <span className="UserMenu__badge">{commentsValue}</span>
-              </strong>
+              <FormattedMessage id="comments" defaultMessage="Comments" />
+              <span className="UserMenu__badge">{commentsValue}</span>
             </Menu.Item>
             <Menu.Item key="followers" className="UserMenu__item">
-              <strong>
-                Followers
-                <span className="UserMenu__badge">{followersValue}</span>
-              </strong>
+              <FormattedMessage id="followers" defaultMessage="Followers" />
+              <span className="UserMenu__badge">{followersValue}</span>
             </Menu.Item>
             <Menu.Item key="followed" className="UserMenu__item">
-              <strong>
-                Following
-                <span className="UserMenu__badge">{followingValue}</span>
-              </strong>
+              <FormattedMessage id="following" defaultMessage="Following" />
+              <span className="UserMenu__badge">{followingValue}</span>
             </Menu.Item>
           </Menu>
         </div>
diff --git a/src/locales/en.json b/src/locales/en.json
index 3adeb590..94db098c 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,66 +1,130 @@
 {
-  "see_more":"See More",
-  "profile":"Profile",
-  "settings":"Settings",
-  "about":"About",
-  "logout":"Log Out",
-  "write":"Write",
-  "drafts":"Drafts",
-  "files":"Files",
-  "bookmarks":"Bookmarks",
-  "empty_bookmarks":"You don't have any story saved.",
-  "trending":"Trending",
-  "hot":"Hot",
-  "payout_time":"Payout Time",
-  "new":"New",
-  "active":"Active",
-  "posts":"Posts",
-  "activity":"Activity",
-  "feed":"Feed",
-  "wallet":"Wallet",
-  "messages":"Messages",
-  "language":"Language",
-  "estimated_value":"Total ≈",
-  "layout":"Layout",
-  "transfer":"Transfer",
-  "reply_to":"Reply to",
-  "see_more_comments":"See More Comments",
-  "empty_user_profile":"This user doesn't have any story published yet.",
-  "empty_user_own_profile":"You didn't publish any stories yet.",
-  "page_not_found":"Page Not Found",
-  "page_not_found_message":"Oops! Looks like you followed a bad link.",
-  "continue":"Continue",
-  "voting_power":"Voting Power",
-  "followers":"Followers",
-  "followed":"Followed",
-  "in":"in",
-  "reblog":"Reblog",
-  "likes":"Likes",
-  "dislikes":"Dislikes",
-  "comments":"Comments",
-  "card":"Card",
-  "list":"List",
-  "login":"Log In",
-  "@tooltip_follow_user":"Follow {username}",
-  "@tooltip_unfollow_user":"Unfollow {username}",
-  "@tooltip_add_fav":"Add in favorites",
-  "@tooltip_remove_fav":"Remove from favorites",
-  "@tooltip_add_bookmark":"Add in bookmarks",
-  "@tooltip_remove_bookmark":"Remove from bookmarks",
-  "next_story":"Next Story",
-  "help":"Help",
-  "search":"Search",
-  "chat":"Chat",
-  "signup":"Sign Up",
-  "team":"Team",
-  "donors":"Donors",
-  "advisors":"Advisors",
-  "contributors":"Contributors",
-  "donate":"Donate",
-  "edit":"Edit",
-  "like":"Like",
-  "comment":"Comment",
-  "by":"by",
-  "page_forbidden":"Page Requires Authentication",
-  "page_forbidden_message":"Oops! Looks like you need to login to use this page."
-}
\ No newline at end of file
+  "hero": "Ensuring compensation for the creators of value",
+  "search": "Search",
+  "search_placeholder": "Search...",
+  "cancel": "Cancel",
+  "confirm": "Confirm",
+  "signup": "Sign up",
+  "login": "Log in",
+  "activity": "Activity",
+  "settings": "Settings",
+  "logout": "Logout",
+  "my_profile": "My profile",
+  "feed": "Feed",
+  "news": "News",
+  "wallet": "Wallet",
+  "bookmarks": "Bookmarks",
+  "bookmarks_empty": "You don't have any story saved.",
+  "notifications": "Notifications",
+  "discussions": "Discussions",
+  "comments": "Comments",
+  "comments_count": "{count} comments",
+  "joined_date": "Joined {date}",
+  "follow": "Follow",
+  "unfollow": "Unfollow",
+  "following": "Following",
+  "unfollowing": "Unfollowing",
+  "followers": "Followers",
+  "follow_username": "Follow {username}",
+  "unfollow_username": "Unfollow {username}",
+  "save_post": "Save post",
+  "unsave_post": "Unsave post",
+  "report_post": "Report post",
+  "add_to_favorites": "Add to favorites",
+  "remove_from_favorites": "Remove from favorites",
+  "like": "Like",
+  "dislike": "Dislike",
+  "comment": "Comment",
+  "comment_placeholder": "Write a comment",
+  "comment_collapsed": "Comment collapsed",
+  "comment_send": "Comment",
+  "comment_send_progress": "Commenting",
+  "reblog": "Reblog",
+  "reblog_reblogged": "You already reblogged this post",
+  "reblog_modal_title": "Reblog this post?",
+  "reblog_modal_content": "This post will appear on your personal feed. This action cannot be reversed.",
+  "write_post": "Write post",
+  "transfer": "Transfer",
+  "message": "Message",
+  "edit_profile": "Edit profile",
+  "reply": "Reply",
+  "show_more": "View more",
+  "show_less": "View less",
+  "language": "Language",
+  "discover_more_people": "Discover More People",
+  "see_all_comments": "See All Comments",
+  "see_all_recommendations": "See All Recommendations",
+  "reputation_score": "Reputation score",
+  "original_poster": "Original poster",
+  "no_likes": "No likes yet",
+  "no_dislikes": "No dislikes",
+  "sort_by": "Sort by",
+  "sort_trending": "Trending",
+  "sort_created": "Created",
+  "sort_active": "Active",
+  "sort_hot": "Hot",
+  "sort_promoted": "Promoted",
+  "sort_best": "Best",
+  "sort_newest": "Newest",
+  "sort_oldest": "Oldest",
+  "trending_topics": "Trending topics",
+  "favorite_topics": "Favorite topics",
+  "interesting_people": "Interesting People",
+  "latest_comments": "Latest Comments",
+  "latest_recommendations": "Latest Recommendations",
+  "new_to_busy": "New to Busy?",
+  "never_written_post": "Never written a post?",
+  "start_now": "Start Now",
+  "select_or_past_image": "Select image or paste it from the clipboard.",
+  "image_uploading": "Uploading your image...",
+  "markdown_supported": "Styling with markdown supported",
+  "title": "Title",
+  "title_placeholder": "Add title",
+  "title_error_empty": "Please enter a title.",
+  "title_error_too_long": "Title can't be longer than 255 characters.",
+  "topics": "Topics",
+  "topics_placeholder": "Add story topics here",
+  "topics_extra": "Separate topics with commas. Only lowercase letters, numbers and hyphen character is permited.",
+  "topics_error_empty": "Please enter topics.",
+  "topics_error_count": "You have to add 1 to 5 topics.",
+  "topics_error_invalid_topic": "Topic {topic} is invalid.",
+  "story_placeholder": "Write your story...",
+  "story_error_empty": "Story content can't be empty.",
+  "editor": "Editor",
+  "preview": "Preview",
+  "reward": "Reward",
+  "reward_option_100": "100% Steem Power",
+  "reward_option_50": "50% SBD and 50% SP",
+  "reward_option_0": "Declined",
+  "like_post": "Like this post",
+  "post_send": "Post",
+  "post_send_progress": "Submitting",
+  "heading_1": "Heading 1",
+  "heading_2": "Heading 2",
+  "heading_3": "Heading 3",
+  "heading_4": "Heading 4",
+  "heading_5": "Heading 5",
+  "heading_6": "Heading 6",
+  "bold": "Add bold",
+  "italic": "Add italic",
+  "quote": "Add quote",
+  "link": "Add link",
+  "image": "Add image",
+  "drafts": "Drafts",
+  "drafts_empty": "You don't have any draft saved",
+  "draft_untitled": "Untitled draft",
+  "draft_delete": "Delete this draft",
+  "payout_limit_reached": "Payout limit reached on this post",
+  "payout_promoted_amount": "Promoted: {amount}",
+  "payout_total_past_payout_amount": "Total Past Payouts: {amount}",
+  "payout_author_payout_amount": "Author Payout: {amount}",
+  "payout_curators_payout_amount": "Curators payout: {amount}",
+  "payout_potential_payout_amount": "Potential Payout: {amount}",
+  "payout_will_release_in_time": "Will release {time}",
+  "payout_declined": "Payout declined",
+  "rank_plankton": "Plankton",
+  "rank_minnow": "Minnow",
+  "rank_dolphin": "Dolphin",
+  "rank_orca": "Orca",
+  "rank_whale": "Whale"
+}
diff --git a/src/post/Write/DraftRow.js b/src/post/Write/DraftRow.js
index 6e08ee07..10c1b303 100644
--- a/src/post/Write/DraftRow.js
+++ b/src/post/Write/DraftRow.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { deleteDraft } from './editorActions';
@@ -23,14 +24,12 @@ class DraftRow extends React.Component {
     body = body.replace(/\r?\n|\r|[\u200B-\u200D\uFEFF]/g, ' ').substring(0, 50);
     let draftTitle = title.length ? title : body;
     draftTitle = draftTitle.trim();
-    if (draftTitle.length === 0) {
-      draftTitle = 'Untitled Draft';
-    }
+
     return (
       <div>
         <Link to={{ pathname: '/write', search: `?draft=${id}` }}>
           <h3>
-            {draftTitle}
+            {draftTitle.length === 0 ? <FormattedMessage id="draft_untitled" defaultMessage="Untitled draft" /> : draftTitle}
           </h3>
         </Link>
         <div>
@@ -40,7 +39,7 @@ class DraftRow extends React.Component {
               this.props.deleteDraft(id);
             }}
           >
-            Delete this draft
+            <FormattedMessage id="draft_delete" defaultMessage="Delete this draft" />
           </a>
         </div>
       </div>
diff --git a/src/post/Write/Drafts.js b/src/post/Write/Drafts.js
index ca562a74..ad0e5a0a 100644
--- a/src/post/Write/Drafts.js
+++ b/src/post/Write/Drafts.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import _ from 'lodash';
 
@@ -21,10 +22,10 @@ class Drafts extends React.Component {
     return (
       <div className="shifted">
         <div className="container">
-          <h1>Drafts</h1>
+          <h1><FormattedMessage id="drafts" defaultMessage="Drafts" /></h1>
           {_.size(draftPosts) === 0 &&
             <h3 className="text-center">
-              You don{"'"}t have any draft saved.
+              <FormattedMessage id="drafts_empty" defaultMessage="You don't have any draft saved" />
             </h3>}
           {_.map(draftPosts, (draft, key) => <DraftRow key={key} data={draft.postData} id={key} />)}
         </div>
diff --git a/src/stories/stories.js b/src/stories/stories.js
index 793c9d28..92463b2c 100644
--- a/src/stories/stories.js
+++ b/src/stories/stories.js
@@ -6,6 +6,7 @@ import { MemoryRouter } from 'react-router';
 import { addDecorator, storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { IntlProvider } from 'react-intl';
+import getTranslations from '../translations';
 import { post, postWithEmbed, postState, notifications } from './data/index';
 import StartNow from '../components/Sidebar/StartNow';
 import Topics from '../components/Sidebar/Topics';
@@ -29,7 +30,7 @@ import '../styles/common.less';
 
 addDecorator(story =>
   (<MemoryRouter initialEntries={['/']}>
-    <IntlProvider locale="en">
+    <IntlProvider locale="en" messages={getTranslations('en')}>
       <div style={{ padding: '40px', background: '#f9f9f9' }}>
         {story()}
       </div>
@@ -73,11 +74,10 @@ storiesOf('Navigation', module)
 storiesOf('Sidebar', module)
   .add('Start now', () => <StartNow />)
   .add('Favorite topics', () =>
-    <Topics favorite title="Favorite topics" topics={['funny', 'history', 'nature']} />,
+    <Topics favorite topics={['funny', 'history', 'nature']} />,
   )
   .add('Trending topics', () =>
     (<Topics
-      title="Trending topics"
       topics={['photography', 'steemit', 'introduceyourself', 'steem', 'story', 'blog']}
     />),
   )


Test patch:
diff --git a/src/components/Sidebar/LatestComments.js b/src/components/Sidebar/LatestComments.js
index 55dc475e..b1741585 100644
--- a/src/components/Sidebar/LatestComments.js
+++ b/src/components/Sidebar/LatestComments.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormattedRelative } from 'react-intl';
+import { FormattedMessage, FormattedRelative } from 'react-intl';
 import { Link } from 'react-router-dom';
 import BodyShort from '../Story/BodyShort';
 import './LatestComments.less';
@@ -33,13 +33,17 @@ const LatestComments = ({ comments }) =>
   (<div className="LatestComments">
     <div className="LatestComments__container">
       <h4 className="LatestComments__title">
-        <i className="iconfont icon-time LatestComments__icon" /> Latest Comments
+        <i className="iconfont icon-time LatestComments__icon" />
+        {' '}
+        <FormattedMessage id="latest_comments" defaultMessage="Latest Comments" />
       </h4>
       <div className="LatestComments__divider" />
       {comments && comments.map(comment => <RenderComment key={comment.id} {...comment} />)}
       <div className="LatestComments__divider" />
       <h4 className="LatestComments__more">
-        <Link to={'/latest-comments'}>See All Comments</Link>
+        <Link to={'/latest-comments'}>
+          <FormattedMessage id="see_all_comments" defaultMessage="See All Comments" />
+        </Link>
       </h4>
     </div>
   </div>);
diff --git a/src/components/Sidebar/LatestRecommendations.js b/src/components/Sidebar/LatestRecommendations.js
index 56f9acfe..8202d411 100644
--- a/src/components/Sidebar/LatestRecommendations.js
+++ b/src/components/Sidebar/LatestRecommendations.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormattedRelative } from 'react-intl';
+import { FormattedMessage, FormattedRelative } from 'react-intl';
 import { Link } from 'react-router-dom';
 import BodyShort from '../Story/BodyShort';
 import './LatestRecommendations.less';
@@ -36,14 +36,17 @@ const LatestRecommendations = ({ posts }) =>
   (<div className="LatestRecommendations">
     <div className="LatestRecommendations__container">
       <h4 className="LatestRecommendations__title">
-        <i className="iconfont icon-flashlight_fill LatestRecommendations__icon" /> Latest
-        Recommendations
+        <i className="iconfont icon-flashlight_fill LatestRecommendations__icon" />
+        {' '}
+        <FormattedMessage id="latest_recommendations" defaultMessage="Latest Recommendations" />
       </h4>
       <div className="LatestRecommendations__divider" />
       {posts && posts.map(post => <RenderRecommendedPost key={post.id} {...post} />)}
       <div className="LatestRecommendations__divider" />
       <h4 className="LatestRecommendations__more">
-        <Link to={'/latest-recommendations'}>See All Recommendations</Link>
+        <Link to={'/latest-recommendations'}>
+          <FormattedMessage id="see_all_recommendations" defaultMessage="See All Recommendations" />
+        </Link>
       </h4>
     </div>
   </div>);
diff --git a/src/stories/__snapshots__/stories.test.js.snap b/src/stories/__snapshots__/stories.test.js.snap
index cf2821d9..fc113c07 100644
--- a/src/stories/__snapshots__/stories.test.js.snap
+++ b/src/stories/__snapshots__/stories.test.js.snap
@@ -99,7 +99,7 @@ exports[`Storyshots Button Followed 1`] = `
     onMouseOut={[Function]}
     onMouseOver={[Function]}
   >
-    Followed
+    Following
   </button>
 </div>
 `;
@@ -139,7 +139,9 @@ exports[`Storyshots Comments Comments 1`] = `
       className="Comments__header"
     >
       <h2>
-        Comments
+        <span>
+          Comments
+        </span>
       </h2>
       <div
         className="Comments__header__sort"
@@ -150,19 +152,25 @@ exports[`Storyshots Comments Comments 1`] = `
           className="active"
           data-type="BEST"
         >
-          Best
+          <span>
+            Best
+          </span>
         </a>
         <a
           className=""
           data-type="NEWEST"
         >
-          Newest
+          <span>
+            Newest
+          </span>
         </a>
         <a
           className=""
           data-type="OLDEST"
         >
-          Oldest
+          <span>
+            Oldest
+          </span>
         </a>
       </div>
     </div>
@@ -198,7 +206,9 @@ exports[`Storyshots Editor Editor 1`] = `
           <span
             className="Editor__label"
           >
-            Title
+            <span>
+              Title
+            </span>
           </span>
         </label>
       </div>
@@ -225,12 +235,12 @@ exports[`Storyshots Editor Editor 1`] = `
                 "ref": [Function],
                 "rules": Array [
                   Object {
-                    "message": "Please enter a title",
+                    "message": "Please enter a title.",
                     "required": true,
                   },
                   Object {
                     "max": 255,
-                    "message": "Title can't be longer than 255 characters",
+                    "message": "Title can't be longer than 255 characters.",
                   },
                 ],
                 "trigger": "onChange",
@@ -238,12 +248,12 @@ exports[`Storyshots Editor Editor 1`] = `
                   Object {
                     "rules": Array [
                       Object {
-                        "message": "Please enter a title",
+                        "message": "Please enter a title.",
                         "required": true,
                       },
                       Object {
                         "max": 255,
-                        "message": "Title can't be longer than 255 characters",
+                        "message": "Title can't be longer than 255 characters.",
                       },
                     ],
                     "trigger": Array [
@@ -281,7 +291,9 @@ exports[`Storyshots Editor Editor 1`] = `
           <span
             className="Editor__label"
           >
-            Topics
+            <span>
+              Topics
+            </span>
           </span>
         </label>
       </div>
@@ -326,7 +338,9 @@ exports[`Storyshots Editor Editor 1`] = `
           <span
             className="Editor__label"
           >
-            Reward
+            <span>
+              Reward
+            </span>
           </span>
         </label>
       </div>
@@ -367,7 +381,11 @@ exports[`Storyshots Editor Editor 1`] = `
                     "leadingName": "upvote",
                     "name": "upvote",
                     "originalProps": Object {
-                      "children": "Upvote this post",
+                      "children": <FormattedMessage
+                        defaultMessage="Like this post"
+                        id="like_post"
+                        values={Object {}}
+                  />,
                       "indeterminate": false,
                       "onChange": [Function],
                       "prefixCls": "ant-checkbox",
@@ -393,7 +411,9 @@ exports[`Storyshots Editor Editor 1`] = `
               />
             </span>
             <span>
-              Upvote this post
+              <span>
+                Like this post
+              </span>
             </span>
           </label>
         </div>
@@ -408,7 +428,10 @@ exports[`Storyshots Editor Editor 1`] = `
         <i
           className="iconfont icon-markdown"
         />
-         Styling with markdown is supported
+         
+        <span>
+          Styling with markdown supported
+        </span>
       </span>
       <div
         className="ant-row ant-form-item Editor__bottom__submit"
@@ -458,7 +481,9 @@ exports[`Storyshots Navigation Sidenav logged 1`] = `
           <i
             className="iconfont icon-mine"
           />
-           My Profile
+          <span>
+            My profile
+          </span>
         </a>
       </li>
       <li>
@@ -471,7 +496,9 @@ exports[`Storyshots Navigation Sidenav logged 1`] = `
           <i
             className="iconfont icon-clock"
           />
-           Feed
+          <span>
+            Feed
+          </span>
         </a>
       </li>
       <li>
@@ -484,7 +511,9 @@ exports[`Storyshots Navigation Sidenav logged 1`] = `
           <i
             className="iconfont icon-headlines"
           />
-           News
+          <span>
+            News
+          </span>
         </a>
       </li>
       <li>
@@ -497,7 +526,9 @@ exports[`Storyshots Navigation Sidenav logged 1`] = `
           <i
             className="iconfont icon-wallet"
           />
-           Wallet
+          <span>
+            Wallet
+          </span>
         </a>
       </li>
     </ul>
@@ -767,7 +798,9 @@ exports[`Storyshots Navigation Topnav unlogged 1`] = `
                 href="/signup"
                 onClick={[Function]}
               >
-                Sign up
+                <span>
+                  Sign up
+                </span>
               </a>
             </li>
             <li
@@ -794,7 +827,9 @@ exports[`Storyshots Navigation Topnav unlogged 1`] = `
               <a
                 href="https://v2.steemconnect.com/oauth2/authorize?client_id=&redirect_uri=&scope="
               >
-                Log in
+                <span>
+                  Log in
+                </span>
               </a>
             </li>
           </ul>
@@ -920,7 +955,9 @@ exports[`Storyshots Profile UserMenu 1`] = `
           style={Object {}}
           title={undefined}
         >
-          Discussions
+          <span>
+            Discussions
+          </span>
           <span
             className="UserMenu__badge"
           >
@@ -938,14 +975,14 @@ exports[`Storyshots Profile UserMenu 1`] = `
           style={Object {}}
           title={undefined}
         >
-          <strong>
+          <span>
             Comments
-            <span
-              className="UserMenu__badge"
-            >
-              21
-            </span>
-          </strong>
+          </span>
+          <span
+            className="UserMenu__badge"
+          >
+            21
+          </span>
         </li>
         <li
           aria-disabled={undefined}
@@ -958,14 +995,14 @@ exports[`Storyshots Profile UserMenu 1`] = `
           style={Object {}}
           title={undefined}
         >
-          <strong>
+          <span>
             Followers
-            <span
-              className="UserMenu__badge"
-            >
-              0
-            </span>
-          </strong>
+          </span>
+          <span
+            className="UserMenu__badge"
+          >
+            0
+          </span>
         </li>
         <li
           aria-disabled={undefined}
@@ -978,14 +1015,14 @@ exports[`Storyshots Profile UserMenu 1`] = `
           style={Object {}}
           title={undefined}
         >
-          <strong>
+          <span>
             Following
-            <span
-              className="UserMenu__badge"
-            >
-              244
-            </span>
-          </strong>
+          </span>
+          <span
+            className="UserMenu__badge"
+          >
+            244
+          </span>
         </li>
       </ul>
     </div>
@@ -1006,7 +1043,9 @@ exports[`Storyshots Sidebar Favorite topics 1`] = `
     className="Topics"
   >
     <h4>
-      Favorite topics
+      <span>
+        Favorite topics
+      </span>
     </h4>
     <ul
       className="Topics__list"
@@ -1064,7 +1103,10 @@ exports[`Storyshots Sidebar Interesting People 1`] = `
         <i
           className="iconfont icon-group InterestingPeople__icon"
         />
-         Interesting People
+         
+        <span>
+          Interesting People
+        </span>
       </h4>
       <div
         className="InterestingPeople__divider"
@@ -1217,7 +1259,9 @@ exports[`Storyshots Sidebar Interesting People 1`] = `
           href="/latest-comments"
           onClick={[Function]}
         >
-          Discover More People
+          <span>
+            Discover More People
+          </span>
         </a>
       </h4>
     </div>
@@ -1246,7 +1290,10 @@ exports[`Storyshots Sidebar Latest Comments 1`] = `
         <i
           className="iconfont icon-time LatestComments__icon"
         />
-         Latest Comments
+         
+        <span>
+          Latest Comments
+        </span>
       </h4>
       <div
         className="LatestComments__divider"
@@ -1386,7 +1433,9 @@ exports[`Storyshots Sidebar Latest Comments 1`] = `
           href="/latest-comments"
           onClick={[Function]}
         >
-          See All Comments
+          <span>
+            See All Comments
+          </span>
         </a>
       </h4>
     </div>
@@ -1415,7 +1464,10 @@ exports[`Storyshots Sidebar Latest Recommendations 1`] = `
         <i
           className="iconfont icon-flashlight_fill LatestRecommendations__icon"
         />
-         Latest Recommendations
+         
+        <span>
+          Latest Recommendations
+        </span>
       </h4>
       <div
         className="LatestRecommendations__divider"
@@ -1569,7 +1621,9 @@ exports[`Storyshots Sidebar Latest Recommendations 1`] = `
           href="/latest-recommendations"
           onClick={[Function]}
         >
-          See All Recommendations
+          <span>
+            See All Recommendations
+          </span>
         </a>
       </h4>
     </div>
@@ -1592,7 +1646,9 @@ exports[`Storyshots Sidebar Start now 1`] = `
     <h3
       className="StartNow__title"
     >
-      Never wrote a post?
+      <span>
+        Never written a post?
+      </span>
     </h3>
     <a
       href="/write"
@@ -1601,7 +1657,9 @@ exports[`Storyshots Sidebar Start now 1`] = `
       <button
         className="StartNow__button"
       >
-        Start Now
+        <span>
+          Start Now
+        </span>
       </button>
     </a>
   </div>
@@ -1621,7 +1679,9 @@ exports[`Storyshots Sidebar Trending topics 1`] = `
     className="Topics"
   >
     <h4>
-      Trending topics
+      <span>
+        Trending topics
+      </span>
     </h4>
     <ul
       className="Topics__list"
@@ -1676,7 +1736,9 @@ exports[`Storyshots Sidebar Trending topics 1`] = `
       onClick={[Function]}
       role="presentation"
     >
-      View more
+      <span>
+        View more
+      </span>
     </h5>
   </div>
 </div>
@@ -1705,8 +1767,9 @@ exports[`Storyshots Story Full story 1`] = `
       <a
         href="#comments"
       >
-        58
-         Comments
+        <span>
+          58 comments
+        </span>
       </a>
     </h3>
     <div
@@ -1963,8 +2026,9 @@ exports[`Storyshots Story Full story with embed 1`] = `
       <a
         href="#comments"
       >
-        58
-         Comments
+        <span>
+          58 comments
+        </span>
       </a>
     </h3>
     <div
@@ -2805,7 +2869,9 @@ exports[`Storyshots Topic selector Topic selector 1`] = `
     <div
       className="TopicSelector__sort"
     >
-      Sort by:
+      <span>
+        Sort by
+      </span>
       <span
         className="TopicSelector__sort__current"
         onBlur={undefined}