From b6d5c24af45d1cec969ecae3fd4932d2febdbc37 Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 6 May 2024 17:01:22 +1000 Subject: [PATCH] feat: added updated group icon add the ability to set custom icon sizes for some buttons --- _locales/en/messages.json | 2 +- ts/components/buttons/PanelIconButton.tsx | 18 ++++++++++++++---- .../overlay/OverlayRightPanelSettings.tsx | 4 ++-- ts/components/icon/Icons.tsx | 6 ++++++ .../overlay/choose-action/ActionRow.tsx | 11 ++++++++--- .../choose-action/OverlayChooseAction.tsx | 1 + 6 files changed, 32 insertions(+), 10 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index d5f0664fc..039bcc770 100644 --- a/_locales/en/messages.json +++ b/_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", diff --git a/ts/components/buttons/PanelIconButton.tsx b/ts/components/buttons/PanelIconButton.tsx index b7a065a71..a8f9ce632 100644 --- a/ts/components/buttons/PanelIconButton.tsx +++ b/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 { - 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 ( - + diff --git a/ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings.tsx b/ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings.tsx index 52582c50d..907448e6c 100644 --- a/ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings.tsx +++ b/ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings.tsx @@ -282,7 +282,7 @@ export const OverlayRightPanelSettings = () => { {showUpdateGroupNameButton && ( { void showUpdateGroupNameByConvoId(selectedConvoKey); @@ -315,7 +315,7 @@ export const OverlayRightPanelSettings = () => { {showUpdateGroupMembersButton && ( { void showUpdateGroupMembersByConvoId(selectedConvoKey); diff --git a/ts/components/icon/Icons.tsx b/ts/components/icon/Icons.tsx index 918d98e31..01f82feca 100644 --- a/ts/components/icon/Icons.tsx +++ b/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 = { 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, diff --git a/ts/components/leftpane/overlay/choose-action/ActionRow.tsx b/ts/components/leftpane/overlay/choose-action/ActionRow.tsx index e294182ce..1cbccbd9a 100644 --- a/ts/components/leftpane/overlay/choose-action/ActionRow.tsx +++ b/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 ( - + { title={window.i18n('createGroup')} ariaLabel={window.i18n('createConversationNewGroup')} iconType={'group'} + iconSize={36} onClick={openCreateGroup} dataTestId="chooser-new-group" />