Skip to content

Commit 919d0df

Browse files
knightedcodemonkeyknightedcodemonkey
authored
refactor: icons. (#34)
1 parent 9cd4399 commit 919d0df

6 files changed

Lines changed: 121 additions & 57 deletions

File tree

‎playwright/app.spec.ts‎

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -259,30 +259,41 @@ test('GitHub token info panel reflects missing and present token states', async
259259
}) => {
260260
await waitForAppReady(page, `${appEntryPath}?feature-ai=true`)
261261

262-
const infoButton = page.locator('#github-token-info')
263-
const infoPanel = page.locator('#github-token-info-panel')
264-
const missingMessage = page.locator('.github-token-info-message--missing-token')
265-
const presentMessage = page.locator('.github-token-info-message--has-token')
262+
const infoButtonMissing = page.getByRole('button', {
263+
name: 'About GitHub token features and privacy',
264+
})
265+
const infoButtonPresent = page.getByRole('button', {
266+
name: 'About GitHub token privacy',
267+
})
268+
const missingMessage = page.getByText('Provide a GitHub PAT', { exact: false })
269+
const presentMessage = page.getByText(
270+
'This token is stored only in your browser and is sent only to GitHub APIs you invoke. Use the trash icon to remove it from storage.',
271+
)
266272

267-
await expect(infoButton).toHaveText('?')
268-
await expect(infoButton).toHaveAttribute('data-token-state', 'missing')
273+
await expect(infoButtonMissing).toHaveAttribute('data-token-state', 'missing')
274+
await expect(infoButtonMissing).toHaveAttribute(
275+
'aria-label',
276+
'About GitHub token features and privacy',
277+
)
278+
await expect(presentMessage).toBeHidden()
269279

270-
await infoButton.click()
271-
await expect(infoPanel).toBeVisible()
280+
await infoButtonMissing.click()
272281
await expect(missingMessage).toBeVisible()
273282
await expect(missingMessage).toContainText('Provide a GitHub PAT')
274-
await expect(missingMessage.getByRole('link', { name: 'docs' })).toHaveAttribute(
283+
await expect(page.getByRole('link', { name: 'docs' })).toHaveAttribute(
275284
'href',
276285
'https://github.com/knightedcodemonkey/develop/blob/main/docs/byot.md',
277286
)
278287
await expect(presentMessage).toBeHidden()
279288

280289
await connectByotWithSingleRepo(page)
281-
await expect(infoButton).toHaveText('i')
282-
await expect(infoButton).toHaveAttribute('data-token-state', 'present')
290+
await expect(infoButtonPresent).toHaveAttribute('data-token-state', 'present')
291+
await expect(infoButtonPresent).toHaveAttribute(
292+
'aria-label',
293+
'About GitHub token privacy',
294+
)
283295

284-
await infoButton.click()
285-
await expect(infoPanel).toBeVisible()
296+
await infoButtonPresent.click()
286297
await expect(presentMessage).toBeVisible()
287298
await expect(presentMessage).toContainText(
288299
'Use the trash icon to remove it from storage.',

‎src/index.html‎

Lines changed: 39 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,30 @@ <h1>
4949
aria-expanded="false"
5050
aria-controls="github-token-info-panel"
5151
>
52-
i
52+
<svg
53+
class="github-token-info__icon github-token-info__icon--missing"
54+
viewBox="0 0 24 24"
55+
aria-hidden="true"
56+
>
57+
<path
58+
d="M13 16.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-2.517-7.665c.112-.223.268-.424.488-.57C11.186 8.12 11.506 8 12 8c.384 0 .766.118 1.034.319a.953.953 0 0 1 .403.806c0 .48-.218.81-.62 1.186a9.293 9.293 0 0 1-.409.354 19.8 19.8 0 0 0-.294.249c-.246.213-.524.474-.738.795l-.126.19V13.5a.75.75 0 0 0 1.5 0v-1.12c.09-.1.203-.208.347-.333.063-.055.14-.119.222-.187.166-.14.358-.3.52-.452.536-.5 1.098-1.2 1.098-2.283a2.45 2.45 0 0 0-1.003-2.006C13.37 6.695 12.658 6.5 12 6.5c-.756 0-1.373.191-1.861.517a2.944 2.944 0 0 0-.997 1.148.75.75 0 0 0 1.341.67Z"
59+
></path>
60+
<path
61+
d="M9.864 1.2a3.61 3.61 0 0 1 4.272 0l1.375 1.01c.274.2.593.333.929.384l1.686.259a3.61 3.61 0 0 1 3.021 3.02l.259 1.687c.051.336.183.655.384.929l1.01 1.375a3.61 3.61 0 0 1 0 4.272l-1.01 1.375a2.106 2.106 0 0 0-.384.929l-.259 1.686a3.61 3.61 0 0 1-3.02 3.021l-1.687.259a2.106 2.106 0 0 0-.929.384l-1.375 1.01a3.61 3.61 0 0 1-4.272 0l-1.375-1.01a2.106 2.106 0 0 0-.929-.384l-1.686-.259a3.61 3.61 0 0 1-3.021-3.02l-.259-1.687a2.106 2.106 0 0 0-.384-.929L1.2 14.136a3.61 3.61 0 0 1 0-4.272l1.01-1.375c.201-.274.333-.593.384-.929l.259-1.686a3.61 3.61 0 0 1 3.02-3.021l1.687-.259c.336-.051.655-.183.929-.384Zm3.384 1.209a2.11 2.11 0 0 0-2.496 0l-1.376 1.01a3.61 3.61 0 0 1-1.589.658l-1.686.258a2.111 2.111 0 0 0-1.766 1.766l-.258 1.686a3.614 3.614 0 0 1-.658 1.59l-1.01 1.375a2.11 2.11 0 0 0 0 2.496l1.01 1.376a3.61 3.61 0 0 1 .658 1.589l.258 1.686a2.11 2.11 0 0 0 1.766 1.765l1.686.26a3.613 3.613 0 0 1 1.59.657l1.375 1.01a2.11 2.11 0 0 0 2.496 0l1.376-1.01a3.61 3.61 0 0 1 1.589-.658l1.686-.258a2.11 2.11 0 0 0 1.765-1.766l.26-1.686a3.613 3.613 0 0 1 .657-1.59l1.01-1.375a2.11 2.11 0 0 0 0-2.496l-1.01-1.376a3.61 3.61 0 0 1-.658-1.589l-.258-1.686a2.111 2.111 0 0 0-1.766-1.766l-1.686-.258a3.614 3.614 0 0 1-1.59-.658Z"
62+
></path>
63+
</svg>
64+
<svg
65+
class="github-token-info__icon github-token-info__icon--present"
66+
viewBox="0 0 24 24"
67+
aria-hidden="true"
68+
>
69+
<path
70+
d="M17.03 9.78a.75.75 0 0 0-1.06-1.06l-5.47 5.47-2.47-2.47a.75.75 0 0 0-1.06 1.06l3 3a.75.75 0 0 0 1.06 0l6-6Z"
71+
></path>
72+
<path
73+
d="m14.136 1.2 1.375 1.01c.274.201.593.333.929.384l1.687.259a3.61 3.61 0 0 1 3.02 3.021l.259 1.686c.051.336.183.655.384.929l1.01 1.375a3.61 3.61 0 0 1 0 4.272l-1.01 1.375a2.106 2.106 0 0 0-.384.929l-.259 1.687a3.61 3.61 0 0 1-3.021 3.02l-1.686.259a2.106 2.106 0 0 0-.929.384l-1.375 1.01a3.61 3.61 0 0 1-4.272 0l-1.375-1.01a2.106 2.106 0 0 0-.929-.384l-1.687-.259a3.61 3.61 0 0 1-3.02-3.021l-.259-1.686a2.117 2.117 0 0 0-.384-.929L1.2 14.136a3.61 3.61 0 0 1 0-4.272l1.01-1.375c.201-.274.333-.593.384-.929l.259-1.687a3.61 3.61 0 0 1 3.021-3.02l1.686-.259c.336-.051.655-.183.929-.384L9.864 1.2a3.61 3.61 0 0 1 4.272 0Zm-3.384 1.209-1.375 1.01a3.614 3.614 0 0 1-1.59.658l-1.686.258a2.111 2.111 0 0 0-1.766 1.766l-.258 1.686a3.61 3.61 0 0 1-.658 1.589l-1.01 1.376a2.11 2.11 0 0 0 0 2.496l1.01 1.375c.344.469.57 1.015.658 1.59l.258 1.686c.14.911.855 1.626 1.766 1.766l1.686.258a3.61 3.61 0 0 1 1.589.658l1.376 1.01a2.11 2.11 0 0 0 2.496 0l1.375-1.01a3.613 3.613 0 0 1 1.59-.657l1.686-.26a2.11 2.11 0 0 0 1.766-1.765l.258-1.686a3.61 3.61 0 0 1 .658-1.589l1.01-1.376a2.11 2.11 0 0 0 0-2.496l-1.01-1.375a3.613 3.613 0 0 1-.657-1.59l-.26-1.686a2.11 2.11 0 0 0-1.765-1.766l-1.686-.258a3.61 3.61 0 0 1-1.589-.658l-1.376-1.01a2.11 2.11 0 0 0-2.496 0Z"
74+
></path>
75+
</svg>
5376
</button>
5477
<div class="github-token-info-panel" id="github-token-info-panel" hidden>
5578
<p
@@ -77,7 +100,7 @@ <h1>
77100
autocomplete="off"
78101
autocapitalize="off"
79102
spellcheck="false"
80-
placeholder="GitHub BYOT"
103+
placeholder="GitHub PAT"
81104
aria-label="GitHub token"
82105
aria-describedby="github-token-privacy-note"
83106
/>
@@ -92,9 +115,10 @@ <h1>
92115
aria-label="Add GitHub token"
93116
title="Add GitHub token"
94117
>
95-
<svg viewBox="0 0 24 24" aria-hidden="true">
96-
<path d="M12 5v14"></path>
97-
<path d="M5 12h14"></path>
118+
<svg viewBox="0 0 16 16" aria-hidden="true">
119+
<path
120+
d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z"
121+
></path>
98122
</svg>
99123
</button>
100124
<button
@@ -189,7 +213,12 @@ <h1>
189213
aria-controls="github-ai-controls"
190214
hidden
191215
>
192-
GitHub
216+
<span>GitHub</span>
217+
<svg viewBox="0 0 16 16" aria-hidden="true">
218+
<path
219+
d="M6.766 11.328c-2.063-.25-3.516-1.734-3.516-3.656 0-.781.281-1.625.75-2.188-.203-.515-.172-1.609.063-2.062.625-.078 1.468.25 1.968.703.594-.187 1.219-.281 1.985-.281.765 0 1.39.094 1.953.265.484-.437 1.344-.765 1.969-.687.218.422.25 1.515.046 2.047.5.593.766 1.39.766 2.203 0 1.922-1.453 3.375-3.547 3.64.531.344.89 1.094.89 1.954v1.625c0 .468.391.734.86.547C13.781 14.359 16 11.53 16 8.03 16 3.61 12.406 0 7.984 0 3.563 0 0 3.61 0 8.031a7.88 7.88 0 0 0 5.172 7.422c.422.156.828-.125.828-.547v-1.25c-.219.094-.5.156-.75.156-1.031 0-1.64-.562-2.078-1.609-.172-.422-.36-.672-.719-.719-.187-.015-.25-.093-.25-.187 0-.188.313-.328.625-.328.453 0 .844.281 1.25.86.313.452.64.655 1.031.655s.641-.14 1-.5c.266-.265.47-.5.657-.656"
220+
></path>
221+
</svg>
193222
</button>
194223
</div>
195224

@@ -318,16 +347,10 @@ <h2>Component</h2>
318347
title="Show component tools"
319348
aria-label="Show component tools"
320349
>
321-
<svg viewBox="0 0 24 24" aria-hidden="true">
350+
<svg viewBox="0 0 16 16" aria-hidden="true">
322351
<path
323-
d="M20.017 14.669L23 13.564l-.012-3.208-2.996-1.085a8.455 8.455 0 0 0-.437-1.05l1.329-2.893-2.277-2.26-2.886 1.351a8.396 8.396 0 0 0-1.052-.436L13.564 1l-3.208.012-1.085 2.996a8.485 8.485 0 0 0-1.05.437L5.328 3.116l-2.26 2.276L4.419 8.28a8.378 8.378 0 0 0-.436 1.052L1 10.436l.012 3.208 2.996 1.085a8.46 8.46 0 0 0 .437 1.05l-1.329 2.893 2.276 2.26 2.887-1.351a8.383 8.383 0 0 0 1.052.436L10.436 23l3.208-.012 1.085-2.996a8.478 8.478 0 0 0 1.05-.437l2.893 1.329 2.26-2.276-1.351-2.887a8.382 8.382 0 0 0 .436-1.052zm-.287 3.73l-1.275 1.285-2.694-1.238-.429.215a7.612 7.612 0 0 1-.928.385l-.452.156-1.01 2.789-1.81.007-1.03-2.779-.456-.151a7.394 7.394 0 0 1-.926-.385l-.43-.21-2.688 1.257-1.286-1.275 1.239-2.695-.216-.43a7.551 7.551 0 0 1-.386-.926l-.155-.452-2.79-1.01-.005-1.81 2.777-1.03.152-.456a7.46 7.46 0 0 1 .384-.927l.212-.43L4.27 5.601l1.275-1.285 2.694 1.238.429-.215a7.612 7.612 0 0 1 .928-.385l.452-.156 1.01-2.789 1.81-.007 1.03 2.779.456.151a7.35 7.35 0 0 1 .925.385l.43.211L18.4 4.27l1.285 1.275-1.239 2.695.216.43a7.551 7.551 0 0 1 .386.926l.155.452 2.79 1.01.005 1.81-2.777 1.03-.152.456a7.46 7.46 0 0 1-.384.927l-.212.43zM12 7.2a4.8 4.8 0 1 0 4.8 4.8A4.8 4.8 0 0 0 12 7.2z"
352+
d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
324353
></path>
325-
<circle
326-
class="editor-tools-toggle__inner-ring"
327-
cx="12"
328-
cy="12"
329-
r="3.8"
330-
></circle>
331354
</svg>
332355
</button>
333356
<button
@@ -420,16 +443,10 @@ <h2>Styles</h2>
420443
title="Show styles tools"
421444
aria-label="Show styles tools"
422445
>
423-
<svg viewBox="0 0 24 24" aria-hidden="true">
446+
<svg viewBox="0 0 16 16" aria-hidden="true">
424447
<path
425-
d="M20.017 14.669L23 13.564l-.012-3.208-2.996-1.085a8.455 8.455 0 0 0-.437-1.05l1.329-2.893-2.277-2.26-2.886 1.351a8.396 8.396 0 0 0-1.052-.436L13.564 1l-3.208.012-1.085 2.996a8.485 8.485 0 0 0-1.05.437L5.328 3.116l-2.26 2.276L4.419 8.28a8.378 8.378 0 0 0-.436 1.052L1 10.436l.012 3.208 2.996 1.085a8.46 8.46 0 0 0 .437 1.05l-1.329 2.893 2.276 2.26 2.887-1.351a8.383 8.383 0 0 0 1.052.436L10.436 23l3.208-.012 1.085-2.996a8.478 8.478 0 0 0 1.05-.437l2.893 1.329 2.26-2.276-1.351-2.887a8.382 8.382 0 0 0 .436-1.052zm-.287 3.73l-1.275 1.285-2.694-1.238-.429.215a7.612 7.612 0 0 1-.928.385l-.452.156-1.01 2.789-1.81.007-1.03-2.779-.456-.151a7.394 7.394 0 0 1-.926-.385l-.43-.21-2.688 1.257-1.286-1.275 1.239-2.695-.216-.43a7.551 7.551 0 0 1-.386-.926l-.155-.452-2.79-1.01-.005-1.81 2.777-1.03.152-.456a7.46 7.46 0 0 1 .384-.927l.212-.43L4.27 5.601l1.275-1.285 2.694 1.238.429-.215a7.612 7.612 0 0 1 .928-.385l.452-.156 1.01-2.789 1.81-.007 1.03 2.779.456.151a7.35 7.35 0 0 1 .925.385l.43.211L18.4 4.27l1.285 1.275-1.239 2.695.216.43a7.551 7.551 0 0 1 .386.926l.155.452 2.79 1.01.005 1.81-2.777 1.03-.152.456a7.46 7.46 0 0 1-.384.927l-.212.43zM12 7.2a4.8 4.8 0 1 0 4.8 4.8A4.8 4.8 0 0 0 12 7.2z"
448+
d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
426449
></path>
427-
<circle
428-
class="editor-tools-toggle__inner-ring"
429-
cx="12"
430-
cy="12"
431-
r="3.8"
432-
></circle>
433450
</svg>
434451
</button>
435452
<button

‎src/modules/github-byot-controls.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -78,15 +78,14 @@ export const createGitHubByotControls = ({
7878
let lastSelectedRepository = loadSelectedRepository()
7979

8080
const tokenAddPlusIcon = `
81-
<svg viewBox="0 0 24 24" aria-hidden="true">
82-
<path d="M12 5v14"></path>
83-
<path d="M5 12h14"></path>
81+
<svg viewBox="0 0 16 16" aria-hidden="true">
82+
<path d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z"></path>
8483
</svg>
8584
`
8685

8786
const tokenAddCheckIcon = `
88-
<svg viewBox="0 0 24 24" aria-hidden="true">
89-
<path d="m5 13 4 4L19 7"></path>
87+
<svg viewBox="0 0 16 16" aria-hidden="true">
88+
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm1.5 0a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm10.28-1.72-4.5 4.5a.75.75 0 0 1-1.06 0l-2-2a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018l1.47 1.47 3.97-3.97a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path>
9089
</svg>
9190
`
9291

@@ -119,7 +118,6 @@ export const createGitHubByotControls = ({
119118

120119
if (tokenInfoButton instanceof HTMLButtonElement) {
121120
tokenInfoButton.dataset.tokenState = hasProvidedToken ? 'present' : 'missing'
122-
tokenInfoButton.textContent = hasProvidedToken ? 'i' : '?'
123121
tokenInfoButton.setAttribute(
124122
'aria-label',
125123
hasProvidedToken

‎src/styles/ai-controls.css‎

Lines changed: 41 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -92,37 +92,58 @@
9292
display: inline-grid;
9393
place-content: center;
9494
cursor: pointer;
95-
border-radius: 999px;
96-
border: 1px solid var(--border-strong);
95+
border: none;
9796
color: var(--hint-icon);
98-
font-weight: 700;
99-
line-height: 1;
10097
opacity: 0.9;
10198
background: transparent;
10299
padding: 0;
103-
width: 20px;
104-
height: 20px;
105-
font-size: 0.74rem;
100+
width: 24px;
101+
height: 24px;
106102
transition:
107-
border-color 140ms ease,
108103
color 140ms ease,
109-
background 140ms ease,
110104
box-shadow 140ms ease;
111105
}
112106

107+
.github-token-info svg {
108+
width: 100%;
109+
height: 100%;
110+
fill: currentColor;
111+
stroke: none;
112+
}
113+
114+
.github-token-info svg path {
115+
fill: currentColor;
116+
}
117+
118+
.github-token-info__icon--present {
119+
display: none;
120+
}
121+
122+
.github-token-info[data-token-state='present'] .github-token-info__icon--missing {
123+
display: none;
124+
}
125+
126+
.github-token-info[data-token-state='present'] .github-token-info__icon--present {
127+
display: block;
128+
}
129+
130+
.github-token-info[data-token-state='missing'] .github-token-info__icon--missing {
131+
display: block;
132+
}
133+
134+
.github-token-info[data-token-state='missing'] .github-token-info__icon--present {
135+
display: none;
136+
}
137+
113138
.github-token-info[data-token-state='missing'] {
114-
border-color: color-mix(in srgb, #f59e0b 70%, var(--border-strong));
115139
color: color-mix(in srgb, #fbbf24 86%, var(--panel-text));
116-
background: color-mix(in srgb, #f59e0b 14%, transparent);
117140
}
118141

119142
.github-token-info[data-token-state='present'] {
120-
border-color: color-mix(in srgb, #22c55e 56%, var(--border-strong));
121143
color: color-mix(in srgb, #4ade80 82%, var(--panel-text));
122-
background: color-mix(in srgb, #22c55e 12%, transparent);
123144
}
124145

125-
.github-token-info[aria-expanded='true'] {
146+
.github-token-info[aria-expanded='true']:focus-visible {
126147
box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-ring) 70%, transparent);
127148
}
128149

@@ -178,6 +199,12 @@
178199
.github-token-add svg {
179200
width: 14px;
180201
height: 14px;
202+
fill: currentColor;
203+
stroke: none;
204+
}
205+
206+
.github-token-add svg path {
207+
fill: currentColor;
181208
}
182209

183210
.github-token-add[data-state='loading'] svg {

‎src/styles/layout-shell.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -267,6 +267,14 @@
267267
display: none;
268268
}
269269

270+
.app-grid-ai-toggle svg {
271+
width: 14px;
272+
height: 14px;
273+
fill: currentColor;
274+
stroke: none;
275+
flex-shrink: 0;
276+
}
277+
270278
.app-grid-ai-toggle[hidden] {
271279
display: none;
272280
}
@@ -352,6 +360,8 @@
352360
@media (max-width: 900px) {
353361
.app-grid-ai-toggle:not([hidden]) {
354362
display: inline-flex;
363+
align-items: center;
364+
gap: 7px;
355365
}
356366
}
357367

‎src/styles/panels-editor.css‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,9 @@
9393
color: var(--select-text);
9494
}
9595

96-
.editor-tools-toggle .editor-tools-toggle__inner-ring {
97-
stroke-width: 0.75;
96+
.editor-tools-toggle svg path {
97+
fill: currentColor;
98+
stroke: none;
9899
}
99100

100101
.panel-collapse-toggle {

0 commit comments

Comments
 (0)