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; user-select: none;
} }
&__top-bar-title {
flex: 1;
}
&__new-story { &__new-story {
&__button { &__button {
font-weight: 500; font-weight: 500;

View file

@ -34,12 +34,7 @@
&__add-story__button { &__add-story__button {
height: 20px; height: 20px;
width: 20px; width: 20px;
@include light-theme { @include color-svg('../images/icons/v3/plus/plus.svg', $color-white);
@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);
}
&:focus { &:focus {
@include keyboard-mode { @include keyboard-mode {

View file

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

View file

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