Resolve merge conflicts

Merge branch 'develop' into 'admin_cfg'

# Conflicts:
#   app/soapbox/features/compose/components/action_bar.js
#   app/soapbox/features/edit_profile/index.js

README.md

@@ -54,7 +54,7 @@ yarn
 Finally, run the dev server:
 
 ```sh
-yarn start
+yarn dev
 ```
 
 **That's it!** :tada:
@@ -140,7 +140,7 @@ NODE_ENV=development
 ```
 
 #### Local dev server
-- `yarn dev` - Exact same as above, aliased to `yarn start` for convenience.
+- `yarn dev` - Run the local dev server.
 
 #### Building
 - `yarn build` - Compile without a dev server, into `/static` directory.

app/soapbox/__fixtures__/intlMessages.json

@@ -836,6 +836,7 @@
   "registration.lead": "With an account on {instance} you\"ll be able to follow people on any server in the fediverse.",
   "registration.sign_up": "Sign up",
   "registration.tos": "Terms of Service",
+  "registration.reason": "Reason for Joining",
   "relative_time.days": "{number}d",
   "relative_time.hours": "{number}h",
   "relative_time.just_now": "now",

app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_form-test.js.snap

@@ -3,11 +3,8 @@
 exports[`<LoginForm /> renders correctly 1`] = `
 <form
   className="simple_form new_user"
-  onSubmit={[Function]}
->
-  <fieldset
-    disabled={false}
 >
+  <fieldset>
     <div
       className="fields-group"
     >

