My task involves changing the size of the arrow to be smaller and positioning it under the circle. Despite setting the width and height in the CSS, the desired effect is not achieved. To align with the UI requirements, I need to adjust the swiper-button-next and swiper-button-prev sizes accordingly.
<Select
className="drop-down"
options={data?.map((data, index) => ({
value: data.username,
label: data.username,
id: index,
}))}
name="user"
value={data.username}
onChange={handleSelectChangeL}
placeholder="User Name"
theme={(theme) => ({
...theme,
colors: {
...theme.colors,
text: "black",
primary25: "#d6fdf7",
primary: "#0bb7a7",
primary50: "#d6fdf7",
},
})}
></Select>
<button
className="dash-button-1"
type="submit"
variant="contained"
onClick={reset}
>
Reset
</button>