main component style

App.css

/*the style below was given to the hr tag to style them in a more modern and sleek way*/
.my-separator {
    border: none;
    border-top: 1px solid rgba(0,0,0,.1);
    margin: 20px 0;
}


/*this is the animation engine that will slide the Chat container from the bottom to its original position*/
.slide-up {
    animation: slide-up 0.5s forwards;
}

@keyframes slide-up {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}

/*This animation is used to fade out the Chatbox when clicking on the closing button*/
.fade-out {
    animation: fade-out 0.5s forwards;
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}