Split up design/style pages

web/stories/BrowserNotifyModal.stories.tsx

@@ -1,16 +1,15 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import BrowserNotifyModal from '../components/modals/BrowserNotifyModal';
-import AuthModal from '../components/modals/AuthModal';
 
 const Example = () => (
   <div>
-    <AuthModal />
+    <BrowserNotifyModal />
   </div>
 );
 
 export default {
-  title: 'owncast/Modals/Browser Push Notifications',
+  title: 'owncast/Modals/Browser Notifications',
   component: BrowserNotifyModal,
   parameters: {},
 } as ComponentMeta<typeof BrowserNotifyModal>;

web/stories/Colors.stories.mdx

@@ -1,51 +1,10 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Color, ColorRow } from './Color';
-import { Image, ImageRow } from './ImageAsset';
-
-import Logo from '../assets/images/logo.svg';
-import FediverseColor from '../assets/images/fediverse-color.png';
-import FediverseBlack from '../assets/images/fediverse-black.png';
-import Moderator from '../assets/images/moderator.svg';
-import IndieAuth from '../assets/images/indieauth.png';
-import IsBot from '../assets/images/bot.svg';
-
-<Meta title="owncast/Style Guide" />
-
-<style>{`
- 
-  
-`}</style>
-
-export const images = [
-  {
-    src: Logo,
-    name: 'Logo',
-  },
-  {
-    src: FediverseColor,
-    name: 'Fediverse Color',
-  },
-  {
-    src: FediverseBlack,
-    name: 'Fediverse Black',
-  },
-  {
-    src: Moderator,
-    name: 'Moderator',
-  },
-  {
-    src: IndieAuth,
-    name: 'IndieAuth',
-  },
-  {
-    src: IsBot,
-    name: 'Bot Flag',
-  },
-];
+
+<Meta title="owncast/Style Guide/Colors" />
 
 # Colors
 
-<Story name="Colors"></Story>
 
 <ColorRow colors={['theme-primary-color', 'theme-text-color-secondary']} />
 
@@ -110,19 +69,3 @@ export const images = [
     'color-owncast-orange-900',
   ]}
 />
-
-# Font
-
-[Inter font](https://rsms.me/inter/)
-
-<Story name="Fonts">
-  <Canvas style={{ color: 'var(--theme-text-color-secondary)' }}>
-    {getComputedStyle(document.documentElement).getPropertyValue('--theme-font-family')}
-  </Canvas>
-</Story>
-
-# Images
-
-<Story name="Images and Icons"></Story>
-
-<ImageRow images={images} />

web/stories/Images.stories.mdx

@@ -0,0 +1,49 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Image, ImageRow } from './ImageAsset';
+
+import Logo from '../assets/images/logo.svg';
+import FediverseColor from '../assets/images/fediverse-color.png';
+import FediverseBlack from '../assets/images/fediverse-black.png';
+import Moderator from '../assets/images/moderator.svg';
+import IndieAuth from '../assets/images/indieauth.png';
+import IsBot from '../assets/images/bot.svg';
+
+<Meta title="owncast/Style Guide/Images+Icons" />
+
+export const images = [
+  {
+    src: Logo,
+    name: 'Logo',
+  },
+];
+
+# Images
+
+<ImageRow images={images} />
+
+## App Icons
+
+export const icons = [
+  {
+    src: FediverseColor,
+    name: 'Fediverse Color',
+  },
+  {
+    src: FediverseBlack,
+    name: 'Fediverse Black',
+  },
+  {
+    src: Moderator,
+    name: 'Moderator',
+  },
+  {
+    src: IndieAuth,
+    name: 'IndieAuth',
+  },
+  {
+    src: IsBot,
+    name: 'Bot Flag',
+  },
+];
+
+<ImageRow images={icons} />

web/stories/Typography.stories.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta title="owncast/Style Guide/Typography" />
+
+# Font
+
+[Inter font](https://rsms.me/inter/)
+
+  <Canvas style={{ color: 'var(--theme-text-color-secondary)' }}>
+    {getComputedStyle(document.documentElement).getPropertyValue('--theme-font-family')}
+  </Canvas>