Improvements to Avatar rendering

images/icons/v2/group-outline-20.svg

@@ -1 +0,0 @@
-<svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m16.149 7.961a3.5 3.5 0 1 0 -5.8 0 3.994 3.994 0 0 0 -.607.251 3.494 3.494 0 1 0 -5.893 3.749 4.074 4.074 0 0 0 -2.849 3.872v1.167h1.5v-1.167a2.586 2.586 0 0 1 2.583-2.583h3.334a2.586 2.586 0 0 1 2.583 2.583v1.167h1.5v-1.167a4.068 4.068 0 0 0 -2.853-3.87 3.483 3.483 0 0 0 .603-1.963 3.326 3.326 0 0 0 -.035-.349 2.553 2.553 0 0 1 1.368-.4h3.334a2.586 2.586 0 0 1 2.583 2.582v1.167h1.5v-1.167a4.074 4.074 0 0 0 -2.851-3.872zm-9.399 4.039a2 2 0 1 1 2-2 2 2 0 0 1 -2 2zm6.5-4a2 2 0 1 1 2-2 2 2 0 0 1 -2 2z"/></svg>

images/icons/v2/group-outline-24.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>group-outline-24</title><path d="M19.513,9.942a4.25,4.25,0,1,0-6.538-.013,4.749,4.749,0,0,0-1.336.618,4.242,4.242,0,1,0-7.152,4.395A4.744,4.744,0,0,0,1,19.5V21H2.5V19.5a3.254,3.254,0,0,1,3.25-3.25h4A3.254,3.254,0,0,1,13,19.5V21h1.5V19.5a4.744,4.744,0,0,0-3.487-4.558A4.21,4.21,0,0,0,12,12.25c0-.029-.008-.055-.008-.083a3.259,3.259,0,0,1,2.258-.917h4A3.254,3.254,0,0,1,21.5,14.5V16H23V14.5A4.744,4.744,0,0,0,19.513,9.942ZM7.75,15a2.75,2.75,0,1,1,2.75-2.75A2.75,2.75,0,0,1,7.75,15Zm8.5-5A2.75,2.75,0,1,1,19,7.25,2.75,2.75,0,0,1,16.25,10Z"/></svg>

images/icons/v2/group-outline-40.svg

@@ -1 +0,0 @@
-<svg height="40" viewBox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg"><path d="m29 16.75a6.508 6.508 0 0 1 6.5 6.5v.75h1.5v-.75a8 8 0 0 0 -6.7-7.885 6.5 6.5 0 1 0 -8.6 0 7.941 7.941 0 0 0 -2.711.971 6.5 6.5 0 1 0 -9.289 9.029 8 8 0 0 0 -6.7 7.885v.75h1.5v-.75a6.508 6.508 0 0 1 6.5-6.5h6a6.508 6.508 0 0 1 6.5 6.5v.75h1.5v-.75a8 8 0 0 0 -6.7-7.885 6.468 6.468 0 0 0 1.508-7.771 6.453 6.453 0 0 1 3.192-.844zm-15 8.75a5 5 0 1 1 5-5 5 5 0 0 1 -5 5zm7-15a5 5 0 1 1 5 5 5 5 0 0 1 -5-5z"/></svg>

images/icons/v2/note-24.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>note-24</title><path d="M18,3.5a.55.55,0,0,1,.55.55V20a.55.55,0,0,1-.55.55H6.05A.55.55,0,0,1,5.5,20V4.05a.55.55,0,0,1,.55-.55H18M18,2H6.05A2.05,2.05,0,0,0,4,4.05V20A2.05,2.05,0,0,0,6.05,22H18A2.05,2.05,0,0,0,20,20V4.05A2.05,2.05,0,0,0,18,2ZM17,6.5H7V8H17Zm0,3H7V11H17Zm0,3H7V14H17Zm-2,3H7V17h8Z"/></svg>

images/note-28.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"><path d="m21 3h-14a2 2 0 0 0 -2 2v18a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-18a2 2 0 0 0 -2-2zm-4 16.5h-10v-1.5h10zm4-3.5h-14v-1.5h14zm0-3.5h-14v-1.5h14zm0-3.5h-14v-1.5h14z"/></svg>

stylesheets/_modules.scss

