signal-desktop/stylesheets/components/GroupDialog.scss

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

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

.module-GroupDialog {
  @include mixins.popper-shadow();
  & {
    border-radius: 8px;
    margin-block: 0;
    margin-inline: auto;
    max-height: 80vh;
    max-width: 360px;
    padding: 16px;
    position: relative;
    width: 95%;
    display: flex;
    flex-direction: column;
  }

  @include mixins.light-theme() {
    background: variables.$color-white;
    color: variables.$color-gray-90;
  }

  @include mixins.dark-theme() {
    background: variables.$color-gray-95;
    color: variables.$color-gray-05;
  }

  &__close-button {
    @include mixins.button-reset;

    & {
      position: absolute;
      inset-inline-end: 12px;
      top: 12px;

      height: 24px;
      width: 24px;
    }

    @include mixins.light-theme {
      @include mixins.color-svg(
        '../images/icons/v3/x/x.svg',
        variables.$color-gray-75
      );
    }

    @include mixins.dark-theme {
      @include mixins.color-svg(
        '../images/icons/v3/x/x.svg',
        variables.$color-gray-15
      );
    }

    &:focus {
      @include mixins.keyboard-mode {
        background-color: variables.$color-ultramarine;
      }
      @include mixins.dark-keyboard-mode {
        background-color: variables.$color-ultramarine-light;
      }
    }
  }

  &__title {
    @include mixins.font-title-2;
    text-align: center;
    margin-bottom: 20px;

    flex-grow: 0;
    flex-shrink: 0;
  }

  &__body {
    overflow-x: scroll;
    flex-grow: 1;
    flex-shrink: 1;
  }

  &__paragraph,
  &__contacts {
    margin-block: 0 16px;
    margin-inline: 0;
    padding-block: 0;
    padding-inline: 28px 16px;
    position: relative;

    &::before {
      content: '';
      display: block;
      height: 11px;
      inset-inline-start: 4px;
      position: absolute;
      top: 4px;
      width: 4px;

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

  &__contacts {
    list-style-type: none;

    &__contact {
      margin-top: 16px;
    }

    &__contact__name {
      margin-inline-start: 8px;
    }
  }

  &__button-container {
    display: flex;
    justify-content: center;
    margin-top: 16px;
    flex-grow: 0;
    flex-shrink: 0;

    .module-Button {
      flex-grow: 1;
      max-width: 152px;

      &:not(:first-child) {
        margin-inline-start: 16px;
      }
    }
  }
}