From 989b1800faf2108eea3bfb9ec334f8d5ca01164c Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Mon, 9 May 2022 13:02:12 -0400
Subject: [PATCH 1/4] Add CTA banner to the bottom of the page

---
 app/soapbox/components/ui/text/text.tsx       |  2 +-
 .../features/ui/components/sign_up_panel.tsx  | 48 ++++++++++++++-----
 2 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/app/soapbox/components/ui/text/text.tsx b/app/soapbox/components/ui/text/text.tsx
index 5ecfadf39..072491109 100644
--- a/app/soapbox/components/ui/text/text.tsx
+++ b/app/soapbox/components/ui/text/text.tsx
@@ -31,7 +31,7 @@ const weights = {
 const sizes = {
   xs: 'text-xs',
   sm: 'text-sm',
-  md: 'text-md',
+  md: 'text-base',
   lg: 'text-lg',
   xl: 'text-xl',
   '2xl': 'text-2xl',
diff --git a/app/soapbox/features/ui/components/sign_up_panel.tsx b/app/soapbox/features/ui/components/sign_up_panel.tsx
index 2a54c5c11..0aa09c25f 100644
--- a/app/soapbox/features/ui/components/sign_up_panel.tsx
+++ b/app/soapbox/features/ui/components/sign_up_panel.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Button, Stack, Text } from 'soapbox/components/ui';
+import { Button, HStack, Stack, Text } from 'soapbox/components/ui';
 import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
 
 const SignUpPanel = () => {
@@ -12,21 +12,43 @@ const SignUpPanel = () => {
   if (me || singleUserMode) return null;
 
   return (
-    <Stack space={2}>
-      <Stack>
-        <Text size='lg' weight='bold'>
-          <FormattedMessage id='signup_panel.title' defaultMessage='New to {site_title}?' values={{ site_title: siteTitle }} />
-        </Text>
+    <div>
+      <Stack space={2}>
+        <Stack>
+          <Text size='lg' weight='bold'>
+            <FormattedMessage id='signup_panel.title' defaultMessage='New to {site_title}?' values={{ site_title: siteTitle }} />
+          </Text>
 
-        <Text theme='muted'>
-          <FormattedMessage id='signup_panel.subtitle' defaultMessage='Sign up now to discuss.' />
-        </Text>
+          <Text theme='muted' size='sm'>
+            <FormattedMessage id='signup_panel.subtitle' defaultMessage='Sign up now to discuss.' />
+          </Text>
+        </Stack>
+
+        <Button theme='primary' block to='/'>
+          <FormattedMessage id='account.register' defaultMessage='Sign up' />
+        </Button>
       </Stack>
 
-      <Button theme='primary' block to='/'>
-        <FormattedMessage id='account.register' defaultMessage='Sign up' />
-      </Button>
-    </Stack>
+      <div className='fixed bottom-0 left-0 right-0 py-4 bg-primary-600'>
+        <div className='max-w-3xl mx-auto sm:px-6 md:max-w-7xl md:px-8'>
+          <HStack alignItems='center' justifyContent='between'>
+            <Stack>
+              <Text theme='white' size='xl' weight='bold'>
+                <FormattedMessage id='signup_panel.title' defaultMessage='New to {site_title}?' values={{ site_title: siteTitle }} />
+              </Text>
+
+              <Text theme='white' className='opacity-80'>
+                <FormattedMessage id='signup_panel.subtitle' defaultMessage='Sign up now to discuss.' />
+              </Text>
+            </Stack>
+
+            <Button theme='ghost' to='/'>
+              <FormattedMessage id='account.register' defaultMessage='Sign up' />
+            </Button>
+          </HStack>
+        </div>
+      </div>
+    </div>
   );
 };
 

From 32a0438f2301dca1c60d3e91bed3c5800109fa77 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Tue, 10 May 2022 06:16:25 -0400
Subject: [PATCH 2/4] Rename SignUpPanel

---
 .../ui/components/panels/sign-up-panel.tsx    | 33 +++++++++++
 .../features/ui/components/sign_up_panel.tsx  | 55 -------------------
 .../features/ui/util/async-components.ts      |  2 +-
 app/soapbox/locales/defaultMessages.json      |  4 +-
 4 files changed, 36 insertions(+), 58 deletions(-)
 create mode 100644 app/soapbox/features/ui/components/panels/sign-up-panel.tsx
 delete mode 100644 app/soapbox/features/ui/components/sign_up_panel.tsx

diff --git a/app/soapbox/features/ui/components/panels/sign-up-panel.tsx b/app/soapbox/features/ui/components/panels/sign-up-panel.tsx
new file mode 100644
index 000000000..4cabf17e8
--- /dev/null
+++ b/app/soapbox/features/ui/components/panels/sign-up-panel.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { Button, Stack, Text } from 'soapbox/components/ui';
+import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
+
+const SignUpPanel = () => {
+  const { singleUserMode } = useSoapboxConfig();
+  const siteTitle = useAppSelector((state) => state.instance.title);
+  const me = useAppSelector((state) => state.me);
+
+  if (me || singleUserMode) return null;
+
+  return (
+    <Stack space={2}>
+      <Stack>
+        <Text size='lg' weight='bold'>
+          <FormattedMessage id='signup_panel.title' defaultMessage='New to {site_title}?' values={{ site_title: siteTitle }} />
+        </Text>
+
+        <Text theme='muted' size='sm'>
+          <FormattedMessage id='signup_panel.subtitle' defaultMessage='Sign up now to discuss.' />
+        </Text>
+      </Stack>
+
+      <Button theme='primary' block to='/'>
+        <FormattedMessage id='account.register' defaultMessage='Sign up' />
+      </Button>
+    </Stack>
+  );
+};
+
+export default SignUpPanel;
diff --git a/app/soapbox/features/ui/components/sign_up_panel.tsx b/app/soapbox/features/ui/components/sign_up_panel.tsx
deleted file mode 100644
index 0aa09c25f..000000000
--- a/app/soapbox/features/ui/components/sign_up_panel.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-
-import { Button, HStack, Stack, Text } from 'soapbox/components/ui';
-import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
-
-const SignUpPanel = () => {
-  const { singleUserMode } = useSoapboxConfig();
-  const siteTitle = useAppSelector((state) => state.instance.title);
-  const me = useAppSelector((state) => state.me);
-
-  if (me || singleUserMode) return null;
-
-  return (
-    <div>
-      <Stack space={2}>
-        <Stack>
-          <Text size='lg' weight='bold'>
-            <FormattedMessage id='signup_panel.title' defaultMessage='New to {site_title}?' values={{ site_title: siteTitle }} />
-          </Text>
-
-          <Text theme='muted' size='sm'>
-            <FormattedMessage id='signup_panel.subtitle' defaultMessage='Sign up now to discuss.' />
-          </Text>
-        </Stack>
-
-        <Button theme='primary' block to='/'>
-          <FormattedMessage id='account.register' defaultMessage='Sign up' />
-        </Button>
-      </Stack>
-
-      <div className='fixed bottom-0 left-0 right-0 py-4 bg-primary-600'>
-        <div className='max-w-3xl mx-auto sm:px-6 md:max-w-7xl md:px-8'>
-          <HStack alignItems='center' justifyContent='between'>
-            <Stack>
-              <Text theme='white' size='xl' weight='bold'>
-                <FormattedMessage id='signup_panel.title' defaultMessage='New to {site_title}?' values={{ site_title: siteTitle }} />
-              </Text>
-
-              <Text theme='white' className='opacity-80'>
-                <FormattedMessage id='signup_panel.subtitle' defaultMessage='Sign up now to discuss.' />
-              </Text>
-            </Stack>
-
-            <Button theme='ghost' to='/'>
-              <FormattedMessage id='account.register' defaultMessage='Sign up' />
-            </Button>
-          </HStack>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default SignUpPanel;
diff --git a/app/soapbox/features/ui/util/async-components.ts b/app/soapbox/features/ui/util/async-components.ts
index d08319735..57658de0f 100644
--- a/app/soapbox/features/ui/util/async-components.ts
+++ b/app/soapbox/features/ui/util/async-components.ts
@@ -343,7 +343,7 @@ export function PromoPanel() {
 }
 
 export function SignUpPanel() {
-  return import(/* webpackChunkName: "features/ui" */'../components/sign_up_panel');
+  return import(/* webpackChunkName: "features/ui" */'../components/panels/sign-up-panel');
 }
 
 export function FundingPanel() {
diff --git a/app/soapbox/locales/defaultMessages.json b/app/soapbox/locales/defaultMessages.json
index 4ae46ce45..0ffbfa7cf 100644
--- a/app/soapbox/locales/defaultMessages.json
+++ b/app/soapbox/locales/defaultMessages.json
@@ -6599,7 +6599,7 @@
         "id": "account.register"
       }
     ],
-    "path": "app/soapbox/features/ui/components/sign_up_panel.json"
+    "path": "app/soapbox/features/ui/components/panels/sign-up-panel.json"
   },
   {
     "descriptors": [
@@ -6949,4 +6949,4 @@
     ],
     "path": "app/soapbox/pages/profile_page.json"
   }
-]
\ No newline at end of file
+]

