From 656bf0296d7fe0bbf26e1af35763f2215420c63c Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Wed, 16 Nov 2022 10:15:18 -0500
Subject: [PATCH] Remove 'about.scss' and 'server-info.scss'

---
 app/soapbox/features/about/index.tsx       |   20 +-
 app/soapbox/features/server-info/index.tsx |   26 +-
 app/styles/about.scss                      | 1064 --------------------
 app/styles/application.scss                |    2 -
 app/styles/components/server-info.scss     |   21 -
 app/styles/truth.scss                      |   65 --
 6 files changed, 22 insertions(+), 1176 deletions(-)
 delete mode 100644 app/styles/about.scss
 delete mode 100644 app/styles/components/server-info.scss

diff --git a/app/soapbox/features/about/index.tsx b/app/soapbox/features/about/index.tsx
index 5c184a97a..2fd7efae9 100644
--- a/app/soapbox/features/about/index.tsx
+++ b/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>
-        <li>
+      <ul className='p-0 inline list-none'>
+        <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='about-page'>
-        <div
-          className='rich-formatting'
-          dangerouslySetInnerHTML={{ __html: pageHtml }}
-        />
-        {alsoAvailable}
-      </div>
+    <div className='prose mx-auto py-20'>
+      <div dangerouslySetInnerHTML={{ __html: pageHtml }} />
+
+      {alsoAvailable}
     </div>
   );
 };
diff --git a/app/soapbox/features/server-info/index.tsx b/app/soapbox/features/server-info/index.tsx
index cadcf26a4..94619f72f 100644
--- a/app/soapbox/features/server-info/index.tsx
+++ b/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)}>
-      <div className='info_column_area'>
-        <div className='info__brand'>
-          <div className='brand'>
-            <h1>{instance.title}</h1>
-          </div>
-          <div className='brand__tagline'>
-            <span>{instance.description}</span>
-          </div>
-        </div>
+    <Column label={intl.formatMessage(messages.heading)}>
+      <Stack space={4}>
+        <Stack>
+          <Text size='lg' weight='medium'>{instance.title}</Text>
+          <Text theme='muted'>{instance.description}</Text>
+        </Stack>
+
+        <Divider />
+
         <PromoPanel />
+
+        <Divider />
+
         <LinkFooter />
-      </div>
+      </Stack>
     </Column>
   );
 };