@@ -3149,7 +3149,7 @@ button.module-conversation-details__action-button {
       border-radius: 5px;
       border: 2px solid transparent;
       display: flex;
-      padding: 16px 24px;
+      padding: 8px 24px;
       user-select: none;
       width: 100%;
 
@@ -9172,13 +9172,13 @@ button.module-image__border-overlay:focus {
 .module-group-v2-change--icon {
   @include light-theme {
     @include color-svg(
-      '../images/icons/v2/group-outline-20.svg',
+      '../images/icons/v2/group-outline-24.svg',
       $color-gray-60
     );
   }
   @include dark-theme {
     @include color-svg(
-      '../images/icons/v2/group-outline-20.svg',
+      '../images/icons/v2/group-outline-24.svg',
       $color-gray-05
     );
   }
@@ -9215,13 +9215,13 @@ button.module-image__border-overlay:focus {
 .module-group-v1-migration--icon {
   @include light-theme {
     @include color-svg(
-      '../images/icons/v2/group-outline-20.svg',
+      '../images/icons/v2/group-outline-24.svg',
       $color-gray-60
     );
   }
   @include dark-theme {
     @include color-svg(
-      '../images/icons/v2/group-outline-20.svg',
+      '../images/icons/v2/group-outline-24.svg',
       $color-gray-05
     );
   }
@@ -9737,14 +9737,14 @@ $contact-modal-padding: 18px;
 
   @include light-theme {
     @include color-svg(
-      '../images/icons/v2/group-outline-20.svg',
+      '../images/icons/v2/group-outline-24.svg',
       $color-gray-75
     );
   }
 
   @include dark-theme {
     @include color-svg(
-      '../images/icons/v2/group-outline-20.svg',
+      '../images/icons/v2/group-outline-24.svg',
       $color-gray-15
     );
   }

stylesheets/components/Avatar.scss

@@ -71,7 +71,6 @@
   &__label {
     align-items: center;
     display: flex;
-    font-weight: bold;
     justify-content: center;
     text-align: center;
     text-transform: uppercase;
@@ -91,15 +90,15 @@
     }
 
     &--group {
-      @include avatar-icon('../images/icons/v2/group-outline-20.svg');
-      height: 60%;
-      width: 60%;
+      @include avatar-icon('../images/icons/v2/group-outline-24.svg');
+      height: 62%;
+      width: 62%;
     }
 
     &--note-to-self {
-      @include avatar-icon('../images/note-28.svg');
-      height: 70%;
-      width: 70%;
+      @include avatar-icon('../images/icons/v2/note-24.svg');
+      height: 62%;
+      width: 62%;
     }
   }
 
@@ -108,4 +107,13 @@
   }
 
   @include avatar-colors();
+
+  &--undefined {
+    background-color: $color-gray-15;
+    color: $color-gray-75;
+
+    &--icon {
+      background-color: $color-gray-75;
+    }
+  }
 }

stylesheets/components/AvatarPreview.scss

@@ -36,7 +36,7 @@
   }
 
   &__group {
-    -webkit-mask: url('../images/icons/v2/group-outline-40.svg') no-repeat
+    -webkit-mask: url('../images/icons/v2/group-outline-24.svg') no-repeat
       center;
     -webkit-mask-size: 70%;
     height: 100%;

stylesheets/components/ProfileEditor.scss

@@ -59,13 +59,31 @@
   }
 
   &__divider {
-    border-color: $color-gray-15;
     border-style: solid;
+    border-bottom: none;
+
+    @include light-theme {
+      border-color: $color-gray-15;
+    }
+
+    @include dark-theme {
+      border-color: $color-gray-75;
+    }
   }
 
   &__info {
     @include font-body-2;
-    color: $color-gray-60;
     margin: 16px 0;
+
+    @include light-theme {
+      color: $color-gray-60;
+    }
+    @include dark-theme {
+      color: $color-gray-25;
+    }
+
+    a {
+      text-decoration: none;
+    }
   }
 }

ts/components/Avatar.tsx

@@ -14,7 +14,7 @@ import { Spinner } from './Spinner';
 
 import { getInitials } from '../util/getInitials';
 import { LocalizerType } from '../types/Util';
-import { AvatarColors, AvatarColorType } from '../types/Colors';
+import { AvatarColorType } from '../types/Colors';
 import * as log from '../logging/log';
 import { assert } from '../util/assert';
 import { shouldBlurAvatar } from '../util/shouldBlurAvatar';
