Merge pull request #339 from coralproject/comment-design-pass

Comment stream design pass

client/coral-embed-stream/style/default.css

@@ -4,10 +4,10 @@ html, body {
 }
 
 body {
-  font-family: 'Lato', sans-serif;
   font-family: 'Open Sans', sans-serif;
+  font-family: 'Lato', sans-serif;
   width: 100%;
-  font-size: 12px;
+  font-size: 14px;
   margin: 0px;
   padding: 0px 0px 50px 0px;
 }
@@ -17,16 +17,16 @@ body {
 }
 
 button {
-  padding: 5px 10px;
-  margin: 5px;
+  margin: 5px 10px 5px 0px;
   background: none;
+  padding: 0px;
   border: none;
+  font-size: inherit;
 }
 
 button:hover {
   border-radius: 2px;
-  color: #FFF;
-  background-color: rgb(155, 155, 155);
+  color: #767676;
 }
 
 button i {
@@ -58,6 +58,17 @@ hr {
   font-weight: bold;
 }
 
+/* Coral sign in button */
+
+#coralSignInButton {
+    background-color: #2a2a2a;
+    color: #FFF;
+}
+
+#coralSignInButton:hover {
+  background-color: #767676;
+}
+
 /* Info Box Styles */
 .coral-plugin-infobox-info {
   top: 0;
@@ -65,10 +76,9 @@ hr {
   background: rgb(35,118,216);
   color: white;
   width: 100%;
-  text-align: center;
+  text-align: left;
   padding: 10px;
   margin-bottom: 10px;
-  font-weight: bold;
   display: block;
 }
 
@@ -157,19 +167,31 @@ hr {
 }
 
 .coral-plugin-commentcontent-text {
-  margin-bottom: 10px;
+  margin-bottom: 7px;
 }
 
 .coral-plugin-author-name-text {
   display: inline-block;
-  margin-right: 10px;
-  font-weight: bolder;
+  margin: 10px 8px 10px 0;
+  font-weight: bold;
 }
 
 .coral-plugin-author-name-bio-flag {
   float: right;
 }
 
+/* Tag Labels */
+
+.coral-plugin-tag-label {
+  background-color: #4C1066;
+  color: white;
+  display: inline-block;
+  margin: 10px 10px;
+  padding: 5px 5px;
+  border-radius: 2px;
+}
+
+
 
 /* Reply styles */
 
@@ -206,8 +228,9 @@ hr {
 }
 
 .coral-plugin-pubdate-text {
-  color: #CCC;
+  color: #696969;
   display: inline-block;
+  font-size: .75rem;
 }
 
 .coral-plugin-permalinks-container {

client/coral-plugin-author-name/AuthorName.js

@@ -1,6 +1,5 @@
 import React, {Component} from 'react';
 const packagename = 'coral-plugin-author-name';
-import styles from './styles.css';
 
 export default class AuthorName extends Component {
 
@@ -24,8 +23,7 @@ export default class AuthorName extends Component {
     const {author} = this.props;
     return (
       <div
-        className={`${packagename}-text`}
-        className={`${styles.authorName}`}>
+        className={`${packagename}-text`}>
         {author && author.name}
       </div>
     );

client/coral-plugin-commentcontent/CommentContent.js

@@ -1,5 +1,5 @@
 import React from 'react';
-const name = 'coral-plugin-content';
+const name = 'coral-plugin-commentcontent';
 
 const Content = ({body, styles}) => {
   const textbreaks = body.split('\n');

client/coral-plugin-permalinks/PermalinkButton.js

@@ -49,8 +49,8 @@ class PermalinkButton extends React.Component {
     return (
       <div className={`${name}-container`}>
         <button onClick={this.toggle} className={`${name}-button`}>
-          <i className={`${name}-icon material-icons`} aria-hidden={true}>link</i>
           {lang.t('permalink.permalink')}
+          <i className={`${name}-icon material-icons`} aria-hidden={true}>link</i>
         </button>
         <div className={`${name}-popover ${styles.container} ${this.state.popoverOpen ? 'active' : ''}`}>
           <input

client/coral-plugin-tag-label/TagLabel.js

@@ -1,8 +1,6 @@
 import React from 'react';
 
-import styles from './styles.css';
-
-const TagLabel = ({isStaff}) => <div className={`${styles.staff}`}>
+const TagLabel = ({isStaff}) => <div className='coral-plugin-tag-label'>
   {isStaff ? 'Staff' : ''}
 </div>;
 

client/coral-plugin-tag-label/styles.css

@@ -1,7 +0,0 @@
-.staff {
-  background-color: #4C1066;
-  color: white;
-  display: inline-block;
-  margin: 10px 10px;
-  padding: 5px 5px;
-}

client/coral-settings/components/NotLoggedIn.css

@@ -11,5 +11,4 @@
   cursor: pointer;
   margin: 0px;
   padding-bottom: 2px;
-  border-bottom: solid 1px black;
 }

client/coral-settings/components/NotLoggedIn.js

@@ -1,6 +1,9 @@
 import React from 'react';
 import styles from './NotLoggedIn.css';
 import SignInContainer from '../../coral-sign-in/containers/SignInContainer';
+import translations from '../translations';
+import I18n from 'coral-framework/modules/i18n/i18n';
+const lang = new I18n(translations);
 
 export default ({showSignInDialog}) => (
   <div className={styles.message}>
@@ -9,13 +12,10 @@ export default ({showSignInDialog}) => (
       <a onClick={() => {
         console.log('Signin click');
         showSignInDialog();
-      }}>Sign In</a> to access Settings
+      }}>{lang.t('signIn')}</a> {lang.t('toAccess')}
     </div>
     <div>
-      From the Settings Page you can
-      <ul>
-        <li>See your comment history</li>
-      </ul>
+      {lang.t('fromSettingsPage')}
     </div>
   </div>
 );

client/coral-settings/translations.json

@@ -3,12 +3,18 @@
     "userNoComment": "You've never left a comment. Join the conversation!",
     "allComments": "All Comments",
     "profileSettings": "Profile Settings",
-    "myCommentHistory": "My comment History"
+    "myCommentHistory": "My comment History",
+    "signIn": "Sign in",
+    "toAccess": " to access Settings",
+    "fromSettingsPage": "From the Settings Page you can see your comment history."
   },
   "es":{
     "userNoComment": "No has dejado áun ningún comentario. ¡Unete a la conversación!",
     "allComments": "Todos los comentarios",
     "profileSettings": "Configuración del perfil",
-    "myCommentHistory": "Mi historial de comentarios"
+    "myCommentHistory": "Mi historial de comentarios",
+    "signIn": "Entrar",
+    "toAccess": "para acceder a la configuración",
+    "fromSettingsPage": "Desde la peagina de configuración puede ver su historia de comentarios."
   }
 }

client/coral-sign-in/components/styles.css

@@ -36,6 +36,7 @@
 
 .signInButton {
     margin-top: 10px;
+    background-color: #2a2a2a;
 }
 
 .close {

client/coral-ui/components/Tab.css

@@ -1,5 +1,6 @@
 li.base--active {
   background: white;
+  font-weight: bold;
 }
 
 li.material--active {

views/embed/stream.ejs

@@ -3,7 +3,7 @@
   <head>
     <meta property="csrf" content="<%= csrfToken %>">
     <link rel="stylesheet" type="text/css" href="/client/embed/stream/default.css">
-    <link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <% if (locals.customCssUrl) { %>
       <link href="<%= customCssUrl %>" rel="stylesheet" type="text/css">