Improve layout of screenshots and videos

Summary: The previous table was ugly, and weirdly interactive. This diff changes it to a static layout

Reviewed By: priteshrnandgaonkar

Differential Revision: D18744712

fbshipit-source-id: 9060da07eae836a94ce6d8bb2ebb8a6a54470daa

src/ui/components/AlternatingRows.tsx

@@ -0,0 +1,35 @@
+/**
+ * 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 Bordered from './Bordered';
+import {colors} from './colors';
+
+/**
+ * Displays all children in a bordered, zebra styled vertical layout
+ */
+const AlternatingRows: React.FC<{children: React.ReactNode[]}> = ({
+  children,
+}) => (
+  <Bordered style={{flexDirection: 'column'}}>
+    {children.map((child, idx) => (
+      <div
+        key={idx}
+        style={{
+          padding: 8,
+          background: idx % 2 === 0 ? colors.light02 : colors.white,
+        }}>
+        {child}
+      </div>
+    ))}
+  </Bordered>
+);
+
+export default AlternatingRows;