From 903cfcb61358a848c83a6f18cba05737ebcc71b9 Mon Sep 17 00:00:00 2001 From: William Grant Date: Wed, 12 Jun 2024 14:28:41 +1000 Subject: [PATCH] fix: added skinny brand icon instead of messing with ratios --- ts/components/SessionQRCode.tsx | 2 +- ts/components/dialog/edit-profile/components.tsx | 4 ++-- ts/components/icon/Icons.tsx | 6 ++++++ ts/hooks/useIconToImageURL.tsx | 2 +- 4 files changed, 10 insertions(+), 4 deletions(-) diff --git a/ts/components/SessionQRCode.tsx b/ts/components/SessionQRCode.tsx index b64bf7447..edc1e59b5 100644 --- a/ts/components/SessionQRCode.tsx +++ b/ts/components/SessionQRCode.tsx @@ -22,9 +22,9 @@ export type SessionQRCodeProps = { id: string; value: string; size: number; - hasLogo?: QRCodeLogoProps; backgroundColor?: string; foregroundColor?: string; + hasLogo?: QRCodeLogoProps; logoImage?: string; logoSize?: number; ariaLabel?: string; diff --git a/ts/components/dialog/edit-profile/components.tsx b/ts/components/dialog/edit-profile/components.tsx index 47754acf9..df4d100f9 100644 --- a/ts/components/dialog/edit-profile/components.tsx +++ b/ts/components/dialog/edit-profile/components.tsx @@ -7,8 +7,8 @@ import { SpacerSM } from '../../basic/Text'; import { SessionIconButton } from '../../icon'; const qrLogoProps: QRCodeLogoProps = { - iconType: 'brand', - iconSize: 40, + iconType: 'brandThin', + iconSize: 42, }; export const QRView = ({ sessionID }: { sessionID: string }) => { diff --git a/ts/components/icon/Icons.tsx b/ts/components/icon/Icons.tsx index 992030b86..2385cf361 100644 --- a/ts/components/icon/Icons.tsx +++ b/ts/components/icon/Icons.tsx @@ -6,6 +6,7 @@ export type SessionIconType = | 'arrow' | 'bell' | 'brand' + | 'brandThin' | 'callIncoming' | 'callMissed' | 'callOutgoing' @@ -137,6 +138,11 @@ export const icons: Record = { viewBox: '0 0 30 34', ratio: 1, }, + brandThin: { + path: 'm27.35 20.56-6.52-4.03h4.42c1.84 0 3.62-.81 4.92-2.27a8.24 8.24 0 0 0 2.05-5.5c0-2.05-.74-4.03-2.05-5.49A6.63 6.63 0 0 0 25.25 1H9.8a8.31 8.31 0 0 0-6.17 2.85 10.33 10.33 0 0 0-2.56 6.88c0 1.88.45 3.73 1.31 5.34a10.02 10.02 0 0 0 3.56 3.87l6.53 4.03H8.05a6.35 6.35 0 0 0-2.7.56c-.85.39-1.62.96-2.28 1.68a7.87 7.87 0 0 0-1.53 2.53 8.54 8.54 0 0 0 0 5.99c.35.94.87 1.8 1.53 2.53.66.72 1.43 1.29 2.29 1.67.85.39 1.77.58 2.7.57h15.42a8.31 8.31 0 0 0 6.18-2.85 10.33 10.33 0 0 0 2.56-6.88c0-1.88-.46-3.73-1.31-5.34a10.02 10.02 0 0 0-3.56-3.87ZM7 17.83a7.72 7.72 0 0 1-2.7-2.9 8.82 8.82 0 0 1-1.06-4C3.16 6.78 6.27 3.4 9.98 3.4H25.1c2.58 0 4.81 2.2 4.94 5.09.03.72-.07 1.45-.3 2.13a5.5 5.5 0 0 1-1.02 1.83c-.45.52-.99.94-1.59 1.23a4.4 4.4 0 0 1-1.9.44h-8.7c-.26 0-.5.11-.69.31-.18.2-.28.48-.28.76v7.93L7 17.83ZM23.32 37.1H8.19c-2.59 0-4.82-2.2-4.94-5.09-.03-.72.07-1.45.3-2.13a5.5 5.5 0 0 1 1.02-1.83c.45-.52.99-.94 1.59-1.23a4.4 4.4 0 0 1 1.9-.44h8.7c.13 0 .26-.02.37-.08a.97.97 0 0 0 .32-.23 1.18 1.18 0 0 0 .28-.76v-7.93l8.57 5.3a7.72 7.72 0 0 1 2.7 2.9 8.82 8.82 0 0 1 1.05 4.01c.1 4.13-3.02 7.51-6.73 7.51Z', + viewBox: '0 0 34 41', + ratio: 1, + }, callIncoming: { path: 'M14.414 7l3.293-3.293a1 1 0 00-1.414-1.414L13 5.586V4a1 1 0 10-2 0v4.003a.996.996 0 00.617.921A.997.997 0 0012 9h4a1 1 0 100-2h-1.586zM2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z', viewBox: '0 0 20 20', diff --git a/ts/hooks/useIconToImageURL.tsx b/ts/hooks/useIconToImageURL.tsx index 27fc3144d..b27a8c086 100644 --- a/ts/hooks/useIconToImageURL.tsx +++ b/ts/hooks/useIconToImageURL.tsx @@ -24,7 +24,7 @@ export const convertIconToImageURL = async ( isDarkTheme?: boolean; } ): Promise<{ dataUrl: string; bgColor: string; fgColor: string }> => { - const { isThemed, isDarkTheme, iconType, iconSize } = props; + const { iconType, iconSize, isThemed, isDarkTheme } = props; const fgColor = chooseIconColors( '--black-color',