From a8142d9e2beb0a6471d1e14b511f4b1ec8aeb287 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Tue, 10 May 2022 06:17:01 -0400
Subject: [PATCH 3/4] Add CtaBanner component

---
 .../components/__tests__/cta-banner.test.tsx  | 30 +++++++++++++++
 .../features/ui/components/cta-banner.tsx     | 37 +++++++++++++++++++
 2 files changed, 67 insertions(+)
 create mode 100644 app/soapbox/features/ui/components/__tests__/cta-banner.test.tsx
 create mode 100644 app/soapbox/features/ui/components/cta-banner.tsx

diff --git a/app/soapbox/features/ui/components/__tests__/cta-banner.test.tsx b/app/soapbox/features/ui/components/__tests__/cta-banner.test.tsx
new file mode 100644
index 000000000..cc4c118e6
--- /dev/null
+++ b/app/soapbox/features/ui/components/__tests__/cta-banner.test.tsx
@@ -0,0 +1,30 @@
+import { Map as ImmutableMap } from 'immutable';
+import React from 'react';
+
+import { render, screen } from '../../../../jest/test-helpers';
+import CtaBanner from '../cta-banner';
+
+describe('<CtaBanner />', () => {
+  it('renders the banner', () => {
+    render(<CtaBanner />);
+    expect(screen.getByTestId('cta-banner')).toHaveTextContent(/sign up/i);
+  });
+
+  describe('with a logged in user', () => {
+    it('renders empty', () => {
+      const store = { me: true };
+
+      render(<CtaBanner />, null, store);
+      expect(screen.queryAllByTestId('cta-banner')).toHaveLength(0);
+    });
+  });
+
+  describe('with singleUserMode enabled', () => {
+    it('renders empty', () => {
+      const store = { soapbox: ImmutableMap({ singleUserMode: true }) };
+
+      render(<CtaBanner />, null, store);
+      expect(screen.queryAllByTestId('cta-banner')).toHaveLength(0);
+    });
+  });
+});
diff --git a/app/soapbox/features/ui/components/cta-banner.tsx b/app/soapbox/features/ui/components/cta-banner.tsx
new file mode 100644
index 000000000..a1b5a8d8c
--- /dev/null
+++ b/app/soapbox/features/ui/components/cta-banner.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { Button, HStack, Stack, Text } from 'soapbox/components/ui';
+import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
+
+const CtaBanner = () => {
+  const { singleUserMode } = useSoapboxConfig();
+  const siteTitle = useAppSelector((state) => state.instance.title);
+  const me = useAppSelector((state) => state.me);
+
+  if (me || singleUserMode) return null;
+
+  return (
+    <div data-testid='cta-banner' className='hidden lg:block fixed bottom-0 left-0 right-0 py-4 bg-primary-600'>
+      <div className='max-w-3xl mx-auto sm:px-6 md:max-w-7xl md:px-8'>
+        <HStack alignItems='center' justifyContent='between'>
+          <Stack>
+            <Text theme='white' size='xl' weight='bold'>
+              <FormattedMessage id='signup_panel.title' defaultMessage='New to {site_title}?' values={{ site_title: siteTitle }} />
+            </Text>
+
+            <Text theme='white' className='opacity-80'>
+              <FormattedMessage id='signup_panel.subtitle' defaultMessage='Sign up now to discuss.' />
+            </Text>
+          </Stack>
+
+          <Button theme='ghost' to='/'>
+            <FormattedMessage id='account.register' defaultMessage='Sign up' />
+          </Button>
+        </HStack>
+      </div>
+    </div>
+  );
+};
+
+export default CtaBanner;

