From 8ede1a49892bdf9c99a429f0904860dd1e1112af Mon Sep 17 00:00:00 2001
From: Luis Reinoso <lomejordejr@gmail.com>
Date: Sun, 7 Jun 2020 11:17:02 -0500
Subject: [PATCH] refactor: Change UI according requested changes.

NOTE:
Just a simple section with title Wakatime and bellow is a check box saying enable wakatime? and below it is the text box for wakatime key.
---
 .../modals/PreferencesModal/PluginsTab.js     | 29 ++++++++++---------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/browser/main/modals/PreferencesModal/PluginsTab.js b/browser/main/modals/PreferencesModal/PluginsTab.js
index a19678f2..ceaa383a 100644
--- a/browser/main/modals/PreferencesModal/PluginsTab.js
+++ b/browser/main/modals/PreferencesModal/PluginsTab.js
@@ -157,25 +157,26 @@ class PluginsTab extends React.Component {
       <div styleName='root'>
         <div styleName='group'>
           <div styleName='group-header'>{i18n.__('Plugins')}</div>
+          <div styleName='group-header2'>{i18n.__('Wakatime')}</div>
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input
+                onChange={e => this.handleIsWakatimePluginActiveChange(e)}
+                checked={config.wakatime.isActive}
+                ref='wakatimeIsActive'
+                type='checkbox'
+              />
+              &nbsp;
+              {i18n.__('Enable Wakatime')}
+            </label>
+          </div>
           <div styleName='group-section'>
-            <div styleName='group-section-label'>
-              <div styleName='group-checkBoxSection'>
-                <label>
-                  <input
-                    onChange={e => this.handleIsWakatimePluginActiveChange(e)}
-                    checked={config.wakatime.isActive}
-                    ref='wakatimeIsActive'
-                    type='checkbox'
-                  />
-                  &nbsp;
-                  {i18n.__('Wakatime key')}
-                </label>
-              </div>
-            </div>
+            <div styleName='group-section-label'>{i18n.__('Wakatime key')}</div>
             <div styleName='group-section-control'>
               <input
                 styleName='group-section-control-input'
                 onChange={e => this.handleWakatimeKeyChange(e)}
+                disabled={!config.wakatime.isActive}
                 ref='wakatimeKey'
                 value={config.wakatime.key}
                 type='text'