Move About pages to within the UI

src/features/about/index.tsx

@@ -3,6 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import { useParams } from 'react-router-dom';
 
 import { fetchAboutPage } from 'soapbox/actions/about';
+import { Card } from 'soapbox/components/ui';
 import { useSoapboxConfig, useSettings, useAppDispatch } from 'soapbox/hooks';
 
 import { languages } from '../preferences';
@@ -60,11 +61,12 @@ const AboutPage: React.FC = () => {
   );
 
   return (
-    <div className='prose mx-auto py-20 dark:prose-invert'>
-      <div dangerouslySetInnerHTML={{ __html: pageHtml }} />
-
-      {alsoAvailable}
-    </div>
+    <Card variant='rounded'>
+      <div className='prose mx-auto py-4 dark:prose-invert sm:p-6'>
+        <div dangerouslySetInnerHTML={{ __html: pageHtml }} />
+        {alsoAvailable}
+      </div>
+    </Card>
   );
 };
 

src/features/public-layout/index.tsx

@@ -5,7 +5,6 @@ import LandingGradient from 'soapbox/components/landing-gradient';
 import { useAppSelector } from 'soapbox/hooks';
 import { isStandalone } from 'soapbox/utils/state';
 
-import AboutPage from '../about';
 import LandingPage from '../landing-page';
 
 import Footer from './components/footer';
@@ -29,7 +28,6 @@ const PublicLayout = () => {
           <div className='relative'>
             <Switch>
               <Route exact path='/' component={LandingPage} />
-              <Route exact path='/about/:slug?' component={AboutPage} />
             </Switch>
           </div>
         </div>

src/features/ui/index.tsx

@@ -134,6 +134,7 @@ import {
   Announcements,
   EditGroup,
   FollowedTags,
+  AboutPage,
 } from './util/async-components';
 import GlobalHotkeys from './util/global-hotkeys';
 import { WrappedRoute } from './util/react-router-helpers';
@@ -350,6 +351,8 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
 
       <WrappedRoute path='/share' page={DefaultPage} component={Share} content={children} exact />
 
+      <WrappedRoute path='/about/:slug?' page={DefaultPage} component={AboutPage} publicRoute exact />
+
       <WrappedRoute page={EmptyPage} component={GenericNotFound} content={children} />
     </Switch>
   );

src/features/ui/util/async-components.ts

@@ -1,3 +1,7 @@
+export function AboutPage() {
+  return import('../../about');
+}
+
 export function EmojiPicker() {
   return import('../../emoji/components/emoji-picker');
 }