From 7c676e8926fab4873ea3001d53291b6177815ceb Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 22 Feb 2018 11:28:10 +0100
Subject: [PATCH] Implement styling

---
 .../client/components/Toggle.css              |  7 +++++--
 .../client/components/Toggle.js               |  9 ++++++---
 .../client/components/Settings.css            | 19 +++++++++++++++++++
 .../client/components/Settings.js             | 12 ++++++++----
 .../client/translations.yml                   |  1 +
 5 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/plugins/talk-plugin-notifications-category-reply/client/components/Toggle.css b/plugins/talk-plugin-notifications-category-reply/client/components/Toggle.css
index b61b2fe4d..f888da616 100644
--- a/plugins/talk-plugin-notifications-category-reply/client/components/Toggle.css
+++ b/plugins/talk-plugin-notifications-category-reply/client/components/Toggle.css
@@ -1,3 +1,6 @@
-.innerSettings {
-  padding-left: 24px;
+.title {
+  display: inline-block;
+  width: 270px;
+  cursor: pointer;
+  user-select: none;
 }
diff --git a/plugins/talk-plugin-notifications-category-reply/client/components/Toggle.js b/plugins/talk-plugin-notifications-category-reply/client/components/Toggle.js
index fa32a0880..a44b064ca 100644
--- a/plugins/talk-plugin-notifications-category-reply/client/components/Toggle.js
+++ b/plugins/talk-plugin-notifications-category-reply/client/components/Toggle.js
@@ -3,16 +3,19 @@ import PropTypes from 'prop-types';
 import { t } from 'plugin-api/beta/client/services';
 import { Checkbox } from 'plugin-api/beta/client/components/ui';
 import styles from './Toggle.css';
+import uuid from 'uuid/v4';
 
 class Toggle extends React.Component {
+  id = uuid();
+
   render() {
     const { checked, onChange } = this.props;
     return (
       <div className={styles.toggle}>
-        <div className={styles.description}>
+        <label htmlFor={this.id} className={styles.title}>
           {t('talk-plugin-notifications-category-reply.toggle_description')}
-          <Checkbox checked={checked} onChange={onChange} />
-        </div>
+        </label>
+        <Checkbox checked={checked} onChange={onChange} id={this.id} />
       </div>
     );
   }
diff --git a/plugins/talk-plugin-notifications/client/components/Settings.css b/plugins/talk-plugin-notifications/client/components/Settings.css
index 2980501cc..e34a8adba 100644
--- a/plugins/talk-plugin-notifications/client/components/Settings.css
+++ b/plugins/talk-plugin-notifications/client/components/Settings.css
@@ -1,3 +1,7 @@
+.root {
+  margin-bottom: 20px;
+}
+
 .innerSettings {
   padding-left: 12px;
 }
@@ -6,3 +10,18 @@
   margin: 0;
   margin-bottom: 8px;
 }
+
+.turnOffButton {
+  padding: 2px 0;
+  color: #2099d6;
+  border-bottom: 1px solid #2099d6;
+
+  &:disabled {
+    color: #aaa;
+    border-bottom: 1px solid #aaa;
+  }
+}
+
+.notifcationSettingsSlot {
+  margin-bottom: 3px;
+}
diff --git a/plugins/talk-plugin-notifications/client/components/Settings.js b/plugins/talk-plugin-notifications/client/components/Settings.js
index 91523621a..dad6b2bed 100644
--- a/plugins/talk-plugin-notifications/client/components/Settings.js
+++ b/plugins/talk-plugin-notifications/client/components/Settings.js
@@ -27,22 +27,26 @@ class Settings extends React.Component {
 
     return (
       <IfSlotIsNotEmpty slot="notificationSettings" queryData={{ root }}>
-        <div>
+        <div className={styles.root}>
           <h3>{t('talk-plugin-notifications.settings_title')}</h3>
           <h4 className={styles.subtitle}>
             {t('talk-plugin-notifications.settings_subtitle')}
           </h4>
           <div className={styles.innerSettings}>
             <Slot
+              className={styles.notifcationSettingsSlot}
               fill="notificationSettings"
               queryData={{ root }}
               childFactory={this.childFactory}
               setTurnOffInputFragment={setTurnOffInputFragment}
               updateNotificationSettings={updateNotificationSettings}
             />
-            <BareButton onClick={turnOffAll} disabled={turnOffButtonDisabled}>
-              {' '}
-              Turn Off All{' '}
+            <BareButton
+              className={styles.turnOffButton}
+              onClick={turnOffAll}
+              disabled={turnOffButtonDisabled}
+            >
+              {t('talk-plugin-notifications.turn_off_all')}
             </BareButton>
           </div>
         </div>
diff --git a/plugins/talk-plugin-notifications/client/translations.yml b/plugins/talk-plugin-notifications/client/translations.yml
index 2054f8ac1..9088e6493 100644
--- a/plugins/talk-plugin-notifications/client/translations.yml
+++ b/plugins/talk-plugin-notifications/client/translations.yml
@@ -2,3 +2,4 @@ en:
   talk-plugin-notifications:
     settings_title: Notifications
     settings_subtitle: Receive notifications when
+    turn_off_all: I do not want to receive notifications