Improve multiple element selector UI

Summary:
Layer selection is pretty easy to miss, as reported in for example: https://fb.workplace.com/groups/flippersupport/permalink/1098169193997071/

Moved the layer selection to the top of the view and gave it some highlighting + dynamic height. The section is no longer collapsible.

Changelog: [Layout] Make the layer selection more prominent

Reviewed By: priteshrnandgaonkar

Differential Revision: D27708650

fbshipit-source-id: c86a55c3a20794aee86e64b6766b2ca4dd6b563f

desktop/plugins/public/layout/MultipleSelectionSection.tsx

@@ -7,41 +7,16 @@
  * @format
  */
 
-import {
-  FlexColumn,
-  FlexBox,
-  Element,
-  ElementID,
-  ElementsInspector,
-  Glyph,
-  colors,
-  styled,
-} from 'flipper';
+import {Typography} from 'antd';
+import {Element, ElementID, ElementsInspector, styled} from 'flipper';
+import {Layout, theme} from 'flipper-plugin';
 import React, {memo, useState} from 'react';
 
-const MultipleSelectorSectionContainer = styled(FlexColumn)({
-  maxHeight: 100,
-});
-
-const MultipleSelectorSectionTitle = styled(FlexBox)({
-  cursor: 'pointer',
-  backgroundColor: '#f6f7f9',
-  padding: '2px',
-  paddingLeft: '9px',
-  width: '325px',
-  height: '20px',
-  fontWeight: 500,
-  boxShadow: '2px 2px 2px #ccc',
-  border: `1px solid ${colors.light20}`,
-  borderTopLeftRadius: '4px',
-  borderTopRightRadius: '4px',
-  textAlign: 'center',
-});
-
-const Chevron = styled(Glyph)({
-  marginRight: 4,
-  marginLeft: -2,
-  marginBottom: 1,
+const MultipleSelectorSectionContainer = styled(Layout.Container)({
+  padding: theme.space.medium,
+  background: theme.backgroundWash,
+  borderTop: `${theme.space.tiny}px solid ${theme.warningColor}`,
+  borderBottom: `${theme.space.tiny}px solid ${theme.warningColor}`,
 });
 
 type MultipleSelectorSectionProps = {
@@ -65,29 +40,24 @@ const MultipleSelectorSection: React.FC<MultipleSelectorSectionProps> = memo(
     const [selectedId, setSelectedId] = useState<ElementID | null | undefined>(
       initialSelectedElement,
     );
-    const [collapsed, setCollapsed] = useState(false);
     return (
-      <MultipleSelectorSectionContainer>
-        <MultipleSelectorSectionTitle
-          onClick={() => {
-            setCollapsed(!collapsed);
-          }}>
-          <Chevron name={collapsed ? 'chevron-up' : 'chevron-down'} size={12} />
-          Multiple elements found at the target coordinates
-        </MultipleSelectorSectionTitle>
-        {!collapsed && (
-          <ElementsInspector
-            onElementSelected={(key: string) => {
-              setSelectedId(key);
-              onElementSelected(key);
-            }}
-            onElementHovered={onElementHovered}
-            onElementExpanded={() => {}}
-            root={null}
-            selected={selectedId}
-            elements={elements}
-          />
-        )}
+      <MultipleSelectorSectionContainer gap>
+        <Typography.Text>
+          Multiple elements were found at the target coordinates. Please select
+          one:
+        </Typography.Text>
+        <ElementsInspector
+          onElementSelected={(key: string) => {
+            setSelectedId(key);
+            onElementSelected(key);
+          }}
+          onElementHovered={onElementHovered}
+          onElementExpanded={() => {}}
+          root={null}
+          selected={selectedId}
+          elements={elements}
+          scrollable={false}
+        />
       </MultipleSelectorSectionContainer>
     );
   },