Moved UserDropdown to comps/common/, updated imports, some styling on Header

web/components/common/UserDropdown/UserDropdown.module.scss

@@ -0,0 +1,7 @@
+.root {
+  button {
+    border: none;
+    font-size: 1rem;
+    font-weight: 600;
+  }
+}

web/components/common/UserDropdown/UserDropdown.tsx

@@ -1,17 +1,16 @@
-import { Menu, Dropdown } from 'antd';
+import { Menu, Dropdown, Button, Space } from 'antd';
 import { DownOutlined } from '@ant-design/icons';
 import { useRecoilState } from 'recoil';
-import { ChatVisibilityState, ChatState } from '../interfaces/application-state';
-import { chatVisibilityAtom } from './stores/ClientConfigStore';
+import { chatVisibilityAtom } from '../../stores/ClientConfigStore';
+import { ChatState, ChatVisibilityState } from '../../../interfaces/application-state';
+import s from './UserDropdown.module.scss';
 
 interface Props {
-  username: string;
-  chatState: ChatState;
+  username?: string;
+  chatState?: ChatState;
 }
 
-export default function UserDropdown(props: Props) {
-  const { username, chatState } = props;
-
+export default function UserDropdown({ username = 'test-user', chatState }: Props) {
   const chatEnabled = chatState !== ChatState.NotAvailable;
   const [chatVisibility, setChatVisibility] =
     useRecoilState<ChatVisibilityState>(chatVisibilityAtom);
@@ -37,10 +36,20 @@ export default function UserDropdown(props: Props) {
   );
 
   return (
+    <div className={`${s.root}`}>
       <Dropdown overlay={menu} trigger={['click']}>
+        <Button>
+          <Space>
+            {username}
+            <DownOutlined />
+          </Space>
+        </Button>
+        {/*
       <button type="button" className="ant-dropdown-link" onClick={e => e.preventDefault()}>
         {username} <DownOutlined />
       </button>
+      */}
       </Dropdown>
+    </div>
   );
 }

web/components/common/UserDropdown/index.ts

@@ -0,0 +1 @@
+export { default } from './UserDropdown'

web/components/common/index.ts

@@ -0,0 +1 @@
+export { default as UserDropdown } from './UserDropdown'

web/components/ui/Header/Header.module.scss

@@ -1,4 +1,19 @@
 .header {
-  @apply fixed w-full bg-red;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   z-index: 1;
+  padding: .5rem 1rem;
+  .logo {
+    display: flex;
+    align-items: center;
+    svg {
+      height: 60px;
+    }
+    span {
+      margin-left: 1rem;
+      font-size: 1.7rem;
+      font-weight: 600;
+    }
+  }
 }

web/components/ui/Header/Header.tsx

@@ -1,16 +1,21 @@
 import { Layout } from 'antd';
-import UserDropdown from '../../UserDropdownMenu';
+import { UserDropdown } from '../../common';
+import Logo from '../../logo';
 import s from './Header.module.scss';
 
 const { Header } = Layout;
 
-export default function HeaderComponent(props) {
-  const { name } = props;
+interface Props {
+  name: string;
+}
 
+export default function HeaderComponent({ name = 'Your stream title' }: Props) {
   return (
     <Header className={`${s.header}`}>
-      Logo goes here
-      {name}
+      <div className={`${s.logo}`}>
+        <Logo />
+        <span>{name}</span>
+      </div>
       <UserDropdown />
     </Header>
   );

web/stories/UserDropdownMenu.stories.tsx

@@ -1,23 +1,23 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { RecoilRoot } from 'recoil';
-import UserDropdownMenu from '../components/UserDropdownMenu';
+import { UserDropdown } from '../components/common';
 import { ChatState } from '../interfaces/application-state';
 
 export default {
   title: 'owncast/User settings menu',
-  component: UserDropdownMenu,
+  component: UserDropdown,
   parameters: {},
-} as ComponentMeta<typeof UserDropdownMenu>;
+} as ComponentMeta<typeof UserDropdown>;
 
 // This component uses Recoil internally so wrap it in a RecoilRoot.
 const Example = args => (
   <RecoilRoot>
-    <UserDropdownMenu {...args} />
+    <UserDropdown {...args} />
   </RecoilRoot>
 );
 
-const Template: ComponentStory<typeof UserDropdownMenu> = args => <Example {...args} />;
+const Template: ComponentStory<typeof UserDropdown> = args => <Example {...args} />;
 
 export const ChatEnabled = Template.bind({});
 ChatEnabled.args = {