Fixes fossasia#3028 - Improved Staff Pick Badge (fossasia#3030)

* Fixes 3028 - Improved Staff Pick Badge * Fix travis
swaminaathakrishnan · Nov 12, 2019 · 98ab003 · 98ab003
1 parent 4c14c8c
commit 98ab003
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 12 deletions.
diff --git a/src/components/ChatApp/MessageListItem/generateMessageBubbleUtil.js b/src/components/ChatApp/MessageListItem/generateMessageBubbleUtil.js
@@ -90,6 +90,7 @@ const generateDateBubble = message => {
   );
 };
 
+/*
 const generateGifBubble = (
   action,
   index,
@@ -114,6 +115,7 @@ const generateGifBubble = (
     </MessageContainer>
   );
 };
+*/
 
 const generateAnswerBubble = (
   action,
@@ -366,17 +368,17 @@ export const generateMessageBubble = (
           );
         } else {
         */
-          listItems.push(
-            generateAnswerBubble(
-              actionType,
-              index,
-              replacedText,
-              message,
-              latestUserMsgID,
-              showFeedback,
-            ),
-          );
-        //}
+        listItems.push(
+          generateAnswerBubble(
+            actionType,
+            index,
+            replacedText,
+            message,
+            latestUserMsgID,
+            showFeedback,
+          ),
+        );
+        // }
         break;
       }
       case 'anchor': {

diff --git a/src/components/cms/SkillCardScrollList/SkillCard.js b/src/components/cms/SkillCardScrollList/SkillCard.js
@@ -13,6 +13,8 @@ import getImageSrc from '../../../utils/getImageSrc';
 import styled from 'styled-components';
 import SkillExampleBubble from '../../shared/SkillExampleBubble';
 import { ImageContainer, StaffPickImage } from '../SkillsStyle';
+import Tooltip from '../../shared/ToolTip';
+
 import {
   Card,
   Image,
@@ -211,7 +213,11 @@ class SkillCard extends Component {
               >
                 <span>{skillName}</span>
               </Link>
-              {staffPick && <StaffPickImage />}
+              {staffPick && (
+                <Tooltip title="Staff Pick">
+                  <StaffPickImage />
+                </Tooltip>
+              )}
             </TitleContainer>
             <RatingContainer>
               <Link

diff --git a/src/components/cms/SkillPage/SkillListing.js b/src/components/cms/SkillPage/SkillListing.js
@@ -20,6 +20,7 @@ import Ratings from 'react-ratings-declarative';
 import { reportSkill } from '../../../apis';
 import { CenterReaderContainer } from '../../shared/Container';
 import ScrollTopButton from '../../shared/ScrollTopButton';
+import { StaffPickBadge } from '../../shared/Badges';
 
 // Static Assets
 import CircleImage from '../../shared/CircleImage';
@@ -293,6 +294,7 @@ class SkillListing extends Component {
       dynamicContent,
       examples,
       skillRatings,
+      staffPick,
     } = this.props.metaData;
 
     const { loadingSkill, isAdmin, accessToken, history } = this.props;
@@ -348,6 +350,7 @@ class SkillListing extends Component {
                   {author}
                 </AuthorSpan>
               </h4>
+              {staffPick && <StaffPickBadge />}
               <SingleRating>
                 <Ratings
                   rating={skillRatings.avgStar}
@@ -535,6 +538,7 @@ SkillListing.propTypes = {
   snackMessage: PropTypes.string,
   accessToken: PropTypes.string,
   isAdmin: PropTypes.bool,
+  staffPick: PropTypes.bool,
 };
 
 function mapStateToProps(store) {

diff --git a/src/components/shared/Badges.js b/src/components/shared/Badges.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import _Chip from '@material-ui/core/Chip';
+import _PeopleIcon from '@material-ui/icons/People';
+import styled from 'styled-components';
+
+const StaffChip = styled(_Chip)`
+  background-color: #f9a602;
+  color: white;
+`;
+
+const PeopleIcon = styled(_PeopleIcon)`
+  color: white;
+`;
+
+export const StaffPickBadge = () => {
+  return (
+    <StaffChip
+      size="small"
+      icon={<PeopleIcon />}
+      label="Staff Pick"
+      style={{
+        margin: '5px 0px',
+        padding: '2px',
+      }}
+    />
+  );
+};