From c62207f60595e938088e68b1ee496e7975e0ffaa Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Wed, 26 Jun 2019 13:59:25 +0530
Subject: [PATCH] Add twitter emojis to reviews

---
 .../react-app/package.json                     |  1 +
 .../components/apps/release/review/Reviews.css |  7 +++++++
 .../apps/release/review/SingleReview.js        | 18 ++++++++++++------
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/package.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/package.json
index 6b4aba3fbd5..24acd03ce48 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/package.json
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/package.json
@@ -30,6 +30,7 @@
     "react-router-dom": "latest",
     "react-scripts": "2.1.8",
     "react-star-ratings": "^2.3.0",
+    "react-twemoji": "^0.2.3",
     "react-virtualized": "^9.21.1",
     "reqwest": "^2.0.5",
     "storm-react-diagrams": "^5.2.1"
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/Reviews.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/Reviews.css
index 8678c638919..f77c5a31376 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/Reviews.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/Reviews.css
@@ -13,4 +13,11 @@
     position: absolute;
     bottom: -40px;
     left: 50%;
+}
+
+img.twemoji {
+    height: 1em;
+    width: 1em;
+    margin: 0 .05em 0 .1em;
+    vertical-align: -0.1em;
 }
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/SingleReview.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/SingleReview.js
index 3834b3ff2e3..d76bb00ed26 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/SingleReview.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/SingleReview.js
@@ -1,10 +1,12 @@
 import React from "react";
 import {Avatar} from "antd";
-import {List,Typography} from "antd";
+import {List, Typography} from "antd";
 import StarRatings from "react-star-ratings";
+import Twemoji from "react-twemoji";
+import "./Reviews.css";
 
 const {Text, Paragraph} = Typography;
-const colorList = ['#f0932b','#badc58','#6ab04c','#eb4d4b','#0abde3', '#9b59b6','#3498db','#22a6b3'];
+const colorList = ['#f0932b', '#badc58', '#6ab04c', '#eb4d4b', '#0abde3', '#9b59b6', '#3498db', '#22a6b3'];
 
 class SingleReview extends React.Component {
 
@@ -17,13 +19,17 @@ class SingleReview extends React.Component {
                 <StarRatings
                     rating={review.rating}
                     starRatedColor="#777"
-                    starDimension = "12px"
-                    starSpacing = "2px"
+                    starDimension="12px"
+                    starSpacing="2px"
                     numberOfStars={5}
                     name='rating'
                 />
                 <Text style={{fontSize: 12, color: "#aaa"}} type="secondary"> {review.createdAt}</Text><br/>
-                <Paragraph ellipsis={{ rows: 3, expandable: true }} style={{color: "#777"}}>{review.content}</Paragraph>
+                <Twemoji options={{className: 'twemoji'}}>
+                    <Paragraph ellipsis={{rows: 3, expandable: true}} style={{color: "#777"}}>
+                        {review.content}
+                    </Paragraph>
+                </Twemoji>
             </div>
         );
 
@@ -31,7 +37,7 @@ class SingleReview extends React.Component {
             <div>
                 <List.Item.Meta
                     avatar={
-                        <Avatar style={{ backgroundColor: randomColor, verticalAlign: 'middle' }} size="large">
+                        <Avatar style={{backgroundColor: randomColor, verticalAlign: 'middle'}} size="large">
                             {avatarLetter}
                         </Avatar>
                     }