Skip to content
Snippets Groups Projects
Commit 354651eb authored by Bastien DUMONT's avatar Bastien DUMONT :angel:
Browse files

date selector

parent 80348d1a
No related branches found
No related tags found
1 merge request!118feat(ui): use mui components and upgrade to v5
Pipeline #73254 passed
import { Button } from '@mui/material' import { Button, IconButton } from '@mui/material'
import React, { useState } from 'react' import React, { useState } from 'react'
import leftChevron from '../../../assets/icons/left-chevron.svg' import leftChevron from '../../../assets/icons/left-chevron.svg'
import rightChevron from '../../../assets/icons/right-chevron.svg' import rightChevron from '../../../assets/icons/right-chevron.svg'
...@@ -45,21 +45,16 @@ const DateSelector: React.FC<DateSelectorProps> = ({ ...@@ -45,21 +45,16 @@ const DateSelector: React.FC<DateSelectorProps> = ({
} }
return ( return (
<div className="date-selector"> <div className="date-selector">
<img <IconButton onClick={handlePrevMonth}>
src={leftChevron} <img src={leftChevron} alt="Previous Month" className="arrow" />
alt="Previous Month" </IconButton>
onClick={handlePrevMonth}
className="arrow"
/>
<div className="text"> <div className="text">
{date.toLocaleString('default', { month: 'long', year: 'numeric' })} {date.toLocaleString('default', { month: 'long', year: 'numeric' })}
</div> </div>
<img <IconButton onClick={handleNextMonth}>
src={rightChevron} <img src={rightChevron} alt="Next Month" className="arrow" />
alt="Next Month" </IconButton>
onClick={handleNextMonth}
className="arrow"
/>
{openModal && ( {openModal && (
<Modal> <Modal>
<> <>
......
...@@ -26,14 +26,11 @@ ...@@ -26,14 +26,11 @@
padding: 0.5rem; padding: 0.5rem;
border-radius: 50%; border-radius: 50%;
background: #343641; background: #343641;
margin: 0 0.5rem; box-shadow:
box-shadow: 0px 5px 5px rgb(0 0 0 / 20%), 0px 3px 14px rgb(0 0 0 / 12%), 0px 5px 5px rgb(0 0 0 / 20%),
0px 3px 14px rgb(0 0 0 / 12%),
0px 8px 10px rgb(0 0 0 / 14%); 0px 8px 10px rgb(0 0 0 / 14%);
transition: all 300ms ease; transition: all 300ms ease;
&:hover {
background: $text-grey;
opacity: 0.9;
}
} }
} }
.modal-text { .modal-text {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment