diff --git a/src/styles/ui.css b/src/styles/ui.css index b4b9383..e4b3b62 100644 --- a/src/styles/ui.css +++ b/src/styles/ui.css @@ -102,6 +102,14 @@ margin: 0 4px; cursor: pointer; color: #0c59f2; + border: none; + background-color: transparent; +} + +.icon > svg { + height: inherit; + width: inherit; + fill: currentColor; } .skift .icon:nth-child(2) { diff --git a/src/ui.dev.ts b/src/ui.dev.ts index 5d76177..e994407 100644 --- a/src/ui.dev.ts +++ b/src/ui.dev.ts @@ -18,11 +18,16 @@ export const uiFactory = ( getUserAgentInfo: () => UserAgentInfo, setCurrentTestVariation: (testName: string, variation: string) => void, ) => { + function renderButton(svgContent: string, onClick: () => void) { + const button = document.createElement('button'); + button.className = 'icon'; + button.innerHTML = svgContent; + button.addEventListener('click', onClick); + return button; + } + function renderLink(splitTest: SplitTest, variation: InternalVariation) { - const link = document.createElement('img'); - link.className = 'icon'; - link.src = require('./images/link.svg'); - link.addEventListener('click', () => { + return renderButton(require('./images/link.svg'), () => { const input = document.createElement('input'); input.value = splitTest.getVariationUrl(variation.name); document.body.appendChild(input); @@ -30,11 +35,12 @@ export const uiFactory = ( document.execCommand('copy'); document.body.removeChild(input); }); - - return link; } - function renderSelectedVaraition(splitTest: SplitTest, variation: InternalVariation) { + function renderSelectedVaraition( + splitTest: SplitTest, + variation: InternalVariation, + ) { const item = document.createElement('li'); item.className = 'selected'; item.textContent = variation.name; @@ -45,15 +51,13 @@ export const uiFactory = ( return item; } - function renderUnselectedVariation(splitTest: SplitTest, variation: InternalVariation) { + function renderUnselectedVariation( + splitTest: SplitTest, + variation: InternalVariation, + ) { const item = document.createElement('li'); item.textContent = variation.name; - - const open = document.createElement('img'); - open.className = 'icon'; - open.src = require('./images/open.svg'); - open.addEventListener('click', (event) => { - event.preventDefault(); + const open = renderButton(require('./images/open.svg'), () => { setCurrentTestVariation(splitTest.name, variation.name); }); @@ -67,22 +71,30 @@ export const uiFactory = ( async function renderTest(splitTest: SplitTest) { if (await splitTest.isInitialized()) { - const currentVariation = splitTest.getVariation(getCurrentTestVariation(splitTest.name)); + const currentVariation = splitTest.getVariation( + getCurrentTestVariation(splitTest.name), + ); const data: { [key: string]: any } = { Test: splitTest.name, - Variation: `${currentVariation.name} (${getVariationPercentage(currentVariation)})`, + Variation: `${currentVariation.name} (${getVariationPercentage( + currentVariation, + )})`, }; const test = document.createElement('div'); test.className = 'test'; test.innerHTML = ` - ${Object.keys(data).map((key) => ` + ${Object.keys(data) + .map( + (key) => `