Merge branch 'remove-scss' into 'develop'

Start removing SCSS files

See merge request soapbox-pub/soapbox!1898

app/soapbox/features/about/index.tsx

@@ -35,11 +35,11 @@ const AboutPage: React.FC = () => {
   }, [locale, slug]);
 
   const alsoAvailable = (defaultLocale) && (
-    <div className='rich-formatting also-available'>
+    <div>
       <FormattedMessage id='about.also_available' defaultMessage='Available in:' />
       {' '}
-      <ul>
+      <ul className='p-0 inline list-none'>
-        <li>
+        <li className="inline after:content-['_·_']">
           <a href='#' onClick={() => setLocale(defaultLocale)}>
             {/* @ts-ignore */}
             {languages[defaultLocale] || defaultLocale}
@@ -47,7 +47,7 @@ const AboutPage: React.FC = () => {
         </li>
         {
           pageLocales?.map(locale => (
-            <li key={locale}>
+            <li className="inline after:content-['_·_'] last:after:content-none" key={locale}>
               <a href='#' onClick={() => setLocale(locale)}>
                 {/* @ts-ignore */}
                 {languages[locale] || locale}
@@ -60,14 +60,10 @@ const AboutPage: React.FC = () => {
   );
 
   return (
-    <div className='content'>
+    <div className='prose mx-auto py-20'>
-      <div className='about-page'>
+      <div dangerouslySetInnerHTML={{ __html: pageHtml }} />
-        <div
+
-          className='rich-formatting'
+      {alsoAvailable}
-          dangerouslySetInnerHTML={{ __html: pageHtml }}
-        />
-        {alsoAvailable}
-      </div>
     </div>
   );
 };

app/soapbox/features/server-info/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
+import { Column, Divider, Stack, Text } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';
 
-import Column from '../ui/components/column';
 import LinkFooter from '../ui/components/link-footer';
 import PromoPanel from '../ui/components/promo-panel';
 
@@ -16,19 +16,21 @@ const ServerInfo = () => {
   const instance = useAppSelector((state) => state.instance);
 
   return (
-    <Column icon='info' label={intl.formatMessage(messages.heading)}>
+    <Column label={intl.formatMessage(messages.heading)}>
-      <div className='info_column_area'>
+      <Stack space={4}>
-        <div className='info__brand'>
+        <Stack>
-          <div className='brand'>
+          <Text size='lg' weight='medium'>{instance.title}</Text>
-            <h1>{instance.title}</h1>
+          <Text theme='muted'>{instance.description}</Text>
-          </div>
+        </Stack>
-          <div className='brand__tagline'>
+
-            <span>{instance.description}</span>
+        <Divider />
-          </div>
+
-        </div>
         <PromoPanel />
+
+        <Divider />
+
         <LinkFooter />
-      </div>
+      </Stack>
     </Column>
   );
 };

app/styles/application.scss

@@ -20,7 +20,6 @@
 @import 'ui';
 // @import 'introduction';
 @import 'emoji-picker';
-@import 'about';
 @import 'rtl';
 @import 'accessibility';
 @import 'donations';
@@ -62,7 +61,6 @@
 @import 'components/filters';
 @import 'components/snackbar';
 @import 'components/accordion';
-@import 'components/server-info';
 @import 'components/admin';
 @import 'components/backups';
 @import 'components/crypto-donate';

app/styles/components/server-info.scss

@@ -1,21 +0,0 @@
-.columns-area {
-  .info_column_area {
-    padding: 15px;
-
-    .wtf-panel {
-      border: 1px solid var(--brand-color--med);
-    }
-  }
-}
-
-.info__brand {
-  .brand h1 {
-    @apply text-2xl text-black dark:text-white;
-  }
-
-  .brand__tagline {
-    font-size: 20px;
-    line-height: 1.15;
-    margin-top: 15px;
-  }
-}

app/styles/truth.scss

@@ -232,75 +232,10 @@
 }
 
 .public-layout {
-  .brand__tagline {
-    width: auto;
-    max-width: 800px;
-  }
-
   .landing__brand {
     align-items: flex-start;
   }
 
-  .public-layout__top {
-    display: flex;
-    flex-direction: column;
-
-    .header-container {
-      position: relative;
-      padding-top: 10px;
-    }
-
-    .nav-left,
-    .nav-right {
-      position: relative;
-      z-index: 10;
-    }
-
-    .container {
-      display: flex;
-      flex: 1;
-    }
-
-    .landing {
-      display: flex;
-      flex: 1;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .landing-columns {
-      width: 100%;
-
-      .landing-columns--right {
-        margin-left: auto;
-
-        form {
-          margin: 0 auto;
-        }
-      }
-
-      .landing-columns--left {
-        position: relative;
-        z-index: 10;
-        margin-right: 0;
-
-        svg {
-          width: 700px;
-          max-width: 100%;
-          fill: $color-3-dark;
-
-          .cls-1 {
-            opacity: 0.33;
-          }
-
-          .cls-2 {
-            opacity: 0.66;
-          }
-        }
-      }
-    }
-  }
-
   .footer {
     display: flex;
     padding: 40px 0;