gitea/nas
1
0
Fork 2
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Change design of confirmation modals in web UI (#30884)

Browse source 
Co-authored-by: Renaud Chaput <renchap@gmail.com>
This commit is contained in:
Eugen Rochko 2024-07-25 19:05:54 +02:00 • committed by GitHub
parent ff6d2ec343
commit 8818748b90
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
31 changed files with 554 additions and 489 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6055,6 +6055,25 @@ a.status-card {
}
}
&__confirmation {
font-size: 14px;
line-height: 20px;
color: $darker-text-color;
h1 {
font-size: 16px;
line-height: 24px;
color: $primary-text-color;
font-weight: 500;
margin-bottom: 8px;
}
strong {
font-weight: 700;
color: $primary-text-color;
}
}
&__bullet-points {
display: flex;
flex-direction: column;
@ -6140,11 +6159,8 @@ a.status-card {
}
.boost-modal,
.confirmation-modal,
.report-modal,
.actions-modal,
.mute-modal,
.block-modal,
.compare-history-modal {
background: lighten($ui-secondary-color, 8%);
color: $inverted-text-color;
@ -6166,10 +6182,7 @@ a.status-card {
}
}
.boost-modal__action-bar,
.confirmation-modal__action-bar,
.mute-modal__action-bar,
.block-modal__action-bar {
.boost-modal__action-bar {
display: flex;
justify-content: space-between;
align-items: center;
@ -6192,16 +6205,6 @@ a.status-card {
}
}
.mute-modal,
.block-modal {
line-height: 24px;
}
.mute-modal .react-toggle,
.block-modal .react-toggle {
vertical-align: middle;
}
.report-modal {
width: 90vw;
max-width: 700px;
@ -6596,34 +6599,6 @@ a.status-card {
}
}
.confirmation-modal__action-bar,
.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%);
background-color: transparent;
}
}
.confirmation-modal__container,
.mute-modal__container,
.block-modal__container,
.report-modal__target {
padding: 30px;
font-size: 16px;
@ -6657,31 +6632,10 @@ a.status-card {
}
}
.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-inline-start: 8px;
}
}
}
.report-modal__target {
padding: 15px;