From f3e075fa26ada2c08824cbac5bf60ff1a0f63314 Mon Sep 17 00:00:00 2001
From: Gabriel Henriques <gabriel.henriques@rocket.chat>
Date: Wed, 4 Mar 2020 17:51:50 -0300
Subject: [PATCH 1/3] Border on scroll

---
 client/components/basic/Page.js | 46 +++++++++++++++++++--------------
 1 file changed, 27 insertions(+), 19 deletions(-)

diff --git a/client/components/basic/Page.js b/client/components/basic/Page.js
index 67034e0caec7..54e3cd8ada12 100644
--- a/client/components/basic/Page.js
+++ b/client/components/basic/Page.js
@@ -1,32 +1,40 @@
 import { Box, Flex, Margins, Scrollable } from '@rocket.chat/fuselage';
-import React, { useMemo } from 'react';
+import React, { useMemo, createContext, useContext, useState } from 'react';
 
 import { BurgerMenuButton } from './BurgerMenuButton';
 
+const PageContext = createContext();
 export function Page(props) {
-	return <Flex.Container direction='column'>
-		<Box is='section' style={useMemo(() => ({ height: '100%' }), [])} {...props} />
-	</Flex.Container>;
+	const [border, setBorder] = useState(false);
+	return <PageContext.Provider value={[border, setBorder]}>
+		<Flex.Container direction='column'>
+			<Box is='section' style={useMemo(() => ({ height: '100%' }), [])} {...props} />
+		</Flex.Container>
+	</PageContext.Provider>;
 }
 
 export function PageHeader({ children, title, ...props }) {
-	return <Margins all='x16'>
-		<Flex.Container wrap='nowrap' alignItems='center'>
-			<Box style={{ minHeight: '2.75rem' }} {...props}>
-				<Margins inlineEnd='x8'>
-					<BurgerMenuButton />
-				</Margins>
-				<Flex.Item grow='1'>
-					<Box is='h1' textStyle='h1' textColor='default'>{title}</Box>
-				</Flex.Item>
-				{children}
-			</Box>
-		</Flex.Container>
-	</Margins>;
+	const [border] = useContext(PageContext);
+	return <Box style={{ borderBlockEndColor: border ? 'var(--color-gray-lightest)' : 'transparent', transition: 'border-block-end-color 0.3s', borderBlockEnd: '2px solid transparent' }}>
+		<Margins all='x16'>
+			<Flex.Container wrap='nowrap' alignItems='center' direction='row'>
+				<Box style={{ minHeight: '2.75rem' }} {...props}>
+					<Margins inlineEnd='x8'>
+						<BurgerMenuButton />
+					</Margins>
+					<Flex.Item grow='1'>
+						<Box is='h1' textStyle='h1' textColor='default'>{title}</Box>
+					</Flex.Item>
+					{children}
+				</Box>
+			</Flex.Container>
+		</Margins>
+	</Box>;
 }
 
-export function PageContent(props) {
-	return <Scrollable>
+export function PageContent({ scrollCb, ...props }) {
+	const [, setBorder] = useContext(PageContext);
+	return <Scrollable scrollCb={({ top }) => { setBorder(!top); }}>
 		<Box style={useMemo(() => ({ padding: '1rem' }), [])} {...props} />
 	</Scrollable>;
 }

From 06bb2ef5718a98032847ebc1bc651406455d7181 Mon Sep 17 00:00:00 2001
From: Gabriel Henriques <gabriel.henriques@rocket.chat>
Date: Thu, 5 Mar 2020 11:21:31 -0300
Subject: [PATCH 2/3] Props fixes

---
 client/components/basic/Page.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/components/basic/Page.js b/client/components/basic/Page.js
index 54e3cd8ada12..2d4af84988c0 100644
--- a/client/components/basic/Page.js
+++ b/client/components/basic/Page.js
@@ -17,12 +17,12 @@ export function PageHeader({ children, title, ...props }) {
 	const [border] = useContext(PageContext);
 	return <Box style={{ borderBlockEndColor: border ? 'var(--color-gray-lightest)' : 'transparent', transition: 'border-block-end-color 0.3s', borderBlockEnd: '2px solid transparent' }}>
 		<Margins all='x16'>
-			<Flex.Container wrap='nowrap' alignItems='center' direction='row'>
+			<Flex.Container wrap='no-wrap' alignItems='center' direction='row'>
 				<Box style={{ minHeight: '2.75rem' }} {...props}>
 					<Margins inlineEnd='x8'>
 						<BurgerMenuButton />
 					</Margins>
-					<Flex.Item grow='1'>
+					<Flex.Item grow={1}>
 						<Box is='h1' textStyle='h1' textColor='default'>{title}</Box>
 					</Flex.Item>
 					{children}
@@ -32,9 +32,9 @@ export function PageHeader({ children, title, ...props }) {
 	</Box>;
 }
 
-export function PageContent({ scrollCb, ...props }) {
+export function PageContent(props) {
 	const [, setBorder] = useContext(PageContext);
-	return <Scrollable scrollCb={({ top }) => { setBorder(!top); }}>
+	return <Scrollable onScrollContent={({ top }) => { setBorder(!top); console.log(top); }}>
 		<Box style={useMemo(() => ({ padding: '1rem' }), [])} {...props} />
 	</Scrollable>;
 }

From 1b68b9601a06a88018d5434f43905937a578240c Mon Sep 17 00:00:00 2001
From: gabriellsh <40830821+gabriellsh@users.noreply.github.com>
Date: Thu, 5 Mar 2020 11:49:28 -0300
Subject: [PATCH 3/3] Remove log

---
 client/components/basic/Page.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/components/basic/Page.js b/client/components/basic/Page.js
index 2d4af84988c0..37b39c81edec 100644
--- a/client/components/basic/Page.js
+++ b/client/components/basic/Page.js
@@ -34,7 +34,7 @@ export function PageHeader({ children, title, ...props }) {
 
 export function PageContent(props) {
 	const [, setBorder] = useContext(PageContext);
-	return <Scrollable onScrollContent={({ top }) => { setBorder(!top); console.log(top); }}>
+	return <Scrollable onScrollContent={({ top }) => { setBorder(!top); }}>
 		<Box style={useMemo(() => ({ padding: '1rem' }), [])} {...props} />
 	</Scrollable>;
 }