Fix several call tabs UI issues

This commit is contained in:
Jamie Kyle 2023-08-21 13:36:28 -07:00 committed by GitHub
parent df0be46c3c
commit c26cb0a3e4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 55 additions and 50 deletions

View file

@ -50,6 +50,10 @@
user-select: none;
}
&__top-bar-title {
flex: 1;
}
&__new-story {
&__button {
font-weight: 500;

View file

@ -34,12 +34,7 @@
&__add-story__button {
height: 20px;
width: 20px;
@include light-theme {
@include color-svg('../images/icons/v3/plus/plus.svg', $color-black);
}
@include dark-theme {
@include color-svg('../images/icons/v3/plus/plus.svg', $color-gray-15);
}
@include color-svg('../images/icons/v3/plus/plus.svg', $color-white);
&:focus {
@include keyboard-mode {

View file

@ -893,49 +893,55 @@ export function SendStoryModal({
/>
</div>
<div className="SendStoryModal__top-bar">
{i18n('icu:stories')}
<ContextMenu
aria-label={i18n('icu:SendStoryModal__new')}
i18n={i18n}
menuOptions={[
{
label: i18n('icu:SendStoryModal__new-custom--title'),
description: i18n(
'icu:SendStoryModal__new-custom--description'
),
icon: 'SendStoryModal__icon--custom',
onClick: () => setPage(Page.ChooseViewers),
},
{
label: i18n('icu:SendStoryModal__new-group--title'),
description: i18n('icu:SendStoryModal__new-group--description'),
icon: 'SendStoryModal__icon--group',
onClick: () => setPage(Page.ChooseGroups),
},
]}
moduleClassName="SendStoryModal__new-story"
popperOptions={{
placement: 'bottom',
strategy: 'absolute',
}}
theme={theme === ThemeType.dark ? Theme.Dark : Theme.Light}
>
{({ openMenu, onKeyDown, ref, menuNode }) => (
<div>
<Button
ref={ref}
className="SendStoryModal__new-story__button"
variant={ButtonVariant.Secondary}
size={ButtonSize.Small}
onClick={openMenu}
onKeyDown={onKeyDown}
>
{i18n('icu:SendStoryModal__new')}
</Button>
{menuNode}
</div>
)}
</ContextMenu>
<div className="SendStoryModal__top-bar-title">
{i18n('icu:stories')}
</div>
<div className="SendStoryModal__top-bar-actions">
<ContextMenu
aria-label={i18n('icu:SendStoryModal__new')}
i18n={i18n}
menuOptions={[
{
label: i18n('icu:SendStoryModal__new-custom--title'),
description: i18n(
'icu:SendStoryModal__new-custom--description'
),
icon: 'SendStoryModal__icon--custom',
onClick: () => setPage(Page.ChooseViewers),
},
{
label: i18n('icu:SendStoryModal__new-group--title'),
description: i18n(
'icu:SendStoryModal__new-group--description'
),
icon: 'SendStoryModal__icon--group',
onClick: () => setPage(Page.ChooseGroups),
},
]}
moduleClassName="SendStoryModal__new-story"
popperOptions={{
placement: 'bottom',
strategy: 'absolute',
}}
theme={theme === ThemeType.dark ? Theme.Dark : Theme.Light}
>
{({ openMenu, onKeyDown, ref, menuNode }) => (
<div>
<Button
ref={ref}
className="SendStoryModal__new-story__button"
variant={ButtonVariant.Secondary}
size={ButtonSize.Small}
onClick={openMenu}
onKeyDown={onKeyDown}
>
{i18n('icu:SendStoryModal__new')}
</Button>
{menuNode}
</div>
)}
</ContextMenu>
</div>
</div>
{fullList.map(listOrGroup =>
// only group has a type field

View file

@ -93,7 +93,7 @@ function searchConversations(
searchTerm: string,
regionCode: string | undefined
): ReadonlyArray<Pick<Fuse.FuseResult<ConversationType>, 'item' | 'score'>> {
const maybeCommand = searchTerm.match(/^!([^\s]+):(.*)$/);
const maybeCommand = searchTerm.match(/^!([^\s:]+)(?::(.*))?$/);
if (maybeCommand) {
const [, commandName, query] = maybeCommand;