Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Add explanation to mute dialog, refactor and clean up mute/block UI (#11992)

Browse source 
* Add some explanation to the mute modal dialog

* Remove `isSubmitting` from mute modal code, this wasn't used

* Refactor block modal

Signed-off-by: Thibaut Girka <thib@sitedethib.com>

* Refactor SCSS a bit

* Put mute modal toggle to the same side as in the report dialog for consistency

* Reword mute explanation

* Fix mute explanation styling

* Left-align all text in mute confirmation modal
This commit is contained in:
ThibG 2019-09-29 21:46:05 +02:00 • committed by Eugen Rochko
parent 5f69eb89e2
commit 9027bfff0c
14 changed files with 222 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

73
app/javascript/styles/mastodon/components.scss
View file

@ -4533,7 +4533,8 @@ a.status-card.compact:hover {
.confirmation-modal,
.report-modal,
.actions-modal,
.mute-modal {
.mute-modal,
.block-modal {
background: lighten($ui-secondary-color, 8%);
color: $inverted-text-color;
border-radius: 8px;
@ -4587,7 +4588,8 @@ a.status-card.compact:hover {
.boost-modal__action-bar,
.confirmation-modal__action-bar,
.mute-modal__action-bar {
.mute-modal__action-bar,
.block-modal__action-bar {
display: flex;
justify-content: space-between;
background: $ui-secondary-color;
@ -4615,11 +4617,13 @@ a.status-card.compact:hover {
font-size: 14px;
}
.mute-modal {
.mute-modal,
.block-modal {
line-height: 24px;
}
.mute-modal .react-toggle {
.mute-modal .react-toggle,
.block-modal .react-toggle {
vertical-align: middle;
}
@ -4830,33 +4834,35 @@ a.status-card.compact:hover {
}
.confirmation-modal__action-bar,
.mute-modal__action-bar {
.confirmation-modal__secondary-button,
.confirmation-modal__cancel-button,
.mute-modal__cancel-button {
background-color: transparent;
color: $lighter-text-color;
font-size: 14px;
font-weight: 500;
&:hover,
&:focus,
&:active {
color: darken($lighter-text-color, 4%);
}
}
.mute-modal__action-bar,
.block-modal__action-bar {
.confirmation-modal__secondary-button {
flex-shrink: 1;
}
}
.confirmation-modal__secondary-button,
.confirmation-modal__cancel-button,
.mute-modal__cancel-button,
.block-modal__cancel-button {
background-color: transparent;
color: $lighter-text-color;
font-size: 14px;
font-weight: 500;
&:hover,
&:focus,
&:active {
color: darken($lighter-text-color, 4%);
}
}
.confirmation-modal__container,
.mute-modal__container,
.block-modal__container,
.report-modal__target {
padding: 30px;
font-size: 16px;
text-align: center;
strong {
font-weight: 500;
@ -4869,6 +4875,31 @@ a.status-card.compact:hover {
}
}
.confirmation-modal__container,
.report-modal__target {
text-align: center;
}
.block-modal,
.mute-modal {
&__explanation {
margin-top: 20px;
}
.setting-toggle {
margin-top: 20px;
margin-bottom: 24px;
display: flex;
align-items: center;
&__label {
color: $inverted-text-color;
margin: 0;
margin-left: 8px;
}
}
}
.report-modal__target {
padding: 15px;