looks like cropping works correctly

css/base.css

@@ -1041,8 +1041,8 @@ i.search {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
-  width: 7rem;
-  height: 9rem;
+  width: 8rem;
+  height: 10rem;
   margin-left: 0.5rem;
   font-size: 4.5rem;
   padding: 0;
@@ -1067,14 +1067,14 @@ i.search {
 
 .avatar-upload .avatar-box {
   position: relative;
-  width: 7rem;
-  height: 7rem;
+  width: 8rem;
+  height: 8rem;
 }
 
 .avatar-upload .avatar-box > .material-icons {
   position: relative;
   font-size: 4rem;
-  line-height: 7rem;
+  line-height: 8rem;
   vertical-align: middle;
 }
 
@@ -1093,17 +1093,17 @@ i.search {
   border: 1px dashed #999;
   font-size: 1rem;
   flex-shrink: 0;
-  width: 7rem;
-  height: 7rem;
+  width: 8rem;
+  height: 8rem;
   overflow: hidden;
   color: #999;
-  line-height: 7rem;
+  line-height: 8rem;
   border-radius: 50%;
 }
 
 .avatar-upload .preview {
-  width: 7rem;
-  height: 7rem;
+  width: 8rem;
+  height: 8rem;
   overflow: hidden;
   border-radius: 50%;
 }

src/i18n/en.json

@@ -7,7 +7,10 @@
   "action_more": "More",
   "action_report_chat": "Report Conversation",
   "archived_contacts": "Archived contacts ({count})",
+  "badge_danger": "Untrustworthy",
   "badge_owner": "owner",
+  "badge_staff": "Staff-managed",
+  "badge_verified": "Verified/official",
   "badge_you": "you",
   "block_contact_warning": "Are you sure you want to block this contact?",
   "blocked_contacts_link": "Blocked contacts ({count})",
@@ -105,6 +108,7 @@
   "menu_item_info": "Info",
   "menu_item_member_delete": "Remove",
   "menu_item_mute": "Mute",
+  "menu_item_restore_topic": "Restore",
   "menu_item_send_retry": "Retry",
   "menu_item_unblock": "Unblock",
   "menu_item_unmute": "Unmute",
@@ -150,6 +154,7 @@
   "sidepanel_title_archive": "Archived Chats",
   "sidepanel_title_blocked": "Blocked Chats",
   "sidepanel_title_cred": "Confirm Credentials",
+  "sidepanel_title_crop": "Drag to Adjust",
   "sidepanel_title_login": "Sign In",
   "sidepanel_title_newtpk": "Start New Chat",
   "sidepanel_title_register": "Create Account",

src/views/avatar-crop-view.jsx

@@ -5,14 +5,6 @@ import { FormattedMessage } from 'react-intl';
 import Cropper from '../widgets/cropper.jsx';
 import { imageCrop } from '../lib/blob-helpers.js';
 
-/*
-crop: {
-  id: 'sidepanel_title_crop',
-  description: 'Sidepanel title for AvatarCropView.',
-  defaultMessage: 'Drag to Adjust'
-},
-*/
-
 export default class AvatarCropView extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -30,10 +22,10 @@ export default class AvatarCropView extends React.PureComponent {
   }
 
   // Cut out in image coordinates and desired scale factor.
-  handleChange(top, left, width, height, scale) {
+  handleChange(left, top, width, height, scale) {
     this.setState({
-      top: top,
       left: left,
+      top: top,
       width: width,
       height: height,
       scale: scale
@@ -41,9 +33,10 @@ export default class AvatarCropView extends React.PureComponent {
   }
 
   handleSubmit() {
-    console.log(this.state);
-    imageCrop(this.props.mime, this.props.avatar, this.state.top,
-      this.state.left, this.state.width, this.state.height, this.state.scale,
+    imageCrop(this.props.mime, this.props.avatar,
+      this.state.left, this.state.top,
+      this.state.width, this.state.height,
+      this.state.scale,
       (mime, blob, width, height) => {
         this.props.onSubmit(mime, blob, width, height);
       },

src/widgets/cropper.jsx

@@ -89,6 +89,16 @@ export default class Cropper extends React.Component {
       originX: this.originX - panX,
       originY: this.originY - panY,
     });
+
+    // Pass cut out coordinates to caller.
+    const left = (this.originX - panX) * zoom - this.originX;
+    const top = (this.originY - panY) * zoom - this.originY;
+    this.props.onChange(
+      (left + this.cutoutRect.left - this.bBoxRect.left) / zoom,
+      (top + this.cutoutRect.top - this.bBoxRect.top) / zoom,
+      this.cutoutRect.width / zoom,
+      this.cutoutRect.height / zoom,
+      zoom);
   }
 
   // Check if new location is within the limits.
@@ -233,13 +243,6 @@ export default class Cropper extends React.Component {
     document.body.style['userSelect'] = '';
 
     this.positionAll(this.state.panX, this.state.panY, this.state.zoom);
-    // Pass cut out coordinates to caller.
-    this.props.onChange(
-      -this.state.panX + this.cutoutRect.left - this.bBoxRect.left,
-      -this.state.panY + this.cutoutRect.top - this.bBoxRect.top,
-      this.cutoutRect.width / this.state.zoom,
-      this.cutoutRect.height / this.state.zoom,
-      this.state.zoom);
   }
 
   render() {