Visual bug fixes for v1.29

ts/components/Avatar.md

@@ -3,19 +3,49 @@
 ```jsx
 <util.ConversationContext theme={util.theme} ios={util.ios}>
   <Avatar
-    size={28}
-    color="pink"
-    name="John Smith"
+    size={80}
+    color="blue"
+    avatarPath={util.gifObjectUrl}
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={52}
+    color="blue"
     avatarPath={util.gifObjectUrl}
     conversationType="direct"
     i18n={util.i18n}
   />
   <Avatar
     size={28}
-    color="pink"
-    name="Puppies"
+    color="blue"
     avatarPath={util.gifObjectUrl}
-    conversationType="group"
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+  <hr />
+  <Avatar
+    size={80}
+    color="blue"
+    avatarPath={util.gifObjectUrl}
+    conversationType="direct"
+    onClick={() => console.log('onClick')}
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={52}
+    color="blue"
+    avatarPath={util.gifObjectUrl}
+    conversationType="direct"
+    onClick={() => console.log('onClick')}
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={28}
+    color="blue"
+    avatarPath={util.gifObjectUrl}
+    conversationType="direct"
+    onClick={() => console.log('onClick')}
     i18n={util.i18n}
   />
 </util.ConversationContext>
@@ -39,13 +69,6 @@
     conversationType="direct"
     i18n={util.i18n}
   />
-  <Avatar
-    size={28}
-    color="red"
-    name="Puppies"
-    conversationType="group"
-    i18n={util.i18n}
-  />
 </util.ConversationContext>
 ```
 
@@ -63,6 +86,59 @@
 </util.ConversationContext>
 ```
 
+### Letters
+
+```jsx
+<util.ConversationContext theme={util.theme} ios={util.ios}>
+  <Avatar
+    size={80}
+    color="blue"
+    name="One"
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={52}
+    color="blue"
+    name="One"
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={28}
+    color="blue"
+    name="One"
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+  <hr />
+  <Avatar
+    size={80}
+    color="blue"
+    name="One"
+    conversationType="direct"
+    onClick={() => console.log('onClick')}
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={52}
+    color="blue"
+    name="One"
+    conversationType="direct"
+    onClick={() => console.log('onClick')}
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={28}
+    color="blue"
+    name="One"
+    conversationType="direct"
+    onClick={() => console.log('onClick')}
+    i18n={util.i18n}
+  />
+</util.ConversationContext>
+```
+
 ### Note to self
 
 ```jsx

ts/components/ConversationListItem.tsx

@@ -6,6 +6,7 @@ import { MessageBody } from './conversation/MessageBody';
 import { Timestamp } from './conversation/Timestamp';
 import { ContactName } from './conversation/ContactName';
 import { TypingAnimation } from './conversation/TypingAnimation';
+import { cleanId } from './_util';
 
 import { LocalizerType } from '../types/Util';
 
@@ -33,10 +34,6 @@ export type PropsData = {
   };
 };
 
-export function cleanId(id: string): string {
-  return id.replace(/[^\u0020-\u007e\u00a0-\u00ff]/g, '_');
-}
-
 type PropsHousekeeping = {
   i18n: LocalizerType;
   style?: Object;

ts/components/LeftPane.tsx

@@ -3,7 +3,6 @@ import { AutoSizer, List } from 'react-virtualized';
 import { debounce } from 'lodash';
 
 import {
-  cleanId,
   ConversationListItem,
   PropsData as ConversationListItemPropsType,
 } from './ConversationListItem';
@@ -12,6 +11,7 @@ import {
   SearchResults,
 } from './SearchResults';
 import { LocalizerType } from '../types/Util';
+import { cleanId } from './_util';
 
 export interface PropsType {
   conversations?: Array<ConversationListItemPropsType>;

ts/components/SearchResults.tsx

@@ -11,11 +11,11 @@ import { Intl } from './Intl';
 import { Emojify } from './conversation/Emojify';
 import { Spinner } from './Spinner';
 import {
-  cleanId,
   ConversationListItem,
   PropsData as ConversationListItemPropsType,
 } from './ConversationListItem';
 import { StartNewConversation } from './StartNewConversation';
+import { cleanId } from './_util';
 
 import { LocalizerType } from '../types/Util';
 

ts/components/ShortcutGuide.tsx

@@ -21,8 +21,8 @@ type KeyType =
   | 'A'
   | 'C'
   | 'D'
-  | 'E'
   | 'F'
+  | 'J'
   | 'L'
   | 'M'
   | 'P'
@@ -84,7 +84,7 @@ const NAVIGATION_SHORTCUTS: Array<ShortcutType> = [
   },
   {
     description: 'Keyboard--open-emoji-chooser',
-    keys: ['commandOrCtrl', 'shift', 'E'],
+    keys: ['commandOrCtrl', 'shift', 'J'],
   },
   {
     description: 'Keyboard--open-sticker-chooser',

ts/components/_util.ts

@@ -0,0 +1,5 @@
+// A separate file so this doesn't get picked up by StyleGuidist over real components
+
+export function cleanId(id: string): string {
+  return id.replace(/[^\u0020-\u007e\u00a0-\u00ff]/g, '_');
+}

ts/components/conversation/Image.tsx

@@ -162,7 +162,6 @@ export class Image extends React.Component<Props> {
             alt={i18n('imageCaptionIconAlt')}
           />
         ) : null}
-        {overlay}
         {closeButton ? (
           <button
             onClick={(e: React.MouseEvent<{}>) => {
@@ -199,6 +198,7 @@ export class Image extends React.Component<Props> {
             {overlayText}
           </div>
         ) : null}
+        {overlay}
       </div>
     );
   }

ts/components/emoji/EmojiButton.tsx

@@ -94,7 +94,7 @@ export const EmojiButton = React.memo(
             return;
           }
 
-          if (ctrlOrCommand && shiftKey && (key === 'e' || key === 'E')) {
+          if (ctrlOrCommand && shiftKey && (key === 'j' || key === 'J')) {
             event.stopPropagation();
             event.preventDefault();