app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_page-test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<LoginPage /> renders correctly 1`] = `
+exports[`<LoginPage /> renders correctly on load 1`] = `
 <form
   className="simple_form new_user"
   onSubmit={[Function]}
@@ -59,4 +59,4 @@ exports[`<LoginPage /> renders correctly 1`] = `
 </form>
 `;
 
-exports[`<LoginPage /> renders correctly 2`] = `null`;
+exports[`<LoginPage /> renders correctly on load 2`] = `null`;

app/styles/about.scss

@@ -34,6 +34,7 @@ $small-breakpoint: 960px;
     flex-wrap: nowrap;
     padding: 14px 0;
     box-sizing: border-box;
+    position: relative;
 
     @media screen and (max-width: 1024px) {
       padding: 14px 20px;
@@ -1712,7 +1713,40 @@ $small-breakpoint: 960px;
   .header,
   .container {
     position: relative;
-    z-index: 1;
+  }
+
+  .otp-form-overlay__container {
+    z-index: 9998;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba($base-overlay-background, 0.7);
+
+    .otp-form-overlay__form {
+      @include standard-panel-shadow;
+      border-radius: 10px;
+      z-index: 9999;
+      margin: 0 auto;
+      max-width: 800px;
+      position: relative;
+      padding: 20px;
+      background-color: var(--background-color);
+      display: flex;
+      flex-direction: column;
+
+      .simple_form {
+        padding: 30px 50px 50px;
+      }
+
+      .otp-form-overlay__close {
+        align-self: flex-end;
+      }
+    }
   }
 }
 
@@ -1725,3 +1759,10 @@ $small-breakpoint: 960px;
   bottom: 0;
   right: 0;
 }
+
+h1.otp-login {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 800;
+  padding: 10px 0;
+}

app/styles/accounts.scss

@@ -13,7 +13,7 @@
     &:active,
     &:focus {
       .card__bar {
-        background: var(--brand-color--med);
+        background: var(--foreground-color);
       }
     }
   }
@@ -92,6 +92,11 @@
         overflow: hidden;
         text-overflow: ellipsis;
       }
+
+      bdi,
+      span.verified-icon {
+        display: inline-block;
+      }
     }
   }
 }
@@ -584,7 +589,7 @@ a .account__avatar {
 }
 
 .account__section-headline {
-  background: var(--accent-color--faint);
+  background: var(--foreground-color);
 
   button,
   a {

app/styles/application.scss

@@ -71,3 +71,6 @@
 @import 'components/error-boundary';
 @import 'components/video-player';
 @import 'components/audio-player';
+@import 'components/profile_hover_card';
+@import 'components/filters';
+@import 'components/mfa_form';

app/styles/basics.scss

@@ -170,7 +170,10 @@ body {
   &__title {
     font-weight: bold;
     font-size: 16px;
-    margin-bottom: 1em;
+  }
+
+  &__explanation {
+    margin-top: 1em;
   }
 
   &__dismiss {
@@ -215,3 +218,14 @@ noscript {
     }
   }
 }
+
+.floating-link {
+  width: 100%;
+  height: 100%;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  z-index: 9999;
+}

app/styles/components/account-header.scss

@@ -19,9 +19,10 @@
     overflow: hidden;
     height: 350px;
     position: relative;
-    background: var(--accent-color--med);
+    background: var(--accent-color--faint);
     @media screen and (max-width: 895px) {height: 225px;}
     &--none {height: 125px;}
+
     img {
       object-fit: cover;
       display: block;
@@ -30,6 +31,10 @@
       margin: 0;
     }
 
+    .still-image {
+      height: 100%;
+    }
+
     .still-image--play-on-hover::before {
       content: 'GIF';
       position: absolute;
@@ -53,7 +58,7 @@
     min-height: 74px;
     width: 100%;
     position: relative;
-    background: var(--accent-color--med);
+    background: var(--background-color);
     @media (min-width: 895px) {height: 74px;}
   }
 

app/styles/components/audio-player.scss

@@ -177,7 +177,7 @@
     padding: 5px;
 
     &__label {
-      color: white;
+      color: #ffffff;
     }
 
     button {

app/styles/components/buttons.scss

@@ -102,7 +102,7 @@ button {
     &:focus,
     &:hover {
       border-color: var(--brand-color);
-      color: var(--primary-text-color);
+      color: var(--background-color);
     }
 
     &:disabled {

app/styles/components/columns.scss

@@ -205,13 +205,14 @@
 }
 
 .column-back-button {
-  background: var(--accent-color--med);
+  background: var(--accent-color--faint);
   color: var(--highlight-text-color);
   cursor: pointer;
   flex: 0 0 auto;
   font-size: 16px;
   line-height: inherit;
   border: 0;
+  border-radius: 10px 10px 0 0;
   text-align: unset;
   padding: 15px;
   margin: 0;

app/styles/components/compose-form.scss

@@ -298,6 +298,7 @@
     display: flex;
     justify-content: space-between;
     flex: 0 0 auto;
+    border-radius: 0 0 5px 5px;
 
     .compose-form__buttons {
       display: flex;

app/styles/components/detailed-status.scss

@@ -62,6 +62,7 @@
   border-bottom: 1px solid var(--brand-color--faint);
   display: flex;
   flex-direction: row;
+  border-radius: 0 0 10px 10px;
 }
 
 .detailed-status__link {

app/styles/components/display-name.scss

@@ -41,6 +41,7 @@ a.account__display-name {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  position: relative;
 }
 
 .display-name__html {

app/styles/components/drawer.scss

@@ -20,7 +20,7 @@
 .column,
 .drawer {
   flex: 1 1 100%;
-  overflow: hidden;
+  overflow: visible;
 }
 
 .drawer__pager {

app/styles/components/filters.scss

@@ -0,0 +1,101 @@
+.filter-settings-panel {
+  h1 {
+    font-size: 18px;
+    line-height: 1.25;
+    color: var(--primary-text-color);
+    font-weight: 400;
+    margin: 20px auto;
+  }
+
+  .item-list article {
+    border-bottom: 1px solid var(--primary-text-color--faint);
+
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+
+  .fields-group .two-col {
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+
+    div.input {
+      width: 45%;
+      margin-right: 20px;
+
+      .label_input {
+        width: 100%;
+      }
+    }
+
+    @media(max-width: 485px) {
+      div.input {
+        width: 100%;
+        margin-right: 5px;
+
+        .label_input {
+          width: auto;
+        }
+      }
+    }
+  }
+
+  .filter__container {
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+
+    .filter__phrase,
+    .filter__contexts,
+    .filter__details {
+      padding: 5px 0;
+    }
+
+    span.filter__list-label {
+      padding-right: 5px;
+      color: var(--primary-text-color--faint);
+    }
+
+    span.filter__list-value span {
+      padding-right: 5px;
+      text-transform: capitalize;
+
+      &::after {
+        content: ',';
+      }
+
+      &:last-of-type {
+        &::after {
+          content: '';
+        }
+      }
+    }
+
+    .filter__delete {
+      display: flex;
+      margin: 10px;
+      align-items: baseline;
+      cursor: pointer;
+      height: 20px;
+
+      span.filter__delete-label {
+        color: var(--primary-text-color--faint);
+        font-size: 14px;
+        font-weight: 800;
+      }
+
+      .filter__delete-icon {
+        background: none;
+        color: var(--primary-text-color--faint);
+        padding: 0 5px;
+        margin: 0 auto;
+        font-size: 16px;
+      }
+    }
+
+  }
+}

app/styles/components/mfa_form.scss

@@ -0,0 +1,81 @@
+.security-settings-panel {
+  margin: 20px;
+
+  h1.security-settings-panel__setup-otp {
+    font-size: 20px;
+    line-height: 1.25;
+    color: var(--primary-text-color);
+    font-weight: 600;
+  }
+
+  h2.security-settings-panel__setup-otp {
+      display: block;
+      font-size: 16px;
+      line-height: 1.5;
+      color: var(--primary-text-color--faint);
+      font-weight: 400;
+    }
+
+  div {
+    display: block;
+    margin: 10px 0;
+  }
+
+  .security-warning {
+    color: var(--primary-text-color);
+    padding: 15px 20px;
+    font-size: 14px;
+    background-color: var(--warning-color--faint);
+    margin: 5px 20px;
+    border-radius: 8px;
+    margin: 20px auto;
+  }
+
+  .backup_codes {
+    margin: 20px;
+    font-weight: bold;
+    padding: 15px 20px;
+    font-size: 14px;
+    background-color: var(--brand-color--faint);
+    border-radius: 8px;
+    margin: 20px;
+    text-align: center;
+    position: relative;
+    min-height: 125px;
+
+    .backup_code {
+      margin: 5px auto;
+    }
+
+    .loading-indicator {
+      position: absolute;
+    }
+  }
+
+  .security-settings-panel__setup-otp__buttons {
+    margin: 20px;
+    display: flex;
+    justify-content: space-between;
+
+    .button {
+      min-width: 182px;
+    }
+  }
+
+  div.confirm-key {
+    display: block;
+    font-size: 16px;
+    line-height: 1.5;
+    color: var(--primary-text-color--faint);
+    font-weight: 400;
+    margin: 0 0 20px 20px;
+  }
+}
+
+form.otp-auth {
+  .error-box {
+    width: 100%;
+    text-align: center;
+    color: $error-red;
+  }
+}

app/styles/components/profile_hover_card.scss

@@ -0,0 +1,131 @@
+.display-name__account {
+  position: relative;
+  cursor: pointer;
+}
+
+.display-name .profile-hover-card {
+  white-space: normal;
+}
+
+.profile-hover-card {
+  position: absolute;
+  pointer-events: none;
+  opacity: 0;
+  transition-property: opacity;
+  transition-duration: 0.2s;
+  width: 320px;
+  z-index: 998;
+  left: -10px;
+  padding: 20px;
+  margin-bottom: 10px;
+
+  &--visible {
+    opacity: 1;
+    pointer-events: all;
+  }
+
+  @media(min-width: 750px) {
+    left: -100px;
+  }
+
+  .profile-hover-card__container {
+    @include standard-panel;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .profile-hover-card__action-button {
+    z-index: 999;
+    position: absolute;
+    right: 20px;
+    top: 40px;
+  }
+
+  .user-panel {
+    box-shadow: none;
+    width: auto;
+
+    .user-panel-stats-item a strong {
+      text-decoration: none;
+    }
+
+    &__header {
+      height: 96px;
+    }
+
+    .user-panel-stats-item {
+      margin-right: 10px;
+
+      &__label,
+      &__value {
+        display: inline;
+        font-size: 15px;
+      }
+
+      &__value {
+        margin-right: 5px;
+      }
+    }
+  }
+
+  .relationship-tag {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    z-index: 1;
+  }
+
+  .profile-hover-card__badges {
+    display: flex;
+    position: absolute;
+    top: 110px;
+    left: 120px;
+
+    .badge {
+      padding: 2px 4px;
+      margin-right: 5px;
+      border-radius: 3px;
+      font-size: 11px;
+      opacity: 1;
+    }
+  }
+
+  .profile-hover-card__bio {
+    margin: 0 20px 20px;
+    max-height: 4em;
+
+    a {
+      color: var(--highlight-text-color);
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      width: 100%;
+      height: 20px;
+      bottom: 0;
+      left: 0;
+      background: linear-gradient(0deg, var(--foreground-color) 0%, var(--foreground-color), 80%, transparent);
+    }
+  }
+}
+
+.detailed-status {
+  .profile-hover-card {
+    top: 0;
+    left: 60px;
+  }
+}
+
+/* Prevent floating avatars from intercepting with current card */
+.status,
+.detailed-status {
+  .floating-link {
+    display: none;
+  }
+
+  &:hover .floating-link {
+    display: block;
+  }
+}

app/styles/components/react-toggle.scss

@@ -32,7 +32,7 @@
   height: 24px;
   padding: 0;
   border-radius: 30px;
-  background-color: var(--foreground-color);
+  background-color: hsla(var(--brand-color_h), var(--brand-color_s), var(--brand-color_l), 0.35);
   transition: background-color 0.2s ease;
 }
 

app/styles/components/status.scss

@@ -1,3 +1,61 @@
+.status__content {
+  p,
+  li {
+    strong {
+      font-weight: bold;
+    }
+  }
+
+  p,
+  li {
+    em {
+      font-style: italic;
+    }
+  }
+
+  ul,
+  ol,
+  blockquote {
+    margin-bottom: 20px;
+    margin-left: 15px;
+  }
+
+  ul {
+    list-style: disc inside none;
+  }
+
+  ol {
+    list-style: decimal inside none;
+  }
+
+  blockquote p {
+    font-style: italic;
+  }
+
+  code {
+    font-family: 'Roboto Mono', monospace;
+    cursor: text;
+  }
+
+  /* Inline code */
+  p > code {
+    padding: 2px 4px;
+    background-color: var(--background-color);
+    border-radius: 4px;
+  }
+
+  /* Code block */
+  pre {
+    line-height: 1.6em;
+    overflow-x: auto;
+    border-radius: 6px;
+    padding: 8px 12px;
+    margin-bottom: 20px;
+    word-break: break-all;
+    background-color: var(--background-color);
+  }
+}
+
 .status__content--with-action {
   cursor: pointer;
 }
@@ -152,7 +210,6 @@
 .status__info .status__display-name {
   display: block;
   max-width: 100%;
-  padding-right: 25px;
 }
 
 .status__info {
@@ -160,6 +217,16 @@
   z-index: 4;
 }
 
+.status__profile,
+.detailed-status__profile {
+  display: block;
+  max-width: 100%;
+}
+
+.status__profile {
+  padding-right: 25px;
+}
+
 .status-check-box {
   border-bottom: 1px solid var(--background-color);
   display: flex;

app/styles/components/tabs-bar.scss

@@ -255,9 +255,9 @@
     display: block;
     margin-right: 30px;
     border: 0;
-    height: 50px;
+    height: 40px;
     overflow: hidden;
-    padding: 10px 0;
+    padding: 13px 0 0;
     box-sizing: border-box;
     filter: brightness(0%) grayscale(100%) invert(100%);
     & span {display: none !important;}

app/styles/components/theme-toggle.scss

@@ -2,15 +2,21 @@
   .setting-toggle {
 
     &__label {
-      margin-bottom: 0px;
+      margin-bottom: 0;
       vertical-align: middle;
     }
 
     .react-toggle {
       vertical-align: middle;
 
+      &-track {
+        background-color: var(--foreground-color);
+      }
+
       &-track-check,
       &-track-x {
+        display: flex;
+        align-items: center;
         height: 15px;
         color: #fff;
       }

app/styles/components/user-panel.scss

@@ -3,7 +3,23 @@
   display: flex;
   width: 265px;
   flex-direction: column;
-  overflow-y: hidden;
+
+  .user-panel__account__name {
+    display: inline;
+  }
+
+  .verified-icon {
+    opacity: 1;
+  }
+
+  &,
+  .user-panel__account__name,
+  .user-panel__account__username {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--primary-text-color--faint);
+  }
 
   &__header {
     display: block;
@@ -42,13 +58,13 @@
   &__meta {
     display: block;
     padding: 6px 20px 17px;
-    opacity: 0.6;
+    // opacity: 0.6;
   }
 
   &__account {
     a {
       text-decoration: none;
-      color: var(--primary-text-color);
+      color: var(--primary-text-color--faint);
     }
 
     &__name {
@@ -56,7 +72,7 @@
       font-size: 20px;
       font-weight: bold;
       line-height: 24px;
-      color: var(--primary-text-color);
+      color: var(--primary-text-color--faint);
     }
 
     &:hover & {
@@ -89,7 +105,7 @@
 
     a {
       text-decoration: none;
-      color: var(--primary-text-color);
+      color: var(--primary-text-color--faint);
 
       &:hover {
         opacity: 0.8;
@@ -99,7 +115,7 @@
     &__value {
       display: block;
       width: 100%;
-      color: var(--primary-text-color);
+      color: var(--primary-text-color--faint);
       font-size: 20px;
       font-weight: 800;
       line-height: 24px;

app/styles/components/wtf-panel.scss

@@ -8,6 +8,10 @@
   box-sizing: border-box;
   background: var(--foreground-color);
 
+  &:first-child {
+    margin-top: 0;
+  }
+
   &:not(:last-of-type) {
     margin-bottom: 10px;
   }

app/styles/donations.scss

@@ -169,7 +169,7 @@ body.admin {
 }
 
 .funding-panel {
-  margin: 20px 0;
+  margin-top: 15px;
 
   strong {
     font-weight: bold;

app/styles/emoji_picker.scss

@@ -109,6 +109,7 @@
   input {
     font-size: 14px;
     font-weight: 400;
+    color: var(--primary-text-color);
     padding: 7px 9px;
     font-family: inherit;
     display: block;

app/styles/forms.scss

@@ -342,6 +342,15 @@ code {
     }
   }
 
+  input[type=text][disabled],
+  input[type=number][disabled],
+  input[type=email][disabled],
+  input[type=password][disabled],
+  textarea[disabled] {
+    color: var(--primary-text-color--faint);
+    border-color: var(--primary-text-color--faint);
+  }
+
   .input.field_with_errors {
     label {
       color: lighten($error-red, 12%);

app/styles/loading.scss

@@ -188,6 +188,7 @@
   align-items: center;
   justify-content: center;
   padding: 20px;
+  border-radius: 0 0 10px 10px;
 
   & > div {
     width: 100%;

app/styles/themes.scss

@@ -30,12 +30,14 @@ body {
   --accent-color: hsl(var(--accent-color_hsl));
   --primary-text-color: hsl(var(--primary-text-color_hsl));
   --background-color: hsl(var(--background-color_hsl));
+  --warning-color: hsla(var(--warning-color_hsl));
 
   // Meta-variables
   --brand-color_hsl: var(--brand-color_h), var(--brand-color_s), var(--brand-color_l);
   --accent-color_hsl: var(--accent-color_h), var(--accent-color_s), var(--accent-color_l);
   --primary-text-color_hsl: var(--primary-text-color_h), var(--primary-text-color_s), var(--primary-text-color_l);
   --background-color_hsl: var(--background-color_h), var(--background-color_s), var(--background-color_l);
+  --warning-color_hsl: var(--warning-color_h), var(--warning-color_s), var(--warning-color_l);
   --accent-color_h: calc(var(--brand-color_h) - 15);
   --accent-color_s: 86%;
   --accent-color_l: 44%;
@@ -51,6 +53,7 @@ body {
     calc(var(--accent-color_l) + 3%)
   );
   --primary-text-color--faint: hsla(var(--primary-text-color_hsl), 0.6);
+  --warning-color--faint: hsla(var(--warning-color_hsl), 0.5);
 }
 
 body.theme-mode-light {
@@ -69,6 +72,9 @@ body.theme-mode-light {
   --background-color_h: 0;
   --background-color_s: 0%;
   --background-color_l: 94.9%;
+  --warning-color_h: 0;
+  --warning-color_s: 100%;
+  --warning-color_l: 66%;
 
   // Modifiers
   --brand-color--hicontrast: hsl(
@@ -94,6 +100,9 @@ body.theme-mode-dark {
   --background-color_h: 0;
   --background-color_s: 0%;
   --background-color_l: 20%;
+  --warning-color_h: 0;
+  --warning-color_s: 100%;
+  --warning-color_l: 66%;
 
   // Modifiers
   --brand-color--hicontrast: hsl(

app/styles/ui.scss

@@ -654,6 +654,7 @@
 
       &::after {
         bottom: -1px;
+        border-color: transparent transparent var(--foreground-color);
       }
     }
   }

package.json

@@ -100,6 +100,7 @@
     "postcss-object-fit-images": "^1.1.2",
     "prop-types": "^15.5.10",
     "punycode": "^2.1.0",
+    "qrcode.react": "^1.0.0",
     "rails-ujs": "^5.2.3",
     "react": "^16.13.1",
     "react-color": "^2.18.1",

yarn.lock

@@ -9335,6 +9335,20 @@ q@^1.1.2:
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
+qr.js@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
+  integrity sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8=
+
+qrcode.react@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-1.0.0.tgz#7e8889db3b769e555e8eb463d4c6de221c36d5de"
+  integrity sha512-jBXleohRTwvGBe1ngV+62QvEZ/9IZqQivdwzo9pJM4LQMoCM2VnvNBnKdjvGnKyDZ/l0nCDgsPod19RzlPvm/Q==
+  dependencies:
+    loose-envify "^1.4.0"
+    prop-types "^15.6.0"
+    qr.js "0.0.0"
+
 qs@6.7.0:
   version "6.7.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"