From 173fbd653550f34300d0f5e92093403818101320 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Tue, 10 May 2022 06:17:14 -0400
Subject: [PATCH 4/4] Include CtaBanner in layouts

---
 app/soapbox/features/ui/util/async-components.ts | 4 ++++
 app/soapbox/pages/default_page.tsx               | 7 +++++++
 app/soapbox/pages/home_page.tsx                  | 7 +++++++
 app/soapbox/pages/profile_page.tsx               | 7 +++++++
 app/soapbox/pages/status_page.js                 | 7 +++++++
 5 files changed, 32 insertions(+)

diff --git a/app/soapbox/features/ui/util/async-components.ts b/app/soapbox/features/ui/util/async-components.ts
index 57658de0f..1e6b03706 100644
--- a/app/soapbox/features/ui/util/async-components.ts
+++ b/app/soapbox/features/ui/util/async-components.ts
@@ -346,6 +346,10 @@ export function SignUpPanel() {
   return import(/* webpackChunkName: "features/ui" */'../components/panels/sign-up-panel');
 }
 
+export function CtaBanner() {
+  return import(/* webpackChunkName: "features/ui" */'../components/cta-banner');
+}
+
 export function FundingPanel() {
   return import(/* webpackChunkName: "features/ui" */'../components/funding_panel');
 }
