From 61821fbec74fd48f30a1f8272f6c2e3c7cc48a5f Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Mon, 13 Jan 2020 09:45:02 -0800
Subject: [PATCH] Improved sidebar section styling

Summary:
Pritesh marked correctly that it was not entirely clear whether sections are collapsed or not. It seemed the arrows were off, checked the Android style guide, the arrows are correct, but difference is that the bottom border of sections is missing. Adding those clarifies the collapsed state properly I think.

https://pxl.cl/Wpnq

Reviewed By: passy

Differential Revision: D19372987

fbshipit-source-id: 2fb898301f63bd8edb2c3c9851f89edc801a524f
---
 src/chrome/mainsidebar/MainSidebar2.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/chrome/mainsidebar/MainSidebar2.tsx b/src/chrome/mainsidebar/MainSidebar2.tsx
index e24a479c0..2c824a0ef 100644
--- a/src/chrome/mainsidebar/MainSidebar2.tsx
+++ b/src/chrome/mainsidebar/MainSidebar2.tsx
@@ -69,7 +69,8 @@ type SectionLevel = 1 | 2 | 3;
 const SidebarSectionButton = styled('button')<{
   level: SectionLevel;
   color: string;
-}>(({level, color}) => ({
+  collapsed: boolean;
+}>(({level, color, collapsed}) => ({
   fontWeight: level === 3 ? 'normal' : 'bold',
   borderRadius: 0,
   border: 'none',
@@ -86,13 +87,15 @@ const SidebarSectionButton = styled('button')<{
 const SidebarSectionBody = styled('div')<{
   level: SectionLevel;
   collapsed: boolean;
-}>(({collapsed}) => ({
+}>(({collapsed, level}) => ({
   flexShrink: 0,
   overflow: 'hidden',
   maxHeight: collapsed ? 0 : 2000, // might need increase if too many plugins...
   transition: collapsed
     ? 'max-height 0.3s ease-out'
     : 'max-height 0.5s ease-in',
+  borderBottom:
+    level === 2 ? `1px solid ${colors.sectionHeaderBorder}` : undefined,
 }));
 
 const SidebarSection: React.FC<{
@@ -109,7 +112,8 @@ const SidebarSection: React.FC<{
       <SidebarSectionButton
         onClick={() => setCollapsed(s => !s)}
         level={level}
-        color={color}>
+        color={color}
+        collapsed={collapsed}>
         <HBox grow="left">
           {typeof title === 'function' ? title(collapsed) : title}
           {level < 3 && children && (
@@ -122,7 +126,6 @@ const SidebarSection: React.FC<{
         </HBox>
       </SidebarSectionButton>
       <SidebarSectionBody level={level} collapsed={collapsed}>
-        {level === 1 && <div style={{height: 8}} />}
         {children}
       </SidebarSectionBody>
     </>