Merge branch 'master' of github.com:coralproject/talk into search-stories

client/coral-admin/src/components/ui/Header.css

@@ -77,7 +77,7 @@
   letter-spacing: .8;
 
   &:hover {
-    background-color: #232323;
+    background-color: #404040;
   }
 
   &.active {

client/coral-admin/src/routes/Community/components/Community.css

@@ -175,7 +175,7 @@
      right: 0;
      height: 100%;
      top: 0;
-     padding: 40px 18px;
+     padding: 50px 18px;
      box-sizing: border-box;
    }
 
@@ -310,24 +310,33 @@
 .flaggedByCount {
   display: block;
   text-align: left;
+  margin-top: 5px;
+}
+
+.flaggedByCount i {
+  font-size: 14px;
+  margin-right: 10px;
 }
 
 .flaggedBy {
   display: inline;
   padding: 3px;
-  font-size: 16px;
+  font-size: 14px;
+  margin-left: 5px;
 }
 
 .flaggedByLabel {
-  font-weight: bold;
+  font-weight: 600;
   font-size: 14px;
 }
 
 .flaggedReasons {
-  padding-top: 15px;
   margin-left: 24px;
+  margin-top: 10px;
 }
 
-.flaggedByReason {
+p.flaggedByReason {
   font-size: 1tpx;
+  margin: 0px;
+  line-height: 1.4;
 }

client/coral-admin/src/routes/Community/components/styles.css

@@ -52,6 +52,10 @@ span {
   }
 }
 
