Implement styling

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;
 }

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>
     );
   }

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;
+}

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>

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