Regression: Header Styles fixes

client/components/Header/Header.tsx

@@ -9,7 +9,7 @@ const Row: FC = (props: any) => <Box alignItems='center' flexShrink={1} flexGrow
 
 const HeaderIcon: FC<{ icon: JSX.Element | { name: string; color?: string } | null}> = ({ icon }) => icon && <Box display='flex' flexShrink={0} alignItems='center' size={18} overflow='hidden' justifyContent='center'>{React.isValidElement(icon) ? icon : <Icon color='info' size='x18' { ...{ name: (icon as any).name }} />}</Box>;
 
-const ToolBox: FC = (props: any) => <ButtonGroup small {...props}/>;
+const ToolBox: FC = (props: any) => <ButtonGroup mi='x4' medium {...props}/>;
 
 const ToolBoxAction: FC = ({ id, icon, title, action, className, tabId, index, ...props }: any) => <ActionButton
 	className={className}
@@ -38,7 +38,7 @@ const Avatar: FC = (props: any) => <Button width='x36' {...props}/>;
 const HeaderDivider: FC = () => <Divider { ...{ mbs: 'neg-x2', mbe: 0 } as any} />;
 
 const Header: FC & { ToolBoxAction: FC; Badge: FC<BadgeProps> } = (props: any) => <Box rcx-room-header is='header' height='x64' display='flex' justifyContent='center' flexDirection='column' overflow='hidden' flexShrink={0}>
-	<Box height='x64' pi='x24' display='flex' flexGrow={1} justifyContent='center' alignItems='center' overflow='hidden' flexDirection='row' {...props}/>
+	<Box height='x64' mi='neg-x4' pi='x24' display='flex' flexGrow={1} justifyContent='center' alignItems='center' overflow='hidden' flexDirection='row' {...props}/>
 	<HeaderDivider/>
 </Box>;
 

client/components/ScrollableContentWrapper.tsx

@@ -1,24 +1,24 @@
-import React, { CSSProperties, FC } from 'react';
+import React, { CSSProperties, FC, useMemo } from 'react';
 import SimpleBar from 'simplebar-react';
 import 'simplebar/src/simplebar.css';
 
 import { useDir } from '../hooks/useDir';
 
 
 const styleDefault = {
-	maxHeight: '100%', flexGrow: 1,
+	maxHeight: '100%', flexGrow: 1, overflowY: 'auto', willChange: 'transform',
 };
 
-
 type CustomScrollbarsProps = {
 	onScroll?: Function;
 	ref: React.Ref<unknown>;
 	style?: CSSProperties;
 }
 
-const ScrollableContentWrapper: FC<CustomScrollbarsProps> = React.memo(React.forwardRef(({ onScroll, children, style = styleDefault }, ref) => {
+const ScrollableContentWrapper: FC<CustomScrollbarsProps> = React.memo(React.forwardRef(({ onScroll, children, style }, ref) => {
 	const dir = useDir();
-	return <SimpleBar data-simplebar-direction={dir} direction={dir} style={style} scrollableNodeProps={{ ref, onScroll }} children={children}/>;
+	const simpleBarStyle: CSSProperties = useMemo(() => ({ ...style, ...styleDefault }), [style]) as CSSProperties;
+	return <SimpleBar data-simplebar-direction={dir} direction={dir} style={simpleBarStyle} scrollableNodeProps={{ ref, onScroll }} children={children}/>;
 }));
 
 export default ScrollableContentWrapper;

client/components/VerticalBar.js

@@ -106,7 +106,7 @@ function VerticalBarAction({ name, ...props }) {
 }
 
 function VerticalBarActions(props) {
-	return <ButtonGroup small {...props} />;
+	return <ButtonGroup medium {...props} />;
 }
 
 function VerticalBarActionBack(props) {

client/views/room/Header/Header.js

@@ -36,10 +36,10 @@ const RoomHeader = ({ room }) => {
 	const { isMobile } = useLayout();
 	const avatar = <RoomAvatar room={room}/>;
 	return <Header>
-		<Header.ToolBox>
+		{ (isMobile || room.prid) && <Header.ToolBox>
 			{ isMobile && <Burger/>}
 			{ room.prid && <BackToRoom small={!isMobile} prid={room.prid}/>}
-		</Header.ToolBox>
+		</Header.ToolBox> }
 		{ avatar && <Header.Avatar>{avatar}</Header.Avatar> }
 		<Header.Content>
 			<Header.Content.Row>

client/views/room/providers/ToolboxProvider.tsx

@@ -68,19 +68,22 @@ export const ToolboxProvider = ({ children, room }: { children: ReactNode; room:
 	const tab = params?.tab;
 	const context = params?.context;
 
-	const open = useMutableCallback((actionId, context) => {
+	const close = useMutableCallback(() => {
 		router.push({
 			...params,
-			tab: actionId,
-			context,
+			tab: '',
+			context: '',
 		});
 	});
 
-	const close = useMutableCallback(() => {
+	const open = useMutableCallback((actionId, context) => {
+		if (actionId === activeTabBar[0]?.id) {
+			return close();
+		}
 		router.push({
 			...params,
-			tab: '',
-			context: '',
+			tab: actionId,
+			context,
 		});
 	});
 

package.json

@@ -138,15 +138,15 @@
 		"@nivo/line": "^0.61.1",
 		"@nivo/pie": "^0.61.1",
 		"@rocket.chat/apps-engine": "1.21.0-alpha.4235",
-		"@rocket.chat/css-in-js": "^0.20.0",
-		"@rocket.chat/emitter": "^0.20.0",
-		"@rocket.chat/fuselage": "^0.20.0",
-		"@rocket.chat/fuselage-hooks": "^0.20.0",
-		"@rocket.chat/fuselage-polyfills": "^0.20.0",
-		"@rocket.chat/fuselage-ui-kit": "^0.20.0",
-		"@rocket.chat/icons": "^0.20.0",
-		"@rocket.chat/mp3-encoder": "^0.20.0",
-		"@rocket.chat/ui-kit": "^0.20.0",
+		"@rocket.chat/css-in-js": "^0.20.1",
+		"@rocket.chat/emitter": "^0.20.1",
+		"@rocket.chat/fuselage": "^0.20.1",
+		"@rocket.chat/fuselage-hooks": "^0.20.1",
+		"@rocket.chat/fuselage-polyfills": "^0.20.1",
+		"@rocket.chat/fuselage-ui-kit": "^0.20.1",
+		"@rocket.chat/icons": "^0.20.1",
+		"@rocket.chat/mp3-encoder": "^0.20.1",
+		"@rocket.chat/ui-kit": "^0.20.1",
 		"@slack/client": "^4.12.0",
 		"@types/fibers": "^3.1.0",
 		"@types/mkdirp": "^1.0.1",