From f8a69874769de170840c2137a26368f92529c132 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 13 Jul 2017 16:36:41 -0300
Subject: [PATCH] Styles

---
 .../client/components/FeaturedButton.css      | 27 +++++++
 .../client/components/FeaturedButton.js       |  7 +-
 .../client/components/FeaturedComment.css     | 43 ++++++++++
 .../client/components/FeaturedComment.js      | 10 +--
 .../client/components/FeaturedTag.css         | 20 +++++
 .../client/components/FeaturedTag.js          |  2 +-
 .../client/components/styles.css              | 79 -------------------
 .../client/containers/TabPane.js              |  1 +
 8 files changed, 102 insertions(+), 87 deletions(-)
 create mode 100644 plugins/talk-plugin-featured-comments/client/components/FeaturedButton.css
 create mode 100644 plugins/talk-plugin-featured-comments/client/components/FeaturedComment.css
 create mode 100644 plugins/talk-plugin-featured-comments/client/components/FeaturedTag.css
 delete mode 100644 plugins/talk-plugin-featured-comments/client/components/styles.css

diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.css b/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.css
new file mode 100644
index 000000000..804ae2c92
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js
index 5475ea107..a9da1ecbf 100644
--- a/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js
+++ b/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 ;
diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.css b/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.css
new file mode 100644
index 000000000..4a735914d
--- /dev/null
+++ b/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;
+}
diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js
index a3f71b1d8..6365a08ac 100644
--- a/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js
+++ b/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>
diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedTag.css b/plugins/talk-plugin-featured-comments/client/components/FeaturedTag.css
new file mode 100644
index 000000000..8874bfa0c
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedTag.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedTag.js
index 5bfaefc74..ef1758c32 100644
--- a/plugins/talk-plugin-featured-comments/client/components/FeaturedTag.js
+++ b/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;
diff --git a/plugins/talk-plugin-featured-comments/client/components/styles.css b/plugins/talk-plugin-featured-comments/client/components/styles.css
deleted file mode 100644
index 502807623..000000000
--- a/plugins/talk-plugin-featured-comments/client/components/styles.css
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js
index 313b5bbec..567f52593 100644
--- a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js
+++ b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js
@@ -13,6 +13,7 @@ const enhance = compose(
                   created_at
                   user {
                     id
+                    username
                   }
               }
           }