From 9624c803a115f0e9c6698c62496a7f4196e36661 Mon Sep 17 00:00:00 2001
From: John Knox <jknox@fb.com>
Date: Tue, 10 Sep 2019 06:44:27 -0700
Subject: [PATCH] Render predefined comments

Summary: These strings be provided by the api.

Reviewed By: passy

Differential Revision: D17282133

fbshipit-source-id: a818f915c0a21f84894a6073d2cc08669647caaa
---
 src/chrome/RatingButton.tsx | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/chrome/RatingButton.tsx b/src/chrome/RatingButton.tsx
index 98009bded..40439b2cc 100644
--- a/src/chrome/RatingButton.tsx
+++ b/src/chrome/RatingButton.tsx
@@ -36,11 +36,29 @@ class PredefinedComment extends Component<{
   selected: boolean;
   onClick: (_: unknown) => unknown;
 }> {
+  static Container = styled('div')((props: {selected: boolean}) => {
+    return {
+      border: '1px solid #f2f3f5',
+      cursor: 'pointer',
+      borderRadius: 24,
+      backgroundColor: props.selected ? '#ecf3ff' : '#f2f3f5',
+      marginBottom: 4,
+      marginRight: 4,
+      padding: '4px 8px',
+      color: props.selected ? 'rgb(56, 88, 152)' : undefined,
+      borderColor: props.selected ? '#3578e5' : undefined,
+      ':hover': {
+        borderColor: '#3578e5',
+      },
+    };
+  });
   render() {
     return (
-      <div onClick={this.props.onClick}>
-        {this.props.comment + (this.props.selected ? ' - Y' : ' - N')}
-      </div>
+      <PredefinedComment.Container
+        onClick={this.props.onClick}
+        selected={this.props.selected}>
+        {this.props.comment}
+      </PredefinedComment.Container>
     );
   }
 }
@@ -51,6 +69,7 @@ const Row = styled(FlexRow)({
   justifyContent: 'center',
   textAlign: 'center',
   color: '#9a9a9a',
+  flexWrap: 'wrap',
 });
 
 class FeedbackComponent extends Component<