Merge branch 'develop' into 'edit_profile_checkbox_toggle'

# Conflicts:
#   app/soapbox/features/edit_profile/index.js
This commit is contained in:
Curtis 2020-08-10 19:08:29 +00:00
commit bb5091a979
60 changed files with 301 additions and 23 deletions

Binary file not shown.

Binary file not shown.

BIN
app/soapbox/actions/mfa.js Normal file

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

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

View file

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

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -34,6 +34,7 @@ $small-breakpoint: 960px;
flex-wrap: nowrap; flex-wrap: nowrap;
padding: 14px 0; padding: 14px 0;
box-sizing: border-box; box-sizing: border-box;
position: relative;
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
padding: 14px 20px; padding: 14px 20px;
@ -1712,7 +1713,40 @@ $small-breakpoint: 960px;
.header, .header,
.container { .container {
position: relative; 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; bottom: 0;
right: 0; right: 0;
} }
h1.otp-login {
font-size: 16px;
line-height: 24px;
font-weight: 800;
padding: 10px 0;
}

View file

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

View file

@ -72,3 +72,5 @@
@import 'components/video-player'; @import 'components/video-player';
@import 'components/audio-player'; @import 'components/audio-player';
@import 'components/profile_hover_card'; @import 'components/profile_hover_card';
@import 'components/filters';
@import 'components/mfa_form';

View file

@ -19,7 +19,7 @@
overflow: hidden; overflow: hidden;
height: 350px; height: 350px;
position: relative; position: relative;
background: var(--accent-color--med); background: var(--accent-color--faint);
@media screen and (max-width: 895px) {height: 225px;} @media screen and (max-width: 895px) {height: 225px;}
&--none {height: 125px;} &--none {height: 125px;}
@ -58,7 +58,7 @@
min-height: 74px; min-height: 74px;
width: 100%; width: 100%;
position: relative; position: relative;
background: var(--accent-color--med); background: var(--background-color);
@media (min-width: 895px) {height: 74px;} @media (min-width: 895px) {height: 74px;}
} }

View file

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

View file

@ -205,7 +205,7 @@
} }
.column-back-button { .column-back-button {
background: var(--accent-color--med); background: var(--accent-color--faint);
color: var(--highlight-text-color); color: var(--highlight-text-color);
cursor: pointer; cursor: pointer;
flex: 0 0 auto; flex: 0 0 auto;

View file

@ -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;
}
}
}
}

View file

@ -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;
}
}

View file

@ -32,7 +32,7 @@
height: 24px; height: 24px;
padding: 0; padding: 0;
border-radius: 30px; 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; transition: background-color 0.2s ease;
} }

View file

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

View file

@ -9,6 +9,10 @@
.react-toggle { .react-toggle {
vertical-align: middle; vertical-align: middle;
&-track {
background-color: var(--foreground-color);
}
&-track-check, &-track-check,
&-track-x { &-track-x {
display: flex; display: flex;

View file

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

View file

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

View file

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

View file

@ -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 { .input.field_with_errors {
label { label {
color: lighten($error-red, 12%); color: lighten($error-red, 12%);

View file

@ -200,7 +200,7 @@
} }
.icon-button.disabled { .icon-button.disabled {
color: var(--foreground-color); color: var(--brand-color);
} }
} }

View file

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

View file

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

View file

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

View file

@ -9320,6 +9320,20 @@ q@^1.1.2:
resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7" resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc= 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: qs@6.7.0:
version "6.7.0" version "6.7.0"
resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc" resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"