signal-desktop/stylesheets/components/SystemMessage.scss

// 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;
  }
}