Streamlined system messages
This commit is contained in:
Josh Perez
GitHub
parent
1973224adb
commit
2b08cbfdfe
57 changed files with 864 additions and 937 deletions
277
stylesheets/components/SystemMessage.scss
Normal file
277
stylesheets/components/SystemMessage.scss
Normal file
|
|
@ -0,0 +1,277 @@
|
|||
// Copyright 2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
@mixin system-message-icon($light, $dark) {
|
||||
@include light-theme {
|
||||
-webkit-mask: url($light) no-repeat center;
|
||||
-webkit-mask-size: 100%;
|
||||
}
|
||||
@include dark-theme {
|
||||
-webkit-mask: url($dark) no-repeat center;
|
||||
-webkit-mask-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.SystemMessage {
|
||||
@include font-body-2;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
@include light-theme {
|
||||
color: $color-black;
|
||||
}
|
||||
@include dark-theme {
|
||||
color: $color-gray-25;
|
||||
}
|
||||
|
||||
&--multiline {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__line {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
height: 16px;
|
||||
flex: 0 0 16px;
|
||||
margin-right: 8px;
|
||||
width: 16px;
|
||||
vertical-align: middle;
|
||||
|
||||
@include light-theme {
|
||||
background-color: $color-black;
|
||||
}
|
||||
@include dark-theme {
|
||||
background-color: $color-gray-25;
|
||||
}
|
||||
|
||||
&--audio-incoming {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/phone-incoming-16.svg',
|
||||
'../images/icons/v2/phone-incoming-solid-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--audio-missed {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/phone-x-16.svg',
|
||||
'../images/icons/v2/phone-x-solid-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--audio-outgoing {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/phone-outgoing-16.svg',
|
||||
'../images/icons/v2/phone-outgoing-solid-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--group {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/group-outline-24.svg',
|
||||
'../images/icons/v2/group-solid-24.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--group-access {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/megaphone-16.svg',
|
||||
'../images/icons/v2/megaphone-solid-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--group-add {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/member-added-16.svg',
|
||||
'../images/icons/v2/member-added-solid-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--group-approved {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/member-accepted-16.svg',
|
||||
'../images/icons/v2/member-accepted-solid-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--group-avatar {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/photo-16.svg',
|
||||
'../images/icons/v2/photo-solid-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--group-decline {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/member-declined-16.svg',
|
||||
'../images/icons/v2/member-declined-solid-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--group-edit {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/edit-16.svg',
|
||||
'../images/icons/v2/edit-solid-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--group-leave {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/leave-16.svg',
|
||||
'../images/icons/v2/leave-solid-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--group-remove {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/member-remove-16.svg',
|
||||
'../images/icons/v2/member-remove-solid-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--info {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/info-16.svg',
|
||||
'../images/icons/v2/info-solid-24.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--phone {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/phone-right-outline-24.svg',
|
||||
'../images/icons/v2/phone-right-solid-24.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--profile {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/profile-outline-20.svg',
|
||||
'../images/icons/v2/profile-outline-20.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--safety-number {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/safety-number-outline-24.svg',
|
||||
'../images/icons/v2/safety-number-solid-24.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--session-refresh {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/refresh-16.svg',
|
||||
'../images/icons/v2/refresh-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--timer {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/timer-outline-24.svg',
|
||||
'../images/icons/v2/timer-solid-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--timer-disabled {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/timer-disabled-outline-24.svg',
|
||||
'../images/icons/v2/timer-disabled-solid-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--unsupported {
|
||||
@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 {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/info-outline-24.svg',
|
||||
'../images/icons/v2/info-solid-24.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--verified {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/check-24.svg',
|
||||
'../images/icons/v2/check-24.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--verified-not {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/safety-number-outline-24.svg',
|
||||
'../images/icons/v2/safety-number-solid-24.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--video {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/video-outline-24.svg',
|
||||
'../images/icons/v2/video-outline-24.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--video-incoming {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/video-incoming-16.svg',
|
||||
'../images/icons/v2/video-incoming-solid-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--video-missed {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/video-x-16.svg',
|
||||
'../images/icons/v2/video-x-solid-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--video-outgoing {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/video-outgoing-16.svg',
|
||||
'../images/icons/v2/video-outgoing-solid-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--warning {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/error-outline-12.svg',
|
||||
'../images/icons/v2/error-outline-12.svg'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&--error {
|
||||
color: $color-accent-red;
|
||||
|
||||
.SystemMessage__icon {
|
||||
background: $color-accent-red;
|
||||
}
|
||||
}
|
||||
|
||||
img.emoji {
|
||||
// The negative bottom margin offset doesn't play well with align-items center
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue