Styles

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

@@ -0,0 +1,27 @@
+.button {
+  color: #2a2a2a;
+  background: none;
+  padding: 0px;
+  border: none;
+  margin-right: 10px;
+}
+
+.button:hover {
+  color: #767676;
+  cursor: pointer;
+}
+
+.button.featured {
+  color: #10589b;
+}
+
+.button.featured:hover {
+  color: #10589b;
+  cursor: pointer;
+}
+
+.icon {
+  font-size: 18px;
+  padding: 0 5px;
+  vertical-align: middle;
+}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import cn from 'classnames';
-import styles from './styles.css';
+import styles from './FeaturedButton.css';
 import {name} from '../../package.json';
 import {can} from 'plugin-api/beta/client/services';
 import {withTags} from 'plugin-api/beta/client/hocs';
@@ -14,7 +14,10 @@ const FeaturedButton = (props) => {
       className={cn([name, styles.button, {[styles.featured] : alreadyTagged}])}
       onClick={alreadyTagged ? deleteTag : postTag} >
 
-      {alreadyTagged ? <Icon name="star" /> : <Icon name="star_border" />}
+      {alreadyTagged ? 
+        <Icon name="star" className={styles.icon} /> :
+        <Icon name="star_border" className={styles.icon} />
+      }
 
     </button>
   ) : null ;

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

@@ -0,0 +1,43 @@
+.featuredComment {
+  margin: 10px 0 35px;
+}
+
+.featuredComment:last-child {
+  margin: 10px 0;
+}
+
+.featuredComment .goTo {
+  color: #1d5294;
+  font-size: 13px;
+  padding: 5px 0;
+  display: inline-block;
+}
+
+.featuredComment .goToIcon {
+  font-size: 16px;
+  vertical-align: middle;
+  line-height: 13px;
+  font-weight: bold;
+}
+
+.featuredComment .goTo:hover {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.featuredComment .quote {
+  line-height: 20px;
+  text-align: left;
+  letter-spacing: 0.1px;
+  margin: 0;
+  quotes: '\201c' '\201d';
+  margin-bottom: 10px;
+}
+
+.featuredComment .quote:before {
+  content: open-quote; 
+}
+
+.featuredComment .quote:after  {
+  content: close-quote;
+}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import cn from 'classnames';
-import styles from './styles.css';
+import styles from './FeaturedComment.css';
 import {name} from '../../package.json';
 import {timeago} from 'coral-framework/services/i18n';
 import {Icon} from 'plugin-api/beta/client/components/ui';
@@ -8,9 +8,9 @@ import {Icon} from 'plugin-api/beta/client/components/ui';
 const FeaturedComment = ({comment}) => {
   return (
     <div className={cn(styles.featuredComment, `${name}__featured-comment`)}>
-      <p className={cn(styles.body, `${name}__featured-comment__comment-body`)}>
-        "{comment.body}"
-      </p>
+      <blockquote className={cn(styles.quote, `${name}__featured-comment__comment-body`)}>
+        {comment.body}
+      </blockquote>
       <footer>
         <div>
           <strong className={cn(styles.username, `${name}__featured-comment__username`)}>
@@ -21,7 +21,7 @@ const FeaturedComment = ({comment}) => {
           </span>
         </div>
         <a className={cn(styles.goTo, `${name}__featured-comment__go-to`)}>
-          Go to conversation<Icon name="keyboard_arrow_right" />
+          Go to conversation<Icon name="keyboard_arrow_right" className={styles.goToIcon} />
         </a>
       </footer>
     </div>

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

@@ -0,0 +1,20 @@
+.tagIcon {
+  font-size: 12px;
+  vertical-align: middle;
+}
+
+.icon {
+  font-size: 12px;
+  vertical-align: middle;
+}
+
+.tag {
+  background-color: #10589b;
+  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/FeaturedTag.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './styles.css';
+import styles from './FeaturedTag.css';
 import {t} from 'plugin-api/beta/client/services';
 
 const isFeatured = (tags) => !!tags.filter((t) => t.tag.name === 'FEATURED').length;

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

@@ -1,79 +0,0 @@
-.tagIcon {
-  font-size: 12px;
-  vertical-align: middle;
-}
-
-.icon {
-  font-size: 12px;
-  vertical-align: middle;
-}
-
-
-
-
-.button {
-  composes: buttonReset from "coral-framework/styles/reset.css";
-  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-color: #f7917a;
-  font-size: 12px;
-  font-weight: bold;
-  color: white;
-  display: inline-block;
-  margin: 0px 5px;
-  padding: 5px 5px;
-  border-radius: 2px;
-}
-
-.featuredComments {
-  padding: 20px;
-  background-color: #f9f9f9;
-  margin: 10px 0 30px;
-}
-
-.featuredComment {
-  margin: 10px 0 35px;
-}
-
-.featuredComment:last-child {
-  margin: 10px 0;
-}
-
-.featuredComment .goTo {
-  color: #1d5294;
-  font-size: 13px;
-  padding: 5px 0;
-  display: inline-block;
-}
-
-.featuredComment .goTo:hover {
-  cursor: pointer;
-  text-decoration: underline;
-}
-
-.featuredComment .body {
-  line-height: 20px;
-  text-align: left;
-  letter-spacing: 0.1px;
-}

plugins/talk-plugin-featured-comments/client/containers/TabPane.js

@@ -13,6 +13,7 @@ const enhance = compose(
                   created_at
                   user {
                     id
+                    username
                   }
               }
           }