diff --git a/.changeset/sidebar-wordmark-text.md b/.changeset/sidebar-wordmark-text.md new file mode 100644 index 0000000000..4ce27f9bbb --- /dev/null +++ b/.changeset/sidebar-wordmark-text.md @@ -0,0 +1,5 @@ +--- +'@hyperdx/app': patch +--- + +fix(app): render the ClickStack name as text in the expanded sidebar, 8px from the logo symbol. diff --git a/.changeset/update-favicon.md b/.changeset/update-favicon.md new file mode 100644 index 0000000000..430940f57d --- /dev/null +++ b/.changeset/update-favicon.md @@ -0,0 +1,5 @@ +--- +'@hyperdx/app': patch +--- + +fix(app): use the new favicon set, including an SVG, in the browser tab, bookmarks, and touch icon. diff --git a/packages/app/public/favicons/clickstack/apple-touch-icon.png b/packages/app/public/favicons/clickstack/apple-touch-icon.png index 5258791127..ba7154fc89 100644 Binary files a/packages/app/public/favicons/clickstack/apple-touch-icon.png and b/packages/app/public/favicons/clickstack/apple-touch-icon.png differ diff --git a/packages/app/public/favicons/clickstack/favicon-16x16.png b/packages/app/public/favicons/clickstack/favicon-16x16.png index 07da0a227b..8a47c081ef 100644 Binary files a/packages/app/public/favicons/clickstack/favicon-16x16.png and b/packages/app/public/favicons/clickstack/favicon-16x16.png differ diff --git a/packages/app/public/favicons/clickstack/favicon-32x32.png b/packages/app/public/favicons/clickstack/favicon-32x32.png index 3c269370a0..b280c54d35 100644 Binary files a/packages/app/public/favicons/clickstack/favicon-32x32.png and b/packages/app/public/favicons/clickstack/favicon-32x32.png differ diff --git a/packages/app/public/favicons/clickstack/favicon.ico b/packages/app/public/favicons/clickstack/favicon.ico index c2f759ca71..ca9c0249ea 100644 Binary files a/packages/app/public/favicons/clickstack/favicon.ico and b/packages/app/public/favicons/clickstack/favicon.ico differ diff --git a/packages/app/public/favicons/clickstack/favicon.svg b/packages/app/public/favicons/clickstack/favicon.svg index 8d47d5fdb2..a709623539 100644 --- a/packages/app/public/favicons/clickstack/favicon.svg +++ b/packages/app/public/favicons/clickstack/favicon.svg @@ -1,13 +1,5 @@ - - - - - - + + + + diff --git a/packages/app/src/brand/Logomark.tsx b/packages/app/src/brand/Logomark.tsx index a395275536..701296ef57 100644 --- a/packages/app/src/brand/Logomark.tsx +++ b/packages/app/src/brand/Logomark.tsx @@ -1,14 +1,30 @@ +const VIEWBOX_WIDTH = 38.7979; +const VIEWBOX_HEIGHT = 44.7998; + /** * ClickStack mark from the hexagon-and-bolt symbol. * The bolt uses the page background so it stays two-tone: white on the dark * surface, dark on the light one. + * + * `size` is the box height. The default box is square, which is what the + * collapsed rail and the other callers size against. `fit="symbol"` hugs the + * hexagon, which is taller than it is wide, and is what the wordmark uses. */ -export default function Logomark({ size = 16 }: { size?: number }) { +export default function Logomark({ + size = 16, + fit = 'square', +}: { + size?: number; + fit?: 'square' | 'symbol'; +}) { + const width = + fit === 'symbol' ? size * (VIEWBOX_WIDTH / VIEWBOX_HEIGHT) : size; + return ( diff --git a/packages/app/src/brand/Wordmark.tsx b/packages/app/src/brand/Wordmark.tsx index 64f1042cae..8671da9b9d 100644 --- a/packages/app/src/brand/Wordmark.tsx +++ b/packages/app/src/brand/Wordmark.tsx @@ -1,36 +1,19 @@ -import React from 'react'; +import { Group, Text } from '@mantine/core'; -export default function Wordmark() { +import Logomark from './Logomark'; + +// The brand lockup: a 23px symbol, an 8px gap, and the name in Inter 18px +// medium. The name is passed in so this file does not import the brand barrel, +// which imports this file. +const MARK_HEIGHT = 23; + +export default function Wordmark({ name }: { name: string }) { return ( -
- - - - - - - -
+ + + + {name} + + ); } diff --git a/packages/app/src/brand/__tests__/Wordmark.test.tsx b/packages/app/src/brand/__tests__/Wordmark.test.tsx new file mode 100644 index 0000000000..3cdf08fec5 --- /dev/null +++ b/packages/app/src/brand/__tests__/Wordmark.test.tsx @@ -0,0 +1,37 @@ +import { MantineProvider } from '@mantine/core'; +import { render, screen } from '@testing-library/react'; + +import { useLogomark, useWordmark } from '@/brand'; + +function Lockup() { + return useWordmark(); +} + +function SquareMark() { + return useLogomark({ size: 22 }); +} + +describe('Wordmark', () => { + it('renders the brand name beside a mark that hugs the hexagon', () => { + const { container } = render( + + + , + ); + + expect(screen.getByText('ClickStack')).toBeInTheDocument(); + const svg = container.querySelector('svg'); + expect(svg).toHaveAttribute('height', '23'); + expect(Number(svg?.getAttribute('width'))).toBeLessThan(23); + }); +}); + +describe('Logomark', () => { + it('keeps a square box unless the wordmark asks it to hug the symbol', () => { + const { container } = render(); + + const svg = container.querySelector('svg'); + expect(svg).toHaveAttribute('width', '22'); + expect(svg).toHaveAttribute('height', '22'); + }); +}); diff --git a/packages/app/src/brand/index.tsx b/packages/app/src/brand/index.tsx index 7a691496ba..004210be08 100644 --- a/packages/app/src/brand/index.tsx +++ b/packages/app/src/brand/index.tsx @@ -29,7 +29,7 @@ export function usePageTitle(page?: string): string { // during render. A downstream build replaces this module to change the // name and the marks without editing each call site. export function useWordmark() { - return useMemo(() => , []); + return useMemo(() => , []); } export function useLogomark(props?: { size?: number }) {