tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Add explanation to mute dialog, refactor and clean up mute/block UI

Browse Source 
Port 9027bfff0c to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
ThibG
2019-09-29 21:46:05 +02:00
committed by Thibaut Girka
parent 332be562ea
commit 88481c9653
14 changed files with 221 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
app/javascript/flavours/glitch/styles/components/modal.scss
View File

@@ -405,7 +405,8 @@
.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;
@@ -465,7 +466,8 @@
.boost-modal__action-bar,
.favourite-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;
@@ -495,11 +497,13 @@
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;
}
@@ -712,27 +716,29 @@
}
.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__do_not_ask_again {
padding-left: 20px;
padding-right: 20px;
@@ -747,10 +753,10 @@
.confirmation-modal__container,
.mute-modal__container,
.block-modal__container,
.report-modal__target {
padding: 30px;
font-size: 16px;
text-align: center;
strong {
font-weight: 500;
@@ -763,6 +769,31 @@
}
}
.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;