src/components/ChatHeader/ChatHeader.scss
.chat__main{
    width: 100%;
    height: 100%;
}
.chatheader{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    color: #fff;
    background-color: #363940;
    border-bottom: 1px solid #23272a;
    padding-right: 1rem;
    &__topic{
        display: flex;
        margin-right: auto;
        font-size: 1.6rem;
        align-items: center;
        &-content{
            margin-left: 1.2rem;
        }
        &-hash{
            color:gray;
            margin-left: 1.5rem;
            font-size: 2.85rem;
        }
    }
    &__items{
        display: flex;
        align-items: center;
        justify-content: center;
        color:#babbbd;
        &-left, &-right{
            display: flex;
            align-items: center;
            justify-content: center;    
            svg{
                margin:0 .7rem;
            }
        }
    }
    &__searchbar{
        margin: 0 .5rem;
        display: flex;
        align-items: center;
        position: relative;
        justify-content:flex-end;
        &-searchicon{
            position: absolute;
            top: 18%;
            right:3%;
            color:#72767d;
            svg{
                width: 1.6rem;
                height:1.6rem;
            }
        }
        &-input{
            color:#fff;
            padding: .32rem;
            border-radius: 4px;
            background-color: #202225;
            border: 0;
            outline: none;
            font-family: 'Whitney-medium';
            width: 80%;
            transition: width .3s;
            &::placeholder{
                padding-left: .25rem;
            }
            &:focus{
                width: 100%;
            }
        }
    }
}
