Merge branch 'next' into 'locked-profile-header'

# Conflicts:
#   app/soapbox/features/account/components/header.js
#   app/soapbox/pages/profile_page.js

app/soapbox/components/__tests__/__snapshots__/timeline_queue_button_header-test.js.snap

@@ -25,7 +25,7 @@ exports[`<TimelineQueueButtonHeader /> renders correctly 1`] = `
 
 exports[`<TimelineQueueButtonHeader /> renders correctly 2`] = `
 <div
-  className="timeline-queue-header"
+  className="timeline-queue-header hidden"
 >
   <a
     className="timeline-queue-header__btn"
@@ -42,14 +42,18 @@ exports[`<TimelineQueueButtonHeader /> renders correctly 2`] = `
         }
       />
     </div>
-    Click to see 1 new post
+    <div
+      className="timeline-queue-header__label"
+    >
+      Click to see 1 new post
+    </div>
   </a>
 </div>
 `;
 
 exports[`<TimelineQueueButtonHeader /> renders correctly 3`] = `
 <div
-  className="timeline-queue-header"
+  className="timeline-queue-header hidden"
 >
   <a
     className="timeline-queue-header__btn"
@@ -66,7 +70,11 @@ exports[`<TimelineQueueButtonHeader /> renders correctly 3`] = `
         }
       />
     </div>
