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;
      margin-block: 24px 8px;
      margin-inline: 10px;
      @include light-theme() {
        color: $color-gray-90;
      }
      @include dark-theme() {
        color: $color-gray-05;
      }
    }
  }

  &__story-button {
    flex: 1;
  }

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

    &:hover {
      @include light-theme {
        background: $color-gray-15;
      }
      @include dark-theme {
        background: $color-gray-65;
      }

      & .MyStories__story__download,
      .MyStories__story__more__button {
        @include light-theme() {
          background: $color-gray-20;
        }
        @include dark-theme() {
          background: $color-gray-60;
        }
      }
    }

    &__details {
      @include font-body-1-bold;
      display: flex;
      flex-direction: column;
      flex: 1;
      margin-inline-start: 12px;
      @include light-theme() {
        color: $color-gray-90;
      }
      @include dark-theme() {
        color: $color-gray-05;
      }

      &__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;
          @include light-theme {
            color: $color-gray-90;
          }
          @include dark-theme {
            color: $color-gray-25;
          }
        }
      }
    }

    &__timestamp {
      font-weight: normal;
      @include light-theme {
        color: $color-gray-90;
      }
      @include dark-theme {
        color: $color-gray-25;
      }
    }

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

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

      &:hover {
        @include light-theme() {
          background: $color-white !important;
        }
        @include dark-theme() {
          background: $color-gray-75 !important;
        }
      }
    }

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

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

      &:hover {
        @include light-theme() {
          background: $color-white !important;
        }
        @include dark-theme() {
          background: $color-gray-75 !important;
        }
      }
    }
  }

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

    &--delete {
      @include light-theme() {
        @include color-svg(
          '../images/icons/v3/trash/trash-compact.svg',
          $color-black
        );
      }
      @include dark-theme() {
        @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;
    bottom: -2px;
    display: flex;
    height: 20px;
    justify-content: center;
    position: absolute;
    inset-inline-end: -4px;
    width: 20px;
    z-index: $z-index-base;

    @include light-theme {
      border-color: $color-gray-04;
    }
    @include dark-theme {
      border-color: $color-gray-80;
    }

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

.StoryListItem__button:hover,
.StoryListItem__button--active {
  .MyStories__avatar__add-story {
    @include light-theme {
      border-color: $color-gray-15;
    }
    @include dark-theme {
      border-color: $color-gray-65;
    }
  }
}