SitePreview: make it actually work

app/soapbox/features/soapbox_config/components/site-preview.tsx

@@ -1,7 +1,9 @@
 import classNames from 'classnames';
 import React, { useMemo } from 'react';
+import { FormattedMessage } from 'react-intl';
 
 import { defaultSettings } from 'soapbox/actions/settings';
+import BackgroundShapes from 'soapbox/features/ui/components/background_shapes';
 import { normalizeSoapboxConfig } from 'soapbox/normalizers';
 import { generateThemeCss } from 'soapbox/utils/theme';
 
@@ -15,33 +17,33 @@ const SitePreview: React.FC<ISitePreview> = ({ soapbox }) => {
   const soapboxConfig = useMemo(() => normalizeSoapboxConfig(soapbox), [soapbox]);
   const settings = defaultSettings.mergeDeep(soapboxConfig.defaultSettings);
 
-  const bodyClass = classNames('site-preview', `theme-mode-${settings.get('themeMode')}`, {
-    'no-reduce-motion': !settings.get('reduceMotion'),
-    'underline-links': settings.get('underlineLinks'),
-    'dyslexic': settings.get('dyslexicFont'),
-    'demetricator': settings.get('demetricator'),
-  });
+  const dark = settings.get('themeMode') === 'dark';
+
+  const bodyClass = classNames(
+    'site-preview',
+    'relative flex justify-center align-center text-base',
+    'border border-solid border-gray-200 dark:border-slate-600',
+    'h-40 rounded-lg overflow-hidden',
+    {
+      'bg-white': !dark,
+      'bg-slate-900': dark,
+    });
 
   return (
     <div className={bodyClass}>
       <style>{`.site-preview {${generateThemeCss(soapboxConfig)}}`}</style>
-      <div className='app-holder'>
-        <div>
-          <div className='ui'>
-            <nav className='tabs-bar'>
-              <div className='tabs-bar__container'>
-                <div className='tabs-bar__split tabs-bar__split--left'>
-                  <a className='tabs-bar__link--logo' href='#'>
-                    <img alt='Logo' src={soapboxConfig.logo} />
-                  </a>
-                </div>
-              </div>
-            </nav>
-            <div className='page'>
-              <span className='spoiler-button__overlay__label'>Site Preview</span>
-            </div>
-          </div>
-        </div>
+      <BackgroundShapes position='absolute' />
+
+      <div className='absolute p-2 rounded-lg overflow-hidden bg-accent-500 text-white self-center z-20'>
+        <FormattedMessage id='site_preview.preview' defaultMessage='Preview' />
+      </div>
+
+      <div className={classNames('flex absolute inset-0 shadow z-10 h-12 lg:h-16', {
+        'bg-white': !dark,
+        'bg-slate-800': dark,
+      })}
+      >
+        <img alt='Logo' className='h-5 lg:h-6 self-center px-2' src={soapboxConfig.logo} />
       </div>
     </div>
   );

app/soapbox/features/ui/components/background_shapes.tsx

@@ -1,8 +1,14 @@
+import classNames from 'classnames';
 import React from 'react';
 
+interface IBackgroundShapes {
+  /** Whether the shapes should be absolute positioned or fixed. */
+  position?: 'fixed' | 'absolute',
+}
+
 /** Gradient that appears in the background of the UI. */
-const BackgroundShapes: React.FC = () => (
-  <div className='fixed top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none'>
+const BackgroundShapes: React.FC<IBackgroundShapes> = ({ position = 'fixed' }) => (
+  <div className={classNames(position, 'top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none')}>
     <div className='flex-none flex justify-center'>
       <svg width='1754' height='1336' xmlns='http://www.w3.org/2000/svg'>
         <defs>

app/styles/forms.scss

@@ -776,36 +776,6 @@ code {
   transform: translateY(7px);
 }
 
-.site-preview {
-  border-radius: 4px;
-  overflow: hidden;
-  height: 164px;
-  border: 1px solid;
-  margin-bottom: 40px;
-  background: var(--background-color);
-
-  * {
-    z-index: 0;
-  }
-
-  a {
-    cursor: default;
-  }
-
-  .ui {
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-    height: 100%;
-  }
-
-  .page {
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-  }
-}
-
 .input.with_label.toggle .label_input {
   display: flex;
   font-size: 14px;

app/styles/truth.scss

@@ -34,13 +34,6 @@
   background-color: var(--brand-color) !important;
 }
 
-body,
-.site-preview {
-  --accent-color_h: 345;
-  --accent-color_s: 100%;
-  --accent-color_l: 64%;
-}
-
 @media screen and (max-width: 450px) {
   .tabs-bar__link--logo {
     margin: 0 auto;