From 5508222754e233be8b95ed6d321ac3e133c6fad0 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Thu, 8 Aug 2024 10:54:20 +1000 Subject: [PATCH] fix: icon width in the settings list --- ts/components/icon/Icons.tsx | 48 +++++++++---------- ts/components/icon/SessionIcon.tsx | 17 +++++-- .../leftpane/LeftPaneSettingSection.tsx | 30 ++++++------ .../choose-action/OverlayChooseAction.tsx | 5 +- 4 files changed, 56 insertions(+), 44 deletions(-) diff --git a/ts/components/icon/Icons.tsx b/ts/components/icon/Icons.tsx index 516897303..7c4b3cb6e 100644 --- a/ts/components/icon/Icons.tsx +++ b/ts/components/icon/Icons.tsx @@ -164,8 +164,8 @@ export const icons: Record = { ratio: 1, }, chatBubble: { - path: 'M1.27225 19.1234C1.17313 19.1234 1.074 19.1093 0.982506 19.0739C0.692761 18.9676 0.509766 18.7057 0.509766 18.4154V3.5461C0.509766 2.07333 1.79837 0.869629 3.39196 0.869629H17.6276C19.2135 0.869629 20.5098 2.06625 20.5098 3.5461V13.2253C20.5098 14.698 19.2212 15.9017 17.6276 15.9017H5.02368L1.82124 18.9181C1.67637 19.0526 1.47812 19.1305 1.27987 19.1305L1.27225 19.1234ZM3.39196 2.28575C2.64472 2.28575 2.03474 2.8522 2.03474 3.5461V16.6948L4.15445 14.698C4.29932 14.5635 4.48994 14.4856 4.69581 14.4856H17.6199C18.3672 14.4856 18.9772 13.9192 18.9772 13.2253V3.5461C18.9772 2.8522 18.3672 2.28575 17.6199 2.28575H3.38434H3.39196Z', - viewBox: '0 0 21 20', + path: 'M4.2929 14.2929C4.4804 14.1054 4.7348 14 5 14L17 14C17.5523 14 18 13.5523 18 13L18 3C18 2.4477 17.5523 2 17 2L3 2C2.4477 2 2 2.4477 2 3L2 16.5858 4.2929 14.2929ZM5.4142 16 1.7071 19.7071C1.0771 20.3371 0 19.8909 0 19L0 3C0 1.3431 1.3431 0 3 0L17 0C18.6569 0 20 1.3431 20 3L20 13C20 14.6569 18.6569 16 17 16L5.4142 16Z', + viewBox: '0 0 20 20', ratio: 1, }, check: { @@ -174,8 +174,8 @@ export const icons: Record = { ratio: 1, }, checkCircle: { - path: 'M10.5 20.89c5.48 0 10-4.53 10-10 0-5.48-4.53-10-10-10-5.48 0-10 4.52-10 10 0 5.47 4.53 10 10 10Zm0-1.97a8 8 0 0 1-8.02-8.03 7.99 7.99 0 0 1 8.01-8.03 8.01 8.01 0 0 1 8.04 8.03 8 8 0 0 1-8.03 8.03Z M9.45 15.49a1 1 0 0 0 .86-.5l4.33-6.76c.12-.2.24-.43.24-.65 0-.48-.43-.8-.89-.8-.28 0-.54.16-.75.48L9.42 13.4l-1.8-2.3c-.24-.3-.47-.4-.76-.4a.85.85 0 0 0-.84.86c0 .24.09.45.25.66L8.56 15c.26.33.54.49.9.49Z', - viewBox: '0 0 21 21', + path: 'M18.9989 38.0023c10.4085 0 19.0017-8.6057 19.0017-19 0-10.4094-8.6082-19-19.0168-19C8.5937.0023.0006 8.5929.0006 19.0023c0 10.3943 8.6083 19 18.9983 19Zm0-3.7427c-8.4659 0-15.2409-6.7908-15.2409-15.2573 0-8.4667 6.7599-15.2573 15.2257-15.2573S34.2582 10.5356 34.2582 19.0023c0 8.4665-6.7934 15.2573-15.2593 15.2573ZM17.0088 27.7459c.66 0 1.2346-.3274 1.6255-.9341l8.2265-12.8509c.2322-.3977.4547-.8255.4547-1.2401 0-.9204-.8152-1.5333-1.6803-1.5333-.5392 0-1.0388.3208-1.428.9271L16.9453 23.782l-3.4181-4.3592c-.4513-.582-.8857-.7622-1.4404-.7622-.8869 0-1.6016.7198-1.6016 1.6218 0 .4444.1721.844.476 1.2432l4.3486 5.2996c.4929.6269 1.0325.9207 1.699.9207Z', + viewBox: '0 0 38 38', ratio: 1, }, chevron: { @@ -198,9 +198,9 @@ export const icons: Record = { ratio: 1, }, delete: { - path: 'M6.24 20.8h8.68c1.68 0 2.42-.84 2.68-2.51l1.32-13.01-1.58.07-1.32 12.85c-.11.76-.5 1.06-1.18 1.06H6.32c-.7 0-1.07-.3-1.18-1.06L3.82 5.35l-1.58-.07 1.32 13c.26 1.69 1 2.51 2.68 2.51ZM2.34 6.12h16.5c1.1 0 1.74-.7 1.74-1.81v-1.2c0-1.1-.64-1.8-1.75-1.8H2.33c-1.06 0-1.75.7-1.75 1.8v1.2c0 1.1.64 1.81 1.75 1.81Zm.3-1.46c-.37 0-.53-.17-.53-.54v-.81c0-.38.16-.55.54-.55h15.87c.38 0 .54.17.54.55v.8c0 .38-.16.55-.54.55H2.65Z', - viewBox: '0 0 21 21', - ratio: 1, + path: 'M5.66 19.6h8.68c1.68 0 2.42-.84 2.68-2.51l1.32-13.01-1.58.07-1.32 12.85c-.11.76-.5 1.06-1.18 1.06H5.74c-.7 0-1.07-.3-1.18-1.06L3.24 4.15l-1.58-.07 1.32 13c.26 1.69 1 2.51 2.68 2.51ZM1.76 4.92h16.5c1.1 0 1.74-.7 1.74-1.81v-1.2c0-1.1-.64-1.8-1.75-1.8H1.75c-1.06 0-1.75.7-1.75 1.8v1.2c0 1.1.64 1.81 1.75 1.81Zm.3-1.46c-.37 0-.53-.17-.53-.54v-.81c0-.38.16-.55.54-.55h15.87c.38 0 .54.17.54.55v.8c0 .38-.16.55-.54.55H2.07Z', + viewBox: '0 0 20 19.49', + ratio: 1.02616726, }, deleteModerator: { path: 'M21.7.7H5.1c-1.2 0-2.2.5-3 1.3C1.3 2.8.9 3.8.9 5v10.5c0 1.1.4 2.2 1.2 3 .8.8 1.8 1.2 2.9 1.2h16.7c1.1 0 2.2-.5 2.9-1.2.8-.8 1.2-1.9 1.2-3V5c0-.6-.1-1.1-.3-1.6-.2-.5-.5-1-.9-1.4-.4-.4-.8-.7-1.4-.9-.4-.3-.9-.4-1.5-.4zm2.1 14.8c0 .6-.2 1.1-.6 1.5-.4.4-.9.6-1.5.6H5.1c-.6 0-1.1-.2-1.5-.6-.4-.4-.6-1-.6-1.5V5c0-.6.2-1.1.6-1.5.4-.4.9-.6 1.5-.6h16.7c.6 0 1.1.2 1.5.6.4.4.6.9.6 1.5-.1 0-.1 10.5-.1 10.5zM14.4 11.3h2.7c.3 0 .5-.1.7-.3.4-.4.4-1.1 0-1.5-.2-.2-.5-.3-.7-.3H9.7c-.3 0-.5.1-.7.3-.4.4-.4 1.1 0 1.5.2.2.5.3.7.3h4.7z', @@ -323,9 +323,9 @@ export const icons: Record = { ratio: 1, }, messageRequest: { - path: 'M1.27 19.12a.8.8 0 0 1-.29-.05.7.7 0 0 1-.47-.65V3.55C.51 2.07 1.8.87 3.39.87h14.24c1.58 0 2.88 1.2 2.88 2.68v9.68c0 1.47-1.29 2.67-2.88 2.67H5.03l-3.2 3.02a.8.8 0 0 1-.55.21ZM3.4 2.3c-.75 0-1.36.56-1.36 1.26v13.14l2.12-2a.8.8 0 0 1 .55-.2h12.92c.75 0 1.36-.57 1.36-1.26V3.55c0-.7-.61-1.26-1.36-1.26H3.38h.01Z M10.59 4.35c-1.61 0-2.65.67-2.69 2.28h1.47c.08-.88.56-1.12 1.22-1.12.66 0 1 .37 1 .8 0 .73-.27.88-1.7 1.7v1.14h1.47v-.97c.83-.36 1.76-.95 1.76-2.02s-.88-1.81-2.53-1.81ZM11.45 9.9h-1.7v1.4h1.7V9.9Z', - viewBox: '0 0 21 20', - ratio: 1, + path: 'M.77 18.32a.8.8 0 0 1-.29-.05.7.7 0 0 1-.47-.65V2.75C.01 1.27 1.3.07 2.89.07h14.24c1.58 0 2.88 1.2 2.88 2.68v9.68c0 1.47-1.29 2.67-2.88 2.67H4.53l-3.2 3.02a.8.8 0 0 1-.55.21ZM2.9 1.5c-.75 0-1.36.56-1.36 1.26V15.9l2.12-2a.8.8 0 0 1 .55-.2h12.92c.75 0 1.36-.57 1.36-1.26V2.75c0-.7-.61-1.26-1.36-1.26H2.88h.01Zm7.19 2.05c-1.61 0-2.65.67-2.69 2.28h1.47c.08-.88.56-1.12 1.22-1.12.66 0 1 .37 1 .8 0 .73-.27.88-1.7 1.7v1.14h1.47v-.97c.83-.36 1.76-.95 1.76-2.02s-.88-1.81-2.53-1.81Zm.86 5.55h-1.7v1.4h1.7V9.1Z', + viewBox: '0 0 20 18.26', + ratio: 1.09529, }, microphone: { path: 'M43.362728,18.444286 C46.0752408,18.444286 48.2861946,16.2442453 48.2861946,13.5451212 L48.2861946,6.8991648 C48.2861946,4.20004074 46.0752408,2 43.362728,2 C40.6502153,2 38.4392615,4.20004074 38.4392615,6.8991648 L38.4392615,13.5451212 C38.4392615,16.249338 40.6502153,18.444286 43.362728,18.444286 Z M51.0908304,12.9238134 C51.4388509,12.9238134 51.7203381,13.2039112 51.7203381,13.5502139 C51.7203381,17.9248319 48.3066664,21.5202689 43.9871178,21.8411082 L43.9871178,21.8411082 L43.9871178,25.747199 L47.2574869,25.747199 C47.6055074,25.747199 47.8869946,26.0272968 47.8869946,26.3735995 C47.8869946,26.7199022 47.6055074,27 47.2574869,27 L47.2574869,27 L39.4628512,27 C39.1148307,27 38.8333435,26.7199022 38.8333435,26.3735995 C38.8333435,26.0272968 39.1148307,25.747199 39.4628512,25.747199 L39.4628512,25.747199 L42.7332204,25.747199 L42.7332204,21.8411082 C38.4136717,21.5253616 35,17.9248319 35,13.5502139 C35,13.2039112 35.2814872,12.9238134 35.6295077,12.9238134 C35.9775282,12.9238134 36.2538974,13.2039112 36.2436615,13.5502139 C36.2436615,17.4512121 39.4321435,20.623956 43.3524921,20.623956 C47.2728408,20.623956 50.4613228,17.4512121 50.4613228,13.5502139 C50.4613228,13.2039112 50.7428099,12.9238134 51.0908304,12.9238134 Z M43.362728,3.24770829 C45.3843177,3.24770829 47.0322972,4.88755347 47.0322972,6.8991648 L47.0322972,13.5451212 C47.0322972,15.5567325 45.3843177,17.1965777 43.362728,17.1965777 C41.3411383,17.1965777 39.6931589,15.5567325 39.6931589,13.5451212 L39.6931589,6.8991648 C39.6931589,4.88755347 41.3411383,3.24770829 43.362728,3.24770829', @@ -358,13 +358,13 @@ export const icons: Record = { ratio: 4, }, padlock: { - path: 'M10.5 11.26a1.41 1.41 0 0 0-.55 2.71v1.54c0 .18.14.32.31.32h.48c.17 0 .32-.14.32-.32v-1.54a1.42 1.42 0 0 0-.55-2.71h-.01Z M16.11 7.9V5.62a5.62 5.62 0 0 0-11.23 0V7.9a3.65 3.65 0 0 0-1.77 3.13v5.32A3.65 3.65 0 0 0 6.75 20h7.5a3.65 3.65 0 0 0 3.64-3.65v-5.32c0-1.33-.71-2.5-1.78-3.13Zm-9.5-2.28a3.9 3.9 0 0 1 7.78 0v1.72H6.6V5.62Zm9.56 10.73c0 1.06-.86 1.93-1.93 1.93H6.75a1.93 1.93 0 0 1-1.92-1.93v-5.32c0-1.07.86-1.93 1.92-1.93h7.5c1.06 0 1.92.86 1.92 1.93v5.32Z', - viewBox: '0 0 21 20', - ratio: 1, + path: 'M7.399 11.257a1.413 1.413 0 0 0-.55 2.717v1.54c0 .176.14.317.316.317h.474a.315.315 0 0 0 .316-.316v-1.541a1.413 1.413 0 0 0-.55-2.717H7.4ZM13.013 7.9V5.617A5.624 5.624 0 0 0 7.397 0a5.62 5.62 0 0 0-5.613 5.617V7.9a3.649 3.649 0 0 0-1.777 3.127v5.324A3.652 3.652 0 0 0 3.654 20h7.49a3.652 3.652 0 0 0 3.646-3.65v-5.323c0-1.328-.715-2.49-1.777-3.127Zm-9.51-2.283A3.899 3.899 0 0 1 7.397 1.72a3.899 3.899 0 0 1 3.894 3.897v1.72H3.503v-1.72Zm9.569 10.734c0 1.063-.867 1.93-1.929 1.93H3.654a1.932 1.932 0 0 1-1.928-1.93v-5.324c0-1.063.866-1.93 1.928-1.93h7.49c1.061 0 1.928.867 1.928 1.93v5.324Z', + viewBox: '0 0 14.78 20', + ratio: 0.739, }, paintbrush: { - path: 'M14.77 13.48a.52.52 0 0 1-.37-.16L7.19 6.11a.53.53 0 0 1-.15-.37c0-.14.05-.28.15-.38l.24-.23.66-.66L9.26 3.3l2.9-2.88c.1-.11.23-.19.34-.26l.1-.07c.09-.06.2-.1.3-.1h.3c.1 0 .19.03.27.08a.9.9 0 0 1 .06.03c.08.04.2.1.3.2l.71.71c.2.2.3.44.32.7.3.01.56.17.86.47l1.86 1.86c.42.42.52.9.3 1.4.48-.23.96-.13 1.38.28l.2.2.55.55c.12.13.2.26.29.38l.1.13c.06.1.1.2.1.32v.3c0 .11-.04.22-.1.31l-.1.14c-.08.12-.18.26-.3.38l-3.44 3.45-1.33 1.33-.05.06c-.09.12-.23.2-.38.2h-.03ZM8.3 5.74l6.45 6.45 1.06-1.06 3.44-3.44c.06-.06.12-.15.18-.24-.06-.1-.13-.19-.2-.26-.16-.18-.34-.35-.52-.53l-.19-.19c-.09-.09-.14-.1-.14-.1s-.04 0-.15.08l-1.7 1.15a.93.93 0 0 1-.38.16.53.53 0 0 1-.53-.8l.09-.13.15-.24 1-1.49c.12-.17.1-.19-.02-.32l-1.86-1.86a.78.78 0 0 0-.21-.17s-.06 0-.25.1c-.03 0-.06.02-.1.04l-.08.03a.52.52 0 0 1-.57-.11.53.53 0 0 1-.12-.57l.05-.11c.03-.08.06-.15.1-.21.04-.12.02-.15-.02-.19l-.67-.66-.04-.02-.18.12-2.88 2.88-1.18 1.17-.53.52ZM3.62 20h-.56a.52.52 0 0 1-.21-.04 2.78 2.78 0 0 1-2.28-2.2l-.05-.17a.53.53 0 0 1-.02-.15v-.65c.17-.81.52-1.4 1.07-1.84.24-.18.53-.4.83-.6l3.52-2.3c.39-.26.43-.51.42-.73 0-.18-.09-.34-.27-.52l-.34-.35-.94-.94c-.52-.52-.52-1.2-.01-1.71l.97-.98.38-.38a.7.7 0 0 1 .1-.08c.2-.17.53-.17.72.02l7.19 7.2c.1.1.15.23.15.37 0 .14-.06.27-.15.37l-.22.21-.54.53-.26.27-.41.4c-.52.5-1.2.5-1.71-.01l-1.28-1.27c-.18-.19-.35-.28-.53-.28-.3-.02-.52.1-.72.41l-.04.05c-.76 1.17-1.54 2.38-2.34 3.55a8.4 8.4 0 0 1-.87 1.1c-.34.34-.79.57-1.38.68l-.06.02a.57.57 0 0 1-.16.03Zm-.47-1.05h.38l.11-.03c.37-.07.64-.19.81-.37.28-.3.54-.62.77-.95a306.7 306.7 0 0 0 2.33-3.55l.03-.05a1.8 1.8 0 0 1 2.89-.3l1.26 1.27c.11.1.14.1.25 0l.4-.4.27-.26.37-.37-6.45-6.45-.08.07-.96.97c-.1.1-.11.12 0 .24l.94.93.34.35a1.8 1.8 0 0 1-.32 2.87 610.3 610.3 0 0 0-3.52 2.31c-.27.18-.54.38-.76.55-.34.26-.55.63-.67 1.16v.43l.04.13a1.72 1.72 0 0 0 1.47 1.42l.09.03h.01Zm.22-.39a1.43 1.43 0 0 1 0-2.86 1.42 1.42 0 1 1 0 2.86Zm0-1.8c-.1 0-.19.03-.26.1a.37.37 0 0 0-.11.27c0 .2.17.37.37.38.1-.02.2-.04.27-.11a.37.37 0 0 0 .11-.27c0-.2-.17-.37-.37-.37Z', - viewBox: '0 0 21 20', + path: 'M14.268 13.479a.525.525 0 0 1-.371-.154l-7.208-7.21a.533.533 0 0 1-.154-.376c0-.14.056-.273.158-.371l.242-.238c.213-.21.438-.431.658-.652l1.17-1.17c.96-.96 1.924-1.924 2.888-2.88.115-.116.238-.193.347-.263.035-.021.073-.046.105-.07A.513.513 0 0 1 12.404 0h.298c.095 0 .186.025.266.074a.9.9 0 0 1 .06.031c.08.042.192.098.294.196.288.27.515.498.722.715.19.2.294.438.319.69.294.022.557.18.858.48l1.857 1.858c.424.424.526.907.295 1.405.49-.232.967-.137 1.39.28l.19.186c.189.185.378.371.557.564.116.122.207.256.287.371.032.046.063.091.098.137a.54.54 0 0 1 .105.315V7.6a.532.532 0 0 1-.105.315l-.094.137c-.084.12-.179.26-.305.382l-3.437 3.448-1.332 1.331s-.038.056-.045.063a.526.526 0 0 1-.382.203h-.032Zm-6.46-7.733 6.45 6.451 1.061-1.062c1.146-1.145 2.292-2.295 3.438-3.444.06-.06.119-.147.185-.242a2.828 2.828 0 0 0-.196-.255c-.168-.183-.347-.354-.522-.53l-.193-.189c-.09-.09-.136-.101-.136-.101s-.046 0-.158.077l-1.696 1.152a.926.926 0 0 1-.378.162.525.525 0 0 1-.53-.806l.085-.13.15-.231 1.002-1.49c.116-.171.106-.192-.024-.325l-1.857-1.857c-.147-.147-.2-.172-.21-.175 0 0-.056.007-.246.098a4.513 4.513 0 0 1-.105.045l-.073.032a.523.523 0 0 1-.575-.112.53.53 0 0 1-.115-.575l.045-.105c.031-.08.06-.147.091-.214.053-.115.028-.143-.01-.182a14.34 14.34 0 0 0-.673-.666l-.035-.017h-.007c-.07.045-.137.087-.172.119-.963.956-1.924 1.92-2.887 2.88l-1.174 1.17c-.175.176-.354.354-.529.522h-.007ZM3.115 20.007H2.56a.525.525 0 0 1-.213-.045c-.985-.186-1.724-.771-2.12-1.696a3.32 3.32 0 0 1-.158-.494 2.786 2.786 0 0 0-.049-.179.533.533 0 0 1-.021-.147v-.554c0-.035 0-.07.01-.105.165-.806.512-1.401 1.066-1.829.238-.182.522-.396.823-.596a762.948 762.948 0 0 1 3.525-2.316c.385-.252.427-.504.42-.718-.007-.186-.09-.347-.27-.525l-.346-.347a119.01 119.01 0 0 1-.94-.94c-.514-.521-.518-1.198-.006-1.716.322-.326.644-.652.97-.978l.379-.378a.698.698 0 0 1 .098-.084c.21-.169.529-.169.718.024l7.194 7.194a.528.528 0 0 1-.004.746l-.214.21c-.178.175-.36.35-.54.53l-.266.265c-.136.137-.27.27-.406.404-.522.504-1.195.5-1.713-.011-.428-.42-.852-.848-1.272-1.272-.186-.186-.35-.273-.536-.28-.305-.014-.522.112-.722.417l-.032.049a293.443 293.443 0 0 1-2.34 3.553c-.26.385-.554.75-.876 1.09-.333.35-.785.574-1.38.686l-.06.021-.007-.004Zm-.466-1.051h.382a.73.73 0 0 1 .109-.028c.371-.07.638-.193.813-.378.28-.295.54-.617.764-.95a306.7 306.7 0 0 0 2.333-3.542l.032-.05c.504-.774 1.17-.914 1.643-.893.452.018.873.217 1.244.592.42.424.841.848 1.265 1.265.109.109.133.109.245 0 .133-.13.263-.26.393-.389l.273-.273c.126-.123.252-.249.378-.368l-6.457-6.45-.074.073c-.322.322-.645.641-.963.967-.099.098-.113.123.007.242.308.312.62.623.928.932l.347.347c.364.364.56.778.578 1.226.021.47-.119 1.135-.897 1.643a610.296 610.296 0 0 0-3.521 2.313c-.274.182-.54.382-.764.553-.336.26-.55.628-.666 1.157v.427c.014.046.025.091.035.137.032.126.063.245.105.34.26.606.705.96 1.363 1.079a.618.618 0 0 1 .095.024l.01.004Zm.221-.392h-.007a1.426 1.426 0 0 1-.999-2.439c.27-.27.628-.42 1.006-.42h.007c.782.003 1.42.644 1.423 1.422a1.431 1.431 0 0 1-1.43 1.433v.004Zm0-1.805a.367.367 0 0 0-.263.112.374.374 0 0 0-.112.267c0 .203.172.37.375.374a.463.463 0 0 0 .27-.112.374.374 0 0 0 .112-.266c0-.2-.175-.375-.375-.375H2.87Z', + viewBox: '0 0 20 20', ratio: 1, }, password: { @@ -448,9 +448,9 @@ export const icons: Record = { ratio: 1, }, recoveryPasswordFill: { - path: 'M9.86.35c.23-.1.47-.17.7-.17l.01.01c.24 0 .47.05.7.16l.85.4.34.16 1.56.73 1.52.72 2.2 1.03c.7.32 1.08.98 1.03 1.74V9l-.02 1.03c-.02.9-.18 1.74-.32 2.38l-.01.04-.02.04a13.47 13.47 0 0 1-1.4 3.34l-.02.03-.02.03c-.48.75-.93 1.33-1.42 1.84-.78.84-1.68 1.52-2.65 2.04l-.05.03-.04.03-.05.03-.05.02c-.48.22-1.04.47-1.66.64l-.02.01h-.01a1.77 1.77 0 0 1-.9 0 9.48 9.48 0 0 1-1.75-.7h-.02a10.8 10.8 0 0 1-4.11-3.85l-.05-.05-.05-.1a14.24 14.24 0 0 1-1.33-3.07v-.03l-.06-.16-.02-.09-.02-.08-.03-.16-.03-.15v-.04c-.08-.35-.15-.71-.2-1.1-.07-.62-.07-1.21-.07-1.78V5.37a15.9 15.9 0 0 1 0-.38c-.02-.69.32-1.27.95-1.58.67-.3 1.33-.62 2-.93l2-.93 1.2-.57.06-.02.08-.05L8.7.9l.16-.07.29-.14.2-.1.52-.24Zm1.73 9.2 1.58.9a2.44 2.44 0 0 1 1.18 2.08c0 .58-.22 1.14-.62 1.55-.4.41-.93.64-1.5.64H8.5a1.64 1.64 0 0 1-1.2-.5 1.76 1.76 0 0 1-.5-1.25 1.8 1.8 0 0 1 .5-1.24 1.68 1.68 0 0 1 1.2-.5h1.07L8 10.3c-.36-.2-.65-.5-.86-.87-.21-.36-.32-.78-.32-1.2 0-.58.22-1.14.62-1.55.4-.41.93-.65 1.5-.65h3.73c.45 0 .88.19 1.2.52a1.78 1.78 0 0 1 0 2.47c-.32.33-.75.52-1.2.52H11.6Zm-4-.36c.16.27.38.5.65.65l2.08 1.2v-1.8c0-.06.03-.12.07-.16.04-.05.1-.08.16-.08h2.11a1.13 1.13 0 0 0 .85-.37 1.22 1.22 0 0 0 .32-.9 1.2 1.2 0 0 0-1.2-1.14H8.97c-.9 0-1.66.76-1.64 1.7.01.31.1.62.26.9Zm.94 5h3.67c.9 0 1.65-.77 1.63-1.7a1.8 1.8 0 0 0-.91-1.56l-2.08-1.2v1.8a.25.25 0 0 1-.06.16.23.23 0 0 1-.17.08H8.5a1.13 1.13 0 0 0-.85.37 1.22 1.22 0 0 0-.31.9 1.2 1.2 0 0 0 1.2 1.14Z', - viewBox: '0 0 21 21', - ratio: 1, + path: 'M7.49.35c.23-.1.47-.17.7-.17l.01.01c.24 0 .47.05.7.16l.85.4.34.16 1.56.73 1.52.72 2.2 1.03c.7.32 1.08.98 1.03 1.74V9l-.02 1.03c-.02.9-.18 1.74-.32 2.38l-.01.04-.02.04a13.47 13.47 0 0 1-1.4 3.34l-.02.03-.02.03c-.48.75-.93 1.33-1.42 1.84-.78.84-1.68 1.52-2.65 2.04l-.05.03-.04.03-.05.03-.05.02c-.48.22-1.04.47-1.66.64l-.02.01h-.01a1.77 1.77 0 0 1-.9 0 9.48 9.48 0 0 1-1.75-.7h-.02a10.8 10.8 0 0 1-4.11-3.85l-.05-.05-.05-.1a14.24 14.24 0 0 1-1.33-3.07v-.03l-.06-.16-.02-.09-.02-.08-.03-.16-.03-.15v-.04c-.08-.35-.15-.71-.2-1.1C0 10.33 0 9.74 0 9.17v-3.8a15.9 15.9 0 0 1 0-.38c-.02-.69.32-1.27.95-1.58.67-.3 1.33-.62 2-.93l2-.93 1.2-.57.06-.02.08-.05.04-.01.16-.07.29-.14.2-.1.52-.24Zm1.73 9.2 1.58.9a2.44 2.44 0 0 1 1.18 2.08c0 .58-.22 1.14-.62 1.55-.4.41-.93.64-1.5.64H6.13a1.64 1.64 0 0 1-1.2-.5 1.76 1.76 0 0 1-.5-1.25 1.8 1.8 0 0 1 .5-1.24 1.68 1.68 0 0 1 1.2-.5H7.2l-1.57-.93c-.36-.2-.65-.5-.86-.87-.21-.36-.32-.78-.32-1.2 0-.58.22-1.14.62-1.55.4-.41.93-.65 1.5-.65h3.73c.45 0 .88.19 1.2.52a1.78 1.78 0 0 1 0 2.47c-.32.33-.75.52-1.2.52H9.23Zm-4-.36c.16.27.38.5.65.65l2.08 1.2v-1.8c0-.06.03-.12.07-.16.04-.05.1-.08.16-.08h2.11a1.13 1.13 0 0 0 .85-.37 1.22 1.22 0 0 0 .32-.9 1.2 1.2 0 0 0-1.2-1.14H6.6c-.9 0-1.66.76-1.64 1.7.01.31.1.62.26.9Zm.94 5h3.67c.9 0 1.65-.77 1.63-1.7a1.8 1.8 0 0 0-.91-1.56l-2.08-1.2v1.8a.25.25 0 0 1-.06.16.23.23 0 0 1-.17.08H6.13a1.13 1.13 0 0 0-.85.37 1.22 1.22 0 0 0-.31.9 1.2 1.2 0 0 0 1.2 1.14Z', + viewBox: '0 0 16.41 20.41', + ratio: 0.804017, clipRule: 'evenodd', fillRule: 'evenodd', }, @@ -460,9 +460,9 @@ export const icons: Record = { ratio: 1, }, speaker: { - path: 'M17.55 20c-.45 0-.9-.14-1.25-.4l-4.9-3.45c-.57-.4-1.24-.6-1.93-.6H3.9c-.68-.01-1.34-.27-1.82-.73a2.4 2.4 0 0 1-.76-1.74V6.9c0-.65.27-1.28.76-1.74a2.64 2.64 0 0 1 1.82-.72h5.63c.7 0 1.37-.22 1.93-.61L16.28.4a2.18 2.18 0 0 1 3.07.56c.2.32.32.69.32 1.06v15.95c0 .54-.23 1.06-.63 1.44-.4.38-.93.59-1.5.59h.01ZM3.91 6.28a.67.67 0 0 0-.46.18.6.6 0 0 0-.2.44v6.18c0 .17.08.32.2.44.12.12.29.18.46.18h5.56c1.1 0 2.18.34 3.07.97l4.9 3.45a.19.19 0 0 0 .2.02.18.18 0 0 0 .08-.07.17.17 0 0 0 .03-.1V2.02c0-.03-.01-.07-.03-.1a.18.18 0 0 0-.08-.06.19.19 0 0 0-.2 0l-4.82 3.43c-.9.63-1.97.97-3.08.97l-5.63.02Z', - viewBox: '0 0 21 20', - ratio: 1, + path: 'M16.24 20.01c-.45 0-.9-.14-1.25-.4l-4.9-3.45c-.57-.4-1.24-.6-1.93-.6H2.59c-.68-.01-1.34-.27-1.82-.73a2.4 2.4 0 0 1-.76-1.74V6.91c0-.65.27-1.28.76-1.74a2.64 2.64 0 0 1 1.82-.72h5.63c.7 0 1.37-.22 1.93-.61L14.97.41a2.18 2.18 0 0 1 3.07.56c.2.32.32.69.32 1.06v15.95c0 .54-.23 1.06-.63 1.44-.4.38-.93.59-1.5.59h.01ZM2.6 6.29a.67.67 0 0 0-.46.18.6.6 0 0 0-.2.44v6.18c0 .17.08.32.2.44.12.12.29.18.46.18h5.56c1.1 0 2.18.34 3.07.97l4.9 3.45a.19.19 0 0 0 .2.02.18.18 0 0 0 .08-.07.17.17 0 0 0 .03-.1V2.03c0-.03-.01-.07-.03-.1a.18.18 0 0 0-.08-.06.19.19 0 0 0-.2 0L11.31 5.3c-.9.63-1.97.97-3.08.97l-5.63.02Z', + viewBox: '0 0 18.35 20', + ratio: 0.9175, }, star: { path: 'M9.80779568,8.70262392 C9.66225594,8.99747141 9.38107073,9.20193068 9.05571654,9.24948607 L4.1495,9.9666031 L7.69882113,13.4236419 C7.93469487,13.6533829 8.0423575,13.9845141 7.98669695,14.3090433 L7.14926913,19.1916734 L11.5356371,16.8849265 C11.8270199,16.7316912 12.1751567,16.7316912 12.4665396,16.8849265 L16.8529075,19.1916734 L16.0154797,14.3090433 C15.9598192,13.9845141 16.0674818,13.6533829 16.3033555,13.4236419 L19.8526767,9.9666031 L14.9464601,9.24948607 C14.6211059,9.20193068 14.3399207,8.99747141 14.194381,8.70262392 L12.0010883,4.25925434 L9.80779568,8.70262392 Z M8.24682697,7.3464661 L11.104381,1.55737608 C11.4712164,0.814207972 12.5309603,0.814207972 12.8977957,1.55737608 L15.7553497,7.3464661 L22.1457165,8.28051393 C22.9656312,8.40035674 23.2924147,9.40819801 22.6988211,9.98635811 L18.0756101,14.4893656 L19.166697,20.8509567 C19.3068155,21.6679189 18.4492666,22.2908819 17.7156371,21.9050735 L12.0010883,18.8998497 L6.28653961,21.9050735 C5.55291004,22.2908819 4.69536119,21.6679189 4.83547972,20.8509567 L5.92656655,14.4893656 L1.30335554,9.98635811 C0.709762006,9.40819801 1.03654545,8.40035674 1.85646012,8.28051393 L8.24682697,7.3464661', @@ -487,9 +487,9 @@ export const icons: Record = { ratio: 1, }, question: { - path: 'M10.7.89c-4.17 0-6.86 1.94-6.95 6.56h3.8c.2-2.53 1.44-3.21 3.15-3.21 1.7 0 2.58 1.04 2.58 2.28 0 2.11-.7 2.54-4.4 4.9v3.27h3.82V11.9c2.14-1.04 4.55-2.73 4.55-5.8S14.98.89 10.7.89ZM12.93 16.86h-4.4v4.03h4.4v-4.03Z', - viewBox: '0 0 21 21', - ratio: 1, + path: 'M7 0C2.83 0 .14 1.94.05 6.56h3.8C4.05 4.03 5.29 3.35 7 3.35c1.7 0 2.58 1.04 2.58 2.28 0 2.11-.7 2.54-4.4 4.9v3.27H9v-2.79c2.14-1.04 4.55-2.73 4.55-5.8S11.28 0 7 0Zm2.23 15.97h-4.4V20h4.4v-4.03Z', + viewBox: '0 0 13.5 20', + ratio: 0.675, }, users: { path: 'M9.38,2.17c-1.73,0-3.12,1.4-3.12,3.12s1.4,3.12,3.12,3.12s3.12-1.4,3.12-3.12S11.1,2.17,9.38,2.17z M16.93,0.25c2.3,0.59,3.92,2.67,3.92,5.05s-1.61,4.46-3.92,5.05c-0.56,0.14-1.12-0.19-1.27-0.75c-0.14-0.56,0.19-1.12,0.75-1.27 c1.38-0.35,2.35-1.6,2.35-3.03s-0.97-2.67-2.35-3.03c-0.56-0.14-0.9-0.71-0.75-1.27C15.8,0.44,16.37,0.11,16.93,0.25z M9.38,0.08 c2.88,0,5.21,2.33,5.21,5.21s-2.33,5.21-5.21,5.21S4.17,8.17,4.17,5.29C4.17,2.42,6.5,0.08,9.38,0.08z M21.09,12.75 c2.22,0.57,3.8,2.53,3.9,4.81L25,17.79v2.08c0,0.58-0.47,1.04-1.04,1.04c-0.54,0-0.98-0.41-1.04-0.93l-0.01-0.11v-2.08 c0-1.42-0.96-2.67-2.34-3.02c-0.56-0.14-0.89-0.71-0.75-1.27C19.97,12.94,20.54,12.61,21.09,12.75z M13.54,12.58 c2.8,0,5.09,2.21,5.2,4.99v0.22v2.08c0,0.58-0.47,1.04-1.04,1.04c-0.54,0-0.98-0.41-1.04-0.93l-0.01-0.11v-2.08 c0-1.67-1.3-3.03-2.95-3.12h-0.18H5.21c-1.67,0-3.03,1.3-3.12,2.95v0.18v2.08c0,0.58-0.47,1.04-1.04,1.04 c-0.54,0-0.98-0.41-1.04-0.93L0,19.88V17.8c0-2.8,2.21-5.09,4.99-5.2h0.22h8.33V12.58z', diff --git a/ts/components/icon/SessionIcon.tsx b/ts/components/icon/SessionIcon.tsx index 74e96eaae..bdb96da65 100644 --- a/ts/components/icon/SessionIcon.tsx +++ b/ts/components/icon/SessionIcon.tsx @@ -6,6 +6,9 @@ import { ClipRule, FillRule } from './Icons'; export type SessionIconProps = { iconType: SessionIconType; + /** + * iconSize is usually the height of the icon, we then have a ratio for each icons to calculate the width. + * see sizeIsWidth for how to do the opposite */ iconSize: SessionIconSize | number; iconColor?: string; iconRotation?: number; @@ -19,6 +22,8 @@ export type SessionIconProps = { style?: CSSProperties; dataTestId?: string; unreadCount?: number; + /** for some usecases, we want to fix the width of the icon and have the height be calculated from the ratio of the icon */ + sizeIsWidth?: boolean; }; const getIconDimensionFromIconSize = (iconSize: SessionIconSize | number) => { @@ -187,24 +192,28 @@ export const SessionIcon = (props: SessionIconProps) => { iconPadding, style, dataTestId, + sizeIsWidth, } = props; let { iconSize, iconRotation } = props; iconSize = iconSize || 'medium'; iconRotation = iconRotation || 0; - const iconDimensions = getIconDimensionFromIconSize(iconSize); + const calculatedIconSize = getIconDimensionFromIconSize(iconSize); const iconDef = icons[iconType]; - const ratio = iconDef?.ratio || 1; + const ratio = iconDef.ratio; const fill = iconDef?.fill || undefined; const clipRule = iconDef?.clipRule || 'nonzero'; const fillRule = iconDef?.fillRule || 'nonzero'; + const width = sizeIsWidth ? calculatedIconSize : calculatedIconSize * ratio; + const height = sizeIsWidth ? calculatedIconSize / ratio : calculatedIconSize; + return ( => { + const forcedSize = { size: 19 }; return [ { id: 'privacy' as const, title: window.i18n('privacySettingsTitle'), - icon: { type: 'padlock', size: 28, style: { marginLeft: '-2px' } }, + icon: { type: 'padlock', ...forcedSize }, }, { id: 'notifications' as const, title: window.i18n('notificationsSettingsTitle'), - icon: { type: 'speaker' }, + icon: { type: 'speaker', ...forcedSize }, }, { id: 'conversations' as const, title: window.i18n('conversationsSettingsTitle'), - icon: { type: 'chatBubble' }, + icon: { type: 'chatBubble', ...forcedSize }, }, { id: 'messageRequests' as const, title: window.i18n('openMessageRequestInbox'), - icon: { type: 'messageRequest', style: { marginLeft: '1px' } }, + icon: { type: 'messageRequest', ...forcedSize }, }, { id: 'appearance' as const, title: window.i18n('appearanceSettingsTitle'), - icon: { type: 'paintbrush', style: { marginLeft: '1px' } }, + icon: { type: 'paintbrush', ...forcedSize }, }, { id: 'permissions', title: window.i18n('permissionsSettingsTitle'), - icon: { type: 'checkCircle', style: { marginLeft: '1px' } }, + icon: { type: 'checkCircle', ...forcedSize }, }, { id: 'help' as const, title: window.i18n('helpSettingsTitle'), - icon: { type: 'question', size: 24 }, + icon: { type: 'question', ...forcedSize }, }, { id: 'recoveryPassword' as const, title: window.i18n('sessionRecoveryPassword'), - icon: { type: 'recoveryPasswordFill', size: 24 }, + icon: { type: 'recoveryPasswordFill', ...forcedSize }, }, { id: 'clearData' as const, title: window.i18n('clearDataSettingsTitle'), - icon: { type: 'delete', color: 'var(--danger-color)' }, + icon: { type: 'delete', ...forcedSize, color: 'var(--danger-color)' }, }, ]; }; @@ -143,9 +143,9 @@ const LeftPaneSettingsCategoryRow = (props: { item: Categories }) => { diff --git a/ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx b/ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx index ad1951fd7..6964154cf 100644 --- a/ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx +++ b/ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx @@ -71,6 +71,7 @@ export const OverlayChooseAction = () => { title={window.i18n('newMessage')} ariaLabel={'New message button'} iconType={'chatBubble'} + iconSize={20} onClick={openNewMessage} dataTestId="chooser-new-conversation-button" /> @@ -78,7 +79,7 @@ export const OverlayChooseAction = () => { title={window.i18n('createGroup')} ariaLabel={'Create a group button'} iconType={'group'} - iconSize={36} + iconSize={30} onClick={openCreateGroup} dataTestId="chooser-new-group" /> @@ -86,6 +87,7 @@ export const OverlayChooseAction = () => { title={window.i18n('joinOpenGroup')} ariaLabel={'Join a community button'} iconType={'communities'} + iconSize={20} onClick={openJoinCommunity} dataTestId="chooser-new-community" /> @@ -93,6 +95,7 @@ export const OverlayChooseAction = () => { title={window.i18n('sessionInviteAFriend')} ariaLabel={'Invite a friend button'} iconType={'addUser'} + iconSize={20} onClick={inviteAFriend} dataTestId="chooser-invite-friend" />