+.approve {
+  margin-top: 10px;
+}
+
 .notFound {
   position: relative;
   margin: 20px auto;
@@ -193,7 +197,7 @@ span {
      top: 0;
      padding: 40px 18px;
      box-sizing: border-box;
-   }
+  }
 
   .itemHeader {
     display: flex;
@@ -255,6 +259,8 @@ span {
 
 }
 
+
+
 .empty {
   color: #444;
   margin-top: 50px;

client/coral-admin/src/routes/Dashboard/components/Widget.css

@@ -17,8 +17,9 @@
 .heading {
   margin: 0;
   padding-left: 10px;
-  font-size: 1.5rem;
-  font-weight: bold;
+  font-size: 1.3rem;
+  font-weight: 600;
+  color: #2c2c2c;
 }
 
 .widgetTable {
@@ -32,7 +33,8 @@
 }
 
 .widgetHead p {
-  color: rgb(35, 102, 223);
+  color: #2c2c2c;
+  font-weight: 500;
   padding: 10px;
   text-align: left;
   text-transform: capitalize;
@@ -47,11 +49,11 @@
 }
 
 .rowLinkify {
-  cursor: pointer;
   border-bottom: 1px solid lightgrey;
   color: #555;
   height: var(--row-height);
   padding: 10px;
+  transition: background-color 200ms;
 }
 
 .rowLinkify:last-child {
@@ -60,6 +62,7 @@
 
 .rowLinkify:hover {
   background-color: #f8f8f8;
+  pointer: default;
 }
 
 .linkToAsset {
@@ -68,16 +71,17 @@
 }
 
 .linkToModerate {
-  background-color: #e0e0e0;
+  background-color: #BDBDBD;
   padding: 10px 14px;
   text-decoration: none;
   color: black;
   float: right;
   margin-left: 15px;
+  transition: background-color 200ms;
 }
 
 .linkToModerate:hover {
-  background-color: #ccc;
+  background-color: #9E9E9E;
 }
 
 .lede {
@@ -89,14 +93,10 @@
   color: #555;
   text-decoration: none;
   font-size: 1.2em;
-  font-weight: normal;
+  font-weight: 500;
   margin: 0;
 }
 
-.assetTitle:hover {
-  text-decoration: underline;
-}
-
 .widgetCount {
   color: #555;
   font-size: 1.3em;

client/coral-admin/src/routes/Moderation/components/CommentCount.css

@@ -12,4 +12,5 @@
   right: 0;
   margin-top: -2px;
   font-size: 12px;
+  color: white;
 }

client/coral-admin/src/routes/Moderation/components/UserDetail.css

@@ -15,7 +15,7 @@
   display: flex;
 
   .stat {
-    margin: 0 4px 12px;
+    margin: 0 4px 10px 0px;
   }
 
   .stat:last-child {
@@ -49,7 +49,7 @@
 
   li {
     display: inline-block;
-    margin: 0 10px;
+    margin-right: 10px;
     cursor: pointer;
     padding: 0 10px;
   }

client/coral-admin/src/routes/Moderation/components/styles.css

@@ -18,14 +18,20 @@
 
 .tab {
   flex: 1;
-  color: #EEEEEE;
+  color: #C0C0C0;
   text-transform: capitalize;
   font-weight: 100;
-  font-size: 15px;
+  font-size: 14px;
   letter-spacing: 1px;
   transition: border-bottom 200ms;
-  padding: 0px 5px;
-  margin-right: 30px;
+  transition: color 200ms;
+  padding: 0px 10px;
+  margin-right: 20px;
+  &:hover {
+    color: white;
+    border-bottom: solid 2px #F36451;
+    box-sizing: border-box;
+  }
 }
 
 .active {
@@ -33,6 +39,10 @@
   box-sizing: border-box;
   border-bottom: solid 4px #F36451;
   font-weight: 400;
+  &:hover {
+    border-bottom: solid 4px #F36451;
+    font-weight: 400;
+  }
 }
 
 .active > span {
@@ -103,19 +113,18 @@ span {
       font-weight: 400;
       font-size: 15px;
       letter-spacing: 1px;
-      transition: opacity 200ms;
+      transition: background-color 200ms;
       opacity: 1;
 
-      &:hover {
-          opacity: .8;
-         cursor: pointer;
-      }
-
       &:first-child {
         text-align: left;
       }
 
       &:nth-child(2) {
+        &:hover {
+           cursor: pointer;
+           background-color: #212121;
+        }
         span {
           text-align: center;
           text-overflow: ellipsis;
@@ -245,7 +254,6 @@ span {
     padding: 5px;
     color: #262626;
     font-size: 14px;
-    margin-left: 15px;
     line-height: 1px;
     font-weight: 300;
   }
@@ -421,17 +429,21 @@ span {
 
 .tabIcon {
   position: relative;
-  top: 2px;
+  top: 3px;
   font-size: 16px;
 }
 
 .username {
-  color: blue;
-  text-decoration: underline;
+  color: #393B44;
+  text-decoration: none;
   cursor: pointer;
-
+  font-weight: 600;
+  padding: 2px 5px;
+  border-radius: 2px;
+  margin-left: -5px;
+  transition: background-color 200ms ease;
   &:hover {
-    background-color: rgba(255, 0, 0, .1);
+    background-color: #E0E0E0;
   }
 }
 

client/coral-embed-stream/src/components/Comment.js

@@ -3,13 +3,13 @@ import React, {PropTypes} from 'react';
 import PermalinkButton from 'coral-plugin-permalinks/PermalinkButton';
 import AuthorName from 'coral-plugin-author-name/AuthorName';
 import TagLabel from 'coral-plugin-tag-label/TagLabel';
-import Content from 'coral-plugin-commentcontent/CommentContent';
 import PubDate from 'coral-plugin-pubdate/PubDate';
 import {ReplyBox, ReplyButton} from 'coral-plugin-replies';
 import FlagComment from 'coral-plugin-flags/FlagComment';
 import {can} from 'coral-framework/services/perms';
 import {TransitionGroup} from 'react-transition-group';
 import cn from 'classnames';
+import styles from './Comment.css';
 
 import {
   BestButton,
@@ -18,14 +18,14 @@ import {
   commentIsBest,
   BestIndicator
 } from 'coral-plugin-best/BestButton';
-import Slot from 'coral-framework/components/Slot';
 import LoadMore from './LoadMore';
+import {getEditableUntilDate} from './util';
 import {TopRightMenu} from './TopRightMenu';
+import CommentContent from './CommentContent';
+import Slot from 'coral-framework/components/Slot';
 import IgnoredCommentTombstone from './IgnoredCommentTombstone';
 import {EditableCommentContent} from './EditableCommentContent';
 import {getActionSummary, iPerformedThisAction} from 'coral-framework/utils';
-import {getEditableUntilDate} from './util';
-import styles from './Comment.css';
 
 const isStaff = (tags) => !tags.every((t) => t.tag.name !== 'STAFF');
 const hasTag = (tags, lookupTag) => !!tags.filter((t) => t.tag.name === lookupTag).length;
@@ -466,8 +466,7 @@ export default class Comment extends React.Component {
                 stopEditing={this.stopEditing}
                 />
             : <div>
-                <Content body={comment.body} />
-                <Slot fill="commentContent" />
+                <Slot fill="commentContent" comment={comment} defaultComponent={CommentContent} />
               </div>
           }
 

client/coral-embed-stream/src/components/CommentContent.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const CommentContent = ({comment}) => {
+  const textbreaks = comment.body.split('\n');
+  return <div className={`${name}-text`}>
+    {
+      textbreaks.map((line, i) => {
+        return (
+          <span key={i} className={`${name}-line`}>
+            {line}
+            <br className={`${name}-linebreak`}/>
+          </span>
+        );
+      })
+    }
+  </div>;
+};
+
+export default CommentContent;

client/coral-framework/components/Slot.js

@@ -4,10 +4,15 @@ import styles from './Slot.css';
 import {connect} from 'react-redux';
 import {getSlotElements} from 'coral-framework/helpers/plugins';
 
-function Slot ({fill, inline = false, className, plugin_config: config, ...rest}) {
+function Slot ({fill, inline = false, className, plugin_config: config, defaultComponent: DefaultComponent, ...rest}) {
+  let children = getSlotElements(fill, {...rest, config});
+  if (children.length === 0 && DefaultComponent) {
+    children = <DefaultComponent {...rest} />;
+  }
+
   return (
     <div className={cn({[styles.inline]: inline, [styles.debug]: config.debug}, className)}>
-      {getSlotElements(fill, {...rest, config})}
+      {children}
     </div>
   );
 }

client/coral-framework/graphql/fragments.js

@@ -7,7 +7,7 @@ export default {
     'SuspendUserResponse',
     'RejectUsernameResponse',
     'SetUserStatusResponse',
-    'PostCommentResponse',
+    'CreateFlagResponse',
     'EditCommentResponse',
     'PostFlagResponse',
     'CreateDontAgreeResponse',
@@ -17,3 +17,4 @@ export default {
     'StopIgnoringUserResponse',
   )
 };
+

client/coral-plugin-commentcontent/CommentContent.js

@@ -1,17 +0,0 @@
-import React from 'react';
-const name = 'coral-plugin-commentcontent';
-
-const Content = ({body, styles}) => {
-  const textbreaks = body.split('\n');
-  return <div
-    className={`${name}-text`}
-    style={styles && styles.text}>
-    {
-      textbreaks.map((line, i) => <span key={i} className={`${name}-line`}>
-        {line} <br className={`${name}-linebreak`}/>
-      </span>)
-    }
-  </div>;
-};
-
-export default Content;

client/coral-plugin-commentcontent/__tests__/commentContent.spec.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import {shallow} from 'enzyme';
-import {expect} from 'chai';
-import CommentContent from '../CommentContent';
-
-describe('CommentContent', () => {
-  it('should render content', () => {
-    const render = shallow(<CommentContent content="test"/>);
-    expect(render.contains('test')).to.be.truthy;
-  });
-});

client/coral-plugin-history/Comment.js

@@ -1,8 +1,9 @@
 import React, {PropTypes} from 'react';
 import {Icon} from '../coral-ui';
 import styles from './Comment.css';
+import Slot from 'coral-framework/components/Slot';
 import PubDate from '../coral-plugin-pubdate/PubDate';
-import Content from '../coral-plugin-commentcontent/CommentContent';
+import CommentContent from '../coral-embed-stream/src/components/CommentContent';
 
 import t from 'coral-framework/services/i18n';
 
@@ -10,9 +11,11 @@ const Comment = (props) => {
   return (
     <div className={styles.myComment}>
       <div>
-        <Content
+        <Slot
+          fill="commentContent"
+          defaultComponent={CommentContent}
           className={`${styles.commentBody} myCommentBody`}
-          body={props.comment.body}
+          comment={props.comment}
         />
         <p className="myCommentAsset">
           <a