From 7e8dc28b2f8c7ae051d348b372646481b2d845e9 Mon Sep 17 00:00:00 2001
From: Zhang Qichuan <qichuan@zhangqichuan.com>
Date: Thu, 31 Oct 2019 09:43:31 -0700
Subject: [PATCH] Added margins to the texts on the demo app (#621)

Summary:
![screencap-2019-10-31T060952 432Z](https://user-images.githubusercontent.com/410850/67923337-842c7000-fbe8-11e9-86f4-92b183d11d9c.png)

There is no spacing between the texts on the demo app and I found them difficult to click. So I decided to add some margins to make them more thumb-friendly :)

## Changelog

Make demo app more thumb-friendly
Pull Request resolved: https://github.com/facebook/flipper/pull/621

Test Plan: N/A

Reviewed By: jknoxville

Differential Revision: D18245979

Pulled By: priteshrnandgaonkar

fbshipit-source-id: 9c99a477c4100323144518f56369a42085589f77
---
 .../flipper/sample/RootComponentSpec.java      | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/android/sample/src/main/java/com/facebook/flipper/sample/RootComponentSpec.java b/android/sample/src/main/java/com/facebook/flipper/sample/RootComponentSpec.java
index 85db9fa82..3d179e5b2 100644
--- a/android/sample/src/main/java/com/facebook/flipper/sample/RootComponentSpec.java
+++ b/android/sample/src/main/java/com/facebook/flipper/sample/RootComponentSpec.java
@@ -24,6 +24,7 @@ import com.facebook.litho.annotations.OnUpdateState;
 import com.facebook.litho.annotations.State;
 import com.facebook.litho.fresco.FrescoImage;
 import com.facebook.litho.widget.Text;
+import com.facebook.yoga.YogaEdge;
 
 @LayoutSpec
 public class RootComponentSpec {
@@ -37,39 +38,52 @@ public class RootComponentSpec {
             Text.create(c)
                 .text("Tap to hit get request")
                 .key("1")
+                .marginDip(YogaEdge.ALL, 10)
                 .textSizeSp(20)
                 .clickHandler(RootComponent.hitGetRequest(c)))
         .child(
             Text.create(c)
                 .text("Tap to hit post request")
                 .key("2")
+                .marginDip(YogaEdge.ALL, 10)
                 .textSizeSp(20)
                 .clickHandler(RootComponent.hitPostRequest(c)))
         .child(
             Text.create(c)
                 .text("Trigger Notification")
                 .key("3")
+                .marginDip(YogaEdge.ALL, 10)
                 .textSizeSp(20)
                 .clickHandler(RootComponent.triggerNotification(c)))
         .child(
             Text.create(c)
                 .text("Diagnose connection issues")
                 .key("4")
+                .marginDip(YogaEdge.ALL, 10)
                 .textSizeSp(20)
                 .clickHandler(RootComponent.openDiagnostics(c)))
         .child(
             Text.create(c)
                 .text("Load Fresco image")
                 .key("5")
+                .marginDip(YogaEdge.ALL, 10)
                 .textSizeSp(20)
                 .clickHandler(RootComponent.loadImage(c)))
         .child(
             Text.create(c)
                 .text("Navigate to another page")
-                .key("5")
+                .key("6")
+                .marginDip(YogaEdge.ALL, 10)
                 .textSizeSp(20)
                 .clickHandler(RootComponent.openAlternateActivityOne(c)))
-        .child(displayImage ? FrescoImage.create(c).controller(controller) : null)
+        .child(
+            displayImage
+                ? FrescoImage.create(c)
+                    .controller(controller)
+                    .marginDip(YogaEdge.ALL, 10)
+                    .widthDip(150)
+                    .heightDip(150)
+                : null)
         .build();
   }