@@ -70,7 +70,7 @@ export const Avatar: FunctionComponent<Props> = ({
   acceptedMessageRequest,
   avatarPath,
   className,
-  color = AvatarColors[0],
+  color,
   conversationType,
   i18n,
   isMe,
@@ -170,7 +170,7 @@ export const Avatar: FunctionComponent<Props> = ({
       <div
         aria-hidden="true"
         className="module-Avatar__label"
-        style={{ fontSize: Math.ceil(size * 0.5) }}
+        style={{ fontSize: Math.ceil(size * 0.45) }}
       >
         {initials}
       </div>

ts/components/AvatarIconEditor.stories.tsx

@@ -38,7 +38,7 @@ story.add('Group Icon', () => (
   <AvatarIconEditor
     {...createProps({
       avatarData: createAvatarData({
-        color: AvatarColors[3],
+        color: AvatarColors[8],
         icon: GroupAvatarIcons[0],
       }),
     })}

ts/components/AvatarIconEditor.tsx

@@ -64,7 +64,11 @@ export const AvatarIconEditor = ({
         i18n={i18n}
       />
       <hr className="AvatarEditor__divider" />
-      <AvatarColorPicker i18n={i18n} onColorSelected={onColorSelected} />
+      <AvatarColorPicker
+        i18n={i18n}
+        onColorSelected={onColorSelected}
+        selectedColor={avatarData.color}
+      />
       <AvatarModalButtons
         hasChanges={hasChanges}
         i18n={i18n}

ts/components/AvatarLightbox.tsx

@@ -5,7 +5,6 @@ import React from 'react';
 
 import { AvatarColorType } from '../types/Colors';
 import { AvatarPreview } from './AvatarPreview';
-import { IMAGE_JPEG } from '../types/MIME';
 import { Lightbox } from './Lightbox';
 import { LocalizerType } from '../types/Util';
 
@@ -26,20 +25,6 @@ export const AvatarLightbox = ({
   isGroup,
   onClose,
 }: PropsType): JSX.Element => {
-  if (avatarPath) {
-    return (
-      <Lightbox
-        // We don't know that the avatar is a JPEG, but any image `contentType` will cause
-        //  it to be rendered as an image, which is what we want.
-        contentType={IMAGE_JPEG}
-        close={onClose}
-        i18n={i18n}
-        isViewOnce={false}
-        objectURL={avatarPath}
-      />
-    );
-  }
-
   return (
     <Lightbox
       contentType={undefined}
@@ -50,12 +35,15 @@ export const AvatarLightbox = ({
     >
       <AvatarPreview
         avatarColor={avatarColor}
+        avatarPath={avatarPath}
         conversationTitle={conversationTitle}
         i18n={i18n}
         isGroup={isGroup}
         style={{
           fontSize: '16em',
           height: '2em',
+          maxHeight: 512,
+          maxWidth: 512,
           width: '2em',
         }}
       />

ts/components/AvatarPreview.tsx

@@ -178,6 +178,7 @@ export const AvatarPreview = ({
             type="button"
           />
         )}
+        {isEditable && <div className="AvatarPreview__upload" />}
       </div>
     </div>
   );

ts/components/ProfileEditor.tsx

@@ -416,13 +416,14 @@ export const ProfileEditor = ({
           avatarValue={avatarBuffer}
           conversationTitle={getFullNameText()}
           i18n={i18n}
+          isEditable
           onAvatarLoaded={handleAvatarLoaded}
           onClick={() => {
             setEditState(EditState.BetterAvatar);
           }}
           style={{
-            height: 96,
-            width: 96,
+            height: 80,
+            width: 80,
           }}
         />
 

ts/components/conversationList/CreateNewGroupButton.tsx

@@ -5,7 +5,6 @@ import React, { CSSProperties, FunctionComponent } from 'react';
 
 import { BaseConversationListItem } from './BaseConversationListItem';
 import { LocalizerType } from '../../types/Util';
-import { AvatarColors } from '../../types/Colors';
 
 type PropsType = {
   i18n: LocalizerType;
@@ -20,7 +19,6 @@ export const CreateNewGroupButton: FunctionComponent<PropsType> = React.memo(
     return (
       <BaseConversationListItem
         acceptedMessageRequest={false}
-        color={AvatarColors[0]}
         conversationType="group"
         headerName={title}
         i18n={i18n}