I encountered an issue while creating my custom toast notification in React. There are unnecessary gaps between the elements, causing the size to be larger than intended.
React Code
import React from 'react'
import './CustomToast.css'
import {BsFillBellFill} from 'react-icons/bs'
import {ImCross} from 'react-icons/im'
function useCustomToast(title,message){
const close = () =>{
alert('closed')
}
return(
<div className="notification">
<div className="topPart">
<div className="iconPoision">
<p><BsFillBellFill/></p>
</div>
<div className="notifiData">
<p><b>{title}</b></p>
</div>
<div className="crossPosition">
<p><button onClick={close} className="closeButton"><ImCross/></button></p>
</div>
</div>
<div className="downPart">
<p>{message}</p>
</div>
</div>
)
}
The Code's CSS
.notification{
top: 5px;
right: 5px;
background-color: rgba(0, 255, 234, 0.726);
color: rgb(255, 255, 255);
box-shadow: 2px 2px rgba(255, 255, 255, 0.562);
box-sizing: border-box;
position: fixed;
border-radius: 5px;
display: grid;
grid-row-gap:2px;
grid-template-rows: auto auto;
}
.topPart{
display: grid;
grid-column-gap: 2px;
grid-template-columns: 22px auto 25px;
}
.downPart{
display: grid;
grid-column: auto;
grid-template-columns: auto;
text-align: right;
}
.notifiData{
text-align: left;
}
.iconPoision{
text-align: center;
}
.closeButton{
background-color: transparent;
border: transparent;
color: rgb(255, 255, 255);
transition:ease-out;
}
.crossPosition{
text-align: center;
}
By removing the spaces between the elements, the notification panel will appear smaller and more compact, resembling a typical notification.There is a noticeable amount of empty space between the top and bottom rows. https://i.sstatic.net/VTAuV.png