Apply styling

plugins/talk-plugin-author-menu/client/components/Menu.css

@@ -12,7 +12,6 @@
   left: 0px;
   min-width: 20px;
   text-align: left;
-  color: #616161;
 }
 
 .menu::before{
@@ -38,4 +37,9 @@
 .actions {
   display: flex;
   justify-content: flex-end;
+  margin-top: 8px;
+
+  &:empty {
+    display: none;
+  }
 }

plugins/talk-plugin-ignore-user/client/components/IgnoreUserAction.css

@@ -2,15 +2,16 @@
   white-space: nowrap;
 }
 
-.memberSince {
-  color: #484747;
-  margin-left: 4px;
-  letter-spacing: 0.2px;
-  font-size: 0.9em;
-  vertical-align: middle;
-}
+.button {
+  composes: buttonReset from "coral-framework/styles/reset.css";
+  border: 1px solid rgba(1, 1, 1, 0.8);
+  border-radius: 1px;
+  padding: 3px 6px;
+  font-size: 12px;
+  transition: color 100ms, background 100ms;
 
-.icon {
-  font-size: 1.4em;
-  vertical-align: middle;
+  &:hover {
+    background-color: rgba(1, 1, 1, 0.8);
+    color: white;
+  }
 }

plugins/talk-plugin-ignore-user/client/components/IgnoreUserAction.js

@@ -4,6 +4,6 @@ import {t} from 'plugin-api/beta/client/services';
 
 export default ({ignoreUser}) => (
   <button className={styles.button} onClick={ignoreUser}>
-    {t('talk-plugin-ignore-user.ignore')}
+    {t('talk-plugin-ignore-user.ignore_user')}
   </button>
 );

plugins/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.css

@@ -1,9 +1,39 @@
 .root {
-  width: 250px;
+  width: 200px;
 }
 
 .actions {
   display: flex;
   justify-content: flex-end;
+  margin-top: 8px;
 }
 
+.message {
+  font-size: 13px;
+}
+
+.button {
+  composes: buttonReset from "coral-framework/styles/reset.css";
+  border: 1px solid rgba(1, 1, 1, 0.8);
+  border-radius: 1px;
+  padding: 3px 6px;
+  font-size: 12px;
+  transition: color 100ms, background 100ms;
+
+  &:hover {
+    background-color: rgba(1, 1, 1, 0.8);
+    color: white;
+  }
+}
+
+.cancel {
+  composes: buttonReset from "coral-framework/styles/reset.css";
+  padding: 3px 6px;
+  font-size: 12px;
+  transition: color 100ms;
+  margin-right: 4px;
+
+  &:hover {
+    color: rgba(1, 1, 1, 0.75);
+  }
+}

plugins/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.js

@@ -2,12 +2,17 @@ import React from 'react';
 import styles from './IgnoreUserConfirmation.css';
 import {t} from 'plugin-api/beta/client/services';
 
-export default ({ignoreUser}) => (
+export default ({ignoreUser, cancel}) => (
   <div className={styles.root}>
-    Do you really want to ignore this user?
+    <div className={styles.message}>
+      {t('talk-plugin-ignore-user.confirmation')}
+    </div>
     <div className={styles.actions}>
+      <button className={styles.cancel} onClick={cancel}>
+        {t('talk-plugin-ignore-user.cancel')}
+      </button>
       <button className={styles.button} onClick={ignoreUser}>
-        {t('talk-plugin-ignore-user.ignore')}
+        {t('talk-plugin-ignore-user.ignore_user')}
       </button>
     </div>
   </div>

plugins/talk-plugin-ignore-user/client/containers/IgnoreUserConfirmation.js

@@ -12,10 +12,15 @@ class IgnoreUserConfirmationContainer extends React.Component {
     this.props.setContentSlot(null);
   };
 
+  cancel = () => {
+    this.props.setContentSlot(null);
+  }
+
   render() {
     return <IgnoreUserConfirmation
       username={this.props.comment.username}
       ignoreUser={this.ignoreUser}
+      cancel={this.cancel}
     />;
   }
 }

plugins/talk-plugin-ignore-user/client/translations.yml

@@ -1,5 +1,9 @@
 en:
   talk-plugin-ignore-user:
-    ignore: "ignore"
+    ignore_user: Ignore User
+    cancel: Cancel
+    confirmation: |
+      When you ignore a user, all comments they wrote on the site will be hidden from you. You can
+      undo this later from My Profile.
 es:
   talk-plugin-ignore-user:

plugins/talk-plugin-member-since/client/components/MemberSinceInfo.css

@@ -2,15 +2,18 @@
   white-space: nowrap;
 }
 
+.root:not(:last-child) {
+  margin-bottom: 4px;
+}
+
 .memberSince {
-  color: #484747;
   margin-left: 4px;
   letter-spacing: 0.2px;
-  font-size: 0.9em;
+  font-size: 13px;
   vertical-align: middle;
 }
 
 .icon {
-  font-size: 1.4em;
+  font-size: 18px;
   vertical-align: middle;
 }