signal-desktop/stylesheets/components/MyStories.scss

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

@use '../mixins';
@use '../variables';

.MyStories {
  &__distribution {
    &__title {
      @include mixins.font-body-1-bold;
      margin-block: 24px 8px;
      margin-inline: 10px;
      @include mixins.light-theme() {
        color: variables.$color-gray-90;
      }
      @include mixins.dark-theme() {
        color: variables.$color-gray-05;
      }
    }
  }

  &__story-button {
    flex: 1;
  }

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

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

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

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

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

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

        &__button {
          @include mixins.button-reset;
          & {
            @include mixins.font-subtitle;
          }
          @include mixins.light-theme {
            color: variables.$color-gray-90;
          }
          @include mixins.dark-theme {
            color: variables.$color-gray-25;
          }
        }
      }
    }

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

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

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

      &:hover {
        @include mixins.light-theme() {
          background: variables.$color-white !important;
        }
        @include mixins.dark-theme() {
          background: variables.$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 mixins.light-theme {
        background: variables.$color-gray-15;
      }
      @include mixins.dark-theme {
        background: variables.$color-gray-65;
      }

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

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

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

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

  &__avatar-container {
    position: relative;
  }

  &__avatar__add-story {
    @include mixins.button-reset;
    & {
      @include mixins.rounded-corners;
      align-items: center;
      background: variables.$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: variables.$z-index-base;
    }

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

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

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