Translations and functionality

plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js

@@ -1,16 +1,32 @@
 import React from 'react';
 import withTags from './withTags';
+import styles from './styles.css';
+import cn from 'classnames';
+import {t} from 'plugin-api/beta/client/services';
+import {name} from '../../package.json';
+import {Icon} from 'plugin-api/beta/client/components/ui';
 
-class FeaturedButton extends React.Component {
-  render() {
-    const {alreadyTagged, deleteTag, postTag} = this.props;
-    return (
-      <button onClick={alreadyTagged ? deleteTag : postTag}>
-        Feature
-      </button>
-    );
-  }
-}
+const FeaturedButton = (props) => {
+  const {alreadyTagged, deleteTag, postTag} = props;
+
+  return (
+    <button 
+      className={cn([name, styles.button, {[styles.featured] : alreadyTagged}])}
+      onClick={alreadyTagged ? deleteTag : postTag} >
+
+      {alreadyTagged ? (
+        <span>
+          {t('featured')} <Icon name="label" />
+        </span>
+      ) : (
+        <span>
+          {t('feature')} <Icon name="label_outline" />
+        </span>
+      )}
+
+    </button>
+  );
+};
 
 export default withTags('featured')(FeaturedButton); 
- 
+

plugins/talk-plugin-featured-comments/client/components/FeaturedTag.js

@@ -9,7 +9,7 @@ export default (props) => (
     {
       isFeatured(props.comment.tags) && props.depth === 0 ? (
         <span className={styles.tag}>
-          Featured
+          {t('featured')}
         </span>
       ) : null
     }

plugins/talk-plugin-featured-comments/client/components/styles.css

@@ -0,0 +1,33 @@
+.button {
+  color: #2a2a2a;
+  margin: 5px 10px 5px 0px;
+  background: none;
+  padding: 0px;
+  border: none;
+  font-size: inherit;
+}
+
+.button:hover {
+  color: #767676;
+  cursor: pointer;
+}
+
+.button.featured {
+  color: #f7917a;
+}
+
+.button.featured:hover {
+  color: #f7917a;
+  cursor: pointer;
+}
+
+.tag {
+  background: #f7917a;
+  font-size: 12px;
+  font-weight: bold;
+  color: white;
+  display: inline-block;
+  margin: 0px 5px;
+  padding: 5px 5px;
+  border-radius: 2px;
+}

plugins/talk-plugin-featured-comments/client/components/withTags.js

@@ -113,8 +113,6 @@ export default (tag) => (WrappedComponent) => {
   class WithTags extends React.Component {
 
     postTag = () => {
-      console.log(this.props);
-
       const {comment, asset} = this.props;
       
       this.props.addTag({
@@ -122,8 +120,6 @@ export default (tag) => (WrappedComponent) => {
         name: Tag.toUpperCase(),
         assetId: asset.id
       });
-
-      console.log('Post Tag');
     }
 
     deleteTag = () => {
@@ -134,12 +130,8 @@ export default (tag) => (WrappedComponent) => {
         name: Tag.toUpperCase(),
         assetId: asset.id
       });
-      
-      console.log('delete Tag');
     }
-
-
-
+    
     render() {
       const {comment} = this.props;
 

plugins/talk-plugin-featured-comments/client/translations.json

@@ -1,3 +1,10 @@
 {
-  
+  "en" : {
+    "feature": "Feature",
+    "featured": "Featured"
+  },
+  "es" : {
+    "feature" : "Remarcar",
+    "featured": "Remarcado"
+  }
 }