Start of empty follower tab state. For #1913

web/components/ui/Content/Content.tsx

@@ -79,7 +79,7 @@ const DesktopContent = ({ name, streamTitle, summary, tags, socialHandles, extra
           <CustomPageContent content={extraPageContent} />
         </TabPane>
         <TabPane tab="Followers" key="3">
-          <FollowerCollection />
+          <FollowerCollection name={name} />
         </TabPane>
       </Tabs>
     </div>
@@ -123,7 +123,7 @@ const MobileContent = ({
         <CustomPageContent content={extraPageContent} />
       </TabPane>
       <TabPane tab="Followers" key="3">
-        <FollowerCollection />
+        <FollowerCollection name={name} />
       </TabPane>
     </Tabs>
   </div>

web/components/ui/CustomPageContent/CustomPageContent.module.scss

@@ -7,8 +7,6 @@
 .customPageContent {
   font-size: 1.1rem;
   line-height: 1.6em;
-  margin: 0;
-  padding: 0;
   color: var(--theme-color-palette-0);
   padding: calc(2 * var(--content-padding));
   border-radius: var(--theme-rounded-corners);

web/components/ui/followers/FollowerCollection/FollowerCollection.module.scss

@@ -1,3 +1,11 @@
 .followers {
-	width: 100%;
+  width: 100%;
+  background-color: var(--theme-color-background-light);
+}
+
+.noFollowers {
+  padding: calc(2 * var(--content-padding));
+  border-radius: var(--theme-rounded-corners);
+  width: 100%;
+  background-color: var(--theme-color-background-light);
 }

web/components/ui/followers/FollowerCollection/FollowerCollection.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { RecoilRoot } from 'recoil';
 import { FollowerCollection } from './FollowerCollection';
 
 export default {
@@ -9,7 +10,9 @@ export default {
 } as ComponentMeta<typeof FollowerCollection>;
 
 const Template: ComponentStory<typeof FollowerCollection> = (args: object) => (
-  <FollowerCollection {...args} />
+  <RecoilRoot>
+    <FollowerCollection name="Example stream name" {...args} />
+  </RecoilRoot>
 );
 
 export const NoFollowers = Template.bind({});

web/components/ui/followers/FollowerCollection/FollowerCollection.tsx

@@ -2,9 +2,14 @@ import { FC, useEffect, useState } from 'react';
 import { Col, Pagination, Row } from 'antd';
 import { Follower } from '../../../../interfaces/follower';
 import { SingleFollower } from '../SingleFollower/SingleFollower';
-import styles from '../SingleFollower/SingleFollower.module.scss';
+import styles from './FollowerCollection.module.scss';
+import { FollowButton } from '../../../action-buttons/FollowButton';
 
-export const FollowerCollection: FC = () => {
+export type FollowerCollectionProps = {
+  name: string;
+};
+
+export const FollowerCollection: FC<FollowerCollectionProps> = ({ name }) => {
   const ENDPOINT = '/api/followers';
   const ITEMS_PER_PAGE = 24;
 
@@ -35,7 +40,20 @@ export const FollowerCollection: FC = () => {
   }, [page]);
 
   const noFollowers = (
-    <div>A message explaining how to follow goes here since there are no followers.</div>
+    <div className={styles.noFollowers}>
+      <h2>Be the first follower!</h2>
+      <p>
+        {name !== 'Owncast' ? name : 'This server'} is a part of the{' '}
+        <a href="https://owncast.online/join-fediverse">Fediverse</a>, an interconnected network of
+        independent users and servers.
+      </p>
+      <p>
+        By following {name !== 'Owncast' ? name : 'this server'} you&apos;ll be able to get updates
+        from the stream, share it with others, and and show your appreciation when it goes live, all
+        from your own Fediverse account.
+      </p>
+      <FollowButton />
+    </div>
   );
 
   if (!followers?.length) {