From 2bd87a810044e151addf96e4184088b04c6121ab Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Fri, 29 Nov 2019 06:20:29 -0800
Subject: [PATCH] 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 | 35 +++++++++++++++++++++++++++
 src/ui/components/HBox.tsx            | 21 ++++++++++------
 src/ui/index.tsx                      |  1 +
 3 files changed, 49 insertions(+), 8 deletions(-)
 create mode 100644 src/ui/components/AlternatingRows.tsx

diff --git a/src/ui/components/AlternatingRows.tsx b/src/ui/components/AlternatingRows.tsx
new file mode 100644
index 000000000..02bf5100f
--- /dev/null
+++ b/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;
diff --git a/src/ui/components/HBox.tsx b/src/ui/components/HBox.tsx
index 3d076709a..4821a15cd 100644
--- a/src/ui/components/HBox.tsx
+++ b/src/ui/components/HBox.tsx
@@ -16,10 +16,12 @@ import FlexRow from './FlexRow';
  * It takes two children, 'left' and 'right'. One is assumed to have a fixed (or minimum) size,
  * and the other will grow automatically
  */
-const HBoxContainer = styled(FlexRow)({
-  shrink: 0,
-  alignItems: 'center',
-});
+const HBoxContainer = styled(FlexRow)(
+  ({verticalAlign}: {verticalAlign: string}) => ({
+    shrink: 0,
+    alignItems: verticalAlign,
+  }),
+);
 
 HBoxContainer.displayName = 'HBoxContainer';
 
@@ -27,7 +29,8 @@ const HBox: React.FC<{
   children: [] | [React.ReactNode] | [React.ReactNode, React.ReactNode];
   grow?: 'left' | 'right' | 'auto';
   childWidth?: number;
-}> = ({children, grow, childWidth}) => {
+  verticalAlign?: 'center' | 'top';
+}> = ({children, grow, childWidth, verticalAlign}) => {
   if (children.length > 2) {
     throw new Error('HBox expects at most 2 children');
   }
@@ -45,25 +48,26 @@ const HBox: React.FC<{
     display: 'flex',
     flexDirection: 'column',
   } as const;
+  const vAlign = verticalAlign === 'top' ? 'normal' : 'center';
 
   switch (grow) {
     case 'right':
       return (
-        <HBoxContainer>
+        <HBoxContainer verticalAlign={vAlign}>
           <div style={{...fixedStyle, marginRight: 8}}>{left}</div>
           <div style={growStyle}>{right}</div>
         </HBoxContainer>
       );
     case 'left':
       return (
-        <HBoxContainer>
+        <HBoxContainer verticalAlign={vAlign}>
           <div style={growStyle}>{left}</div>
           <div style={{...fixedStyle, marginLeft: 8}}>{right}</div>
         </HBoxContainer>
       );
     default:
       return (
-        <HBoxContainer>
+        <HBoxContainer verticalAlign={vAlign}>
           <div style={growStyle}>{left}</div>
           <div style={{...growStyle, marginLeft: 8}}>{right}</div>
         </HBoxContainer>
@@ -73,6 +77,7 @@ const HBox: React.FC<{
 HBox.defaultProps = {
   grow: 'right',
   childWidth: 0,
+  verticalAlign: 'center',
 };
 
 HBox.displayName = 'HBox';
diff --git a/src/ui/index.tsx b/src/ui/index.tsx
index c0b4a2c26..6848fd3bc 100644
--- a/src/ui/index.tsx
+++ b/src/ui/index.tsx
@@ -169,3 +169,4 @@ export {default as RoundedSection} from './components/RoundedSection';
 export {default as CenteredView} from './components/CenteredView';
 export {default as Info} from './components/Info';
 export {default as Bordered} from './components/Bordered';
+export {default as AlternatingRows} from './components/AlternatingRows';