diff --git a/src/drivers/webextension/css/styles.css b/src/drivers/webextension/css/styles.css index 409bddaa5..90b711aee 100644 --- a/src/drivers/webextension/css/styles.css +++ b/src/drivers/webextension/css/styles.css @@ -42,6 +42,10 @@ p { margin: 0 0 .5rem 0; } +.light-text { + color: var(--color-text-lighten); +} + .popup { background: white; max-height: 34rem; @@ -331,19 +335,6 @@ small { padding-bottom: 0; } -.chip, .chip:focus, .chip:hover { - border: 1px solid var(--color-secondary-darken); - border-radius: 4px; - margin: 0 .5rem .5rem 0; - display: inline-block; - padding: .2rem .5rem; - text-decoration: none; -} - -.chip:focus, .chip:hover { - background: var(--color-primary-lighten) -} - .plus-configure { margin: 1.5rem; } @@ -842,12 +833,12 @@ body.dynamic-icon .category__heading:hover .category__pin { color: var(--color-primary-text); } -.input[type="text"], .input[type="password"] { - border-color: var(--color-primary-darken); +.dark .light-text { + color: var(--color-primary-text); } -.dark .chip:focus, .dark .chip:hover { - background: var(--color-primary); +.input[type="text"], .input[type="password"] { + border-color: var(--color-primary-darken); } .dark .message { diff --git a/src/drivers/webextension/js/popup.js b/src/drivers/webextension/js/popup.js index 8eba7bd0f..2d29df8b1 100644 --- a/src/drivers/webextension/js/popup.js +++ b/src/drivers/webextension/js/popup.js @@ -193,6 +193,14 @@ function csvEscape(value = '') { return String(value).replace(/"/g, '""') } +function parseEmail(fullEmail) { + const email = fullEmail.replace(/^[^<]*<([^>]+)>/, '$1') + + const [name, title] = fullEmail.replace(/ <([^>]+)>$/, '').split(' -- ') + + return { email, name, title } +} + const Popup = { /** * Initialise popup @@ -758,13 +766,32 @@ const Popup = { a.href = value.to a.textContent = value.text - if ( - ['social', 'keywords'].includes(set) || - ['phone', 'email'].includes(key) - ) { - a.classList.add('chip') + if (['email', 'verifiedEmail', 'safeEmail'].includes(key)) { + const { email, name, title } = parseEmail(value.text) + + a.textContent = email + + const elName = document.createElement('span') + const elTitle = document.createElement('span') + const elBreak1 = document.createElement('br') + const elBreak2 = document.createElement('br') + + elName.textContent = name + elTitle.textContent = `${title}` + + elTitle.className = 'light-text' td.appendChild(a) + + if (name) { + td.appendChild(elBreak1) + td.appendChild(elName) + + if (title) { + td.appendChild(elBreak2) + td.appendChild(elTitle) + } + } } else { div.appendChild(a) td.appendChild(div) @@ -774,14 +801,18 @@ const Popup = { const [name, title] = value.split(' -- ') - const strong = document.createElement('strong') - const span = document.createElement('span') + const elName = document.createElement('span') + const elTitle = document.createElement('span') + const elBreak = document.createElement('br') + + elTitle.className = 'light-text' - strong.textContent = name - span.textContent = title + elName.textContent = name + elTitle.textContent = title - div.appendChild(strong) - div.appendChild(span) + div.appendChild(elName) + div.appendChild(elBreak) + div.appendChild(elTitle) td.appendChild(div) } else { attributeValues[key].push(value)