Merge commit '3554c527954441fd924586a49c7d99a89101ac7e' into glitch-soc/merge-upstream

Conflicts:
- `app/controllers/authorize_interactions_controller.rb`:
  Small conflict due to our theming system.
- `streaming/index.js`:
  Upstream refactored part of the streaming server.
  We had some extra logic for handling local-only posts.
  Applied the refactor.

app/javascript/styles/mastodon/accounts.scss

@@ -188,30 +188,43 @@
 }
 
 .account-role,
+.information-badge,
 .simple_form .recommended,
 .simple_form .not_recommended {
   display: inline-block;
   padding: 4px 6px;
   cursor: default;
-  border-radius: 3px;
+  border-radius: 4px;
   font-size: 12px;
   line-height: 12px;
   font-weight: 500;
-  color: var(--user-role-accent, $ui-secondary-color);
-  background-color: var(--user-role-background, rgba($ui-secondary-color, 0.1));
-  border: 1px solid var(--user-role-border, rgba($ui-secondary-color, 0.5));
+  color: $ui-secondary-color;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
 
-  &.moderator {
+.information-badge,
+.simple_form .recommended,
+.simple_form .not_recommended {
+  background-color: rgba($ui-secondary-color, 0.1);
+  border: 1px solid rgba($ui-secondary-color, 0.5);
+}
+
+.account-role {
+  border: 1px solid $highlight-text-color;
+
+  .fa {
+    color: var(--user-role-accent, $highlight-text-color);
+  }
+}
+
+.information-badge {
+  &.superapp {
     color: $success-green;
     background-color: rgba($success-green, 0.1);
     border-color: rgba($success-green, 0.5);
   }
-
-  &.admin {
-    color: lighten($error-red, 12%);
-    background-color: rgba(lighten($error-red, 12%), 0.1);
-    border-color: rgba(lighten($error-red, 12%), 0.5);
-  }
 }
 
 .simple_form .not_recommended {

app/javascript/styles/mastodon/components.scss

@@ -2891,6 +2891,7 @@ $ui-header-height: 55px;
   border-radius: 4px;
   transition: box-shadow 300ms linear;
   min-height: 0;
+  position: relative;
 
   &.active {
     transition: none;
@@ -7331,6 +7332,16 @@ noscript {
     }
   }
 
+  &__badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+
+    .account-role {
+      line-height: unset;
+    }
+  }
+
   &__tabs {
     display: flex;
     align-items: flex-start;
@@ -7369,10 +7380,6 @@ noscript {
       margin-top: 16px;
       margin-bottom: 16px;
 
-      .account-role {
-        vertical-align: top;
-      }
-
       .emojione {
         width: 22px;
         height: 22px;
@@ -8350,13 +8357,13 @@ noscript {
 .interaction-modal {
   max-width: 90vw;
   width: 600px;
-  background: $ui-base-color;
+  background: var(--modal-background-color);
+  border: 1px solid var(--modal-border-color);
   border-radius: 8px;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: visible;
   position: relative;
   display: block;
-  padding: 20px;
+  padding: 40px;
 
   h3 {
     font-size: 22px;
@@ -8365,63 +8372,100 @@ noscript {
     text-align: center;
   }
 
+  p {
+    font-size: 17px;
+    line-height: 22px;
+    color: $darker-text-color;
+
+    strong {
+      color: $primary-text-color;
+      font-weight: 700;
+    }
+  }
+
+  p.hint {
+    margin-bottom: 14px;
+    font-size: 14px;
+  }
+
   &__icon {
     color: $highlight-text-color;
     margin: 0 5px;
   }
 
   &__lead {
-    padding: 20px;
-    text-align: center;
+    margin-bottom: 20px;
 
     h3 {
       margin-bottom: 15px;
     }
-
-    p {
-      font-size: 17px;
-      line-height: 22px;
-      color: $darker-text-color;
-    }
   }
 
-  &__choices {
-    display: flex;
+  &__login {
+    position: relative;
+    margin-bottom: 20px;
 
-    &__choice {
-      flex: 0 0 auto;
-      width: 50%;
-      box-sizing: border-box;
-      padding: 20px;
+    &__input {
+      @include search-input;
 
-      h3 {
-        margin-bottom: 20px;
-      }
+      border: 1px solid lighten($ui-base-color, 8%);
+      padding: 4px 6px;
+      color: $primary-text-color;
+      font-size: 16px;
+      line-height: 18px;
+      display: flex;
+      align-items: center;
 
-      p {
-        color: $darker-text-color;
-        margin-bottom: 20px;
+      input {
+        background: transparent;
+        color: inherit;
+        font: inherit;
+        border: 0;
+        padding: 15px - 4px 15px - 6px;
+        flex: 1 1 auto;
+
+        &::placeholder {
+          color: lighten($darker-text-color, 4%);
+        }
+
+        &:focus {
+          outline: 0;
+        }
       }
 
       .button {
-        margin-bottom: 10px;
-
-        &:last-child {
-          margin-bottom: 0;
-        }
+        flex: 0 0 auto;
       }
     }
+
+    .search__popout {
+      margin-top: -1px;
+      padding-top: 5px;
+      padding-bottom: 5px;
+      border: 1px solid lighten($ui-base-color, 8%);
+    }
+
+    &.focused &__input {
+      border-color: $highlight-text-color;
+      background: lighten($ui-base-color, 4%);
+    }
+
+    &.invalid &__input {
+      border-color: $error-red;
+    }
+
+    &.expanded .search__popout {
+      display: block;
+    }
+
+    &.expanded &__input {
+      border-radius: 4px 4px 0 0;
+    }
   }
 
-  @media screen and (max-width: $no-gap-breakpoint - 1px) {
-    &__choices {
-      display: block;
-
-      &__choice {
-        width: auto;
-        margin-bottom: 20px;
-      }
-    }
+  .link-button {
+    font-size: inherit;
+    display: inline;
   }
 }
 

app/javascript/styles/mastodon/variables.scss

@@ -96,4 +96,6 @@ $font-monospace: 'mastodon-font-monospace' !default;
   --dropdown-background-color: #{lighten($ui-base-color, 4%)};
   --dropdown-shadow: 0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
     0 8px 10px -6px #{rgba($base-shadow-color, 0.25)};
+  --modal-background-color: #{darken($ui-base-color, 4%)};
+  --modal-border-color: #{lighten($ui-base-color, 4%)};
 }