add crown icon for closed group admins (#2084)

images/crown.svg

@@ -1 +0,0 @@
-<svg height="512pt" viewBox="0 -92 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m419.25 277.976562h-326.5c-4.988281 0-9.648438-2.464843-12.457031-6.585937-43.078125-63.171875-46.382813-184.691406-46.632813-202.730469-.015625-.707031-.023437-1.421875-.023437-2.132812 0-8.316406 6.734375-15.0625 15.050781-15.078125h.03125c8.300781 0 15.046875 6.714843 15.078125 15.019531 0 .101562.003906.992188.039063 2.570312 1.328124 42.902344 36.644531 77.390626 79.863281 77.390626 44.058593 0 79.902343-35.84375 79.902343-79.902344 0-8.328125 6.753907-15.078125 15.078126-15.078125h34.636718c8.328125 0 15.078125 6.75 15.078125 15.078125 0 44.058594 35.847657 79.902344 79.90625 79.902344 43.257813 0 78.597657-34.550782 79.867188-77.507813.027343-1.507813.035156-2.351563.035156-2.449219.03125-8.308594 6.773437-15.023437 15.078125-15.023437h.027344c8.316406.015625 15.050781 6.761719 15.050781 15.078125 0 .714844-.007813 1.425781-.019531 2.136718-.253906 18.035157-3.558594 139.558594-46.632813 202.730469-2.808593 4.117188-7.472656 6.582031-12.457031 6.582031zm0 0" fill="#fff780"/><path d="m463.308594 51.449219c-.007813 0-.015625 0-.027344 0-8.300781 0-15.046875 6.714843-15.078125 15.019531 0 .101562-.003906.945312-.035156 2.453125-1.269531 42.953125-36.609375 77.507813-79.867188 77.507813-44.058593 0-79.902343-35.84375-79.902343-79.902344 0-8.328125-6.753907-15.078125-15.078126-15.078125h-17.316406v226.523437h163.246094c4.988281 0 9.648438-2.464844 12.457031-6.582031 43.078125-63.171875 46.382813-184.695313 46.632813-202.730469.015625-.707031.023437-1.421875.023437-2.132812-.003906-8.316406-6.738281-15.0625-15.054687-15.078125zm0 0" fill="#ffc02e"/><path d="m256 0c-26.863281 0-48.71875 21.855469-48.71875 48.71875s21.855469 48.714844 48.71875 48.714844 48.71875-21.851563 48.71875-48.714844-21.855469-48.71875-48.71875-48.71875zm0 0" fill="#ffc02e"/><path d="m256.003906 0v97.4375c26.863282-.003906 48.714844-21.855469 48.714844-48.71875s-21.855469-48.71484375-48.714844-48.71875zm0 0" fill="#ffa73b"/><path d="m48.71875 37.597656c-26.863281 0-48.71875 21.855469-48.71875 48.71875 0 26.863282 21.855469 48.71875 48.71875 48.71875s48.714844-21.855468 48.714844-48.71875c0-26.863281-21.851563-48.71875-48.714844-48.71875zm0 0" fill="#ffc02e"/><path d="m463.28125 37.597656c-26.863281 0-48.714844 21.855469-48.714844 48.71875 0 26.859375 21.851563 48.714844 48.714844 48.714844s48.71875-21.855469 48.71875-48.714844c0-26.863281-21.855469-48.71875-48.71875-48.71875zm0 0" fill="#ffa73b"/><path d="m419.25 327.441406h-326.5c-8.328125 0-15.078125-6.75-15.078125-15.078125v-44.964843h356.65625v44.964843c0 8.328125-6.75 15.078125-15.078125 15.078125zm0 0" fill="#ffc02e"/><path d="m256.003906 327.441406h163.246094c8.328125 0 15.078125-6.75 15.078125-15.078125v-44.964843h-178.324219zm0 0" fill="#ffa73b"/></svg>

js/background.js

@@ -42,7 +42,6 @@
   preload([
     'alert-outline.svg',
     'check.svg',
-    'crown.svg',
     'error.svg',
     'file-gradient.svg',
     'file.svg',

stylesheets/_avatar.scss

@@ -17,25 +17,6 @@ $borderAvatarColor: unquote(
   }
 }
 
-.module-avatar__icon--crown-wrapper {
-  position: absolute;
-  bottom: 0%;
-  right: 12%;
-  height: 21px;
-  width: 21px;
-  transform: translate(25%, 25%);
-  padding: 9%;
-  background-color: $color-white;
-  border-radius: 50%;
-  filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.3));
-}
-
-.module-avatar__icon--crown {
-  @include color-svg('../images/crown.svg', #ffb000);
-  height: 100%;
-  width: 100%;
-}
-
 .module-avatar__icon-closed .module-avatar--28,
 .module-avatar--28 {
   height: 28px;
@@ -101,10 +82,6 @@ $borderAvatarColor: unquote(
   }
 }
 
-.module-avatar__icon--crown-wrapper {
-  background-color: $color-gray-75;
-}
-
 .module-avatar__icon-closed {
   .module-avatar:last-child {
     position: absolute;

stylesheets/_session_left_pane.scss

@@ -87,34 +87,6 @@ $session-compose-margin: 20px;
     height: 100vh;
   }
 
-  &__sections-container {
-    height: 100vh;
-    flex-shrink: 0;
-    width: 80px;
-    overflow-x: hidden;
-    display: inline-flex;
-    flex-direction: column;
-
-    border-right: var(--border-session);
-
-    .module-avatar,
-    .session-icon-button {
-      cursor: pointer;
-      padding: 30px;
-
-      &:nth-last-child(2) {
-        margin: auto auto 0px auto;
-        opacity: 1 !important;
-        /* Hide theme icon until light theme is ready */
-      }
-
-      &:first-child {
-        padding: 0;
-        margin: 30px auto;
-      }
-    }
-  }
-
   &__header {
     display: flex;
     flex-direction: row;

ts/components/MemberListItem.tsx

@@ -1,12 +1,23 @@
 import React from 'react';
 import classNames from 'classnames';
-import { Avatar, AvatarSize } from './avatar/Avatar';
+import { Avatar, AvatarSize, CrownIcon } from './avatar/Avatar';
 import { Constants } from '../session';
 import { SessionIcon } from './icon';
 import { useConversationUsernameOrShorten } from '../hooks/useParamSelector';
+import styled from 'styled-components';
 
-const AvatarItem = (props: { memberPubkey: string }) => {
+const AvatarContainer = styled.div`
-  return <Avatar size={AvatarSize.XS} pubkey={props.memberPubkey} />;
+  position: relative;
+`;
+
+const AvatarItem = (props: { memberPubkey: string; isAdmin: boolean }) => {
+  const { memberPubkey, isAdmin } = props;
+  return (
+    <AvatarContainer>
+      <Avatar size={AvatarSize.XS} pubkey={memberPubkey} />
+      {isAdmin && <CrownIcon />}
+    </AvatarContainer>
+  );
 };
 
 export const MemberListItem = (props: {
@@ -14,10 +25,11 @@ export const MemberListItem = (props: {
   isSelected: boolean;
   // this bool is used to make a zombie appear with less opacity than a normal member
   isZombie?: boolean;
+  isAdmin?: boolean; // if true,  we add a small crown on top of their avatar
   onSelect?: (pubkey: string) => void;
   onUnselect?: (pubkey: string) => void;
 }) => {
-  const { isSelected, pubkey, isZombie, onSelect, onUnselect } = props;
+  const { isSelected, pubkey, isZombie, isAdmin, onSelect, onUnselect } = props;
 
   const memberName = useConversationUsernameOrShorten(pubkey);
 
@@ -31,7 +43,7 @@ export const MemberListItem = (props: {
     >
       <div className="session-member-item__info">
         <span className="session-member-item__avatar">
-          <AvatarItem memberPubkey={pubkey} />
+          <AvatarItem memberPubkey={pubkey} isAdmin={isAdmin || false} />
         </span>
         <span className="session-member-item__name">{memberName}</span>
       </div>

ts/components/avatar/Avatar.tsx

@@ -10,6 +10,8 @@ import {
 import { AvatarPlaceHolder } from './AvatarPlaceHolder/AvatarPlaceHolder';
 import { ClosedGroupAvatar } from './AvatarPlaceHolder/ClosedGroupAvatar';
 import { useDisableDrag } from '../../hooks/useDisableDrag';
+import styled from 'styled-components';
+import { SessionIcon } from '../icon';
 
 export enum AvatarSize {
   XS = 28,
@@ -38,6 +40,31 @@ const Identicon = (props: Props) => {
   return <AvatarPlaceHolder diameter={size} name={userName} pubkey={pubkey} />;
 };
 
+const CrownWrapper = styled.div`
+  position: absolute;
+  display: flex;
+  bottom: 0%;
+  right: 12%;
+  height: 20px;
+  width: 20px;
+  transform: translate(25%, 25%);
+  color: #f7c347;
+  background: var(--color-inbox-background);
+  border-radius: 50%;
+  filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.3));
+
+  align-items: center;
+  justify-content: center;
+`;
+
+export const CrownIcon = () => {
+  return (
+    <CrownWrapper>
+      <SessionIcon iconSize={'small'} iconType="crown" iconPadding="1px 0 0 0 " />
+    </CrownWrapper>
+  );
+};
+
 const NoImage = (
   props: Pick<Props, 'forcedName' | 'size' | 'pubkey' | 'onAvatarClick'> & {
     isClosedGroup: boolean;

ts/components/conversation/message/message-content/MessageAvatar.tsx

@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { MessageRenderingProps } from '../../../../models/messageType';
 import { updateUserDetailsModal } from '../../../../state/ducks/modalDialog';
 import { getMessageAvatarProps } from '../../../../state/selectors/conversations';
-import { Avatar, AvatarSize } from '../../../avatar/Avatar';
+import { Avatar, AvatarSize, CrownIcon } from '../../../avatar/Avatar';
 // tslint:disable: use-simple-attributes
 
 export type MessageAvatarSelectorProps = Pick<
@@ -68,11 +68,7 @@ export const MessageAvatar = (props: Props) => {
         onAvatarClick={(!isPublic && onMessageAvatarClick) || undefined}
         pubkey={authorPhoneNumber}
       />
-      {isPublic && isSenderAdmin && (
+      {isSenderAdmin && <CrownIcon />}
-        <div className="module-avatar__icon--crown-wrapper">
-          <div className="module-avatar__icon--crown" />
-        </div>
-      )}
     </div>
   );
 };

ts/components/dialog/OnionStatusPathDialog.tsx

@@ -151,8 +151,9 @@ export const ActionPanelOnionStatusLight = (props: {
   isSelected: boolean;
   handleClick: () => void;
   dataTestId?: string;
+  id: string;
 }) => {
-  const { isSelected, handleClick, dataTestId } = props;
+  const { isSelected, handleClick, dataTestId, id } = props;
 
   const onionPathsCount = useSelector(getOnionPathsCount);
   const firstPathLength = useSelector(getFirstOnionPathLength);
@@ -181,6 +182,7 @@ export const ActionPanelOnionStatusLight = (props: {
       noScale={true}
       isSelected={isSelected}
       dataTestId={dataTestId}
+      id={id}
     />
   );
 };

ts/components/dialog/UpdateGroupMembersDialog.tsx

@@ -21,29 +21,31 @@ type Props = {
   conversationId: string;
 };
 
+/**
+ * Admins are always put first in the list of group members.
+ * Also, admins have a little crown on their avatar.
+ */
 const ClassicMemberList = (props: {
   convoId: string;
   selectedMembers: Array<string>;
-  showAdmins?: boolean; // if true, admins of this convo will be put at the top of the list and greyed
   onSelect: (m: string) => void;
   onUnselect: (m: string) => void;
 }) => {
-  const { onSelect, convoId, onUnselect, selectedMembers, showAdmins } = props;
+  const { onSelect, convoId, onUnselect, selectedMembers } = props;
   const weAreAdmin = useWeAreAdmin(convoId);
   const convoProps = useConversationPropsById(convoId);
   if (!convoProps) {
     throw new Error('MemberList needs convoProps');
   }
   let currentMembers = convoProps.members || [];
-  if (showAdmins) {
+  const { groupAdmins } = convoProps;
-    const { groupAdmins } = convoProps;
+  currentMembers = currentMembers.sort(m => (groupAdmins?.includes(m) ? -1 : 0));
-    currentMembers = currentMembers.sort(m => (groupAdmins?.includes(m) ? -1 : 0));
-  }
 
   return (
     <>
-      {currentMembers.map((member: string) => {
+      {currentMembers.map(member => {
         const isSelected = (weAreAdmin && selectedMembers.includes(member)) || false;
+        const isAdmin = groupAdmins?.includes(member);
 
         return (
           <MemberListItem
@@ -52,6 +54,7 @@ const ClassicMemberList = (props: {
             onSelect={onSelect}
             onUnselect={onUnselect}
             key={member}
+            isAdmin={isAdmin}
           />
         );
       })}
@@ -244,7 +247,6 @@ export const UpdateGroupMembersDialog = (props: Props) => {
           onSelect={onAdd}
           onUnselect={onRemove}
           selectedMembers={membersToKeepWithUpdate}
-          showAdmins={true}
         />
       </div>
       <ZombiesList convoId={conversationId} />

ts/components/icon/Icons.tsx

@@ -16,6 +16,7 @@ export type SessionIconType =
   | 'circlePlus'
   | 'circleElipses'
   | 'contacts'
+  | 'crown'
   | 'delete'
   | 'ellipses'
   | 'emoji'
@@ -185,6 +186,12 @@ export const icons = {
     viewBox: '0 2.5 24 20',
     ratio: 1,
   },
+  crown: {
+    path:
+      'M462.3,130.5c-26.7,0-48.5,21.8-48.5,48.5c0,12.9,5,24.5,13.2,33.2c-14.6,16.3-35.7,26.6-59.3,26.6c-1.4,0-2.7,0-4.1-0.1c-36.3-1.8-66.2-28.1-73.7-62.7c8.9-8.8,14.5-21,14.5-34.5c0-0.8,0-1.7-0.1-2.5c-0.2-3.2-0.6-6.4-1.4-9.4	c0-0.1,0-0.2-0.1-0.2c-5.3-20.7-24-36-46.2-36.4c-0.3,0-0.5,0-0.8,0v0c0,0,0,0,0,0c-26.7,0-48.5,21.8-48.5,48.5c0,13.5,5.5,25.7,14.5,34.5c-7.7,35.8-39.6,62.8-77.7,62.8c-23.5,0-44.7-10.3-59.3-26.6c8.2-8.7,13.2-20.4,13.2-33.2c0-26.7-21.8-48.5-48.5-48.5S1.2,152.2,1.2,179c0,23.2,16.3,42.6,38.1,47.4c5.2,42.6,16.1,96.3,39.2,132.9h0V404c0,8.3,6.7,15,15,15H256h162.5c8.3,0,15-6.7,15-15v-44.8h0c5.6-8.8,10.5-18.7,14.7-29.1c13.3-32.8,20.6-71.5,24.5-103.7c21.8-4.8,38.1-24.2,38.1-47.4C510.8,152.2,489.1,130.5,462.3,130.5z',
+    viewBox: '0 0 512 512',
+    ratio: 1,
+  },
   ellipses: {
     path:
       'M30,16c4.411,0,8-3.589,8-8s-3.589-8-8-8s-8,3.589-8,8S25.589,16,30,16z M30,22c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S34.411,22,30,22z M30,44c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S34.411,44,30,44z',

ts/components/icon/SessionIcon.tsx

@@ -149,7 +149,7 @@ const SessionSvg = (props: {
   backgroundColor?: string;
   iconPadding?: string;
 }) => {
-  const colorSvg = props.iconColor || 'var(--colors-text)';
+  const colorSvg = props.iconColor || 'var(--color-text)';
   const pathArray = props.path instanceof Array ? props.path : [props.path];
   const propsToPick = {
     width: props.width,

ts/components/icon/SessionIconButton.tsx

@@ -11,6 +11,7 @@ interface SProps extends SessionIconProps {
   isHidden?: boolean;
   margin?: string;
   dataTestId?: string;
+  id?: string;
 }
 
 const SessionIconButtonInner = React.forwardRef<HTMLDivElement, SProps>((props, ref) => {
@@ -29,6 +30,7 @@ const SessionIconButtonInner = React.forwardRef<HTMLDivElement, SProps>((props,
     borderRadius,
     iconPadding,
     margin,
+    id,
   } = props;
   const clickHandler = (e: React.MouseEvent<HTMLDivElement>) => {
     if (props.onClick) {
@@ -42,6 +44,7 @@ const SessionIconButtonInner = React.forwardRef<HTMLDivElement, SProps>((props,
       className={classNames('session-icon-button', iconSize, isSelected ? 'no-opacity' : '')}
       role="button"
       ref={ref}
+      id={id}
       onClick={clickHandler}
       style={{ display: isHidden ? 'none' : 'flex', margin: margin ? margin : '' }}
       data-testid={props.dataTestId}

ts/components/leftpane/ActionsPanel.tsx

@@ -50,6 +50,7 @@ import { DraggableCallContainer } from '../calling/DraggableCallContainer';
 import { IncomingCallDialog } from '../calling/IncomingCallDialog';
 import { SessionIconButton } from '../icon';
 import { SessionToastContainer } from '../SessionToastContainer';
+import { LeftPaneSectionContainer } from './LeftPaneSectionContainer';
 
 const Section = (props: { type: SectionType }) => {
   const ourNumber = useSelector(getOurNumber);
@@ -141,6 +142,7 @@ const Section = (props: { type: SectionType }) => {
           dataTestId="onion-status-section"
           handleClick={handleClick}
           isSelected={isSelected}
+          id={'onion-path-indicator-led-id'}
         />
       );
     default:
@@ -314,10 +316,7 @@ export const ActionsPanel = () => {
       <ModalContainer />
 
       <CallContainer />
-      <div
+      <LeftPaneSectionContainer data-testid="leftpane-section-container">
-        className="module-left-pane__sections-container"
-        data-testid="leftpane-section-container"
-      >
         <Section type={SectionType.Profile} />
         <Section type={SectionType.Message} />
         <Section type={SectionType.Contact} />
@@ -327,7 +326,7 @@ export const ActionsPanel = () => {
 
         <Section type={SectionType.PathIndicator} />
         <Section type={SectionType.Moon} />
-      </div>
+      </LeftPaneSectionContainer>
     </>
   );
 };

ts/components/leftpane/LeftPaneSectionContainer.tsx

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+
+export const LeftPaneSectionContainer = styled.div`
+  width: 80px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-right: var(--border-session);
+
+  .session-icon-button {
+    padding: 30px 0;
+  }
+
+  .module-avatar {
+    height: 80px;
+    display: flex;
+    align-items: center;
+  }
+
+  // this is not ideal but it seems that nth-0last-child does not work
+  #onion-path-indicator-led-id {
+    margin: auto auto 0px auto;
+  }
+`;

ts/components/leftpane/overlay/SessionJoinableDefaultRooms.tsx

@@ -39,7 +39,7 @@ const SessionJoinableRoomAvatar = (props: JoinableRoomProps) => {
         if (isCancelled) {
           return;
         }
-        void downloadPreviewOpenGroupV2(parsedInfos)
+        downloadPreviewOpenGroupV2(parsedInfos)
           .then(base64 => {
             if (isCancelled) {
               return;

ts/hooks/useParamSelector.ts

@@ -59,7 +59,7 @@ export function useConversationsUsernameOrFull(pubkeys: Array<string>) {
         return window.i18n('you');
       }
       const convo = state.conversations.conversationLookup[pubkey];
-      return convo?.profileName || convo?.name || pubkey;
+      return `"${convo?.profileName}"` || `"${convo?.name}"` || pubkey;
     });
   });
 }