mirror of
				https://github.com/Unleash/unleash.git
				synced 2025-10-27 11:02:16 +01:00 
			
		
		
		
	fix: commandbar colors (#9162)
Searchbar should be white when the new header is active.
This commit is contained in:
		
							parent
							
								
									1fba4e10d1
								
							
						
					
					
						commit
						18857c8992
					
				| @ -72,10 +72,16 @@ const StyledContainer = styled('div', { | |||||||
|     }, |     }, | ||||||
| })); | })); | ||||||
| 
 | 
 | ||||||
| const StyledSearch = styled('div')(({ theme }) => ({ | const StyledSearch = styled('div', { | ||||||
|  |     shouldForwardProp: (prop) => prop !== 'frontendHeaderRedesign', | ||||||
|  | })<{ | ||||||
|  |     frontendHeaderRedesign?: boolean; | ||||||
|  | }>(({ theme, frontendHeaderRedesign }) => ({ | ||||||
|     display: 'flex', |     display: 'flex', | ||||||
|     alignItems: 'center', |     alignItems: 'center', | ||||||
|     backgroundColor: theme.palette.background.elevation1, |     backgroundColor: frontendHeaderRedesign | ||||||
|  |         ? theme.palette.background.paper | ||||||
|  |         : theme.palette.background.elevation1, | ||||||
|     border: `1px solid ${theme.palette.neutral.border}`, |     border: `1px solid ${theme.palette.neutral.border}`, | ||||||
|     borderRadius: theme.shape.borderRadiusExtraLarge, |     borderRadius: theme.shape.borderRadiusExtraLarge, | ||||||
|     padding: '3px 5px 3px 12px', |     padding: '3px 5px 3px 12px', | ||||||
| @ -83,10 +89,16 @@ const StyledSearch = styled('div')(({ theme }) => ({ | |||||||
|     zIndex: 3, |     zIndex: 3, | ||||||
| })); | })); | ||||||
| 
 | 
 | ||||||
| const StyledInputBase = styled(InputBase)(({ theme }) => ({ | const StyledInputBase = styled(InputBase, { | ||||||
|  |     shouldForwardProp: (prop) => prop !== 'frontendHeaderRedesign', | ||||||
|  | })<{ | ||||||
|  |     frontendHeaderRedesign?: boolean; | ||||||
|  | }>(({ theme, frontendHeaderRedesign }) => ({ | ||||||
|     width: '100%', |     width: '100%', | ||||||
|     minWidth: '300px', |     minWidth: '300px', | ||||||
|     backgroundColor: theme.palette.background.elevation1, |     backgroundColor: frontendHeaderRedesign | ||||||
|  |         ? theme.palette.background.paper | ||||||
|  |         : theme.palette.background.elevation1, | ||||||
| })); | })); | ||||||
| 
 | 
 | ||||||
| const StyledClose = styled(Close)(({ theme }) => ({ | const StyledClose = styled(Close)(({ theme }) => ({ | ||||||
| @ -306,6 +318,7 @@ export const CommandBar = () => { | |||||||
|         > |         > | ||||||
|             <RecentlyVisitedRecorder /> |             <RecentlyVisitedRecorder /> | ||||||
|             <StyledSearch |             <StyledSearch | ||||||
|  |                 frontendHeaderRedesign={frontendHeaderRedesign} | ||||||
|                 sx={{ |                 sx={{ | ||||||
|                     borderBottomLeftRadius: (theme) => |                     borderBottomLeftRadius: (theme) => | ||||||
|                         showSuggestions |                         showSuggestions | ||||||
| @ -328,6 +341,7 @@ export const CommandBar = () => { | |||||||
|                     }} |                     }} | ||||||
|                 /> |                 /> | ||||||
|                 <StyledInputBase |                 <StyledInputBase | ||||||
|  |                     frontendHeaderRedesign={frontendHeaderRedesign} | ||||||
|                     inputRef={searchInputRef} |                     inputRef={searchInputRef} | ||||||
|                     placeholder={placeholder} |                     placeholder={placeholder} | ||||||
|                     inputProps={{ |                     inputProps={{ | ||||||
|  | |||||||
		Loading…
	
		Reference in New Issue
	
	Block a user