feat: added updated group icon

add the ability to set custom icon sizes for some buttons

_locales/en/messages.json

@@ -306,7 +306,7 @@
   "messageRequestAcceptedOurs": "You have accepted $name$'s message request",
   "messageRequestAcceptedOursNoName": "You have accepted the message request",
   "messageRequestPending": "Your message request is currently pending",
-  "messageRequestPendingDescription": "You will be able to send voice messages and attachments once the recipient has approved this message request.",
+  "messageRequestPendingDescription": "You will be able to send voice messages and attachments once the recipient has approved this message request",
   "messageRequests": "Message Requests",
   "messageRequestsAcceptDescription": "Sending a message to this user will automatically accept their message request and reveal your Account ID.",
   "messagesHeader": "Conversations",

ts/components/buttons/PanelIconButton.tsx

@@ -1,10 +1,11 @@
 import styled from 'styled-components';
-import { SessionIcon, SessionIconType } from '../icon';
+import { SessionIcon, SessionIconSize, SessionIconType } from '../icon';
 import { PanelButton, PanelButtonProps, PanelButtonText, StyledContent } from './PanelButton';
 
 interface PanelIconButton extends Omit<PanelButtonProps, 'children'> {
-  iconType: SessionIconType;
   text: string;
+  iconType: SessionIconType;
+  iconSize?: SessionIconSize;
   subtitle?: string;
   color?: string;
 }
@@ -16,13 +17,22 @@ const IconContainer = styled.div`
 `;
 
 export const PanelIconButton = (props: PanelIconButton) => {
-  const { iconType, text, subtitle, color, disabled = false, onClick, dataTestId } = props;
+  const {
+    text,
+    subtitle,
+    iconType,
+    iconSize,
+    color,
+    disabled = false,
+    onClick,
+    dataTestId,
+  } = props;
 
   return (
     <PanelButton disabled={disabled} onClick={onClick} dataTestId={dataTestId}>
       <StyledContent disabled={disabled}>
         <IconContainer>
-          <SessionIcon iconType={iconType} iconColor={color} iconSize="large" />
+          <SessionIcon iconType={iconType} iconColor={color} iconSize={iconSize || 'large'} />
         </IconContainer>
         <PanelButtonText text={text} subtitle={subtitle} color={color} />
       </StyledContent>

ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings.tsx

@@ -282,7 +282,7 @@ export const OverlayRightPanelSettings = () => {
         <PanelButtonGroup style={{ margin: '0 var(--margins-lg)' }}>
           {showUpdateGroupNameButton && (
             <PanelIconButton
-              iconType={'group'}
+              iconType={'groupMembers'}
               text={isPublic ? window.i18n('editGroup') : window.i18n('editGroupName')}
               onClick={() => {
                 void showUpdateGroupNameByConvoId(selectedConvoKey);
@@ -315,7 +315,7 @@ export const OverlayRightPanelSettings = () => {
 
           {showUpdateGroupMembersButton && (
             <PanelIconButton
-              iconType={'group'}
+              iconType={'groupMembers'}
               text={window.i18n('groupMembers')}
               onClick={() => {
                 void showUpdateGroupMembersByConvoId(selectedConvoKey);

ts/components/icon/Icons.tsx

@@ -35,6 +35,7 @@ export type SessionIconType =
   | 'fullscreen'
   | 'gear'
   | 'group'
+  | 'groupMembers'
   | 'hangup'
   | 'image'
   | 'info'
@@ -227,6 +228,11 @@ export const icons: Record<SessionIconType, IconProps> = {
     ratio: 1,
   },
   group: {
+    path: 'M19.068 11.117c3.073 0 5.58-2.491 5.58-5.559 0-3.067-2.5-5.558-5.58-5.558s-5.58 2.49-5.58 5.558c0 3.068 2.5 5.559 5.58 5.559Zm0-8.872A3.33 3.33 0 0 1 22.4 5.564a3.33 3.33 0 0 1-3.332 3.32 3.33 3.33 0 0 1-3.332-3.32 3.33 3.33 0 0 1 3.332-3.32ZM19.067 12.941c-4.366 0-8.058 2.335-9.243 5.53-.276.74.253 1.529 1.045 1.529.489 0 .899-.32 1.068-.778.86-2.329 3.725-4.042 7.13-4.042s6.27 1.719 7.13 4.042c.169.453.58.778 1.068.778.792 0 1.32-.79 1.045-1.528-1.186-3.196-4.877-5.53-9.243-5.53ZM30.557 10.893c2.456 0 4.456-1.993 4.456-4.445 0-2.451-2-4.438-4.456-4.438-2.455 0-4.455 1.992-4.455 4.438 0 2.446 2 4.445 4.455 4.445Zm0-7.092a2.66 2.66 0 0 1 2.664 2.653 2.657 2.657 0 0 1-2.664 2.653 2.66 2.66 0 0 1-2.663-2.653 2.66 2.66 0 0 1 2.663-2.653ZM7.452 10.893c2.455 0 4.456-1.993 4.456-4.445 0-2.451-2-4.438-4.456-4.438-2.456 0-4.456 1.992-4.456 4.438 0 2.446 2 4.445 4.456 4.445Zm0-7.092a2.66 2.66 0 0 1 2.663 2.653 2.657 2.657 0 0 1-2.663 2.653 2.66 2.66 0 0 1-2.663-2.653 2.66 2.66 0 0 1 2.663-2.653ZM37.94 16.77c-.95-2.552-3.9-4.422-7.389-4.422-1.584 0-3.056.386-4.281 1.047a10.3 10.3 0 0 1 1.517 1.254 7.57 7.57 0 0 1 2.764-.515c2.72 0 5.012 1.371 5.698 3.23.135.363.46.62.854.62a.899.899 0 0 0 .837-1.22v.006ZM11.802 13.44c-1.242-.683-2.736-1.086-4.355-1.086-3.489 0-6.439 1.87-7.388 4.422a.897.897 0 0 0 .837 1.22c.387 0 .719-.257.854-.621.685-1.859 2.978-3.23 5.697-3.23 1.04 0 2.012.202 2.86.549.45-.46.95-.874 1.495-1.254Z',
+    viewBox: '0 0 38 20',
+    ratio: 1,
+  },
+  groupMembers: {
     path: 'M10.39 12.447a6.35 6.35 0 0 0 3.468-1.027 6.128 6.128 0 0 0 2.298-2.736 5.96 5.96 0 0 0 .355-3.521 6.051 6.051 0 0 0-1.71-3.12A6.29 6.29 0 0 0 11.606.375a6.382 6.382 0 0 0-3.607.348 6.211 6.211 0 0 0-2.8 2.246 5.992 5.992 0 0 0-1.05 3.387 6.03 6.03 0 0 0 1.832 4.304 6.327 6.327 0 0 0 4.41 1.786Zm0-10.568c.907 0 1.793.263 2.547.755a4.503 4.503 0 0 1 1.69 2.01 4.38 4.38 0 0 1 .26 2.587 4.447 4.447 0 0 1-1.255 2.292 4.62 4.62 0 0 1-2.348 1.226 4.69 4.69 0 0 1-2.65-.255 4.563 4.563 0 0 1-2.057-1.65 4.403 4.403 0 0 1-.773-2.487 4.429 4.429 0 0 1 1.344-3.165A4.647 4.647 0 0 1 10.39 1.88ZM13.792 13.975H6.83c-.837 0-1.665.16-2.438.474a6.375 6.375 0 0 0-2.066 1.35A6.204 6.204 0 0 0 .948 17.82a6.084 6.084 0 0 0-.48 2.382v1.616a.44.44 0 0 0 .135.318.462.462 0 0 0 .325.131h.741a.465.465 0 0 0 .322-.133.443.443 0 0 0 .133-.316v-1.616a4.54 4.54 0 0 1 1.379-3.249 4.764 4.764 0 0 1 3.327-1.346h6.962c1.248 0 2.445.484 3.327 1.346a4.54 4.54 0 0 1 1.378 3.249v1.426c0 .119.048.232.134.316a.465.465 0 0 0 .322.133h.74a.465.465 0 0 0 .325-.131.443.443 0 0 0 .135-.318v-1.426a6.084 6.084 0 0 0-.48-2.382 6.203 6.203 0 0 0-1.377-2.02 6.375 6.375 0 0 0-2.066-1.351 6.496 6.496 0 0 0-2.438-.474ZM16.713 1.754a.358.358 0 0 0 .26.138 4.628 4.628 0 0 1 3.06 1.398c.801.83 1.247 1.927 1.247 3.067 0 1.14-.446 2.237-1.246 3.067-.8.83-1.895 1.33-3.06 1.398a.35.35 0 0 0-.261.134 8.159 8.159 0 0 1-.77.869.345.345 0 0 0-.088.37.348.348 0 0 0 .12.16c.056.04.123.063.191.068a6.204 6.204 0 0 0 2.6-.323 6.206 6.206 0 0 0 3.31-2.657 5.968 5.968 0 0 0 .773-4.115 6.058 6.058 0 0 0-2.128-3.63A6.328 6.328 0 0 0 16.15.287a.361.361 0 0 0-.19.07.348.348 0 0 0-.13.356c.016.065.05.125.1.171.282.271.544.562.783.87ZM20.112 13.975h-.327a.422.422 0 0 0-.251.055.396.396 0 0 0-.055.656c.243.24.471.496.683.764a.41.41 0 0 0 .306.161 4.742 4.742 0 0 1 3.088 1.466 4.527 4.527 0 0 1 1.241 3.125v1.426c0 .12.049.233.135.318a.465.465 0 0 0 .325.131h.74a.465.465 0 0 0 .323-.133.443.443 0 0 0 .133-.316v-1.426a6.079 6.079 0 0 0-.476-2.378 6.2 6.2 0 0 0-1.373-2.019 6.368 6.368 0 0 0-2.06-1.351 6.489 6.489 0 0 0-2.432-.48Z',
     viewBox: '0 0 27 23',
     ratio: 1.17,

ts/components/leftpane/overlay/choose-action/ActionRow.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { Flex } from '../../../basic/Flex';
-import { SessionIcon, SessionIconType } from '../../../icon';
+import { SessionIcon, SessionIconSize, SessionIconType } from '../../../icon';
 
 const StyledActionRow = styled.button`
   border: none;
@@ -50,17 +50,22 @@ type ActionRowProps = {
   title: string;
   ariaLabel: string;
   iconType: SessionIconType;
+  iconSize?: number | SessionIconSize;
   onClick: () => void;
   dataTestId: string;
 };
 
 export function ActionRow(props: ActionRowProps) {
-  const { title, ariaLabel, iconType, onClick, dataTestId } = props;
+  const { title, ariaLabel, iconType, iconSize, onClick, dataTestId } = props;
 
   return (
     <StyledActionRow onClick={onClick} data-testid={dataTestId} aria-label={ariaLabel}>
       <StyledIcon>
-        <SessionIcon iconType={iconType} iconSize="large" iconColor="var(--text-primary-color)" />
+        <SessionIcon
+          iconType={iconType}
+          iconSize={iconSize || 'large'}
+          iconColor="var(--text-primary-color)"
+        />
       </StyledIcon>
       <Flex
         container={true}

ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx

@@ -78,6 +78,7 @@ export const OverlayChooseAction = () => {
           title={window.i18n('createGroup')}
           ariaLabel={window.i18n('createConversationNewGroup')}
           iconType={'group'}
+          iconSize={36}
           onClick={openCreateGroup}
           dataTestId="chooser-new-group"
         />