From ee5fda8dc5eebd3b01b413eb82b76082a46455d4 Mon Sep 17 00:00:00 2001
From: Onuwa Nnachi Isaac <matrix4u2002@gmail.com>
Date: Wed, 15 Jan 2020 13:33:21 +0100
Subject: [PATCH] Add review icon (#64)

* Add review icon

* Check if status is APPROVED
---
 src/common/assets/images/reviewBadge.svg      |  5 ++++
 .../components/DappListItem/DappListItem.jsx  | 24 +++++++++++++------
 .../DappListItem/DappListItem.module.scss     | 13 +++++++++-
 src/modules/Profile/Profile.jsx               |  8 +++++++
 src/modules/Profile/Profile.module.scss       | 12 ++++++++++
 5 files changed, 54 insertions(+), 8 deletions(-)
 create mode 100644 src/common/assets/images/reviewBadge.svg

diff --git a/src/common/assets/images/reviewBadge.svg b/src/common/assets/images/reviewBadge.svg
new file mode 100644
index 0000000..6d5d4fe
--- /dev/null
+++ b/src/common/assets/images/reviewBadge.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="11" fill="white" stroke="white" stroke-width="2"/>
+<path d="M11.3047 1.67263C11.6924 1.2976 12.3076 1.2976 12.6953 1.67263L14.368 3.29082C14.5897 3.50528 14.898 3.60544 15.2034 3.56224L17.5078 3.2363C18.0418 3.16076 18.5396 3.52239 18.6328 4.05367L19.0349 6.34601C19.0882 6.64982 19.2787 6.91203 19.5512 7.0566L21.6071 8.1474C22.0835 8.40021 22.2737 8.98534 22.0368 9.46993L21.0147 11.5608C20.8792 11.8379 20.8792 12.1621 21.0147 12.4392L22.0368 14.5301C22.2737 15.0147 22.0835 15.5998 21.6071 15.8526L19.5512 16.9434C19.2787 17.088 19.0882 17.3502 19.0349 17.654L18.6328 19.9463C18.5396 20.4776 18.0418 20.8392 17.5078 20.7637L15.2034 20.4378C14.898 20.3946 14.5897 20.4947 14.368 20.7092L12.6953 22.3274C12.3076 22.7024 11.6924 22.7024 11.3047 22.3274L9.63198 20.7092C9.4103 20.4947 9.10205 20.3946 8.79664 20.4378L6.49223 20.7637C5.95816 20.8392 5.46041 20.4776 5.36722 19.9463L4.96511 17.654C4.91182 17.3502 4.72131 17.088 4.44884 16.9434L2.39295 15.8526C1.91647 15.5998 1.72635 15.0147 1.96323 14.5301L2.98532 12.4392C3.12078 12.1621 3.12078 11.8379 2.98532 11.5608L1.96323 9.46993C1.72635 8.98534 1.91647 8.40021 2.39295 8.1474L4.44884 7.0566C4.72131 6.91203 4.91182 6.64982 4.96511 6.34601L5.36722 4.05367C5.46041 3.52239 5.95816 3.16076 6.49223 3.2363L8.79664 3.56224C9.10205 3.60544 9.4103 3.50528 9.63198 3.29082L11.3047 1.67263Z" fill="#4360DF"/>
+<path d="M7 13L9.29289 15.2929C9.68342 15.6834 10.3166 15.6834 10.7071 15.2929L17 9" stroke="white" stroke-width="2.2" stroke-linecap="round"/>
+</svg>
diff --git a/src/common/components/DappListItem/DappListItem.jsx b/src/common/components/DappListItem/DappListItem.jsx
index bc90a4d..b57b459 100644
--- a/src/common/components/DappListItem/DappListItem.jsx
+++ b/src/common/components/DappListItem/DappListItem.jsx
@@ -7,6 +7,7 @@ import icon from '../../assets/images/icon.svg'
 import sntIcon from '../../assets/images/SNT.svg'
 import upvoteArrowIcon from '../../assets/images/upvote-arrow.svg'
 import downvoteArrowIcon from '../../assets/images/downvote-arrow.svg'
+import reviewBadge from '../../assets/images/reviewBadge.svg'
 
 const DappListItem = props => {
   const {
@@ -20,7 +21,7 @@ const DappListItem = props => {
     onToggleProfileModal,
   } = props
 
-  const { name, description, image } = dapp
+  const { name, description, image, status } = dapp
 
   const handleUpVote = () => {
     onClickUpVote(dapp)
@@ -43,12 +44,21 @@ const DappListItem = props => {
         className={styles.imgWrapper}
         onClick={() => onToggleProfileModal(dapp.id, name)}
       >
-        <ReactImageFallback
-          className={styles.image}
-          src={image}
-          fallbackImage={icon}
-          alt="App icon"
-        />
+        <div className={styles.logo}>
+          <ReactImageFallback
+            className={styles.image}
+            src={image}
+            fallbackImage={icon}
+            alt="App icon"
+          />
+          {status === 'APPROVED' && (
+            <img
+              src={reviewBadge}
+              className={styles.review_icon}
+              alt="review badge"
+            />
+          )}
+        </div>
       </div>
       <div className={styles.column}>
         <div onClick={() => onToggleProfileModal(dapp.id, name)}>
diff --git a/src/common/components/DappListItem/DappListItem.module.scss b/src/common/components/DappListItem/DappListItem.module.scss
index 66aa17a..076218d 100644
--- a/src/common/components/DappListItem/DappListItem.module.scss
+++ b/src/common/components/DappListItem/DappListItem.module.scss
@@ -42,15 +42,26 @@
   cursor: pointer;
 }
 
+.logo {
+  display: flex;
+  align-items: center;
+  padding: 0 calculateRem(20);
+}
+
 .image {
   max-width: calculateRem(40);
   max-height: calculateRem(40);
-  margin-top: calculateRem(15);
+  margin-top: calculateRem(10);
   margin-right: calculateRem(16);
   border-radius: 50%;
   cursor: pointer;
 }
 
+.review_icon {
+  margin-left: calculateRem(-30);
+  margin-top: calculateRem(40);
+}
+
 .url {
   font-size: calculateRem(12);
   color: $link-color;
diff --git a/src/modules/Profile/Profile.jsx b/src/modules/Profile/Profile.jsx
index 36e57a3..f203b29 100644
--- a/src/modules/Profile/Profile.jsx
+++ b/src/modules/Profile/Profile.jsx
@@ -4,6 +4,7 @@ import ReactImageFallback from 'react-image-fallback'
 import Modal from '../../common/components/Modal'
 import styles from './Profile.module.scss'
 import icon from '../../common/assets/images/icon.svg'
+import reviewBadge from '../../common/assets/images/reviewBadge.svg'
 import { DappState } from '../../common/data/dapp'
 
 const ProfileContent = ({
@@ -17,6 +18,7 @@ const ProfileContent = ({
   editable,
   onClickWithdraw,
   onClickUpdateMetadata,
+  status,
 }) => {
   return (
     <>
@@ -60,6 +62,12 @@ const ProfileContent = ({
             </a>
           </span>
         </div>
+        {status === 'APPROVED' && (
+          <div className={styles.reviewed}>
+            <img src={reviewBadge} alt="review badge" />
+            <span>Reviewed</span>
+          </div>
+        )}
         <div className={styles.ranking}>
           <span className={styles.heading}>Ranking</span>
           <div className={styles.rank}>
diff --git a/src/modules/Profile/Profile.module.scss b/src/modules/Profile/Profile.module.scss
index 711a4d5..4bdeef6 100644
--- a/src/modules/Profile/Profile.module.scss
+++ b/src/modules/Profile/Profile.module.scss
@@ -115,6 +115,18 @@ a {
   flex-direction: column;
 }
 
+.reviewed {
+  border-bottom: 1px solid #eef2f5;
+  box-shadow: inset 0px 1px 0px #eef2f5;
+  padding: calculateRem(15) calculateRem(20);
+  display: flex;
+  flex-direction: row;
+  span {
+    margin-left: calculateRem(10);
+    align-self: center;
+  }
+}
+
 .ranking {
   border-bottom: 1px solid #eef2f5;
   box-shadow: inset 0px 1px 0px #eef2f5;