-    Click to see 9999999 new posts
+    <div
+      className="timeline-queue-header__label"
+    >
+      Click to see 9999999 new posts
+    </div>
   </a>
 </div>
 `;

app/soapbox/locales/pl.json

@@ -119,7 +119,7 @@
   "auth.invalid_credentials": "Nieprawidłowa nazwa użytkownika lub hasło",
   "auth.logged_out": "Wylogowano.",
   "backups.actions.create": "Utwórz kopię zapasową",
-  "backups.empty_message": "Nie znaleziono kopii zapasaowych. {action}",
+  "backups.empty_message": "Nie znaleziono kopii zapasowych. {action}",
   "backups.empty_message.action": "Chcesz utworzyć?",
   "backups.pending": "Oczekująca",
   "boost_modal.combo": "Naciśnij {combo}, aby pominąć to następnym razem",
@@ -525,12 +525,18 @@
   "morefollows.followers_label": "…i {count} więcej {count, plural, one {obserwujący(-a)} few {obserwujących} many {obserwujących} other {obserwujących}} na zdalnych stronach.",
   "morefollows.following_label": "…i {count} więcej {count, plural, one {obserwowany(-a)} few {obserwowanych} many {obserwowanych} other {obserwowanych}} na zdalnych stronach.",
   "mute_modal.hide_notifications": "Chcesz ukryć powiadomienia od tego użytkownika?",
+  "navigation.chats": "Czaty",
+  "navigation.direct_messages": "Wiadomości",
+  "navigation.home": "Strona główna",
+  "navigation.notifications": "Powiadomienia",
+  "navigation.search": "Szukaj",
   "navigation_bar.account_aliases": "Aliasy kont",
   "navigation_bar.admin_settings": "Ustawienia administracyjne",
   "navigation_bar.blocks": "Zablokowani użytkownicy",
   "navigation_bar.bookmarks": "Zakładki",
   "navigation_bar.compose": "Utwórz nowy wpis",
   "navigation_bar.domain_blocks": "Ukryte domeny",
+  "navigation_bar.export_data": "Eksportuj dane",
   "navigation_bar.favourites": "Ulubione",
   "navigation_bar.filters": "Wyciszone słowa",
   "navigation_bar.follow_requests": "Prośby o śledzenie",
@@ -809,10 +815,13 @@
   "status.unpin": "Odepnij z profilu",
   "status_list.queue_label": "Naciśnij aby zobaczyć {count} {count, plural, one {nowy wpis} few {nowe wpisy} many {nowych wpisów} other {nowe wpisy}}",
   "statuses.tombstone": "Jeden lub więcej z wpisów jest już niedostępny.",
+  "sub_navigation.back": "Wróć",
   "suggestions.dismiss": "Odrzuć sugestię",
+  "tabs_bar.all": "Wszystkie",
   "tabs_bar.apps": "Aplikacje",
   "tabs_bar.chats": "Rozmowy",
   "tabs_bar.dashboard": "Panel administracyjny",
+  "tabs_bar.fediverse": "Fediwersum",
   "tabs_bar.header": "Informacje o koncie",
   "tabs_bar.home": "Strona główna",
   "tabs_bar.news": "Nowości",

app/styles/accounts.scss

@@ -3,7 +3,9 @@
     display: block;
     text-decoration: none;
     color: inherit;
-    box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
+    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
+    border-radius: 4px;
+    overflow: hidden;
 
     @media screen and (max-width: $no-gap-breakpoint) {
       box-shadow: none;
@@ -13,7 +15,7 @@
     &:active,
     &:focus {
       .card__bar {
-        background: var(--foreground-color);
+        background-color: var(--brand-color--faint);
       }
     }
   }
@@ -22,7 +24,6 @@
     height: 130px;
     position: relative;
     background: var(--background-color);
-    border-radius: 4px 4px 0 0;
 
     .still-image {
       display: block;
@@ -30,7 +31,6 @@
       height: 100%;
       margin: 0;
       object-fit: cover;
-      border-radius: 4px 4px 0 0;
     }
 
     @media screen and (max-width: 600px) {
@@ -48,12 +48,8 @@
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    background: var(--brand-color--faint);
-    border-radius: 0 0 4px 4px;
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      border-radius: 0;
-    }
+    background: var(--background-color);
+    transition: 0.2s;
 
     .avatar {
       flex: 0 0 auto;

app/styles/application.scss

@@ -58,7 +58,6 @@
 @import 'components/react-toggle';
 @import 'components/getting-started';
 @import 'components/promo-panel';
-@import 'components/drawer';
 @import 'components/still-image';
 @import 'components/timeline-queue-header';
 @import 'components/badge';

app/styles/chats.scss

@@ -296,20 +296,22 @@
     position: relative;
 
     .icon-button {
-      color: var(--primary-text-color--faint);
+      color: var(--primary-text-color);
       position: absolute;
       right: 10px;
-      top: calc(50% - 13px);
+      top: 50%;
+      transform: translateY(-50%);
       width: auto;
       height: auto;
       background: transparent !important;
       border: 0;
       padding: 0;
       margin: 0;
-    }
 
-    .chat-box__send .icon-button {
-      top: calc(50% - 9px);
+      .svg-icon {
+        width: 18px;
+        height: 18px;
+      }
     }
 
     textarea {
@@ -332,7 +334,7 @@
 .ui--chatroom {
   padding-bottom: 0;
 
-  .columns-area__panels__main .columns-area {
+  .columns-area__panels__main .columns-area .column {
     height: calc(100vh - 100px);
     box-sizing: border-box;
     overflow: hidden;

app/styles/components/account-header.scss

@@ -313,9 +313,11 @@
       display: flex;
       font-size: 14px;
       color: var(--primary-text-color--faint);
+
       @media screen and (max-width: 895px) {
         justify-content: center;
         flex-wrap: wrap;
+        display: none;
       }
 
       a {

app/styles/components/columns.scss

@@ -61,6 +61,7 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  flex: 1 1 100%;
 }
 
 @media screen and (min-width: 631px) {
@@ -68,8 +69,7 @@
     padding: 0;
   }
 
-  .column,
-  .drawer {
+  .column {
     flex: 0 0 auto;
     padding: 10px;
     padding-left: 5px;
@@ -85,8 +85,7 @@
   }
 
   .columns-area > div {
-    .column,
-    .drawer {
+    .column {
       padding-left: 5px;
       padding-right: 5px;
     }
@@ -98,12 +97,10 @@
   flex-direction: column;
   width: 100%;
   margin: 0 auto;
-  padding: 15px 0;
+  padding-top: 15px;
 
-  .column,
-  .drawer {
+  .column {
     width: 100%;
-    height: 100%;
     padding: 0;
   }
 
@@ -125,11 +122,9 @@
   }
 
   @media (max-width: 580px) {
-    padding: 0;
-
     .timeline-compose-block {
       border-radius: 0;
-      margin-top: 10px; // Make less claustrophobic
+      margin-top: -5px;
     }
   }
 
@@ -352,6 +347,10 @@
     background: transparent;
     border-radius: 0;
     box-shadow: none;
+
+    .sub-navigation {
+      box-shadow: 0 -6px 6px -6px rgba(0, 0, 0, 0.1);
+    }
   }
 
   @media screen and (max-width: 580px) {
@@ -710,6 +709,7 @@
   align-items: center;
   justify-content: center;
   min-height: 160px;
+  border-radius: 0 0 10px 10px;
 
   @supports (display: grid) { // hack to fix Chrome <57
     contain: strict;
@@ -727,21 +727,20 @@
       text-decoration: underline;
     }
   }
+
+  @media screen and (max-width: 580px) {
+    border-radius: 0;
+  }
 }
 
 .error-column {
   flex-direction: column;
-  border-radius: 0 0 10px 10px;
 
   .svg-icon {
     width: 70px;
     height: 70px;
     margin-bottom: 30px;
   }
-
-  @media screen and (max-width: 580px) {
-    border-radius: 0;
-  }
 }
 
 .column-link--transparent .icon-with-badge__badge {
@@ -775,6 +774,11 @@
   .column__top {
     display: flex;
     align-items: center;
+    border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
+
+    .sub-navigation {
+      border-bottom: 0;
+    }
   }
 
   .column-header {
@@ -856,6 +860,10 @@
 
 .column-list {
   position: relative;
+
+  &__empty-message {
+    padding: 0 20px;
+  }
 }
 
 .column-loading {
@@ -882,6 +890,10 @@
 .column--transparent {
   .slist__append {
     @include standard-panel;
+
+    @media screen and (max-width: 580px) {
+      border-radius: 0;
+    }
   }
 
   .sub-navigation ~ .slist .slist__append {

app/styles/components/compose-form.scss

@@ -27,7 +27,7 @@
     }
   }
 
-  .compose-form__warning {
+  &__warning {
     color: var(--primary-text-color);
     margin-bottom: 10px;
     background: var(--brand-color--faint);
@@ -66,7 +66,7 @@
     right: 5px;
   }
 
-  .compose-form__autosuggest-wrapper {
+  &__autosuggest-wrapper {
     position: relative;
   }
 
@@ -195,7 +195,7 @@
     color: var(--primary-text-color--faint);
   }
 
-  .compose-form__modifiers {
+  &__modifiers {
     color: var(--primary-text-color);
     font-family: inherit;
     font-size: 14px;
@@ -327,7 +327,7 @@
     }
   } // end .compose-form .compose-form__modifiers
 
-  .compose-form__buttons-wrapper {
+  &__buttons-wrapper {
     padding: 10px;
     background: var(--background-color);
     display: flex;
@@ -380,13 +380,23 @@
       }
     }
 
-    .character-counter__wrapper {
-      align-self: center;
-      margin: 0 10px 0 auto;
+    .character-counter {
+      display: block;
+      cursor: default;
+      font-family: var(--font-sans-serif), sans-serif;
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--primary-text-color--faint);
+      &.character-counter--over { color: $warning-red; }
+    }
+
+    .character-counter,
+    .visual-character-counter {
+      margin-right: 10px;
     }
   }
 
-  .compose-form__publish {
+  &__publish {
     display: flex;
     justify-content: flex-end;
     min-width: 0;
@@ -396,6 +406,13 @@
       overflow: hidden;
     }
   }
+
+  &__counter {
+    display: flex;
+    align-items: center;
+    align-self: center;
+    margin-left: auto;
+  }
 } // end .compose-form
 
 // Icon tweaks

app/styles/components/detailed-status.scss

@@ -71,7 +71,6 @@
 
 .detailed-status__link {
   color: var(--primary-text-color--faint);
-  cursor: pointer;
   text-decoration: none;
   font-size: 13px;
 }
@@ -159,8 +158,34 @@
 }
 
 .thread {
+  @include standard-panel;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+
+  @media screen and (max-width: 580px) {
+    border-radius: 0;
+  }
+
   &__status {
     position: relative;
+
+    // Only display line if posts are below
+    &:last-child .detailed-status__action-bar {
+      border-bottom: 0;
+    }
+  }
+
+  &__descendants .thread__status:first-child {
+    margin-top: 10px;
+  }
+
+  &__status--focused:first-child,
+  &__ancestors &__status:first-child {
+    margin-top: 10px;
+  }
+
+  &__descendants &__status:last-child {
+    margin-bottom: 10px;
   }
 
   &__connector {

app/styles/components/drawer.scss

@@ -1,80 +0,0 @@
-.drawer {
-  width: 300px;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  overflow-y: hidden;
-}
-
-.drawer__tab {
-  display: block;
-  flex: 1 1 auto;
-  padding: 15px 5px 13px;
-  color: var(--primary-text-color--faint);
-  text-decoration: none;
-  text-align: center;
-  font-size: 16px;
-  border-bottom: 2px solid transparent;
-}
-
-.column,
-.drawer {
-  flex: 1 1 100%;
-}
-
-.drawer__pager {
-  box-sizing: border-box;
-  padding: 0;
-  flex-grow: 1;
-  position: relative;
-  overflow: hidden;
-  display: flex;
-}
-
-.drawer__inner {
-  top: 0;
-  left: 0;
-  background: var(--foreground-color);
-  box-sizing: border-box;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  overflow-y: auto;
-  width: 100%;
-  height: 100%;
-}
-
-.pseudo-drawer {
-  background: var(--background-color);
-  font-size: 13px;
-  text-align: left;
-}
-
-.drawer__header {
-  flex: 0 0 auto;
-  font-size: 16px;
-  background: var(--brand-color--med);
-  margin-bottom: 10px;
-  display: flex;
-  flex-direction: row;
-
-  a {
-    transition: background 100ms ease-in;
-
-    &:hover {
-      background: var(--background-color);
-      transition: background 200ms ease-out;
-    }
-  }
-}
-
-.drawer__backdrop {
-  cursor: pointer;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba($base-overlay-background, 0.5);
-}

app/styles/components/emoji-reacts.scss

@@ -21,12 +21,19 @@
   }
 }
 
-.emoji-react--reblogs {
+.emoji-react--reblogs,
+.emoji-react--favourites {
   vertical-align: middle;
   display: inline-flex;
+  margin-right: 10px;
 
   .svg-icon {
     margin-right: 0.2em;
+  }
+}
+
+.emoji-react--reblogs {
+  .svg-icon {
     color: var(--highlight-text-color);
 
     svg {
@@ -35,6 +42,12 @@
   }
 }
 
+.emoji-react--favourites {
+  .svg-icon {
+    color: $gold-star;
+  }
+}
+
 .emoji-reacts {
   display: inline-flex;
   flex-direction: row-reverse;

app/styles/components/getting-started.scss

@@ -17,8 +17,7 @@
 
   &__footer {
     flex: 0 0 auto;
-    padding: 10px;
-    padding-top: 20px;
+    padding: 20px 10px 40px;
 
     ul {
       margin-bottom: 10px;

app/styles/components/list-forms.scss

@@ -14,16 +14,6 @@
     border-radius: 8px 8px 0 0;
   }
 
-  .drawer__inner {
-    border-radius: 0 0 8px 8px;
-
-    &.backdrop {
-      width: calc(100% - 60px);
-      box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
-      border-radius: 0 0 0 8px;
-    }
-  }
-
   &__accounts {
     background: var(--background-color);
     overflow-y: auto;

app/styles/components/media-gallery.scss

@@ -192,3 +192,33 @@
     }
   }
 }
+
+$media-compact-size: 50px;
+
+.media-gallery--compact {
+  height: $media-compact-size !important;
+  background: transparent;
+
+  .spoiler-button {
+    display: none;
+  }
+
+  .media-gallery__item {
+    width: $media-compact-size !important;
+    height: $media-compact-size !important;
+    inset: auto !important;
+    margin-right: 5px;
+
+    &-overflow {
+      font-size: 20px;
+    }
+
+    &__icons {
+      font-size: 30px;
+    }
+  }
+
+  .media-gallery__file-extension__label {
+    display: none;
+  }
+}

app/styles/components/modal.scss

@@ -128,8 +128,9 @@
 
   @media screen and (max-width: 600px) { padding: 30px 2px; }
 
-  .fa {
-    margin-right: 0;
+  .svg-icon {
+    width: 24px;
+    height: 24px;
   }
 }
 
@@ -180,7 +181,7 @@
 }
 
 .media-modal__button {
-  background-color: var(--primary-text-color);
+  background-color: #fff;
   height: 12px;
   width: 12px;
   border-radius: 6px;
@@ -337,7 +338,7 @@
   overflow: hidden;
   width: 480px;
   max-width: 90vw;
-  border-radius: 4px;
+  border-radius: 10px;
   border: 1px solid var(--primary-text-color--faint);
   color: var(--primary-text-color--faint);
   background: var(--foreground-color);

app/styles/components/remote-timeline.scss

@@ -29,9 +29,11 @@
 }
 
 .pinned-hosts-picker {
-  margin-left: 10px;
+  padding: 10px 0 0 10px;
   display: inline-flex;
   flex-wrap: wrap;
+  background: var(--foreground-color);
+  border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
 
   .pinned-host {
     margin-right: 10px;

app/styles/components/search.scss

@@ -166,9 +166,7 @@
 }
 
 .search-page {
-  .drawer__inner:not(:empty) {
-    min-height: 48px;
-  }
+  height: 100%;
 
   .search {
     padding: 10px 15px;
@@ -184,14 +182,6 @@
   .search__icon .svg-icon {
     right: 24px;
   }
-
-  .drawer__pager {
-    border-radius: 0 0 10px 10px;
-
-    @media screen and (max-width: 450px) {
-      border-radius: 0;
-    }
-  }
 }
 
 .search-results {

app/styles/components/status.scss

@@ -143,6 +143,10 @@
 .status__prepend-icon-wrapper {
   left: -26px;
   position: absolute;
+
+  svg.feather-repeat {
+    color: var(--highlight-text-color);
+  }
 }
 
 .status {
@@ -710,3 +714,18 @@ a.status-card.compact:hover {
     padding: 15px 0 10px;
   }
 }
+
+.attachment-thumbs {
+  position: relative;
+
+  &__clickable-region {
+    cursor: pointer;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}

app/styles/components/timeline-queue-header.scss

@@ -1,35 +1,35 @@
 .timeline-queue-header {
   display: flex;
+  align-self: center;
   align-items: center;
   justify-content: space-evenly;
-  max-height: 30px;
-  position: sticky;
+  height: 30px;
+  position: fixed;
   top: 60px;
   margin: 0 auto;
-  margin-bottom: 8px;
   background-color: var(--brand-color);
   color: #fff;
-  border-bottom: 1px solid;
-  border-top: 1px solid;
-  border-color: var(--brand-color--faint);
   border-radius: 100px;
-  transition: max-height 150ms ease;
+  transition: 150ms ease;
   overflow: hidden;
-  opacity: 1;
-  left: 0;
-  right: 0;
   padding: 0 10px;
   z-index: 500;
 
+  .sub-navigation ~ & {
+    top: calc(60px + 41px);
+  }
+
   .svg-icon {
     margin-right: 5px;
   }
 
   &.hidden {
-    max-height: 0;
-    opacity: 0;
-    margin: 0;
-    border: 0;
+    transform: scaleY(0);
+    pointer-events: none;
+
+    .timeline-queue-header__label {
+      opacity: 0;
+    }
   }
 
   &__btn {
@@ -46,4 +46,8 @@
       height: 46px;
     }
   }
+
+  &__label {
+    transition: 150ms ease;
+  }
 }

app/styles/components/video-player.scss

@@ -297,7 +297,7 @@
       left: 0;
       top: 50%;
       transform: translate(0, -50%);
-      background: var(--brand-color);
+      background: var(--accent-color);
     }
 
     &__handle {
@@ -310,7 +310,7 @@
       left: 0;
       margin-left: -6px;
       transform: translate(0, -50%);
-      background: var(--brand-color);
+      background: var(--accent-color);
       box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
       opacity: 0;
 
@@ -364,7 +364,7 @@
       height: 4px;
       border-radius: 4px;
       top: 14px;
-      background: var(--brand-color);
+      background: var(--accent-color);
     }
 
     &__buffer {
@@ -380,7 +380,7 @@
       height: 12px;
       top: 10px;
       margin-left: -6px;
-      background: var(--brand-color);
+      background: var(--accent-color);
       box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
 
       .no-reduce-motion & {

app/styles/navigation.scss

@@ -113,6 +113,10 @@
   justify-content: center;
   z-index: 999;
 
+  &--scrolled {
+    border-radius: 0 !important;
+  }
+
   &__content {
     width: 100%;
     height: 100%;

app/styles/rtl.scss

@@ -228,8 +228,7 @@ body.rtl {
   }
 
   @media screen and (min-width: 631px) {
-    .column,
-    .drawer {
+    .column {
       padding-left: 5px;
       padding-right: 5px;
 
@@ -240,8 +239,7 @@ body.rtl {
     }
 
     .columns-area > div {
-      .column,
-      .drawer {
+      .column {
         padding-left: 5px;
         padding-right: 5px;
       }

app/styles/ui.scss

@@ -318,7 +318,6 @@
 .react-swipeable-view-container {
   &,
   .columns-area,
-  .drawer,
   .column {
     height: 100%;
   }

package.json

@@ -116,6 +116,7 @@
     "qrcode.react": "^1.0.0",
     "react": "^16.13.1",
     "react-color": "^2.18.1",
+    "react-content-loader": "^6.0.3",
     "react-datepicker": "^4.1.1",
     "react-dom": "^16.13.1",
     "react-helmet": "^6.0.0",

yarn.lock

@@ -7757,6 +7757,11 @@ react-color@^2.18.1:
     reactcss "^1.2.0"
     tinycolor2 "^1.4.1"
 
+react-content-loader@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/react-content-loader/-/react-content-loader-6.0.3.tgz#32e28ca7120e0a2552fc26655d0d4448cc1fc0c5"
+  integrity sha512-CIRgTHze+ls+jGDIfCitw27YkW2XcaMpsYORTUdBxsMFiKuUYMnlvY76dZE4Lsaa9vFXVw+41ieBEK7SJt0nug==
+
 react-datepicker@^4.1.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.2.1.tgz#72caf5055bc7c4eb0279c1f6d7624ded053edc4c"