Lambda-School-Labs/kansha-fe

View on GitHub
src/SCSS/components/_reactionModel.scss

Summary

Maintainability
Test Coverage
.rm-parent-cont {
    display: flex;
    flex-direction: column;
    width: 600px;
    height: 650px;

    .rm-user-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        p {
            margin: 0.7rem 0rem;
        }

        span {
            margin: 0rem 0.2rem;
            font-size: 3rem;
        }

        .rm-profile-pic {
            width: 12rem !important;
            border-radius: 50%;
        }

        .rm-job-title {
            font-size: 1.8rem;
        }

        .rm-badge {
            width: 9rem !important;
        }

        .rm-buttons {
            display: flex;
            margin-top: 1.5rem;
            width: 100%;
            height: 50px;
            justify-content: space-around;
            align-items: center;

            .reaction-button {
                color: rgba(0, 13, 34, 0.7);
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;
                background-color: $color-white-dark;
                border-radius: 38%;
                border: none;
                width: 50px;
                height: 28px;

                .heart-full {
                    fill: $color-primary;
                }

                .heart-empty {
                    fill: rgba(0, 13, 34, 0.7);
                    cursor: pointer;
                }
            }
            .comment-button {
                color: rgba(0, 13, 34, 0.7);
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;
                background-color: $color-white-dark;
                border-radius: 38%;
                border: none;
                width: 50px;
                height: 28px;

                .comment-full {
                    fill: $color-primary;
                }

                .comment-empty {
                    fill: rgba(0, 13, 34, 0.7);
                }
            }
        }
        .rm-message {
            font-size: 2rem;
            margin-top: 1.5rem;
            margin-bottom: 1.5rem;
        }
    }

    .rm-comment-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-top: 1rem;

        textarea {
            width: 100%;
            height: 150px;
            margin-bottom: 4rem;
        }

        .rm-comments {
            display: flex;
            flex-direction: column;
            align-items: left;
            margin-top: 1rem;
            width: 90%;
            height: 350px;
            max-height: 60%;
            overflow: auto;

            .comm-container {
                display: flex;
                justify-content: left;
                align-items: center;
                margin: 0.4rem 0rem;

                .comm-pic {
                    border-radius: 50%;
                    width: 30px;
                    margin-right: 20px;
                }
            }
        }
    }
}