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/__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('', () => {
+ it('renders the banner', () => {
+ render();
+ expect(screen.getByTestId('cta-banner')).toHaveTextContent(/sign up/i);
+ });
+
+ describe('with a logged in user', () => {
+ it('renders empty', () => {
+ const store = { me: true };
+
+ render(, null, store);
+ expect(screen.queryAllByTestId('cta-banner')).toHaveLength(0);
+ });
+ });
+
+ describe('with singleUserMode enabled', () => {
+ it('renders empty', () => {
+ const store = { soapbox: ImmutableMap({ singleUserMode: true }) };
+
+ render(, 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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default CtaBanner;
diff --git a/app/soapbox/features/ui/components/sign_up_panel.tsx b/app/soapbox/features/ui/components/panels/sign-up-panel.tsx
similarity index 96%
rename from app/soapbox/features/ui/components/sign_up_panel.tsx
rename to app/soapbox/features/ui/components/panels/sign-up-panel.tsx
index 2a54c5c11..4cabf17e8 100644
--- a/app/soapbox/features/ui/components/sign_up_panel.tsx
+++ b/app/soapbox/features/ui/components/panels/sign-up-panel.tsx
@@ -18,7 +18,7 @@ const SignUpPanel = () => {
-
+
diff --git a/app/soapbox/features/ui/util/async-components.ts b/app/soapbox/features/ui/util/async-components.ts
index d08319735..1e6b03706 100644
--- a/app/soapbox/features/ui/util/async-components.ts
+++ b/app/soapbox/features/ui/util/async-components.ts
@@ -343,7 +343,11 @@ 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 CtaBanner() {
+ return import(/* webpackChunkName: "features/ui" */'../components/cta-banner');
}
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
+]
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 }) => {
<>
{children}
+
+ {!me && (
+
+ {Component => }
+
+ )}
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 && (
+
+ {Component => }
+
+ )}
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 = ({ params, children }) => {
{children}
+
+ {!me && (
+
+ {Component => }
+
+ )}
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 {
<>
{children}
+
+ {!me && (
+
+ {Component => }
+
+ )}