fix(sw): align header logo styles and refine viewer UI

src/sw/sw-theme.stories.tsx

@@ -7,7 +7,7 @@ import {
 import "@hm-design/sw/styles.css"
 import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
 import { AUX_ITEMS, CATEGORIES, HISTORY } from "./sw-footer-fixture"
-import { LayerPanel, OptionsPanel, SAMPLES, useViewerDemo } from "./sw-viewer-fixture"
+import { LayerPanel, OptionsPanel, SAMPLES, VIEWER_STORY_LOGO, useViewerDemo } from "./sw-viewer-fixture"
 import "./sw-stories.css"
 import "./sw-viewer-stories.css"
 
@@ -42,7 +42,7 @@ function ViewerArea({ width, panels, ...rest }: { width: number; panels?: boolea
   const demo = useViewerDemo({ initialDocument: SAMPLES[1].name, initialPanels: panels ? ["layers", "options"] : [] })
   return (
     <Frame width={width} height={panels ? 600 : 220} {...rest}
-      header={<SWViewerHeader documentTitle={demo.documentName} {...demo.fileProps} groups={demo.groups} trailing={demo.trailing} onCommand={demo.onCommand} />}>
+      header={<SWViewerHeader {...VIEWER_STORY_LOGO} documentTitle={demo.documentName} {...demo.fileProps} groups={demo.groups} trailing={demo.trailing} onCommand={demo.onCommand} />}>
       {panels && <>
         <LayerPanel demo={demo} strategy="absolute" defaultPosition="top-start" />
         <OptionsPanel demo={demo} strategy="absolute" />