Skip to content

Commit ef6ae05

Browse files
knightedcodemonkeyknightedcodemonkey
committed
refactor: icons.
1 parent 9cd4399 commit ef6ae05

5 files changed

Lines changed: 81 additions & 43 deletions

File tree

‎src/index.html‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,14 @@ <h1>
4949
aria-expanded="false"
5050
aria-controls="github-token-info-panel"
5151
>
52-
i
52+
<svg viewBox="0 0 24 24" aria-hidden="true">
53+
<path
54+
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"
55+
></path>
56+
<path
57+
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"
58+
></path>
59+
</svg>
5360
</button>
5461
<div class="github-token-info-panel" id="github-token-info-panel" hidden>
5562
<p
@@ -77,7 +84,7 @@ <h1>
7784
autocomplete="off"
7885
autocapitalize="off"
7986
spellcheck="false"
80-
placeholder="GitHub BYOT"
87+
placeholder="GitHub PAT"
8188
aria-label="GitHub token"
8289
aria-describedby="github-token-privacy-note"
8390
/>
@@ -92,9 +99,10 @@ <h1>
9299
aria-label="Add GitHub token"
93100
title="Add GitHub token"
94101
>
95-
<svg viewBox="0 0 24 24" aria-hidden="true">
96-
<path d="M12 5v14"></path>
97-
<path d="M5 12h14"></path>
102+
<svg viewBox="0 0 16 16" aria-hidden="true">
103+
<path
104+
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"
105+
></path>
98106
</svg>
99107
</button>
100108
<button
@@ -189,7 +197,12 @@ <h1>
189197
aria-controls="github-ai-controls"
190198
hidden
191199
>
192-
GitHub
200+
<span>GitHub</span>
201+
<svg viewBox="0 0 16 16" aria-hidden="true">
202+
<path
203+
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"
204+
></path>
205+
</svg>
193206
</button>
194207
</div>
195208

@@ -318,16 +331,10 @@ <h2>Component</h2>
318331
title="Show component tools"
319332
aria-label="Show component tools"
320333
>
321-
<svg viewBox="0 0 24 24" aria-hidden="true">
334+
<svg viewBox="0 0 16 16" aria-hidden="true">
322335
<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"
336+
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"
324337
></path>
325-
<circle
326-
class="editor-tools-toggle__inner-ring"
327-
cx="12"
328-
cy="12"
329-
r="3.8"
330-
></circle>
331338
</svg>
332339
</button>
333340
<button
@@ -420,16 +427,10 @@ <h2>Styles</h2>
420427
title="Show styles tools"
421428
aria-label="Show styles tools"
422429
>
423-
<svg viewBox="0 0 24 24" aria-hidden="true">
430+
<svg viewBox="0 0 16 16" aria-hidden="true">
424431
<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"
432+
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"
426433
></path>
427-
<circle
428-
class="editor-tools-toggle__inner-ring"
429-
cx="12"
430-
cy="12"
431-
r="3.8"
432-
></circle>
433434
</svg>
434435
</button>
435436
<button

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

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -78,15 +78,28 @@ 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 = `
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>
89+
</svg>
90+
`
91+
92+
const tokenInfoMissingIcon = `
93+
<svg viewBox="0 0 24 24" aria-hidden="true">
94+
<path 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"></path>
95+
<path 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"></path>
96+
</svg>
97+
`
98+
99+
const tokenInfoPresentIcon = `
88100
<svg viewBox="0 0 24 24" aria-hidden="true">
89-
<path d="m5 13 4 4L19 7"></path>
101+
<path 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"></path>
102+
<path 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"></path>
90103
</svg>
91104
`
92105

@@ -119,7 +132,9 @@ export const createGitHubByotControls = ({
119132

120133
if (tokenInfoButton instanceof HTMLButtonElement) {
121134
tokenInfoButton.dataset.tokenState = hasProvidedToken ? 'present' : 'missing'
122-
tokenInfoButton.textContent = hasProvidedToken ? 'i' : '?'
135+
tokenInfoButton.innerHTML = hasProvidedToken
136+
? tokenInfoPresentIcon
137+
: tokenInfoMissingIcon
123138
tokenInfoButton.setAttribute(
124139
'aria-label',
125140
hasProvidedToken

‎src/styles/ai-controls.css‎

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -92,37 +92,38 @@
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+
113118
.github-token-info[data-token-state='missing'] {
114-
border-color: color-mix(in srgb, #f59e0b 70%, var(--border-strong));
115119
color: color-mix(in srgb, #fbbf24 86%, var(--panel-text));
116-
background: color-mix(in srgb, #f59e0b 14%, transparent);
117120
}
118121

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

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

@@ -178,6 +179,12 @@
178179
.github-token-add svg {
179180
width: 14px;
180181
height: 14px;
182+
fill: currentColor;
183+
stroke: none;
184+
}
185+
186+
.github-token-add svg path {
187+
fill: currentColor;
181188
}
182189

183190
.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: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,13 @@
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 {
97+
fill: currentColor;
98+
stroke: none;
99+
}
100+
101+
.editor-tools-toggle svg path {
102+
fill: currentColor;
98103
}
99104

100105
.panel-collapse-toggle {

0 commit comments

Comments
 (0)