Yarn workspaces

Summary:
1) moved "sonar/desktop/src" to "sonar/desktop/app/src", so "app" is now a separate package containing the core Flipper app code
2) Configured yarn workspaces with the root in "sonar/desktop": app, static, pkg, doctor, headless-tests. Plugins are not included for now, I plan to do this later.

Reviewed By: jknoxville

Differential Revision: D20535782

fbshipit-source-id: 600b2301960f37c7d72166e0d04eba462bec9fc1

desktop/app/src/ui/components/RoundedSection.tsx

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React from 'react';
+import styled from '@emotion/styled';
+import {colors} from './colors';
+import Heading from './Heading';
+import FlexColumn from './FlexColumn';
+
+const Divider = styled.hr({
+  margin: '16px -20px 20px -20px',
+  border: 'none',
+  borderTop: `1px solid ${colors.light05}`,
+});
+Divider.displayName = 'RoundedSection:Divider';
+
+const Container = styled.div({
+  background: colors.white,
+  borderRadius: 10,
+  boxShadow: '0 1px 3px rgba(0,0,0,0.25)',
+  marginBottom: '20px',
+  width: '100%',
+  padding: 20,
+});
+Container.displayName = 'RoundedSection:Container';
+
+/**
+ * Section with a title, dropshadow, rounded border and white backgorund.
+ *
+ * Recommended to be used inside a CenteredView
+ */
+const RoundedSection: React.FC<{title: string}> = ({title, children}) => (
+  <Container>
+    <Heading>{title}</Heading>
+    <Divider />
+    <FlexColumn>{children}</FlexColumn>
+  </Container>
+);
+
+export default RoundedSection;