Change about page to be mounted in the web UI (#19345)

1 files changed, 16 insertions, 70 deletions

diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
index 0bc6247ef..4b27e6b4f 100644
--- a/app/javascript/styles/mastodon-light/diff.scss
+++ b/app/javascript/styles/mastodon-light/diff.scss
@@ -36,6 +36,20 @@ html {
   border-top: 0;
 }
 
+.column > .scrollable.about {
+  border-top: 1px solid lighten($ui-base-color, 8%);
+}
+
+.about__meta,
+.about__section__title {
+  background: $white;
+  border: 1px solid lighten($ui-base-color, 8%);
+}
+
+.rules-list li::before {
+  background: $ui-highlight-color;
+}
+
 .directory__card__img {
   background: lighten($ui-base-color, 12%);
 }
@@ -45,10 +59,6 @@ html {
   border-bottom: 1px solid lighten($ui-base-color, 8%);
 }
 
-.table-of-contents {
-  border: 1px solid lighten($ui-base-color, 8%);
-}
-
 .column-back-button,
 .column-header {
   background: $white;
@@ -138,11 +148,6 @@ html {
 .compose-form__poll-wrapper select,
 .search__input,
 .setting-text,
-.box-widget input[type="text"],
-.box-widget input[type="email"],
-.box-widget input[type="password"],
-.box-widget textarea,
-.statuses-grid .detailed-status,
 .report-dialog-modal__textarea,
 .audio-player {
   border: 1px solid lighten($ui-base-color, 8%);
@@ -480,52 +485,16 @@ html {
   background: $white;
 }
 
-.tabs-bar {
-  background: $white;
-  border: 1px solid lighten($ui-base-color, 8%);
-  border-bottom: 0;
-
-  @media screen and (max-width: $no-gap-breakpoint) {
-    border-top: 0;
-  }
-
-  &__link {
-    padding-bottom: 14px;
-    border-bottom-width: 1px;
-    border-bottom-color: lighten($ui-base-color, 8%);
-
-    &:hover,
-    &:active,
-    &:focus {
-      background: $ui-base-color;
-    }
-
-    &.active {
-      &:hover,
-      &:active,
-      &:focus {
-        background: transparent;
-        border-bottom-color: $ui-highlight-color;
-      }
-    }
-  }
-}
-
 // Change the default colors used on some parts of the profile pages
 .activity-stream-tabs {
   background: $account-background-color;
   border-bottom-color: lighten($ui-base-color, 8%);
 }
 
-.box-widget,
 .nothing-here,
 .page-header,
 .directory__tag > a,
-.directory__tag > div,
-.landing-page__call-to-action,
-.contact-widget,
-.landing .hero-widget__text,
-.landing-page__information.contact-widget {
+.directory__tag > div {
   background: $white;
   border: 1px solid lighten($ui-base-color, 8%);
 
@@ -536,11 +505,6 @@ html {
   }
 }
 
-.landing .hero-widget__text {
-  border-top: 0;
-  border-bottom: 0;
-}
-
 .simple_form {
   input[type="text"],
   input[type="number"],
@@ -553,26 +517,12 @@ html {
   }
 }
 
-.landing .hero-widget__footer {
-  background: $white;
-  border: 1px solid lighten($ui-base-color, 8%);
-  border-top: 0;
-
-  @media screen and (max-width: $no-gap-breakpoint) {
-    border: 0;
-  }
-}
-
 .picture-in-picture-placeholder {
   background: $white;
   border-color: lighten($ui-base-color, 8%);
   color: lighten($ui-base-color, 8%);
 }
 
-.brand__tagline {
-  color: $ui-secondary-color;
-}
-
 .directory__tag > a {
   &:hover,
   &:active,
@@ -666,8 +616,7 @@ html {
   }
 }
 
-.simple_form,
-.table-form {
+.simple_form {
   .warning {
     box-shadow: none;
     background: rgba($error-red, 0.5);
@@ -801,9 +750,6 @@ html {
 }
 
 .hero-widget,
-.box-widget,
-.contact-widget,
-.landing-page__information.contact-widget,
 .moved-account-widget,
 .memoriam-widget,
 .activity-stream,