Icon size update

This commit is contained in:
David Hill
2025-10-30 12:46:34 +00:00
parent e533d48b51
commit 0abffdb8f8
8 changed files with 71 additions and 31 deletions

View File

@@ -4,7 +4,11 @@
min-width: 160px;
border-radius: 8px;
background-color: var(--color-background);
box-shadow: 0 0 0 1px rgba(19, 16, 16, 0.08), 0 6px 8px -4px rgba(19, 16, 16, 0.12), 0 4px 3px -2px rgba(19, 16, 16, 0.12), 0 1px 2px -1px rgba(19, 16, 16, 0.12);
box-shadow:
0 0 0 1px rgba(19, 16, 16, 0.08),
0 6px 8px -4px rgba(19, 16, 16, 0.12),
0 4px 3px -2px rgba(19, 16, 16, 0.12),
0 1px 2px -1px rgba(19, 16, 16, 0.12);
padding: 6px;
@media (prefers-color-scheme: dark) {
@@ -29,6 +33,12 @@
border-radius: 2px;
transition: background-color 0.2s ease;
.context-menu-item [data-slot="copy light"],
.context-menu-item [data-slot="copy dark"] {
width: 22px !important;
height: 26px !important;
}
[data-slot="copy dark"] {
display: none;
}

View File

@@ -126,18 +126,48 @@ export function Header(props: { zen?: boolean }) {
style={`left: ${store.contextMenuPosition.x}px; top: ${store.contextMenuPosition.y}px;`}
>
<button class="context-menu-item" onClick={copyLogoToClipboard}>
<img data-slot="copy light" src={copyLogoLight} alt="Logo" />
<img data-slot="copy dark" src={copyLogoDark} alt="Logo" />
<img
data-slot="copy light"
src={copyLogoLight}
style="width: 22px; height: 26px;"
alt="Logo"
/>
<img
data-slot="copy dark"
src={copyLogoDark}
style="width: 22px; height: 26px;"
alt="Logo"
/>
Copy logo as SVG
</button>
<button class="context-menu-item" onClick={copyWordmarkToClipboard}>
<img data-slot="copy light" src={copyWordmarkLight} alt="Wordmark" />
<img data-slot="copy dark" src={copyWordmarkDark} alt="Wordmark" />
<img
data-slot="copy light"
src={copyWordmarkLight}
style="width: 22px; height: 26px;"
alt="Wordmark"
/>
<img
data-slot="copy dark"
src={copyWordmarkDark}
style="width: 22px; height: 26px;"
alt="Wordmark"
/>
Copy wordmark as SVG
</button>
<button class="context-menu-item" onClick={() => (window.location.href = "/brand")}>
<img data-slot="copy light" src={copyBrandAssetsLight} alt="Brand Assets" />
<img data-slot="copy dark" src={copyBrandAssetsDark} alt="Brand Assets" />
<img
data-slot="copy light"
src={copyBrandAssetsLight}
style="width: 22px; height: 26px;"
alt="Brand Assets"
/>
<img
data-slot="copy dark"
src={copyBrandAssetsDark}
style="width: 22px; height: 26px;"
alt="Brand Assets"
/>
Brand assets
</button>
</div>