Merge branch 'develop' into 'edit_profile_checkbox_toggle'
# Conflicts: # app/soapbox/features/edit_profile/index.js
This commit is contained in:
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
BIN
app/soapbox/actions/mfa.js
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
@ -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"
|
||||||
>
|
>
|
||||||
|
|
|
@ -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.
BIN
app/soapbox/features/auth_login/components/otp_auth_form.js
Normal file
BIN
app/soapbox/features/auth_login/components/otp_auth_form.js
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
app/soapbox/features/security/mfa_form.js
Normal file
BIN
app/soapbox/features/security/mfa_form.js
Normal file
Binary file not shown.
Binary file not shown.
BIN
app/soapbox/features/ui/components/features_panel.js
Normal file
BIN
app/soapbox/features/ui/components/features_panel.js
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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;}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
101
app/styles/components/filters.scss
Normal file
101
app/styles/components/filters.scss
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
81
app/styles/components/mfa_form.scss
Normal file
81
app/styles/components/mfa_form.scss
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -169,7 +169,7 @@ body.admin {
|
||||||
}
|
}
|
||||||
|
|
||||||
.funding-panel {
|
.funding-panel {
|
||||||
margin: 20px 0;
|
margin-top: 15px;
|
||||||
|
|
||||||
strong {
|
strong {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
|
@ -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%);
|
||||||
|
|
|
@ -200,7 +200,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-button.disabled {
|
.icon-button.disabled {
|
||||||
color: var(--foreground-color);
|
color: var(--brand-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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(
|
||||||
|
|
|
@ -654,6 +654,7 @@
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
bottom: -1px;
|
bottom: -1px;
|
||||||
|
border-color: transparent transparent var(--foreground-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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",
|
||||||
|
|
14
yarn.lock
14
yarn.lock
|
@ -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"
|
||||||
|
|
Loading…
Reference in a new issue