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
	
	 Jamie Kyle
				Jamie Kyle