Change filtered notification banner design to take up less space (#31222)
This commit is contained in:
		
					parent
					
						
							
								549ab089ee
							
						
					
				
			
			
				commit
				
					
						2c1e75727d
					
				
			
		
					 3 changed files with 7 additions and 30 deletions
				
			
		|  | @ -49,21 +49,14 @@ export const FilteredNotificationsBanner: React.FC = () => { | |||
|         <span> | ||||
|           <FormattedMessage | ||||
|             id='filtered_notifications_banner.pending_requests' | ||||
|             defaultMessage='Notifications from {count, plural, =0 {no one} one {one person} other {# people}} you may know' | ||||
|             defaultMessage='From {count, plural, =0 {no one} one {one person} other {# people}} you may know' | ||||
|             values={{ count: policy.summary.pending_requests_count }} | ||||
|           /> | ||||
|         </span> | ||||
|       </div> | ||||
| 
 | ||||
|       <div className='filtered-notifications-banner__badge'> | ||||
|         <div className='filtered-notifications-banner__badge__badge'> | ||||
|           {toCappedNumber(policy.summary.pending_notifications_count)} | ||||
|         </div> | ||||
|         <FormattedMessage | ||||
|           id='filtered_notifications_banner.mentions' | ||||
|           defaultMessage='{count, plural, one {mention} other {mentions}}' | ||||
|           values={{ count: policy.summary.pending_notifications_count }} | ||||
|         /> | ||||
|         {toCappedNumber(policy.summary.pending_notifications_count)} | ||||
|       </div> | ||||
|     </Link> | ||||
|   ); | ||||
|  |  | |||
|  | @ -300,8 +300,7 @@ | |||
|   "filter_modal.select_filter.subtitle": "Use an existing category or create a new one", | ||||
|   "filter_modal.select_filter.title": "Filter this post", | ||||
|   "filter_modal.title.status": "Filter a post", | ||||
|   "filtered_notifications_banner.mentions": "{count, plural, one {mention} other {mentions}}", | ||||
|   "filtered_notifications_banner.pending_requests": "Notifications from {count, plural, =0 {no one} one {one person} other {# people}} you may know", | ||||
|   "filtered_notifications_banner.pending_requests": "From {count, plural, =0 {no one} one {one person} other {# people}} you may know", | ||||
|   "filtered_notifications_banner.title": "Filtered notifications", | ||||
|   "firehose.all": "All", | ||||
|   "firehose.local": "This server", | ||||
|  |  | |||
|  | @ -10171,25 +10171,10 @@ noscript { | |||
|   } | ||||
| 
 | ||||
|   &__badge { | ||||
|     display: flex; | ||||
|     align-items: center; | ||||
|     border-radius: 999px; | ||||
|     background: var(--background-border-color); | ||||
|     color: $darker-text-color; | ||||
|     padding: 4px; | ||||
|     padding-inline-end: 8px; | ||||
|     gap: 6px; | ||||
|     font-weight: 500; | ||||
|     font-size: 11px; | ||||
|     line-height: 16px; | ||||
|     word-break: keep-all; | ||||
| 
 | ||||
|     &__badge { | ||||
|       background: $ui-button-background-color; | ||||
|       color: $white; | ||||
|       border-radius: 100px; | ||||
|       padding: 2px 8px; | ||||
|     } | ||||
|     background: $ui-button-background-color; | ||||
|     color: $white; | ||||
|     border-radius: 100px; | ||||
|     padding: 2px 8px; | ||||
|   } | ||||
| } | ||||
| 
 | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue