Streamlined system messages
This commit is contained in:
Josh Perez
GitHub
parent
1973224adb
commit
2b08cbfdfe
57 changed files with 864 additions and 937 deletions
|
|
@ -2074,22 +2074,6 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
|
|||
|
||||
// Module: Group Notification
|
||||
|
||||
.module-group-notification {
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
text-align: center;
|
||||
|
||||
@include light-theme {
|
||||
color: $color-gray-60;
|
||||
}
|
||||
@include dark-theme {
|
||||
color: $color-gray-25;
|
||||
}
|
||||
}
|
||||
|
||||
.module-group-notification__change {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
|
|
@ -2099,369 +2083,10 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
// Module: Reset Session Notification
|
||||
|
||||
.module-reset-session-notification {
|
||||
text-align: center;
|
||||
|
||||
@include light-theme {
|
||||
color: $color-gray-60;
|
||||
}
|
||||
@include dark-theme {
|
||||
color: $color-gray-25;
|
||||
}
|
||||
}
|
||||
|
||||
// Module: Safety Number Notification
|
||||
|
||||
.module-safety-number-notification {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.module-safety-number-notification__icon {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 7px;
|
||||
|
||||
@include light-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/safety-number-outline-24.svg',
|
||||
$color-gray-60
|
||||
);
|
||||
}
|
||||
@include dark-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/safety-number-solid-24.svg',
|
||||
$color-gray-25
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.module-safety-number-notification__text {
|
||||
@include light-theme {
|
||||
color: $color-gray-60;
|
||||
}
|
||||
@include dark-theme {
|
||||
color: $color-gray-25;
|
||||
}
|
||||
}
|
||||
|
||||
.module-safety-number-notification__contact {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.module-safety-number-notification__button {
|
||||
@include button-reset;
|
||||
|
||||
@include font-body-2-bold;
|
||||
|
||||
margin-top: 5px;
|
||||
display: inline-block;
|
||||
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
|
||||
color: $color-ultramarine;
|
||||
|
||||
@include light-theme {
|
||||
background-color: $color-gray-02;
|
||||
}
|
||||
@include keyboard-mode {
|
||||
&:focus {
|
||||
background-color: $color-gray-15;
|
||||
}
|
||||
}
|
||||
|
||||
@include dark-theme {
|
||||
background-color: $color-gray-75;
|
||||
}
|
||||
@include dark-keyboard-mode {
|
||||
&:focus {
|
||||
background-color: $color-gray-60;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.module-message-calling--notification {
|
||||
.module-message__metadata__date {
|
||||
@include light-theme {
|
||||
color: $color-gray-90;
|
||||
}
|
||||
@include dark-theme {
|
||||
color: $color-gray-05;
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
@include button-reset;
|
||||
@include button-small;
|
||||
@include button-green;
|
||||
@include font-body-1-bold;
|
||||
|
||||
display: block;
|
||||
margin: 0.5rem auto 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.module-safety-number__bold-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.module-message-calling {
|
||||
&--audio {
|
||||
text-align: center;
|
||||
|
||||
@include light-theme {
|
||||
color: $color-gray-60;
|
||||
}
|
||||
@include dark-theme {
|
||||
color: $color-gray-05;
|
||||
}
|
||||
}
|
||||
|
||||
&--audio__icon {
|
||||
height: 24px;
|
||||
margin-bottom: 4px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 24px;
|
||||
|
||||
@include light-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/phone-right-outline-24.svg',
|
||||
$color-gray-75
|
||||
);
|
||||
}
|
||||
@include dark-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/phone-right-outline-24.svg',
|
||||
$color-gray-15
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&--video {
|
||||
text-align: center;
|
||||
|
||||
@include light-theme {
|
||||
color: $color-gray-60;
|
||||
}
|
||||
@include dark-theme {
|
||||
color: $color-gray-05;
|
||||
}
|
||||
}
|
||||
|
||||
&--video__icon {
|
||||
height: 24px;
|
||||
margin-bottom: 4px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 24px;
|
||||
|
||||
@include light-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/video-outline-24.svg',
|
||||
$color-gray-75
|
||||
);
|
||||
}
|
||||
@include dark-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/video-outline-24.svg',
|
||||
$color-gray-15
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.module-message-unsynced {
|
||||
padding-bottom: 24px;
|
||||
text-align: center;
|
||||
|
||||
@include light-theme {
|
||||
color: $color-gray-60;
|
||||
}
|
||||
@include dark-theme {
|
||||
color: $color-gray-25;
|
||||
}
|
||||
}
|
||||
|
||||
.module-message-unsynced__icon {
|
||||
height: 24px;
|
||||
margin-bottom: 4px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 24px;
|
||||
|
||||
@include light-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/info-outline-24.svg',
|
||||
$color-gray-60
|
||||
);
|
||||
}
|
||||
@include dark-theme {
|
||||
@include color-svg('../images/icons/v2/info-solid-24.svg', $color-gray-25);
|
||||
}
|
||||
}
|
||||
|
||||
// Module: Verification Notification
|
||||
|
||||
.module-verification-notification {
|
||||
text-align: center;
|
||||
|
||||
@include light-theme {
|
||||
color: $color-gray-60;
|
||||
}
|
||||
@include dark-theme {
|
||||
color: $color-gray-25;
|
||||
}
|
||||
}
|
||||
|
||||
.module-verification-notification__contact {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.module-verification-notification__icon--mark-verified {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 4px;
|
||||
|
||||
@include light-theme {
|
||||
@include color-svg('../images/icons/v2/check-24.svg', $color-gray-60);
|
||||
}
|
||||
@include dark-theme {
|
||||
@include color-svg('../images/icons/v2/check-24.svg', $color-gray-25);
|
||||
}
|
||||
}
|
||||
|
||||
.module-verification-notification__icon--mark-not-verified {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 7px;
|
||||
@include light-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/safety-number-outline-24.svg',
|
||||
$color-gray-60
|
||||
);
|
||||
}
|
||||
@include dark-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/safety-number-solid-24.svg',
|
||||
$color-gray-25
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Module: Timer Notification
|
||||
// Module: Universal Timer Notification
|
||||
|
||||
.module-timer-notification,
|
||||
.module-universal-timer-notification {
|
||||
text-align: center;
|
||||
|
||||
@include light-theme {
|
||||
color: $color-gray-60;
|
||||
}
|
||||
@include dark-theme {
|
||||
color: $color-gray-05;
|
||||
}
|
||||
|
||||
&__icon-container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
display: inline-block;
|
||||
opacity: 0.6;
|
||||
|
||||
@include light-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/timer-outline-24.svg',
|
||||
$color-gray-60
|
||||
);
|
||||
}
|
||||
@include dark-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/timer-solid-16.svg',
|
||||
$color-gray-05
|
||||
);
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
@include light-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/timer-disabled-outline-24.svg',
|
||||
$color-gray-60
|
||||
);
|
||||
}
|
||||
@include dark-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/timer-disabled-solid-16.svg',
|
||||
$color-gray-05
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__icon-label {
|
||||
margin-left: 4px;
|
||||
|
||||
// Didn't seem centered otherwise
|
||||
margin-top: 1px;
|
||||
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
// Module: Change Number Notification
|
||||
|
||||
.module-change-number-notification {
|
||||
@include font-body-2;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@include light-theme {
|
||||
color: $color-gray-60;
|
||||
}
|
||||
@include dark-theme {
|
||||
color: $color-gray-05;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
|
||||
@include light-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/phone-right-outline-24.svg',
|
||||
$color-gray-75
|
||||
);
|
||||
}
|
||||
@include dark-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/phone-right-solid-24.svg',
|
||||
$color-gray-15
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Module: Error Boundary
|
||||
|
||||
.module-error-boundary-notification {
|
||||
|
|
@ -8202,85 +7827,6 @@ button.module-image__border-overlay:focus {
|
|||
@include emoji-size(66px);
|
||||
}
|
||||
|
||||
// Module: Unsupported Message
|
||||
|
||||
.module-unsupported-message {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.module-unsupported-message__icon {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 7px;
|
||||
|
||||
@include light-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/error-outline-24.svg',
|
||||
$color-gray-60
|
||||
);
|
||||
}
|
||||
|
||||
@include dark-theme {
|
||||
@include color-svg('../images/icons/v2/error-solid-24.svg', $color-gray-25);
|
||||
}
|
||||
}
|
||||
|
||||
.module-unsupported-message__icon--can-process {
|
||||
@include light-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/check-circle-outline-24.svg',
|
||||
$color-gray-60
|
||||
);
|
||||
}
|
||||
|
||||
@include dark-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/check-circle-solid-24.svg',
|
||||
$color-gray-25
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.module-unsupported-message__text {
|
||||
max-width: 396px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
@include light-theme {
|
||||
color: $color-gray-60;
|
||||
}
|
||||
@include dark-theme {
|
||||
color: $color-gray-25;
|
||||
}
|
||||
}
|
||||
|
||||
.module-unsupported-message__contact {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.module-unsupported-message__button {
|
||||
@include button-reset;
|
||||
|
||||
margin-top: 5px;
|
||||
display: inline-block;
|
||||
|
||||
@include font-body-1-bold;
|
||||
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
|
||||
@include light-theme {
|
||||
color: $color-ultramarine;
|
||||
background-color: $color-gray-02;
|
||||
}
|
||||
@include dark-theme {
|
||||
color: $color-ultramarine-light;
|
||||
background-color: $color-gray-75;
|
||||
}
|
||||
}
|
||||
|
||||
// Module: Countdown
|
||||
|
||||
.module-countdown {
|
||||
|
|
@ -8952,45 +8498,6 @@ button.module-image__border-overlay:focus {
|
|||
padding-right: 0px;
|
||||
}
|
||||
|
||||
// Module: Profile Change Notification
|
||||
|
||||
.module-profile-change-notification {
|
||||
@include font-body-1;
|
||||
|
||||
margin-left: 2em;
|
||||
margin-right: 2em;
|
||||
|
||||
text-align: center;
|
||||
|
||||
@include light-theme {
|
||||
color: $color-gray-60;
|
||||
}
|
||||
@include dark-theme {
|
||||
color: $color-gray-05;
|
||||
}
|
||||
}
|
||||
|
||||
.module-profile-change-notification--icon {
|
||||
@include light-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/profile-outline-20.svg',
|
||||
$color-gray-60
|
||||
);
|
||||
}
|
||||
@include dark-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/profile-outline-20.svg',
|
||||
$color-gray-05
|
||||
);
|
||||
}
|
||||
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* Calling: Device Selection */
|
||||
|
||||
.module-calling-device-selection {
|
||||
|
|
@ -9066,105 +8573,6 @@ button.module-image__border-overlay:focus {
|
|||
}
|
||||
}
|
||||
|
||||
// Module: GroupV2 Change
|
||||
|
||||
.module-group-v2-change {
|
||||
@include font-body-1;
|
||||
|
||||
margin-left: 2em;
|
||||
margin-right: 2em;
|
||||
|
||||
text-align: center;
|
||||
|
||||
@include light-theme {
|
||||
color: $color-gray-60;
|
||||
}
|
||||
@include dark-theme {
|
||||
color: $color-gray-05;
|
||||
}
|
||||
}
|
||||
|
||||
.module-group-v2-change--icon {
|
||||
@include light-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/group-outline-24.svg',
|
||||
$color-gray-60
|
||||
);
|
||||
}
|
||||
@include dark-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/group-outline-24.svg',
|
||||
$color-gray-05
|
||||
);
|
||||
}
|
||||
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.module-group-v2-change--button-container {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
// Module: GV1 Migration
|
||||
|
||||
.module-group-v1-migration {
|
||||
@include font-body-1;
|
||||
|
||||
margin-left: 2em;
|
||||
margin-right: 2em;
|
||||
|
||||
text-align: center;
|
||||
|
||||
@include light-theme {
|
||||
color: $color-gray-60;
|
||||
}
|
||||
@include dark-theme {
|
||||
color: $color-gray-05;
|
||||
}
|
||||
}
|
||||
|
||||
.module-group-v1-migration--icon {
|
||||
@include light-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/group-outline-24.svg',
|
||||
$color-gray-60
|
||||
);
|
||||
}
|
||||
@include dark-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/group-outline-24.svg',
|
||||
$color-gray-05
|
||||
);
|
||||
}
|
||||
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.module-group-v1-migration--text {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.module-group-v1-migration--button {
|
||||
@include button-reset;
|
||||
@include font-body-2-bold;
|
||||
border-radius: 4px;
|
||||
|
||||
padding: 8px;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
|
||||
@include button-light-blue-text;
|
||||
}
|
||||
|
||||
// Module: GroupV1 Disabled Actions
|
||||
|
||||
.module-group-v1-disabled-actions {
|
||||
|
|
@ -9765,99 +9173,6 @@ $contact-modal-padding: 18px;
|
|||
}
|
||||
}
|
||||
|
||||
// Module: Chat Session Refreshed Notification
|
||||
|
||||
.module-chat-session-refreshed-notification {
|
||||
@include font-body-2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.module-chat-session-refreshed-notification__first-line {
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.module-chat-session-refreshed-notification__icon {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
|
||||
@include light-theme {
|
||||
@include color-svg('../images/icons/v2/refresh-16.svg', $color-gray-60);
|
||||
}
|
||||
@include dark-theme {
|
||||
@include color-svg('../images/icons/v2/refresh-16.svg', $color-gray-25);
|
||||
}
|
||||
}
|
||||
.module-chat-session-refreshed-notification__button {
|
||||
@include button-reset;
|
||||
@include button-light-blue-text;
|
||||
@include button-small;
|
||||
|
||||
@include font-body-2;
|
||||
padding: 5px 12px;
|
||||
}
|
||||
|
||||
// Module: Delivery Issue Notification
|
||||
|
||||
.module-delivery-issue-notification {
|
||||
@include font-body-2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.module-delivery-issue-notification__first-line {
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
@include light-theme {
|
||||
color: $color-gray-60;
|
||||
}
|
||||
@include dark-theme {
|
||||
color: $color-gray-25;
|
||||
}
|
||||
}
|
||||
.module-delivery-issue-notification__icon {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
|
||||
@include light-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/error-outline-12.svg',
|
||||
$color-gray-60
|
||||
);
|
||||
}
|
||||
@include dark-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/error-outline-12.svg',
|
||||
$color-gray-25
|
||||
);
|
||||
}
|
||||
}
|
||||
.module-delivery-issue-notification__button {
|
||||
@include button-reset;
|
||||
@include button-light-blue-text;
|
||||
@include button-small;
|
||||
|
||||
@include font-body-2;
|
||||
padding: 5px 12px;
|
||||
}
|
||||
|
||||
// Module: Chat Session Refreshed Dialog
|
||||
|
||||
.module-chat-session-refreshed-dialog {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue