From 6f8ca449843557169aff98b355854ffec56b3f7d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 1 Jun 2020 23:24:36 -0500
Subject: [PATCH] Homepage css fixes

---
 app/soapbox/features/public_layout/index.js |  21 +-
 app/styles/about.scss                       | 716 +++++++++++++++++++-
 app/styles/containers.scss                  | 691 -------------------
 app/styles/forms.scss                       |   4 +-
 4 files changed, 727 insertions(+), 705 deletions(-)

diff --git a/app/soapbox/features/public_layout/index.js b/app/soapbox/features/public_layout/index.js
index 737220c47..afc04b51f 100644
--- a/app/soapbox/features/public_layout/index.js
+++ b/app/soapbox/features/public_layout/index.js
@@ -13,6 +13,12 @@ const mapStateToProps = (state, props) => ({
   soapbox: state.get('soapbox'),
 });
 
+const wave = (
+  <svg class='wave' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 889' width='1440px' height='889px' preserveAspectRatio='none'>
+    <path d='M 0 0 L 0 851.82031 C 115.03104 776.54213 236.097 723.10606 363.20703 691.54492 C 640.06491 622.80164 852.93698 468.14039 954.31055 358.01367 C 1092.1151 208.31032 1206.0509 47.69868 1365.3828 13.457031 C 1391.8162 7.7762737 1416.6827 3.2957237 1440 0.001953125 L 1440 0 L 0 0 z' fill='var(--background-color)' />
+  </svg>
+);
+
 class PublicLayout extends ImmutablePureComponent {
 
   render() {
@@ -21,12 +27,15 @@ class PublicLayout extends ImmutablePureComponent {
 
     return (
       <div className='public-layout'>
-        <Header />
-        <div className='container'>
-          <Switch>
-            <Route exact path='/' component={LandingPage} />
-            <Route exact path='/about/:slug?' component={AboutPage} />
-          </Switch>
+        <div className='public-layout__top'>
+          {wave}
+          <Header />
+          <div className='container'>
+            <Switch>
+              <Route exact path='/' component={LandingPage} />
+              <Route exact path='/about/:slug?' component={AboutPage} />
+            </Switch>
+          </div>
         </div>
         <Footer />
         <NotificationsContainer />
diff --git a/app/styles/about.scss b/app/styles/about.scss
index 7e6c3d21b..a111afa5b 100644
--- a/app/styles/about.scss
+++ b/app/styles/about.scss
@@ -3,6 +3,688 @@ $fluid-breakpoint: $maximum-width + 20px;
 $column-breakpoint: 700px;
 $small-breakpoint: 960px;
 
+.public-layout {
+  .container {
+    width: 100%;
+    max-width: 960px;
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      padding: 0;
+    }
+  }
+
+  .content {
+    display: block;
+    margin: 40px 0;
+    background: #fff;
+    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 0;
+    box-sizing: border-box;
+
+    @media screen and (max-width: 1024px) {
+      padding: 14px 20px;
+    }
+
+    .header-container {
+      display: flex;
+      width: 960px;
+      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 {
+        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: #fff;
+            overflow: hidden;
+
+            a {
+              padding: 4px;
+              background-color: var(--brand-color-med);
+            }
+          }
+
+          .input {
+            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;
+            border: 1px solid #333 !important;
+            height: 38px !important;
+            box-sizing: border-box !important;
+            padding: 0 18px !important;
+            text-transform: none !important;
+          }
+        }
+      }
+    }
+
+    .brand {
+      display: block;
+
+      img {
+        display: block;
+        height: 30px;
+        width: auto;
+        position: relative;
+        bottom: -2px;
+
+        @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;
+      }
+    }
+  }
+
+  $no-columns-breakpoint: 600px;
+
+  .grid {
+    display: grid;
+    grid-gap: 10px;
+    grid-template-columns: minmax(300px, 3fr) minmax(298px, 1fr);
+    grid-auto-columns: 25%;
+    grid-auto-rows: max-content;
+
+    .column-0 {
+      grid-row: 1;
+      grid-column: 1;
+    }
+
+    .column-1 {
+      grid-row: 1;
+      grid-column: 2;
+    }
+
+    @media screen and (max-width: $no-columns-breakpoint) {
+      grid-template-columns: 100%;
+      grid-gap: 0;
+
+      .column-1 {
+        display: none;
+      }
+    }
+  }
+
+  .public-account-header {
+    overflow: hidden;
+    margin-bottom: 10px;
+    box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
+
+    &.inactive {
+      opacity: 0.5;
+
+      .public-account-header__image,
+      .avatar {
+        filter: grayscale(100%);
+      }
+
+      .logo-button {
+        background-color: var(--primary-text-color-faint);
+      }
+    }
+
+    &__image {
+      border-radius: 4px 4px 0 0;
+      overflow: hidden;
+      height: 300px;
+      position: relative;
+      background: darken($ui-base-color, 12%);
+
+      &::after {
+        content: "";
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        box-shadow: inset 0 -1px 1px 1px rgba($base-shadow-color, 0.15);
+        top: 0;
+        left: 0;
+      }
+
+      img {
+        object-fit: cover;
+        display: block;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        border-radius: 4px 4px 0 0;
+      }
+
+      @media screen and (max-width: 600px) {
+        height: 200px;
+      }
+    }
+
+    &--no-bar {
+      margin-bottom: 0;
+
+      .public-account-header__image,
+      .public-account-header__image img {
+        border-radius: 4px;
+
+        @media screen and (max-width: $no-gap-breakpoint) {
+          border-radius: 0;
+        }
+      }
+    }
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      margin-bottom: 0;
+      box-shadow: none;
+
+      &__image::after {
+        display: none;
+      }
+
+      &__image,
+      &__image img {
+        border-radius: 0;
+      }
+    }
+
+    &__bar {
+      position: relative;
+      margin-top: -80px;
+      display: flex;
+      justify-content: flex-start;
+
+      &::before {
+        content: "";
+        display: block;
+        background: var(--brand-color-faint);
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 60px;
+        border-radius: 0 0 4px 4px;
+        z-index: -1;
+      }
+
+      .avatar {
+        display: block;
+        width: 120px;
+        height: 120px;
+        padding-left: 20px - 4px;
+        flex: 0 0 auto;
+
+        img {
+          display: block;
+          width: 100%;
+          height: 100%;
+          margin: 0;
+          border-radius: 50%;
+          border: 4px solid var(--brand-color-faint);
+          background: darken($ui-base-color, 8%);
+        }
+      }
+
+      @media screen and (max-width: 600px) {
+        margin-top: 0;
+        background: var(--brand-color-faint);
+        border-radius: 0 0 4px 4px;
+        padding: 5px;
+
+        &::before {
+          display: none;
+        }
+
+        .avatar {
+          width: 48px;
+          height: 48px;
+          padding: 7px 0;
+          padding-left: 10px;
+
+          img {
+            border: 0;
+            border-radius: 4px;
+          }
+
+          @media screen and (max-width: 360px) {
+            display: none;
+          }
+        }
+      }
+
+      @media screen and (max-width: $no-gap-breakpoint) {
+        border-radius: 0;
+      }
+
+      @media screen and (max-width: $no-columns-breakpoint) {
+        flex-wrap: wrap;
+      }
+    }
+
+    &__tabs {
+      flex: 1 1 auto;
+      margin-left: 20px;
+
+      &__name {
+        padding-top: 20px;
+        padding-bottom: 8px;
+
+        h1 {
+          font-size: 20px;
+          line-height: 18px * 1.5;
+          color: var(--primary-text-color);
+          font-weight: 500;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          text-shadow: 1px 1px 1px $base-shadow-color;
+
+          small {
+            display: block;
+            font-size: 14px;
+            color: var(--primary-text-color);
+            font-weight: 400;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+      }
+
+      @media screen and (max-width: 600px) {
+        margin-left: 15px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        &__name {
+          padding-top: 0;
+          padding-bottom: 0;
+
+          h1 {
+            font-size: 16px;
+            line-height: 24px;
+            text-shadow: none;
+
+            small {
+              color: var(--primary-text-color-faint);
+            }
+          }
+        }
+      }
+
+      &__tabs {
+        display: flex;
+        justify-content: flex-start;
+        align-items: stretch;
+        height: 58px;
+
+        .details-counters {
+          display: flex;
+          flex-direction: row;
+          min-width: 300px;
+        }
+
+        @media screen and (max-width: $no-columns-breakpoint) {
+          .details-counters {
+            display: none;
+          }
+        }
+
+        .counter {
+          width: 33.3%;
+          box-sizing: border-box;
+          flex: 0 0 auto;
+          color: var(--primary-text-color-faint);
+          padding: 10px;
+          border-right: 1px solid var(--brand-color-faint);
+          cursor: default;
+          text-align: center;
+          position: relative;
+
+          a {
+            display: block;
+          }
+
+          &:last-child {
+            border-right: 0;
+          }
+
+          &::after {
+            display: block;
+            content: "";
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            border-bottom: 4px solid $ui-primary-color;
+            opacity: 0.5;
+            transition: all 400ms ease;
+          }
+
+          &.active {
+            &::after {
+              border-bottom: 4px solid $highlight-text-color;
+              opacity: 1;
+            }
+
+            &.inactive::after {
+              border-bottom-color: var(--primary-text-color-faint);
+            }
+          }
+
+          &:hover {
+            &::after {
+              opacity: 1;
+              transition-duration: 100ms;
+            }
+          }
+
+          a {
+            text-decoration: none;
+            color: inherit;
+          }
+
+          .counter-label {
+            font-size: 12px;
+            display: block;
+          }
+
+          .counter-number {
+            font-weight: 500;
+            font-size: 18px;
+            margin-bottom: 5px;
+            color: var(--primary-text-color);
+            font-family: $font-display, sans-serif;
+          }
+        }
+
+        .spacer {
+          flex: 1 1 auto;
+          height: 1px;
+        }
+
+        &__buttons {
+          padding: 7px 8px;
+        }
+      }
+    }
+
+    &__extra {
+      display: none;
+      margin-top: 4px;
+
+      .public-account-bio {
+        border-radius: 0;
+        box-shadow: none;
+        background: transparent;
+        margin: 0 -5px;
+
+        .account__header__fields {
+          border-top: 1px solid var(--brand-color-med);
+        }
+
+        .roles {
+          display: none;
+        }
+      }
+
+      &__links {
+        margin-top: -15px;
+        font-size: 14px;
+        color: var(--primary-text-color-faint);
+
+        a {
+          display: inline-block;
+          color: var(--primary-text-color-faint);
+          text-decoration: none;
+          padding: 15px;
+          font-weight: 500;
+
+          strong {
+            font-weight: 700;
+            color: var(--primary-text-color);
+          }
+        }
+      }
+
+      @media screen and (max-width: $no-columns-breakpoint) {
+        display: block;
+        flex: 100%;
+      }
+    }
+  }
+
+  .account__section-headline {
+    border-radius: 4px 4px 0 0;
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      border-radius: 0;
+    }
+  }
+
+  .detailed-status__meta {
+    margin-top: 25px;
+  }
+
+  .public-account-bio {
+    background: var(--brand-color-med);
+    box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 10px;
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      box-shadow: none;
+      margin-bottom: 0;
+      border-radius: 0;
+    }
+
+    .account__header__fields {
+      margin: 0;
+      border-top: 0;
+
+      a {
+        color: lighten($ui-highlight-color, 8%);
+      }
+
+      dl:first-child .verified {
+        border-radius: 0 4px 0 0;
+      }
+
+      .verified a {
+        color: $valid-value-color;
+      }
+    }
+
+    .account__header__content {
+      padding: 20px;
+      padding-bottom: 0;
+      color: var(--primary-text-color);
+    }
+
+    &__extra,
+    .roles {
+      padding: 20px;
+      font-size: 14px;
+      color: var(--primary-text-color-faint);
+    }
+
+    .roles {
+      padding-bottom: 0;
+    }
+  }
+
+  .static-icon-button {
+    color: $action-button-color;
+    font-size: 18px;
+
+    & > span {
+      font-size: 14px;
+      font-weight: 500;
+    }
+  }
+
+  .card-grid {
+    display: flex;
+    flex-wrap: wrap;
+    min-width: 100%;
+    margin: 0 -5px;
+
+    & > div {
+      box-sizing: border-box;
+      flex: 1 0 auto;
+      width: 300px;
+      padding: 0 5px;
+      margin-bottom: 10px;
+      max-width: 33.333%;
+
+      @media screen and (max-width: 900px) {
+        max-width: 50%;
+      }
+
+      @media screen and (max-width: 600px) {
+        max-width: 100%;
+      }
+    }
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      margin: 0;
+      border-top: 1px solid var(--brand-color-med);
+
+      & > div {
+        width: 100%;
+        padding: 0;
+        margin-bottom: 0;
+        border-bottom: 1px solid var(--brand-color-med);
+
+        &:last-child {
+          border-bottom: 0;
+        }
+
+        .card__bar {
+          background: var(--brand-color-med);
+
+          &:hover,
+          &:active,
+          &:focus {
+            background: var(--brand-color-faint);
+          }
+        }
+      }
+    }
+  }
+}
+
 .container {
   box-sizing: border-box;
   max-width: $maximum-width;
@@ -661,7 +1343,6 @@ $small-breakpoint: 960px;
 .public-layout {
   position: relative;
   background-color: var(--brand-color);
-  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 889" width="1440px" height="889px"><path d="M 0 0 L 0 851.82031 C 115.03104 776.54213 236.097 723.10606 363.20703 691.54492 C 640.06491 622.80164 852.93698 468.14039 954.31055 358.01367 C 1092.1151 208.31032 1206.0509 47.69868 1365.3828 13.457031 C 1391.8162 7.7762737 1416.6827 3.2957237 1440 0.001953125 L 1440 0 L 0 0 z" fill="#{hex-color($gab-background)}"/></svg>');
   background-size: 100% auto;
   background-repeat: no-repeat;
   background-position: 0 -106px;
@@ -670,7 +1351,9 @@ $small-breakpoint: 960px;
   flex-direction: column;
 
   @media screen and (max-width: 767px) {
-    background-image: none;
+    .wave {
+      display: none;
+    }
 
     .brand__tagline,
     .brand h1 {
@@ -684,7 +1367,7 @@ $small-breakpoint: 960px;
         &:hover,
         &:focus,
         &:active {
-          color: $gab-background-base-light;
+          opacity: 0.9;
         }
       }
 
@@ -693,12 +1376,13 @@ $small-breakpoint: 960px;
       }
 
       .nav-button {
-        background: darken($gab-brand-default, 10%);
+        background: var(--accent-color);
+        color: #fff;
 
         &:hover,
         &:focus,
         &:active {
-          background: darken($gab-brand-default, 15%);
+          opacity: 0.9;
         }
       }
     }
@@ -870,7 +1554,7 @@ $small-breakpoint: 960px;
   }
 
   .simple_form p.lead {
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color);
     font-size: 15px;
     line-height: 20px;
     font-weight: 400;
