mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Styling adjustments to timeline notifications

Browse source
This commit is contained in:
Evan Hahn 2021-09-07 14:55:03 -05:00 • committed by GitHub
parent 4bed918cf8
commit 7f34bedd87
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 437 additions and 360 deletions
Download patch file Download diff file Expand all files Collapse all files

149
stylesheets/components/SystemMessage.scss
View file

@ -16,245 +16,259 @@
@include font-body-2;
align-items: center;
display: flex;
flex-direction: row;
flex-direction: column;
justify-content: center;
text-align: center;
line-height: 16px;
margin-bottom: 16px;
margin-top: 16px;
@include light-theme {
color: $color-black;
color: $color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
}
&--multiline {
flex-direction: column;
}
&__line {
align-items: center;
display: flex;
&:not(:first-child) {
margin-top: 12px;
}
}
&__text {
&__contents {
max-width: 400px;
}
text-align: center;
user-select: none;
&__icon {
height: 16px;
flex: 0 0 16px;
margin-right: 8px;
width: 16px;
vertical-align: middle;
p {
display: block;
margin: {
block: {
start: 0;
end: 4px;
}
inline: {
start: 0;
end: 0;
}
}
@include light-theme {
background-color: $color-black;
}
@include dark-theme {
background-color: $color-gray-25;
&:first-child {
display: inline-block;
}
&:last-child {
margin-block-end: 0;
}
}
&--audio-incoming {
&::before {
content: '';
display: inline-block;
height: 16px;
margin-right: 8px;
width: 16px;
vertical-align: middle;
@include light-theme {
background-color: $color-gray-60;
}
@include dark-theme {
background-color: $color-gray-25;
}
}
&--icon-audio-incoming::before {
@include system-message-icon(
'../images/icons/v2/phone-incoming-16.svg',
'../images/icons/v2/phone-incoming-solid-16.svg'
);
}
&--audio-missed {
&--icon-audio-missed::before {
@include system-message-icon(
'../images/icons/v2/phone-x-16.svg',
'../images/icons/v2/phone-x-solid-16.svg'
);
}
&--audio-outgoing {
&--icon-audio-outgoing::before {
@include system-message-icon(
'../images/icons/v2/phone-outgoing-16.svg',
'../images/icons/v2/phone-outgoing-solid-16.svg'
);
}
&--group {
&--icon-group::before {
@include system-message-icon(
'../images/icons/v2/group-outline-24.svg',
'../images/icons/v2/group-solid-24.svg'
);
}
&--group-access {
&--icon-group-access::before {
@include system-message-icon(
'../images/icons/v2/megaphone-16.svg',
'../images/icons/v2/megaphone-solid-16.svg'
);
}
&--group-add {
&--icon-group-add::before {
@include system-message-icon(
'../images/icons/v2/member-added-16.svg',
'../images/icons/v2/member-added-solid-16.svg'
);
}
&--group-approved {
&--icon-group-approved::before {
@include system-message-icon(
'../images/icons/v2/member-accepted-16.svg',
'../images/icons/v2/member-accepted-solid-16.svg'
);
}
&--group-avatar {
&--icon-group-avatar::before {
@include system-message-icon(
'../images/icons/v2/photo-16.svg',
'../images/icons/v2/photo-solid-16.svg'
);
}
&--group-decline {
&--icon-group-decline::before {
@include system-message-icon(
'../images/icons/v2/member-declined-16.svg',
'../images/icons/v2/member-declined-solid-16.svg'
);
}
&--group-edit {
&--icon-group-edit::before {
@include system-message-icon(
'../images/icons/v2/edit-16.svg',
'../images/icons/v2/edit-solid-16.svg'
);
}
&--group-leave {
&--icon-group-leave::before {
@include system-message-icon(
'../images/icons/v2/leave-16.svg',
'../images/icons/v2/leave-solid-16.svg'
);
}
&--group-remove {
&--icon-group-remove::before {
@include system-message-icon(
'../images/icons/v2/member-remove-16.svg',
'../images/icons/v2/member-remove-solid-16.svg'
);
}
&--info {
&--icon-info::before {
@include system-message-icon(
'../images/icons/v2/info-16.svg',
'../images/icons/v2/info-solid-24.svg'
);
}
&--phone {
&--icon-phone::before {
@include system-message-icon(
'../images/icons/v2/phone-right-outline-24.svg',
'../images/icons/v2/phone-right-solid-24.svg'
);
}
&--profile {
&--icon-profile::before {
@include system-message-icon(
'../images/icons/v2/profile-outline-20.svg',
'../images/icons/v2/profile-outline-20.svg'
);
}
&--safety-number {
&--icon-safety-number::before {
@include system-message-icon(
'../images/icons/v2/safety-number-outline-24.svg',
'../images/icons/v2/safety-number-solid-24.svg'
);
}
&--session-refresh {
&--icon-session-refresh::before {
@include system-message-icon(
'../images/icons/v2/refresh-16.svg',
'../images/icons/v2/refresh-16.svg'
);
}
&--timer {
&--icon-timer::before {
@include system-message-icon(
'../images/icons/v2/timer-outline-24.svg',
'../images/icons/v2/timer-solid-16.svg'
);
}
&--timer-disabled {
&--icon-timer-disabled::before {
@include system-message-icon(
'../images/icons/v2/timer-disabled-outline-24.svg',
'../images/icons/v2/timer-disabled-solid-16.svg'
);
}
&--unsupported {
&--icon-unsupported::before {
@include system-message-icon(
'../images/icons/v2/error-outline-24.svg',
'../images/icons/v2/error-solid-24.svg'
);
&--can-process {
@include system-message-icon(
'../images/icons/v2/check-circle-outline-24.svg',
'../images/icons/v2/check-circle-solid-24.svg'
);
}
}
&--unsynced {
&--icon-unsupported--can-process::before {
@include system-message-icon(
'../images/icons/v2/check-circle-outline-24.svg',
'../images/icons/v2/check-circle-solid-24.svg'
);
}
&--icon-unsynced::before {
@include system-message-icon(
'../images/icons/v2/info-outline-24.svg',
'../images/icons/v2/info-solid-24.svg'
);
}
&--verified {
&--icon-verified::before {
@include system-message-icon(
'../images/icons/v2/check-24.svg',
'../images/icons/v2/check-24.svg'
);
}
&--verified-not {
&--icon-verified-not::before {
@include system-message-icon(
'../images/icons/v2/safety-number-outline-24.svg',
'../images/icons/v2/safety-number-solid-24.svg'
);
}
&--video {
&--icon-video::before {
@include system-message-icon(
'../images/icons/v2/video-outline-24.svg',
'../images/icons/v2/video-outline-24.svg'
);
}
&--video-incoming {
&--icon-video-incoming::before {
@include system-message-icon(
'../images/icons/v2/video-incoming-16.svg',
'../images/icons/v2/video-incoming-solid-16.svg'
);
}
&--video-missed {
&--icon-video-missed::before {
@include system-message-icon(
'../images/icons/v2/video-x-16.svg',
'../images/icons/v2/video-x-solid-16.svg'
);
}
&--video-outgoing {
&--icon-video-outgoing::before {
@include system-message-icon(
'../images/icons/v2/video-outgoing-16.svg',
'../images/icons/v2/video-outgoing-solid-16.svg'
);
}
&--warning {
&--icon-warning::before {
@include system-message-icon(
'../images/icons/v2/error-outline-12.svg',
'../images/icons/v2/error-outline-12.svg'
@ -265,13 +279,12 @@
&--error {
color: $color-accent-red;
.SystemMessage__icon {
.SystemMessage__contents::before {
background: $color-accent-red;
}
}
img.emoji {
// The negative bottom margin offset doesn't play well with align-items center
margin-bottom: 0;
&__button-container {
margin-top: 12px;
}
}