Merge pull request #1649 from weseek/support/apply-radio-button-for-notification

Support/apply radio button for notification

src/client/js/components/Admin/Notification/GlobalNotification.jsx

@@ -16,9 +16,11 @@ class GlobalNotification extends React.Component {
     return (
       <React.Fragment>
 
-        <a href="/admin/global-notification/new">
-          <p className="btn btn-default">{t('notification_setting.add_notification')}</p>
-        </a>
+        <div className="my-3">
+          <a href="/admin/global-notification/new">
+            <button type="button" className="btn page-link text-dark d-inline-block">{t('notification_setting.add_notification')}</button>
+          </a>
+        </div>
 
         <h2 className="border-bottom mb-5">{t('notification_setting.notification_list')}</h2>
 

src/client/js/components/Admin/Notification/ManageGlobalNotification.jsx

@@ -100,10 +100,15 @@ class ManageGlobalNotification extends React.Component {
     return (
       <React.Fragment>
 
-        <a href="/admin/notification#global-notification" className="btn btn-default">
-          <i className="icon-fw ti-arrow-left" aria-hidden="true"></i>
-          {t('notification_setting.back_to_list')}
-        </a>
+        <div className="my-3">
+          <a href="/admin/notification#global-notification">
+            <button type="button" className="btn page-link text-dark d-inline-block">
+              <i className="icon-fw ti-arrow-left" aria-hidden="true"></i>
+              {t('notification_setting.back_to_list')}
+            </button>
+          </a>
+        </div>
+
 
         <div className="row">
           <div className="m-t-20 form-box col-md-12">
@@ -111,25 +116,26 @@ class ManageGlobalNotification extends React.Component {
           </div>
 
           <div className="col-sm-4">
+            <h3 htmlFor="triggerPath">{t('notification_setting.trigger_path')}
+              {/* eslint-disable-next-line react/no-danger */}
+              <small dangerouslySetInnerHTML={{ __html: t('notification_setting.trigger_path_help', '<code>*</code>') }} />
+            </h3>
             <div className="form-group">
-              <h3 htmlFor="triggerPath">{t('notification_setting.trigger_path')}
-                {/* eslint-disable-next-line react/no-danger */}
-                <small dangerouslySetInnerHTML={{ __html: t('notification_setting.trigger_path_help', '<code>*</code>') }} />
-                <input
-                  className="form-control"
-                  type="text"
-                  name="triggerPath"
-                  value={this.state.triggerPath}
-                  onChange={(e) => { this.onChangeTriggerPath(e.target.value) }}
-                  required
-                />
-              </h3>
+              <input
+                className="form-control"
+                type="text"
+                name="triggerPath"
+                value={this.state.triggerPath}
+                onChange={(e) => { this.onChangeTriggerPath(e.target.value) }}
+                required
+              />
             </div>
 
+            <h3>{t('notification_setting.notify_to')}</h3>
             <div className="form-group form-inline">
-              <h3>{t('notification_setting.notify_to')}</h3>
-              <div className="radio radio-primary">
+              <div className="custom-control custom-radio">
                 <input
+                  className="custom-control-input"
                   type="radio"
                   id="mail"
                   name="notifyToType"
@@ -137,12 +143,13 @@ class ManageGlobalNotification extends React.Component {
                   checked={this.state.notifyToType === 'mail'}
                   onChange={() => { this.onChangeNotifyToType('mail') }}
                 />
-                <label htmlFor="mail">
+                <label className="custom-control-label" htmlFor="mail">
                   <p className="font-weight-bold">Email</p>
                 </label>
               </div>
-              <div className="radio radio-primary">
+              <div className="custom-control custom-radio ml-2">
                 <input
+                  className="custom-control-input"
                   type="radio"
                   id="slack"
                   name="notifyToType"
@@ -150,7 +157,7 @@ class ManageGlobalNotification extends React.Component {
                   checked={this.state.notifyToType === 'slack'}
                   onChange={() => { this.onChangeNotifyToType('slack') }}
                 />
-                <label htmlFor="slack">
+                <label className="custom-control-label" htmlFor="slack">
                   <p className="font-weight-bold">Slack</p>
                 </label>
               </div>
@@ -187,11 +194,9 @@ class ManageGlobalNotification extends React.Component {
                   />
                 </div>
               )}
-
           </div>
 
-
-          <div className="col-sm-offset-1 col-sm-5">
+          <div className="offset-1 col-sm-5">
             <div className="form-group">
               <h3>{t('notification_setting.trigger_events')}</h3>
               <TriggerEventCheckBox
@@ -251,14 +256,13 @@ class ManageGlobalNotification extends React.Component {
 
             </div>
           </div>
-
-          <AdminUpdateButtonRow
-            onClick={this.submitHandler}
-            disabled={this.state.retrieveError != null}
-          />
-
         </div>
 
+        <AdminUpdateButtonRow
+          onClick={this.submitHandler}
+          disabled={this.state.retrieveError != null}
+        />
+
       </React.Fragment>
 
     );

src/client/js/components/Admin/Notification/UserNotificationRow.jsx

@@ -22,7 +22,7 @@ class UserNotificationRow extends React.PureComponent {
             {notification.channel}
           </td>
           <td>
-            <button type="submit" className="btn btn-default" onClick={() => { this.props.onClickDeleteBtn(notification._id) }}>{t('Delete')}</button>
+            <button type="submit" className="btn btn-light" onClick={() => { this.props.onClickDeleteBtn(notification._id) }}>{t('Delete')}</button>
           </td>
         </tr>
       </React.Fragment>