Update to the page content header

web/components/ui/Content/Content.tsx

@@ -35,7 +35,7 @@ import FollowButton from '../../action-buttons/FollowButton';
 import NotifyButton from '../../action-buttons/NotifyButton';
 import Modal from '../Modal/Modal';
 import BrowserNotifyModal from '../../modals/BrowserNotify/BrowserNotifyModal';
-import StreamInfo from '../../common/StreamInfo';
+import ContentHeader from '../../common/ContentHeader';
 import { ServerStatus } from '../../../interfaces/server-status.model';
 import { StatusBar } from '..';
 
@@ -51,9 +51,18 @@ export default function ContentComponent() {
   const online = useRecoilValue<boolean>(isOnlineSelector);
   const chatDisplayName = useRecoilValue<string>(chatDisplayNameAtom);
   const chatUserId = useRecoilValue<string>(chatUserIdAtom);
-  const { viewerCount, lastConnectTime, lastDisconnectTime } =
+  const { viewerCount, lastConnectTime, lastDisconnectTime, streamTitle } =
     useRecoilValue<ServerStatus>(serverStatusState);
-  const { extraPageContent, version, name, externalActions, offlineMessage } = clientConfig;
+  const {
+    extraPageContent,
+    version,
+    name,
+    summary,
+    socialHandles,
+    tags,
+    externalActions,
+    offlineMessage,
+  } = clientConfig;
   const [showNotifyReminder, setShowNotifyReminder] = useState(false);
   const [showNotifyPopup, setShowNotifyPopup] = useState(false);
 
@@ -143,7 +152,14 @@ export default function ContentComponent() {
               <BrowserNotifyModal />
             </Modal>
           </div>
-          <StreamInfo isMobile={isMobile} />
+          <ContentHeader
+            name={name}
+            title={streamTitle}
+            summary={summary}
+            tags={tags}
+            links={socialHandles}
+            logo="/logo"
+          />
         </div>
         <div className={s.lowerHalf}>
           <Tabs defaultActiveKey="0" style={{ height: '100%' }}>

web/components/ui/Logo/Logo.module.scss

@@ -4,17 +4,17 @@
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  margin-right: .5rem;
-  width: clamp(2.5vh, 9vw, 120px);
-  height: clamp(2.5vh, 9vw, 120px);
+  margin-right: 0.5rem;
+  width: 96px;
+  height: 96px;
   border-radius: 50%;
-  border-width: 3px;
+  border-width: 5px;
   border-style: solid;
   border-color: var(--theme-primary-color);
   background-color: var(--theme-background-secondary);
 }
 
-.container {  
+.container {
   width: 90%;
   height: 90%;
   border-radius: 50%;
@@ -28,4 +28,3 @@
   background-position: center;
   overflow: hidden;
 }
-

web/components/ui/SocialLinks/SocialLinks.module.scss

@@ -1,6 +1,6 @@
 .link {
-  width: 2em;
-  margin-right: 4px;
+  width: 1.8em;
+  margin-right: 16px;
 }
 
 .links {