From 93d69a26ebb955b9e709c80cd9f517c24d113228 Mon Sep 17 00:00:00 2001
From: t1enne <nasir.taov@gmail.com>
Date: Sun, 8 May 2022 09:41:47 +0200
Subject: [PATCH] Moved UserDropdown to comps/common/, updated imports, some
 styling on Header

---
 .../UserDropdown/UserDropdown.module.scss     |  7 +++++
 .../UserDropdown/UserDropdown.tsx}            | 29 ++++++++++++-------
 web/components/common/UserDropdown/index.ts   |  1 +
 web/components/common/index.ts                |  1 +
 web/components/ui/Header/Header.module.scss   | 17 ++++++++++-
 web/components/ui/Header/Header.tsx           | 15 ++++++----
 web/stories/UserDropdownMenu.stories.tsx      | 10 +++----
 7 files changed, 59 insertions(+), 21 deletions(-)
 create mode 100644 web/components/common/UserDropdown/UserDropdown.module.scss
 rename web/components/{UserDropdownMenu.tsx => common/UserDropdown/UserDropdown.tsx} (59%)
 create mode 100644 web/components/common/UserDropdown/index.ts
 create mode 100644 web/components/common/index.ts

diff --git a/web/components/common/UserDropdown/UserDropdown.module.scss b/web/components/common/UserDropdown/UserDropdown.module.scss
new file mode 100644
index 0000000000..5e2418fd09
--- /dev/null
+++ b/web/components/common/UserDropdown/UserDropdown.module.scss
@@ -0,0 +1,7 @@
+.root {
+  button {
+    border: none;
+    font-size: 1rem;
+    font-weight: 600;
+  }
+}
diff --git a/web/components/UserDropdownMenu.tsx b/web/components/common/UserDropdown/UserDropdown.tsx
similarity index 59%
rename from web/components/UserDropdownMenu.tsx
rename to web/components/common/UserDropdown/UserDropdown.tsx
index 311e119589..86e97ebe79 100644
--- a/web/components/UserDropdownMenu.tsx
+++ b/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 (
-    <Dropdown overlay={menu} trigger={['click']}>
+    <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>
+      */}
+      </Dropdown>
+    </div>
   );
 }
diff --git a/web/components/common/UserDropdown/index.ts b/web/components/common/UserDropdown/index.ts
new file mode 100644
index 0000000000..f75fac7259
--- /dev/null
+++ b/web/components/common/UserDropdown/index.ts
@@ -0,0 +1 @@
+export { default } from './UserDropdown'
diff --git a/web/components/common/index.ts b/web/components/common/index.ts
new file mode 100644
index 0000000000..b3a78beabb
--- /dev/null
+++ b/web/components/common/index.ts
@@ -0,0 +1 @@
+export { default as UserDropdown } from './UserDropdown'
diff --git a/web/components/ui/Header/Header.module.scss b/web/components/ui/Header/Header.module.scss
index c5626ee4cb..5dd3678b42 100644
--- a/web/components/ui/Header/Header.module.scss
+++ b/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;
+    }
+  }
 }
diff --git a/web/components/ui/Header/Header.tsx b/web/components/ui/Header/Header.tsx
index 51b70c77d6..8ce96fb556 100644
--- a/web/components/ui/Header/Header.tsx
+++ b/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>
   );
diff --git a/web/stories/UserDropdownMenu.stories.tsx b/web/stories/UserDropdownMenu.stories.tsx
index e4a0bc4c51..ca61d16dfc 100644
--- a/web/stories/UserDropdownMenu.stories.tsx
+++ b/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 = {