signal-desktop/stylesheets/components/MyStories.scss

// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

.MyStories {
  &__distribution {
    &__title {
      @include font-body-1-bold;
      color: $color-gray-05;
      margin-block: 24px 8px;
      margin-inline: 10px;
    }
  }

  &__story-button {
    flex: 1;
  }

  &__story {
    align-items: center;
    border-radius: 10px;
    display: flex;
    height: 96px;
    padding-inline-end: 10px;

    &:hover {
      background: $color-gray-65;

      & .MyStories__story__download,
      .MyStories__story__more__button {
        background: $color-gray-60;
      }
    }

    &__details {
      @include font-body-1-bold;
      color: $color-gray-05;
      display: flex;
      flex-direction: column;
      flex: 1;
      margin-inline-start: 12px;

      &__failed {
        align-items: center;
        display: flex;

        &::before {
          content: '';
          display: block;
          height: 12px;
          margin-inline-end: 12px;
          width: 12px;
          @include color-svg(
            '../images/icons/v3/error/error-circle.svg',
            $color-accent-red
          );
        }

        &__button {
          @include button-reset;
          @include font-subtitle;
          color: $color-gray-25;
        }
      }
    }

    &__timestamp {
      color: $color-gray-25;
      font-weight: normal;
    }

    &__download {
      @include button-reset;
      align-items: center;
      background: $color-gray-65;
      border-radius: 100%;
      display: flex;
      height: 28px;
      justify-content: center;
      width: 28px;

      &::after {
        @include color-svg(
          '../images/icons/v3/save/save-compact.svg',
          $color-gray-15
        );
        content: '';
        height: 18px;
        width: 18px;
      }

      &:hover {
        background: $color-gray-75 !important;
      }
    }

    &__more__button {
      align-items: center;
      background: $color-gray-65;
      border-radius: 100%;
      display: flex;
      height: 28px;
      justify-content: center;
      margin-inline-start: 16px;
      width: 28px;

      &::after {
        @include color-svg(
          '../images/icons/v3/more/more-compact.svg',
          $color-gray-15
        );
        content: '';
        height: 18px;
        width: 18px;
      }

      &:hover {
        background: $color-gray-75 !important;
      }
    }
  }

  &__icon {
    &--forward {
      @include color-svg(
        '../images/icons/v3/forward/forward-compact.svg',
        $color-white
      );
    }

    &--delete {
      @include color-svg(
        '../images/icons/v3/trash/trash-compact.svg',
        $color-white
      );
    }
  }

  &__avatar-container {
    position: relative;
  }

  &__avatar__add-story {
    @include button-reset;
    @include rounded-corners;
    align-items: center;
    background: $color-ultramarine-dawn;
    border: 2px solid $color-gray-80;
    bottom: -2px;
    display: flex;
    height: 20px;
    justify-content: center;
    position: absolute;
    inset-inline-end: -4px;
    width: 20px;
    z-index: $z-index-base;

    &::after {
      content: '';
      @include color-svg(
        '../images/icons/v3/plus/plus-compact-bold.svg',
        $color-white
      );
      height: 12px;
      width: 12px;
    }
  }
}

.StoryListItem__button:hover .MyStories__avatar__add-story {
  border-color: $color-gray-65;
}