diff --git a/app/soapbox/pages/default_page.tsx b/app/soapbox/pages/default_page.tsx
index 21c9026f5..b64cf452d 100644
--- a/app/soapbox/pages/default_page.tsx
+++ b/app/soapbox/pages/default_page.tsx
@@ -6,6 +6,7 @@ import {
   WhoToFollowPanel,
   TrendsPanel,
   SignUpPanel,
+  CtaBanner,
 } from 'soapbox/features/ui/util/async-components';
 import { useAppSelector, useFeatures } from 'soapbox/hooks';
 
@@ -19,6 +20,12 @@ const DefaultPage: React.FC = ({ children }) => {
     <>
       <Layout.Main>
         {children}
+
+        {!me && (
+          <BundleContainer fetchComponent={CtaBanner}>
+            {Component => <Component key='cta-banner' />}
+          </BundleContainer>
+        )}
       </Layout.Main>
 
       <Layout.Aside>
diff --git a/app/soapbox/pages/home_page.tsx b/app/soapbox/pages/home_page.tsx
index 5c81ad901..643de6419 100644
--- a/app/soapbox/pages/home_page.tsx
+++ b/app/soapbox/pages/home_page.tsx
@@ -10,6 +10,7 @@ import {
   FundingPanel,
   CryptoDonatePanel,
   BirthdayPanel,
+  CtaBanner,
 } from 'soapbox/features/ui/util/async-components';
 import { useAppSelector, useOwnAccount, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
 
@@ -56,6 +57,12 @@ const HomePage: React.FC = ({ children }) => {
         )}
 
         {children}
+
+        {!me && (
+          <BundleContainer fetchComponent={CtaBanner}>
+            {Component => <Component key='cta-banner' />}
+          </BundleContainer>
+        )}
       </Layout.Main>
 
       <Layout.Aside>
diff --git a/app/soapbox/pages/profile_page.tsx b/app/soapbox/pages/profile_page.tsx
index e1691e14b..c3cb65ff4 100644
--- a/app/soapbox/pages/profile_page.tsx
+++ b/app/soapbox/pages/profile_page.tsx
@@ -10,6 +10,7 @@ import {
   ProfileMediaPanel,
   ProfileFieldsPanel,
   SignUpPanel,
+  CtaBanner,
 } from 'soapbox/features/ui/util/async-components';
 import { useAppSelector, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
 import { findAccountByUsername } from 'soapbox/selectors';
@@ -134,6 +135,12 @@ const ProfilePage: React.FC<IProfilePage> = ({ params, children }) => {
             {children}
           </div>
         </Column>
+
+        {!me && (
+          <BundleContainer fetchComponent={CtaBanner}>
+            {Component => <Component key='cta-banner' />}
+          </BundleContainer>
+        )}
       </Layout.Main>
 
       <Layout.Aside>
diff --git a/app/soapbox/pages/status_page.js b/app/soapbox/pages/status_page.js
index 302d1238a..e4ff9955e 100644
--- a/app/soapbox/pages/status_page.js
+++ b/app/soapbox/pages/status_page.js
@@ -7,6 +7,7 @@ import {
   WhoToFollowPanel,
   TrendsPanel,
   SignUpPanel,
+  CtaBanner,
 } from 'soapbox/features/ui/util/async-components';
 // import GroupSidebarPanel from '../features/groups/sidebar_panel';
 import { getFeatures } from 'soapbox/utils/features';
@@ -35,6 +36,12 @@ class StatusPage extends ImmutablePureComponent {
       <>
         <Layout.Main>
           {children}
+
+          {!me && (
+            <BundleContainer fetchComponent={CtaBanner}>
+              {Component => <Component key='cta-banner' />}
+            </BundleContainer>
+          )}
         </Layout.Main>
 
         <Layout.Aside>