beau-gosse-du-92/src/ui/components/conversations.scss

@import "../base.scss";
@import "./_panel.scss";
@import "./button.scss";

@mixin button-class {
    button {
        @include button(secondary, 90);
        width: 100%;
        max-height: 128px;
    }
}

.account {
    $colum-spacing: 5%;
    $col-width: 8.75%;
    $button-width: 20%;
    $button-height: calc(100% / 3);
    $buttons-row-margin-top: 10%;

    height: 100%;
    width: 100%;

    display: grid;
    grid-template-columns: auto $colum-spacing repeat(2, calc($button-width/2)) $colum-spacing $button-width $colum-spacing $button-width;
    grid-template-rows: 30% auto $button-height;
    row-gap: 5%;
    grid-template-areas:
        "avatar . state name name name name name"
        "avatar . status status status status status status"
        "avatar . spaces spaces . chat . room"
    ;

    &__avatar {
        grid-area: avatar;

        display: flex;
        align-items: center;
        justify-content: center;

        border: $border-normal;
        border-radius: $border-radius;

        background-size: cover;
        background-position: center;
    }

    &__presence-state {
        grid-area: state;

        svg {
            height: 100%;
            width: 100%;

            stroke: get-color(greyscale, 90);
        }

        &.online {
            svg {
                fill: get-color(primary, 100);
            }
        }
        &.offline {
            svg {
                fill: get-color(ternary, 100);
            }
        }
        &.unavailable {
            svg {
                fill: get-color(greyscale, 80);
            }
        }
    }

    &__display-name {
        grid-area: name;

        display: flex;
        align-items: center;
        justify-content: center;

        p {
            font-size: 2.5vh;
            margin: 0;
            text-align: center;
        }
    }

    &__status {
        grid-area: status;
    }

    @mixin extra-marged-button() {
        @include button-class();
    }

    &__spaces {
        grid-area: spaces;

        @include extra-marged-button();
    }

    &__chat {
        grid-area: chat;

        @include extra-marged-button();
    }

    &__room {
        grid-area: room;

        @include extra-marged-button();
    }
}

.spaces {
    $gap: 1%;
    $spaces-to-display: 5;

    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    gap: $gap;

    overflow-y: scroll;
    // TODO: Manage android, Safari, ...
    scrollbar-width: none;

    $space-height: calc((100% - (($spaces-to-display - 1) * (1%))) / $spaces-to-display);

    --space-height: #{$space-height};
}

.space {
    $gap: 5%;
    $vertical-padding: 1%;
    $horizontal-padding: 1%;

    height: var(--space-height);
    width: 100%;

    flex-shrink: 0;

    border: $border-normal;
    border-color: get-color(primary, 100);
    border-radius: $border-radius;

    padding: $vertical-padding $horizontal-padding;

    $name-height: 15%;
    $conversation-name-height: 15%;

    display: grid;

    grid-template-columns: 100%;
    grid-template-rows: $name-height $gap auto 0% 0%;
    grid-template-areas:
        "name"
        "."
        "conversations-carousel"
        "."
        "conversation-name"
    ;

    transition: $transition-duration;

    &.display-conversation-name {
        grid-template-rows: $name-height $gap auto $gap $conversation-name-height;
    }

    cursor: default;

    p {
        margin: 0;
    }

    &__name {
        grid-area: name;

        display: flex;
        align-items: center;
        justify-content: left;

        font-size: 2vh;
    }

    &__conversations-carousel {
        grid-area: conversations-carousel;

        display: flex;
        flex-flow: row;
        gap: 1%;

        overflow-x: scroll;

        // TODO: Manage android, Safari, ...
        scrollbar-width: none;
    }

    &__conversation-name {
        grid-area: conversation-name;

        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 2vh;
    }
}

.conversation-avatar {
    height: 100%;
    aspect-ratio: 1;

    flex-shrink: 0;

    border: $border-thin;
    border-radius: $border-radius;

    overflow: hidden;

    filter: brightness(90%);

    &.selected {
        filter: brightness(120%);
    }

    &__image {
        height: 100%;
        width: 100%;

        background-size: cover;

        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 6vh;
        color: get-color(primary, 80);
    }

    &__invited-badge {
        $height: 20%;

        height: $height;
        width: 100%;

        position: relative;
        top: calc($height * -1);

        color: get-color(greyscale, 0);

        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 1.5vh;

        background-color: get-color(ternary, 100);
    }
}

.search {
    height: 100%;
    width: 100%;

    display: flex;
    gap: 5%;

    &__button {
        @include button-class();

        width: 20%;

        flex-shrink: 0;
    }
}

.conversations {
    @include panel();

    $gap: 1%;
    $account-height: 15%;
    $search-height: 5%;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: $gap;

    &__account {
        height: $account-height;
        max-height: 384px;
    }

    &__spaces {
        min-height: calc(100% - $account-height - $search-height - (2 * $gap));
    }

    &__search {
        height: $search-height;
        max-height: 128px;
    }
}