Fix several call tabs UI issues
This commit is contained in:
		
					parent
					
						
							
								df0be46c3c
							
						
					
				
			
			
				commit
				
					
						c26cb0a3e4
					
				
			
		
					 4 changed files with 55 additions and 50 deletions
				
			
		| 
						 | 
					@ -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;
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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 {
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue