fix for UI buttons and added a separate message for tooltip popup

src/app/tabs/settings-tab.js

@@ -71,8 +71,8 @@ module.exports = class SettingsTab extends ViewPlugin {
     var gistAccessToken = yo`<input id="gistaccesstoken" data-id="settingsTabGistAccessToken" type="password" class="border form-control mb-2 ${css.inline}" placeholder="Token">`
     var token = this.config.get('settings/gist-access-token')
     if (token) gistAccessToken.value = token
-    var gistAddToken = yo`<input class="${css.savegisttoken} btn btn-sm btn-primary" id="savegisttoken" data-id="settingsTabSaveGistToken" onclick=${() => { this.config.set('settings/gist-access-token', gistAccessToken.value); tooltip('Access token saved') }} value="Save" type="button">`
-    var gistRemoveToken = yo`<input class="btn btn-sm btn-primary" id="removegisttoken" data-id="settingsTabRemoveGistToken" onclick=${() => { gistAccessToken.value = ''; this.config.set('settings/gist-access-token', ''); tooltip('Access token removed') }} value="Remove" type="button">`
+    var gistAddToken = yo`<input class="btn btn-sm btn-primary mx-2" id="savegisttoken" data-id="settingsTabSaveGistToken" onclick=${() => { this.config.set('settings/gist-access-token', gistAccessToken.value); tooltip('Access token saved') }} value="Save" type="button">`
+    var gistRemoveToken = yo`<input class="btn btn-sm btn-primary mx-2" id="removegisttoken" data-id="settingsTabRemoveGistToken" onclick=${() => { gistAccessToken.value = ''; this.config.set('settings/gist-access-token', ''); tooltip('Access token removed') }} value="Remove" type="button">`
     this._view.gistToken = yo`<div class="${css.checkboxText}">${gistAccessToken}${copyToClipboard(() => gistAccessToken.value)}${gistAddToken}${gistRemoveToken}</div>`
     this._view.optionVM = yo`<input onchange=${onchangeOption} class="align-middle form-check-input" id="alwaysUseVM" data-id="settingsTabAlwaysUseVM" type="checkbox">`
     if (this.config.get('settings/always-use-vm') === undefined) this.config.set('settings/always-use-vm', true)

src/app/ui/copy-to-clipboard.js

@@ -12,8 +12,8 @@ var css = csjs`
   }
 `
 
-module.exports = function copyToClipboard (getContent, tip = 'Copied value to clipboard', icon = 'fa-copy') {
-  var copyIcon = yo`<i title="${tip}" class="${css.copyIcon} far ${icon}" data-id="copyToClipboardCopyIcon" aria-hidden="true"></i>`
+module.exports = function copyToClipboard (getContent, tip = 'Copy value to clipboard', icon = 'fa-copy') {
+  var copyIcon = yo`<i title="${tip}" class="${css.copyIcon} far ${icon} p-2" data-id="copyToClipboardCopyIcon" aria-hidden="true"></i>`
   copyIcon.onclick = (event) => {
     event.stopPropagation()
     var copiableContent
@@ -30,7 +30,7 @@ module.exports = function copyToClipboard (getContent, tip = 'Copied value to cl
         }
       } catch (e) {}
       copy(copiableContent)
-      addTooltip(tip)
+      addTooltip('Copied value to clipboard.')
     } else {
       addTooltip('Cannot copy empty content!')
     }

test-browser/tests/generalSettings.js

@@ -57,7 +57,7 @@ module.exports = {
     browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]')
     .click('*[data-id="copyToClipboardCopyIcon"]')
     .waitForElementVisible('*[data-shared="tooltipPopup"]:nth-last-of-type(1)')
-    .assert.containsText('*[data-shared="tooltipPopup"]:nth-last-of-type(1)', 'Copied value to clipboard')
+    .assert.containsText('*[data-shared="tooltipPopup"]:nth-last-of-type(1)', 'Copied value to clipboard.')
     .click('*[data-id="tooltipCloseButton"]')
   },