fix(app): show the ClickStack name as text and update the favicon

.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.

.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.

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 (
     <svg
-      width={size}
+      width={width}
       height={size}
-      viewBox="0 0 38.7979 44.7998"
+      viewBox={`0 0 ${VIEWBOX_WIDTH} ${VIEWBOX_HEIGHT}`}
       fill="none"
       aria-hidden
     >

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 (
-    <div className="align-items-center d-flex">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="121"
-        height="25"
-        fill="none"
-        viewBox="0 0 121 25"
-      >
-        <svg
-          x="1.875"
-          y="1.875"
-          width="17.536"
-          height="20.249"
-          viewBox="0 0 38.7979 44.7998"
-        >
-          <path
-            fill="currentColor"
-            d="M38.7979 11.2002V33.5996L19.3994 44.7998L0 33.5996V11.2002L19.3994 0L38.7979 11.2002Z"
-          />
-          <path
-            fill="var(--color-bg-body)"
-            d="M24.2434 7.39081C24.5455 7.61204 24.6866 8.0663 24.5838 8.48686L21.8763 19.5618H26.8722C27.1721 19.5618 27.4433 19.7862 27.5622 20.1326C27.6812 20.4791 27.6251 20.8814 27.4196 21.1563L15.3924 37.2399C15.1527 37.5603 14.7692 37.6305 14.467 37.4093C14.1649 37.188 14.0237 36.7338 14.1266 36.3132L16.834 25.2383H11.8382C11.5383 25.2383 11.2671 25.0139 11.1481 24.6675C11.0291 24.321 11.0852 23.9187 11.2908 23.6438L23.318 7.56021C23.5576 7.23979 23.9411 7.16958 24.2434 7.39081Z"
-          />
-        </svg>
-        <path
-          fill="currentColor"
-          d="M41.2 7.642q-.954 0-1.71.342-.756.324-1.296.972a4.7 4.7 0 0 0-.81 1.566q-.27.918-.27 2.07 0 1.512.45 2.628.45 1.098 1.35 1.692t2.268.594q.828 0 1.584-.144a16 16 0 0 0 1.566-.414v1.674q-.756.288-1.548.414-.792.144-1.836.144-1.962 0-3.276-.81-1.296-.81-1.944-2.304t-.648-3.492q0-1.458.396-2.664a6.1 6.1 0 0 1 1.188-2.106 5.1 5.1 0 0 1 1.908-1.35q1.152-.486 2.646-.486.972 0 1.908.216a7 7 0 0 1 1.692.576l-.72 1.62q-.63-.288-1.368-.504a5 5 0 0 0-1.53-.234M48.793 19h-1.908V5.32h1.908zm4.904-9.702V19h-1.908V9.298zm-.936-3.69q.432 0 .756.252t.324.846q0 .576-.324.846a1.2 1.2 0 0 1-.756.252 1.25 1.25 0 0 1-.792-.252q-.306-.27-.306-.846 0-.594.306-.846a1.25 1.25 0 0 1 .792-.252m7.838 13.572q-1.332 0-2.34-.522t-1.566-1.62q-.558-1.116-.558-2.826 0-1.8.594-2.916.612-1.116 1.638-1.638 1.044-.54 2.376-.54.81 0 1.512.18.72.162 1.188.378l-.576 1.548a9 9 0 0 0-1.08-.342 4.3 4.3 0 0 0-1.062-.144q-.9 0-1.494.396-.576.378-.864 1.152-.27.756-.27 1.908 0 1.098.288 1.854t.846 1.152q.576.378 1.422.378.81 0 1.422-.18t1.152-.468v1.656a4 4 0 0 1-1.134.45q-.612.144-1.494.144m6.808-7.02q0 .378-.036.864-.018.486-.054.9h.054l.342-.432.432-.54a10 10 0 0 1 .396-.468l2.97-3.186h2.214l-3.906 4.158L73.977 19h-2.25l-3.204-4.338-1.116.936V19h-1.89V5.32h1.89zm15.761 3.366q0 1.152-.558 1.962t-1.602 1.26q-1.044.432-2.484.432a10 10 0 0 1-1.35-.09 9 9 0 0 1-1.206-.216 5 5 0 0 1-.99-.36v-1.836q.72.324 1.692.594a7.9 7.9 0 0 0 1.98.252q.864 0 1.44-.234t.864-.648.288-.972q0-.594-.306-.99-.288-.414-.918-.756-.612-.36-1.656-.756-.72-.27-1.314-.594a5.2 5.2 0 0 1-1.026-.792q-.432-.45-.666-1.044t-.234-1.386q0-1.062.522-1.818.54-.756 1.476-1.152.936-.414 2.178-.414a8 8 0 0 1 1.926.216q.9.198 1.71.558l-.612 1.602q-.738-.306-1.494-.504a6.2 6.2 0 0 0-1.584-.198q-.72 0-1.206.216t-.738.594a1.64 1.64 0 0 0-.234.882q0 .594.27.99t.864.738q.594.324 1.566.72 1.08.414 1.836.9.774.486 1.17 1.17.396.666.396 1.674m5.793 2.106q.378 0 .774-.072t.684-.162v1.44q-.306.144-.828.234a5 5 0 0 1-1.044.108q-.792 0-1.458-.27-.648-.27-1.044-.936t-.396-1.854v-5.364h-1.35v-.864l1.422-.72.666-2.052h1.17v2.178h2.772v1.458h-2.772v5.328q0 .792.378 1.17.396.378 1.026.378m7.16-8.514q1.836 0 2.736.81.9.792.9 2.502V19h-1.35l-.378-1.35h-.072a5 5 0 0 1-.864.864 2.8 2.8 0 0 1-1.008.504q-.558.162-1.368.162a3.9 3.9 0 0 1-1.566-.306 2.5 2.5 0 0 1-1.08-.972q-.396-.666-.396-1.656 0-1.476 1.116-2.25 1.134-.774 3.438-.846l1.656-.054v-.54q0-1.08-.486-1.512t-1.368-.432q-.756 0-1.44.216a9 9 0 0 0-1.296.522l-.612-1.386a7.5 7.5 0 0 1 1.566-.594 7 7 0 0 1 1.872-.252m.45 5.256q-1.656.072-2.304.558-.63.468-.63 1.332 0 .756.45 1.098.468.342 1.17.342 1.134 0 1.872-.63t.738-1.89v-.846zm10.03 4.806q-1.332 0-2.34-.522t-1.566-1.62q-.558-1.116-.558-2.826 0-1.8.594-2.916.612-1.116 1.638-1.638 1.044-.54 2.376-.54.81 0 1.512.18.72.162 1.188.378l-.576 1.548a9 9 0 0 0-1.08-.342 4.3 4.3 0 0 0-1.062-.144q-.9 0-1.494.396-.576.378-.864 1.152-.27.756-.27 1.908 0 1.098.288 1.854t.846 1.152q.576.378 1.422.378.81 0 1.422-.18t1.152-.468v1.656a4 4 0 0 1-1.134.45q-.612.144-1.494.144m6.808-7.02q0 .378-.036.864-.018.486-.054.9h.054l.342-.432.432-.54a10 10 0 0 1 .396-.468l2.97-3.186h2.214l-3.906 4.158L119.979 19h-2.25l-3.204-4.338-1.116.936V19h-1.89V5.32h1.89z"
-        ></path>
-      </svg>
-    </div>
+    <Group gap={8} align="center" wrap="nowrap" miw={0}>
+      <Logomark size={MARK_HEIGHT} fit="symbol" />
+      <Text fz={18} fw={500} truncate="end" miw={0}>
+        {name}
+      </Text>
+    </Group>
   );
 }

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(
+      <MantineProvider>
+        <Lockup />
+      </MantineProvider>,
+    );
+
+    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(<SquareMark />);
+
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveAttribute('width', '22');
+    expect(svg).toHaveAttribute('height', '22');
+  });
+});

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(() => <Wordmark />, []);
+  return useMemo(() => <Wordmark name={BRAND_DISPLAY_NAME} />, []);
 }
 
 export function useLogomark(props?: { size?: number }) {