avatar: Make all avatars (rounded) squares, not circles.

Fixes zulip#3398.  Zulip displays avatars as squares with rounded corners,
not circles, throughout the app on all platforms.  Among other
reasons, many avatar images don't work well when cropped to a circle;
among them many logos used for integrations, and even our own avatars
for Reminder Bot and its friends.

Importantly, we don't just tweak a prop at each call site: we
actually take out the code for the "circle" case.  In general, when
we decide we're not going to do things a certain way, leaving the old
no-longer-used code around causes confusion for anyone reading it;
and as this issue illustrates (compare 9dc8f09, fixing zulip#205),
it can lead to silently re-introducing the behavior later.

src/account-info/AccountDetails.js

@@ -44,7 +44,6 @@ class AccountDetails extends PureComponent<Props, void> {
             <UserAvatar
               avatarUrl={getAvatarFromUser(user, realm, AVATAR_SIZE)}
               size={AVATAR_SIZE}
-              shape="circle"
             />
           </View>
           <View style={componentStyles.statusWrapper}>

src/common/GroupAvatar.js

@@ -20,7 +20,7 @@ const styles = StyleSheet.create({
 type Props = {
   names: string,
   size: number,
-  shape: string,
+  shape: 'rounded' | 'square',
   children?: React$Node,
   onPress?: () => void,
 };
@@ -32,7 +32,7 @@ type Props = {
  *
  * @prop names - The name of one or more users, used to extract their initials.
  * @prop size - Sets width and height in pixels.
- * @prop shape - One of 'square', 'rounded', 'circle'.
+ * @prop [shape]
  * @prop children - If provided, will render inside the component body.
  * @prop onPress - Event fired on pressing the component.
  */
@@ -47,8 +47,7 @@ export default class GroupAvatar extends PureComponent<Props> {
     const frameSize = {
       height: size,
       width: size,
-      borderRadius:
-        shape === 'rounded' ? size / 8 : shape === 'circle' ? size / 2 : shape === 'square' ? 0 : 0,
+      borderRadius: shape === 'rounded' ? size / 8 : 0,
       backgroundColor: colorHashFromString(names),
     };
     const textSize = {

src/common/OwnAvatar.js

@@ -22,7 +22,7 @@ class OwnAvatar extends PureComponent<Props> {
   render() {
     const { user, size, realm } = this.props;
     const fullAvatarUrl = getAvatarFromUser(user, realm);
-    return <UserAvatar avatarUrl={fullAvatarUrl} size={size} shape="circle" />;
+    return <UserAvatar avatarUrl={fullAvatarUrl} size={size} />;
   }
 }
 

src/common/UserAvatar.js

@@ -8,7 +8,7 @@ import Touchable from './Touchable';
 type Props = {
   avatarUrl: string,
   size: number,
-  shape: string,
+  shape: 'rounded' | 'square',
   children?: React$Node,
   onPress?: () => void,
 };
@@ -18,7 +18,7 @@ type Props = {
  *
  * @prop avatarUrl - Absolute or relative url to an avatar image.
  * @prop size - Sets width and height in pixels.
- * @prop shape - One of 'square', 'rounded', 'circle'.
+ * @prop [shape] - 'rounded' (default) means a square with rounded corners.
  * @prop [children] - If provided, will render inside the component body.
  * @prop [onPress] - Event fired on pressing the component.
  */
@@ -29,8 +29,7 @@ export default class UserAvatar extends PureComponent<Props> {
 
   render() {
     const { avatarUrl, children, size, shape, onPress } = this.props;
-    const borderRadius =
-      shape === 'rounded' ? size / 8 : shape === 'circle' ? size / 2 : shape === 'square' ? 0 : 0;
+    const borderRadius = shape === 'rounded' ? size / 8 : 0;
     const style = {
       height: size,
       width: size,

src/common/UserAvatarWithPresence.js

@@ -23,7 +23,7 @@ type Props = {|
   email: string,
   size: number,
   realm: string,
-  shape: 'square' | 'rounded' | 'circle',
+  shape: 'rounded' | 'square',
   onPress?: () => void,
 |};
 
@@ -34,7 +34,7 @@ type Props = {|
  * @prop [email] - User's' email address, to calculate Gravatar URL if not given `avatarUrl`.
  * @prop [size] - Sets width and height in pixels.
  * @prop [realm] - Current realm url, used if avatarUrl is relative.
- * @prop [shape] - One of 'square', 'rounded', 'circle'.
+ * @prop [shape] - 'rounded' (default) means a square with rounded corners.
  * @prop [onPress] - Event fired on pressing the component.
  */
 class UserAvatarWithPresence extends PureComponent<Props> {