diff --git a/app/styles/about.scss b/app/styles/about.scss
deleted file mode 100644
index 038e34ec8..000000000
--- a/app/styles/about.scss
+++ /dev/null
@@ -1,1064 +0,0 @@
-$maximum-width: 1235px;
-$fluid-breakpoint: $maximum-width + 20px;
-
-@keyframes upAndFadeIn {
-  0% {
-    transform: rotate(-15deg) translateX(40%) translateY(20%) scale(1.15);
-  }
-
-  100% {
-    transform: rotate(-5deg) translateX(40%) translateY(0) scale(1.15);
-  }
-}
-
-@keyframes upAndFadeInLeft {
-  0% {
-    transform: rotate(30deg) translateX(30%) scale(1.15) translateY(30%);
-  }
-
-  100% {
-    transform: rotate(15deg) translateX(30%) scale(1.15) translateY(10%);
-  }
-}
-
-@keyframes wave {
-  0% {
-    transform: rotate(0);
-  }
-
-  25% {
-    transform: rotate(15deg);
-  }
-
-  50% {
-    transform: rotate(-10deg);
-  }
-
-  75% {
-    transform: rotate(15deg);
-  }
-
-  100% {
-    transform: rotate(0);
-  }
-}
-
-.public-layout {
-  .app-store-button {
-    width: auto;
-    height: 80px;
-    display: inline-block;
-  }
-
-  .container {
-    width: 100%;
-    max-width: 1280px;
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      padding: 0;
-    }
-  }
-
-  .content {
-    width: 100%;
-    display: block;
-    margin: 40px 0;
-    border-radius: 6px;
-
-    @media screen and (max-width: 767px) {
-      margin-top: 0;
-    }
-  }
-
-  .header {
-    height: 80px;
-    display: flex;
-    align-items: stretch;
-    justify-content: center;
-    flex-wrap: nowrap;
-    padding: 14px 20px;
-    box-sizing: border-box;
-    position: relative;
-
-    .header-container {
-      display: flex;
-      width: 1280px;
-      align-items: stretch;
-      justify-content: center;
-      flex-wrap: nowrap;
-
-      & > div {
-        flex: 1 1 33.3%;
-        min-height: 1px;
-      }
-    }
-
-    .nav-left {
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      flex-wrap: nowrap;
-    }
-
-    .nav-center {
-      display: flex;
-      align-items: stretch;
-      justify-content: center;
-      flex-wrap: nowrap;
-    }
-
-    .nav-right {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      flex-wrap: nowrap;
-
-      .simple_form.new_user,
-      .simple_form--public {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-
-        .fields-group {
-          display: flex;
-          flex-direction: row;
-          margin-bottom: 0;
-          position: relative;
-
-          p.hint.subtle-hint {
-            position: absolute;
-            top: 30px;
-            left: 160px;
-            border-radius: 4px;
-            background: var(--foreground-color);
-            overflow: hidden;
-
-            a {
-              padding: 4px;
-              background-color: var(--brand-color--med);
-            }
-          }
-
-          .input {
-            flex: 1;
-            margin-bottom: 0;
-            margin-right: 10px;
-
-            input {
-              min-width: 150px;
-              font-size: 14px;
-            }
-          }
-        }
-
-        .actions {
-          display: flex;
-          margin-top: 0;
-
-          .button {
-            margin-bottom: 0 !important;
-            line-height: 38px !important;
-            height: 38px !important;
-            box-sizing: border-box !important;
-            padding: 0 18px !important;
-            text-transform: none !important;
-          }
-        }
-      }
-    }
-
-    .brand {
-      display: block;
-
-      svg {
-        display: block;
-        height: 50px;
-        width: auto;
-        position: relative;
-
-        @media screen and (max-width: $no-gap-breakpoint) {
-          height: 20px;
-        }
-      }
-    }
-
-    .nav-link {
-      display: flex;
-      align-items: center;
-      padding: 12px 22px;
-      font-size: 14px;
-      font-weight: 600;
-      text-decoration: none;
-      color: var(--primary-text-color);
-      white-space: nowrap;
-      text-align: center;
-
-      &:hover,
-      &:focus,
-      &:active {
-        text-decoration: underline;
-        color: var(--primary-text-color);
-      }
-
-      &--hollow {
-        background-color: var(--brand-color--med);
-
-        &:hover,
-        &:focus,
-        &:active {
-          color: var(--brand-color);
-        }
-      }
-
-      @media screen and (max-width: 550px) {
-        &.optional {
-          display: none;
-        }
-      }
-    }
-
-    .nav-button {
-      background: var(--brand-color);
-      color: #fff;
-      margin: 8px;
-      margin-left: 0;
-      border-radius: 4px;
-
-      &:hover,
-      &:focus,
-      &:active {
-        opacity: 0.9;
-        color: #fff;
-        text-decoration: none;
-      }
-    }
-  }
-
-  .faq {
-    margin-bottom: 80px;
-
-    .subtext {
-      a {
-        color: $color-4;
-      }
-    }
-
-    .lead {
-      font-weight: 600;
-      font-size: 32px;
-      line-height: 42px;
-      margin-bottom: 10px;
-    }
-
-    .columns {
-      display: flex;
-      @media screen and (max-width: $fluid-breakpoint) {
-        display: block;
-      }
-
-      .left-column {
-        flex: 2;
-        padding-right: 20px;
-      }
-
-      .right-column {
-        flex: 4;
-
-        span {
-          font-style: italic;
-          font-weight: 600;
-          color: $color-4-dark;
-        }
-      }
-
-      .question {
-        font-size: 20px;
-        font-weight: 600;
-      }
-    }
-  }
-
-  .mobile-page {
-    height: 100%;
-
-    .rich-formatting,
-    .mobile-cta {
-      height: 100%;
-    }
-
-    .rich-formatting {
-      padding: 10px 0;
-    }
-
-    .flexed {
-      height: 100%;
-      display: flex;
-
-      @media screen and (max-width: 768px) {
-        flex-direction: column;
-      }
-
-      p {
-        font-size: 20px;
-        line-height: 1.4;
-        margin-bottom: 40px;
-      }
-
-      h1 {
-        letter-spacing: -0.02em;
-        font-size: 80px;
-        font-weight: 400;
-        line-height: 80px;
-        margin: 0 0 20px 0;
-        -webkit-tap-highlight-color: lightblue !important;
-
-        @media screen and (max-width: 768px) {
-          font-size: 60px;
-          line-height: 60px;
-        }
-
-        .alt-gradient {
-          font-size: 70px;
-          line-height: 70px;
-          font-weight: 600;
-          background: -webkit-linear-gradient(135deg, $color-9, $color-4-light, $color-2-light);
-          -webkit-background-clip: text;
-          -webkit-text-fill-color: transparent;
-
-          @media screen and (max-width: 768px) {
-            font-size: 50px;
-            line-height: 50px;
-          }
-        }
-
-        .big {
-          color: $color-4-dark;
-          display: block;
-          font-weight: 200;
-        }
-      }
-
-      .column {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: flex-start;
-        flex: 1;
-
-        @media screen and (max-width: 768px) {
-          flex: 0;
-          width: 100%;
-          order: 1;
-        }
-
-        &:nth-of-type(2) {
-          flex-direction: row;
-          align-items: center;
-
-          @media screen and (max-width: 768px) {
-            padding-top: 80px;
-            order: 0;
-          }
-        }
-      }
-    }
-
-    .nested-column {
-      flex: 1;
-    }
-
-    .screenshot-1,
-    .screenshot-2 {
-      position: relative;
-      width: 100%;
-      z-index: 10;
-    }
-
-    .screenshot-1 {
-      animation: 1s ease-in upAndFadeIn;
-      transform: rotate(-5deg) translateX(40%) scale(1.15);
-
-      @media screen and (max-width: 768px) {
-        animation: none;
-        transform: rotate(-5deg) translateX(20%) scale(1.05);
-      }
-    }
-
-    .screenshot-2 {
-      animation: 1s ease-in upAndFadeInLeft;
-      transform: rotate(15deg) translateX(30%) scale(1.15) translateY(10%);
-      z-index: 9;
-
-      @media screen and (max-width: 768px) {
-        animation: none;
-        transform: rotate(15deg) translateX(-10%) scale(0.9) translateY(5%);
-      }
-    }
-  }
-
-  .tips {
-    padding: 80px 40px;
-    border-radius: 10px;
-    margin-bottom: 80px;
-
-    @media screen and (max-width: $fluid-breakpoint) {
-      padding: 20px;
-    }
-
-    .app-icon {
-      width: 100px;
-      border-radius: 16px;
-    }
-
-    .invite-icon {
-      width: 100px;
-    }
-
-    .small-invite-icon {
-      width: 40px;
-    }
-
-    span {
-      font-style: italic;
-      font-weight: 600;
-      color: $color-4-dark;
-    }
-
-    .mb-40 {
-      margin-bottom: 40px;
-    }
-
-    .tip {
-      font-size: 20px;
-      font-weight: 600;
-    }
-
-    ol {
-      padding-left: 10px;
-
-      li {
-        img {
-          width: 30px;
-          height: 30px;
-          display: inline;
-          margin-bottom: -5px;
-        }
-      }
-    }
-
-    .columns {
-      display: flex;
-      @media screen and (max-width: $fluid-breakpoint) {
-        display: block;
-      }
-
-      .left-column {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        flex: 2;
-        padding-right: 20px;
-
-        img {
-          width: 120px;
-          height: 120px;
-        }
-
-        h2 {
-          font-size: 32px;
-          margin: 20px 0;
-          font-weight: 600;
-          color: $color-4;
-          text-align: center;
-        }
-      }
-
-      .right-column {
-        flex: 4;
-      }
-    }
-  }
-
-  .static-pages-header {
-    width: 100%;
-    padding: 40px 0;
-    border-bottom: 1px solid $color-6-dark;
-    margin-bottom: 40px;
-
-    h1 {
-      font-size: 32px;
-      font-weight: 600;
-      color: $color-3-dark;
-      margin-bottom: 10px;
-    }
-
-    p {
-      font-size: 22px;
-    }
-  }
-
-  .static-list-wrapper {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-gap: 20px;
-    width: 100%;
-    list-style: none;
-    padding: 40px 0;
-
-    @media screen and (max-width: $fluid-breakpoint) {
-      grid-template-columns: 100%;
-    }
-
-    li {
-      .card {
-        border-radius: 10px;
-        background: linear-gradient(-45deg, $color-3-light, $color-3-dark);
-
-        h4 {
-          color: white;
-          font-size: 24px;
-          font-weight: 500;
-          margin: 0 0 20px 0;
-        }
-
-        a {
-          color: white;
-        }
-
-        p {
-          color: transparentize($color-6-light, 0.1);
-        }
-
-        .card-header {
-          padding: 20px;
-          height: 160px;
-        }
-
-        .card-footer {
-          background: transparentize($color-6-light, 0.9);
-          text-align: right;
-          border-radius: 0 0 10px 10px;
-          padding: 10px 20px;
-        }
-      }
-    }
-  }
-}
-
-.container {
-  position: relative;
-  z-index: 20;
-  box-sizing: border-box;
-  max-width: $maximum-width;
-  margin: 0 auto;
-  width: 100%;
-  padding: 0 10px;
-}
-
-.rich-formatting {
-  @apply text-gray-900 dark:text-gray-100;
-  font-family: var(--font-sans-serif), sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 30px;
-  padding: 15px 30px;
-
-  .text-center {
-    text-align: center;
-  }
-
-  & > :first-child {
-    margin-top: 0.5em;
-  }
-
-  a {
-    color: var(--highlight-text-color);
-    text-decoration: underline;
-  }
-
-  p {
-    margin: 1em 0;
-  }
-
-  p,
-  li {
-    @apply text-gray-900 dark:text-gray-100;
-    font-family: var(--font-sans-serif), sans-serif;
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 30px;
-
-    a {
-      color: var(--highlight-text-color);
-      text-decoration: underline;
-    }
-  }
-
-  strong,
-  em,
-  b {
-    font-weight: bold;
-    color: var(--primary-text-color);
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    @apply text-gray-900 dark:text-gray-100;
-    font-family: var(--font-display), sans-serif;
-    margin-top: 2em;
-    margin-bottom: 1.25em;
-  }
-
-  hr + {
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      margin-top: 1.25em;
-    }
-  }
-
-  h1 {
-    font-size: 26px;
-    line-height: 30px;
-
-    small {
-      font-family: var(--font-sans-serif), sans-serif;
-      display: block;
-      font-size: 18px;
-      font-weight: 400;
-      color: var(--primary-text-color);
-    }
-  }
-
-  h2 {
-    font-weight: 600;
-    font-size: 28px;
-    line-height: 32px;
-  }
-
-  h3 {
-    font-size: 18px;
-    line-height: 24px;
-  }
-
-  h4 {
-    font-size: 16px;
-    line-height: 24px;
-  }
-
-  h5 {
-    font-size: 14px;
-    line-height: 24px;
-  }
-
-  h6 {
-    font-size: 12px;
-    line-height: 24px;
-  }
-
-  ul,
-  ol {
-    padding: 0 0 0 2em;
-    margin: 0 0 0.85em;
-
-    &[type="a"] {
-      list-style-type: lower-alpha;
-    }
-
-    &[type="i"] {
-      list-style-type: lower-roman;
-    }
-  }
-
-  ul {
-    list-style: disc;
-  }
-
-  ol {
-    list-style: decimal;
-  }
-
-  li > ol,
-  li > ul {
-    margin-top: 6px;
-  }
-
-  li p {
-    margin-top: 0;
-  }
-
-  hr {
-    width: 100%;
-    height: 0;
-    border: 0;
-    border-bottom: 1px solid hsla(var(--background-color_hsl), 0.6);
-    margin: 2em 0;
-
-    &.spacer {
-      height: 1px;
-      border: 0;
-    }
-  }
-
-  pre {
-    white-space: pre-wrap;
-  }
-}
-
-.also-available {
-  padding-top: 0;
-
-  ul {
-    display: inline;
-    padding-left: 0;
-    list-style: none;
-
-    li {
-      display: inline;
-
-      &::after {
-        content: " · ";
-      }
-    }
-
-    li:last-child::after {
-      content: "";
-    }
-  }
-}
-
-.public-layout {
-  position: relative;
-  background-size: 100% auto;
-  background-repeat: no-repeat;
-  background-position: 0 -106px;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-
-  @media screen and (max-width: 767px) {
-    .wave {
-      display: none;
-    }
-
-    .follow-truth {
-      margin-bottom: 20px;
-    }
-
-    .header {
-      .nav-link {
-        color: #fff;
-
-        &:hover,
-        &:focus,
-        &:active {
-          color: #fff;
-          opacity: 0.9;
-        }
-      }
-
-      .nav-button {
-        background: var(--accent-color);
-        color: #fff;
-        transition: 0.2s;
-
-        &:hover,
-        &:focus,
-        &:active {
-          background: var(--accent-color--bright);
-        }
-      }
-    }
-  }
-}
-
-.app-holder > .public-layout {
-  align-items: normal;
-}
-
-.landing {
-  height: auto;
-  min-height: 80vh;
-
-  @media (min-width: 767px) {
-    min-height: 550px;
-  }
-
-  .landing-columns {
-    display: flex;
-    flex-direction: row;
-    padding: 40px 0 20px;
-
-    &--left {
-      margin-right: 80px;
-    }
-
-    &--right {
-      margin-left: auto;
-      width: 395px;
-      background-color: var(--foreground-color);
-      border-radius: 6px;
-      height: 100%;
-
-      .simple_form,
-      .registrations-closed {
-        padding: 20px;
-        background-color: var(--brand-color--faint);
-        border-radius: inherit;
-      }
-    }
-
-    .registrations-closed {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      align-items: center;
-      justify-content: center;
-      text-align: center;
-      font-size: 18px;
-
-      h2 {
-        font-weight: bold;
-        font-size: 24px;
-        margin-bottom: 10px;
-      }
-    }
-
-    @media (min-width: 767px) and (max-width: 1024px) {
-      padding: 40px 20px 20px;
-
-      &--left {
-        margin-right: 40px;
-      }
-
-      &--right {
-        width: 425px;
-      }
-    }
-
-    @media screen and (max-width: 767px) {
-      height: auto;
-      padding: 20px 10px 30px;
-      flex-direction: column;
-      align-items: center;
-
-      &--left {
-        margin-right: 0;
-      }
-
-      &--right {
-        width: 100%;
-        margin-left: 0;
-        margin-top: 30px;
-      }
-    }
-  }
-
-  &__brand {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    flex-direction: column;
-
-    .brand {
-      margin-right: auto !important;
-      line-height: normal;
-    }
-
-    img {
-      height: 100px;
-
-      @media (min-width: 767px) and (max-width: 1024px) {
-        height: 60px;
-      }
-
-      @media screen and (max-width: 767px) {
-        display: none;
-      }
-    }
-
-    h1 {
-      font-size: 40px;
-    }
-  }
-
-  .directory {
-    margin-top: 30px;
-    background: transparent;
-    box-shadow: none;
-    border-radius: 0;
-  }
-
-  .simple_form .user_agreement .label_input > label {
-    @apply text-gray-900 dark:text-gray-100 font-normal;
-  }
-
-  .simple_form p.lead {
-    color: var(--primary-text-color);
-    font-size: 15px;
-    line-height: 20px;
-    font-weight: 400;
-    margin-bottom: 25px;
-  }
-
-  &__grid {
-    max-width: 960px;
-    margin: 0 auto;
-    display: grid;
-    grid-template-columns: minmax(0, 50%) minmax(0, 50%);
-    grid-gap: 30px;
-
-    @media screen and (max-width: 738px) {
-      grid-template-columns: minmax(0, 100%);
-      grid-gap: 10px;
-
-      &__column-login {
-        grid-row: 1;
-        display: flex;
-        flex-direction: column;
-      }
-
-      &__column-registration {
-        grid-row: 2;
-      }
-
-      .directory {
-        margin-top: 10px;
-      }
-    }
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      grid-gap: 0;
-    }
-  }
-}
-
-.brand {
-  position: relative;
-  text-decoration: none;
-  margin-right: 15px;
-
-  h1 {
-    color: var(--brand-color);
-  }
-}
-
-.brand__tagline {
-  @apply text-black dark:text-white;
-  display: block;
-  width: 470px;
-  font-size: 24px;
-  line-height: 1.4;
-  margin-top: 25px;
-  font-weight: 400;
-
-  @media (min-width: 767px) and (max-width: 1024px) {
-    width: 320px;
-    font-size: 20px;
-  }
-
-  @media screen and (max-width: 767px) {
-    width: 100%;
-    font-size: 22px;
-    margin-top: 0;
-  }
-}
-
-@media (min-width: 767px) {
-  .hidden-sm {
-    display: block;
-  }
-
-  .visible-sm {
-    display: none;
-  }
-}
-
-@media screen and (max-width: 767px) {
-  .hidden-sm {
-    display: none !important;
-  }
-
-  .visible-sm {
-    display: block !important;
-  }
-}
-
-.about-page {
-  background: var(--brand-color--faint);
-  border-radius: inherit;
-}
-
-.public-layout__top {
-  position: relative;
-  flex: 1;
-
-  .header,
-  .container {
-    position: relative;
-  }
-
-  .otp-form-overlay__container {
-    z-index: 9998;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: rgba($base-overlay-background, 0.7);
-
-    .otp-form-overlay__form {
-      @include standard-panel-shadow;
-      border-radius: 10px;
-      z-index: 9999;
-      margin: 0 auto;
-      max-width: 800px;
-      position: relative;
-      padding: 20px;
-      background-color: var(--background-color);
-      display: flex;
-      flex-direction: column;
-
-      .simple_form {
-        padding: 30px 50px 50px;
-      }
-
-      .otp-form-overlay__close {
-        align-self: flex-end;
-
-        .svg-icon {
-          height: 20px;
-          width: 20px;
-        }
-      }
-    }
-  }
-}
-
-.public-layout__top .wave {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-}
-
-h1.otp-login {
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 800;
-  padding: 10px 0;
-}
diff --git a/app/styles/application.scss b/app/styles/application.scss
index 1c14c5c0e..ff5a0ab0c 100644
--- a/app/styles/application.scss
+++ b/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';
diff --git a/app/styles/components/server-info.scss b/app/styles/components/server-info.scss
deleted file mode 100644
index a24335eef..000000000
--- a/app/styles/components/server-info.scss
+++ /dev/null
@@ -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;
-  }
-}
diff --git a/app/styles/truth.scss b/app/styles/truth.scss
index 5c7e1770f..4e7f1c742 100644
--- a/app/styles/truth.scss
+++ b/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;