Merge branch 'develop' into 'snackbar-action-link'

# Conflicts:
#   app/soapbox/features/edit_profile/index.js

app/styles/accounts.scss

@@ -554,3 +554,9 @@ a .account__avatar {
     padding-right: 3px;
   }
 }
+
+.account__birthday {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}

app/styles/components/datepicker.scss

@@ -33,6 +33,7 @@
 
 .datepicker .react-datepicker {
   box-shadow: 0 0 6px 0 rgb(0 0 0 / 30%);
+  font-family: inherit;
   font-size: 12px;
   border: 0;
   border-radius: 10px;

app/styles/components/notification.scss

@@ -89,3 +89,18 @@
     padding-bottom: 8px !important;
   }
 }
+
+.notification-birthday span[type="button"] {
+  &:focus,
+  &:hover,
+  &:active {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}
+
+.columns-area .notification-birthday {
+  .notification__message {
+    padding-top: 0;
+  }
+}

app/styles/components/profile-info-panel.scss

@@ -22,7 +22,8 @@
       flex-wrap: wrap;
     }
 
-    &__join-date {
+    &__join-date,
+    &__birthday {
       display: flex;
       font-size: 14px;
       color: var(--primary-text-color--faint);

app/styles/components/status.scss

@@ -804,6 +804,12 @@ a.status-card.compact:hover {
   }
 
   &__content {
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 6;
+    -webkit-box-orient: vertical;
+    max-height: 114px;
     margin-top: 5px;
     font-size: 14px;
 
@@ -820,4 +826,14 @@ a.status-card.compact:hover {
   .attachment-thumbs .media-gallery {
     margin-top: 5px !important;
   }
+
+  &-tombstone {
+    margin-top: 14px;
+    padding: 12px;
+    border: 1px solid var(--brand-color--med);
+    border-radius: 10px;
+    color: var(--primary-text-color--faint);
+    font-size: 14px;
+    text-align: center;
+  }
 }

app/styles/forms.scss

@@ -634,6 +634,61 @@ code {
       }
     }
   }
+
+  .datepicker {
+    padding: 0;
+    margin-bottom: 8px;
+    border: none;
+
+    &__hint {
+      padding-bottom: 0;
+      color: var(--primary-text-color);
+      font-size: 14px;
+      font-style: unset;
+    }
+
+    .react-datepicker {
+      &__header {
+        padding-top: 4px;
+      }
+
+      &__input-container {
+        border: 1px solid var(--highlight-text-color);
+
+        input {
+          border: none;
+        }
+      }
+    }
+
+    &__years,
+    &__months {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin: 0 4px;
+      font-size: 16px;
+    }
+
+    &__button {
+      width: 28px;
+      margin: 0;
+      padding: 4px;
+      background: transparent;
+      color: var(--primary-text-color);
+
+      &:hover,
+      &:active,
+      &:focus {
+        background: none;
+      }
+
+      .svg-icon {
+        height: 20px;
+        width: 20px;
+      }
+    }
+  }
 }
 
 .block-icon {