From 74e8c28f45cfba45002f04766366fba94f0977ad Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Mon, 4 Sep 2017 23:13:00 +0700 Subject: [PATCH] Apply styling --- .../client/components/Menu.css | 6 +++- .../client/components/IgnoreUserAction.css | 21 ++++++------ .../client/components/IgnoreUserAction.js | 2 +- .../components/IgnoreUserConfirmation.css | 32 ++++++++++++++++++- .../components/IgnoreUserConfirmation.js | 11 +++++-- .../containers/IgnoreUserConfirmation.js | 5 +++ .../client/translations.yml | 6 +++- .../client/components/MemberSinceInfo.css | 9 ++++-- 8 files changed, 72 insertions(+), 20 deletions(-) diff --git a/plugins/talk-plugin-author-menu/client/components/Menu.css b/plugins/talk-plugin-author-menu/client/components/Menu.css index e3a111235..dd149ce18 100644 --- a/plugins/talk-plugin-author-menu/client/components/Menu.css +++ b/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; + } } diff --git a/plugins/talk-plugin-ignore-user/client/components/IgnoreUserAction.css b/plugins/talk-plugin-ignore-user/client/components/IgnoreUserAction.css index cefd32d40..ac818278c 100644 --- a/plugins/talk-plugin-ignore-user/client/components/IgnoreUserAction.css +++ b/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; + } } diff --git a/plugins/talk-plugin-ignore-user/client/components/IgnoreUserAction.js b/plugins/talk-plugin-ignore-user/client/components/IgnoreUserAction.js index 00817f38b..0649999ca 100644 --- a/plugins/talk-plugin-ignore-user/client/components/IgnoreUserAction.js +++ b/plugins/talk-plugin-ignore-user/client/components/IgnoreUserAction.js @@ -4,6 +4,6 @@ import {t} from 'plugin-api/beta/client/services'; export default ({ignoreUser}) => ( ); diff --git a/plugins/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.css b/plugins/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.css index 5cd38f244..0439da88c 100644 --- a/plugins/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.css +++ b/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); + } +} diff --git a/plugins/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.js b/plugins/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.js index ba2f62b0b..10a4aac5f 100644 --- a/plugins/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.js +++ b/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}) => (
- Do you really want to ignore this user? +
+ {t('talk-plugin-ignore-user.confirmation')} +
+
diff --git a/plugins/talk-plugin-ignore-user/client/containers/IgnoreUserConfirmation.js b/plugins/talk-plugin-ignore-user/client/containers/IgnoreUserConfirmation.js index 5d014277c..a97ebe228 100644 --- a/plugins/talk-plugin-ignore-user/client/containers/IgnoreUserConfirmation.js +++ b/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 ; } } diff --git a/plugins/talk-plugin-ignore-user/client/translations.yml b/plugins/talk-plugin-ignore-user/client/translations.yml index 1e40c7ba1..d3d3c2aba 100644 --- a/plugins/talk-plugin-ignore-user/client/translations.yml +++ b/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: diff --git a/plugins/talk-plugin-member-since/client/components/MemberSinceInfo.css b/plugins/talk-plugin-member-since/client/components/MemberSinceInfo.css index cefd32d40..3cf2fb75d 100644 --- a/plugins/talk-plugin-member-since/client/components/MemberSinceInfo.css +++ b/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; }