@@ -1016,3 +1700,23 @@ $small-breakpoint: 960px;
 .about-page {
   background: var(--brand-color-faint);
 }
+
+.public-layout__top {
+  position: relative;
+
+  .header,
+  .container {
+    position: relative;
+    z-index: 1;
+  }
+}
+
+.public-layout__top .wave {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
diff --git a/app/styles/containers.scss b/app/styles/containers.scss
index 135f06635..f2fa0fc4a 100644
--- a/app/styles/containers.scss
+++ b/app/styles/containers.scss
@@ -189,694 +189,3 @@
     }
   }
 }
-
-.public-layout {
-  .container {
-    width: 100%;
-    max-width: 960px;
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      padding: 0;
-    }
-  }
-
-  .content {
-    display: block;
-    margin: 40px 0;
-    background: #fff;
-    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 0;
-    box-sizing: border-box;
-
-    @media screen and (max-width: 1024px) {
-      padding: 14px 20px;
-    }
-
-    .header-container {
-      display: flex;
-      width: 960px;
-      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 {
-        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: #fff;
-            overflow: hidden;
-
-            a {
-              padding: 4px;
-              background-color: var(--brand-color-med);
-            }
-          }
-
-          .input {
-            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;
-            border: 1px solid #333 !important;
-            height: 38px !important;
-            box-sizing: border-box !important;
-            padding: 0 18px !important;
-            text-transform: none !important;
-          }
-        }
-      }
-    }
-
-    .brand {
-      display: block;
-
-      img {
-        display: block;
-        height: 30px;
-        width: auto;
-        position: relative;
-        bottom: -2px;
-
-        @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 {
-        text-decoration: none;
-        background: darken($gab-brand-default, 10%);
-      }
-
-      &--hollow {
-        background: transparent;
-
-        &:hover,
-        &:focus,
-        &:active {
-          background: rgba($gab-brand-default, 0.2);
-        }
-      }
-    }
-  }
-
-  $no-columns-breakpoint: 600px;
-
-  .grid {
-    display: grid;
-    grid-gap: 10px;
-    grid-template-columns: minmax(300px, 3fr) minmax(298px, 1fr);
-    grid-auto-columns: 25%;
-    grid-auto-rows: max-content;
-
-    .column-0 {
-      grid-row: 1;
-      grid-column: 1;
-    }
-
-    .column-1 {
-      grid-row: 1;
-      grid-column: 2;
-    }
-
-    @media screen and (max-width: $no-columns-breakpoint) {
-      grid-template-columns: 100%;
-      grid-gap: 0;
-
-      .column-1 {
-        display: none;
-      }
-    }
-  }
-
-  .public-account-header {
-    overflow: hidden;
-    margin-bottom: 10px;
-    box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
-
-    &.inactive {
-      opacity: 0.5;
-
-      .public-account-header__image,
-      .avatar {
-        filter: grayscale(100%);
-      }
-
-      .logo-button {
-        background-color: var(--primary-text-color-faint);
-      }
-    }
-
-    &__image {
-      border-radius: 4px 4px 0 0;
-      overflow: hidden;
-      height: 300px;
-      position: relative;
-      background: darken($ui-base-color, 12%);
-
-      &::after {
-        content: "";
-        display: block;
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        box-shadow: inset 0 -1px 1px 1px rgba($base-shadow-color, 0.15);
-        top: 0;
-        left: 0;
-      }
-
-      img {
-        object-fit: cover;
-        display: block;
-        width: 100%;
-        height: 100%;
-        margin: 0;
-        border-radius: 4px 4px 0 0;
-      }
-
-      @media screen and (max-width: 600px) {
-        height: 200px;
-      }
-    }
-
-    &--no-bar {
-      margin-bottom: 0;
-
-      .public-account-header__image,
-      .public-account-header__image img {
-        border-radius: 4px;
-
-        @media screen and (max-width: $no-gap-breakpoint) {
-          border-radius: 0;
-        }
-      }
-    }
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      margin-bottom: 0;
-      box-shadow: none;
-
-      &__image::after {
-        display: none;
-      }
-
-      &__image,
-      &__image img {
-        border-radius: 0;
-      }
-    }
-
-    &__bar {
-      position: relative;
-      margin-top: -80px;
-      display: flex;
-      justify-content: flex-start;
-
-      &::before {
-        content: "";
-        display: block;
-        background: var(--brand-color-faint);
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 60px;
-        border-radius: 0 0 4px 4px;
-        z-index: -1;
-      }
-
-      .avatar {
-        display: block;
-        width: 120px;
-        height: 120px;
-        padding-left: 20px - 4px;
-        flex: 0 0 auto;
-
-        img {
-          display: block;
-          width: 100%;
-          height: 100%;
-          margin: 0;
-          border-radius: 50%;
-          border: 4px solid var(--brand-color-faint);
-          background: darken($ui-base-color, 8%);
-        }
-      }
-
-      @media screen and (max-width: 600px) {
-        margin-top: 0;
-        background: var(--brand-color-faint);
-        border-radius: 0 0 4px 4px;
-        padding: 5px;
-
-        &::before {
-          display: none;
-        }
-
-        .avatar {
-          width: 48px;
-          height: 48px;
-          padding: 7px 0;
-          padding-left: 10px;
-
-          img {
-            border: 0;
-            border-radius: 4px;
-          }
-
-          @media screen and (max-width: 360px) {
-            display: none;
-          }
-        }
-      }
-
-      @media screen and (max-width: $no-gap-breakpoint) {
-        border-radius: 0;
-      }
-
-      @media screen and (max-width: $no-columns-breakpoint) {
-        flex-wrap: wrap;
-      }
-    }
-
-    &__tabs {
-      flex: 1 1 auto;
-      margin-left: 20px;
-
-      &__name {
-        padding-top: 20px;
-        padding-bottom: 8px;
-
-        h1 {
-          font-size: 20px;
-          line-height: 18px * 1.5;
-          color: var(--primary-text-color);
-          font-weight: 500;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          text-shadow: 1px 1px 1px $base-shadow-color;
-
-          small {
-            display: block;
-            font-size: 14px;
-            color: var(--primary-text-color);
-            font-weight: 400;
-            overflow: hidden;
-            text-overflow: ellipsis;
-          }
-        }
-      }
-
-      @media screen and (max-width: 600px) {
-        margin-left: 15px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        &__name {
-          padding-top: 0;
-          padding-bottom: 0;
-
-          h1 {
-            font-size: 16px;
-            line-height: 24px;
-            text-shadow: none;
-
-            small {
-              color: var(--primary-text-color-faint);
-            }
-          }
-        }
-      }
-
-      &__tabs {
-        display: flex;
-        justify-content: flex-start;
-        align-items: stretch;
-        height: 58px;
-
-        .details-counters {
-          display: flex;
-          flex-direction: row;
-          min-width: 300px;
-        }
-
-        @media screen and (max-width: $no-columns-breakpoint) {
-          .details-counters {
-            display: none;
-          }
-        }
-
-        .counter {
-          width: 33.3%;
-          box-sizing: border-box;
-          flex: 0 0 auto;
-          color: var(--primary-text-color-faint);
-          padding: 10px;
-          border-right: 1px solid var(--brand-color-faint);
-          cursor: default;
-          text-align: center;
-          position: relative;
-
-          a {
-            display: block;
-          }
-
-          &:last-child {
-            border-right: 0;
-          }
-
-          &::after {
-            display: block;
-            content: "";
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            border-bottom: 4px solid $ui-primary-color;
-            opacity: 0.5;
-            transition: all 400ms ease;
-          }
-
-          &.active {
-            &::after {
-              border-bottom: 4px solid $highlight-text-color;
-              opacity: 1;
-            }
-
-            &.inactive::after {
-              border-bottom-color: var(--primary-text-color-faint);
-            }
-          }
-
-          &:hover {
-            &::after {
-              opacity: 1;
-              transition-duration: 100ms;
-            }
-          }
-
-          a {
-            text-decoration: none;
-            color: inherit;
-          }
-
-          .counter-label {
-            font-size: 12px;
-            display: block;
-          }
-
-          .counter-number {
-            font-weight: 500;
-            font-size: 18px;
-            margin-bottom: 5px;
-            color: var(--primary-text-color);
-            font-family: $font-display, sans-serif;
-          }
-        }
-
-        .spacer {
-          flex: 1 1 auto;
-          height: 1px;
-        }
-
-        &__buttons {
-          padding: 7px 8px;
-        }
-      }
-    }
-
-    &__extra {
-      display: none;
-      margin-top: 4px;
-
-      .public-account-bio {
-        border-radius: 0;
-        box-shadow: none;
-        background: transparent;
-        margin: 0 -5px;
-
-        .account__header__fields {
-          border-top: 1px solid var(--brand-color-med);
-        }
-
-        .roles {
-          display: none;
-        }
-      }
-
-      &__links {
-        margin-top: -15px;
-        font-size: 14px;
-        color: var(--primary-text-color-faint);
-
-        a {
-          display: inline-block;
-          color: var(--primary-text-color-faint);
-          text-decoration: none;
-          padding: 15px;
-          font-weight: 500;
-
-          strong {
-            font-weight: 700;
-            color: var(--primary-text-color);
-          }
-        }
-      }
-
-      @media screen and (max-width: $no-columns-breakpoint) {
-        display: block;
-        flex: 100%;
-      }
-    }
-  }
-
-  .account__section-headline {
-    border-radius: 4px 4px 0 0;
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      border-radius: 0;
-    }
-  }
-
-  .detailed-status__meta {
-    margin-top: 25px;
-  }
-
-  .public-account-bio {
-    background: var(--brand-color-med);
-    box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
-    border-radius: 4px;
-    overflow: hidden;
-    margin-bottom: 10px;
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      box-shadow: none;
-      margin-bottom: 0;
-      border-radius: 0;
-    }
-
-    .account__header__fields {
-      margin: 0;
-      border-top: 0;
-
-      a {
-        color: lighten($ui-highlight-color, 8%);
-      }
-
-      dl:first-child .verified {
-        border-radius: 0 4px 0 0;
-      }
-
-      .verified a {
-        color: $valid-value-color;
-      }
-    }
-
-    .account__header__content {
-      padding: 20px;
-      padding-bottom: 0;
-      color: var(--primary-text-color);
-    }
-
-    &__extra,
-    .roles {
-      padding: 20px;
-      font-size: 14px;
-      color: var(--primary-text-color-faint);
-    }
-
-    .roles {
-      padding-bottom: 0;
-    }
-  }
-
-  .static-icon-button {
-    color: $action-button-color;
-    font-size: 18px;
-
-    & > span {
-      font-size: 14px;
-      font-weight: 500;
-    }
-  }
-
-  .card-grid {
-    display: flex;
-    flex-wrap: wrap;
-    min-width: 100%;
-    margin: 0 -5px;
-
-    & > div {
-      box-sizing: border-box;
-      flex: 1 0 auto;
-      width: 300px;
-      padding: 0 5px;
-      margin-bottom: 10px;
-      max-width: 33.333%;
-
-      @media screen and (max-width: 900px) {
-        max-width: 50%;
-      }
-
-      @media screen and (max-width: 600px) {
-        max-width: 100%;
-      }
-    }
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      margin: 0;
-      border-top: 1px solid var(--brand-color-med);
-
-      & > div {
-        width: 100%;
-        padding: 0;
-        margin-bottom: 0;
-        border-bottom: 1px solid var(--brand-color-med);
-
-        &:last-child {
-          border-bottom: 0;
-        }
-
-        .card__bar {
-          background: var(--brand-color-med);
-
-          &:hover,
-          &:active,
-          &:focus {
-            background: var(--brand-color-faint);
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/app/styles/forms.scss b/app/styles/forms.scss
index 2f875f209..db2067516 100644
--- a/app/styles/forms.scss
+++ b/app/styles/forms.scss
@@ -319,7 +319,7 @@ code {
     font-family: inherit;
     resize: vertical;
     background: var(--foreground-color);
-    border: 1px solid var(--brand-color-faint);
+    border: 1px solid var(--highlight-text-color);
     border-radius: 4px;
     padding: 10px;
     transition: 0.2s;
@@ -338,7 +338,7 @@ code {
 
     &:active,
     &:focus {
-      border-color: var(--highlight-text-color);
+      border-color: var(--brand-color-hicontrast);
     }
   }