From 354651ebb92fd301c20b3aec91a0125721d0f7ab Mon Sep 17 00:00:00 2001
From: Bastien Dumont <bdumont@grandlyon.com>
Date: Mon, 18 Sep 2023 11:40:25 +0200
Subject: [PATCH] date selector
---
.../Newsletter/DateSelector/DateSelector.tsx | 21 +++++++------------
.../Newsletter/DateSelector/dateSelector.scss | 9 +++-----
2 files changed, 11 insertions(+), 19 deletions(-)
diff --git a/src/components/Newsletter/DateSelector/DateSelector.tsx b/src/components/Newsletter/DateSelector/DateSelector.tsx
index fcfbb72a..9eb4addb 100644
--- a/src/components/Newsletter/DateSelector/DateSelector.tsx
+++ b/src/components/Newsletter/DateSelector/DateSelector.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@mui/material'
+import { Button, IconButton } from '@mui/material'
import React, { useState } from 'react'
import leftChevron from '../../../assets/icons/left-chevron.svg'
import rightChevron from '../../../assets/icons/right-chevron.svg'
@@ -45,21 +45,16 @@ const DateSelector: React.FC<DateSelectorProps> = ({
}
return (
<div className="date-selector">
- <img
- src={leftChevron}
- alt="Previous Month"
- onClick={handlePrevMonth}
- className="arrow"
- />
+ <IconButton onClick={handlePrevMonth}>
+ <img src={leftChevron} alt="Previous Month" className="arrow" />
+ </IconButton>
<div className="text">
{date.toLocaleString('default', { month: 'long', year: 'numeric' })}
</div>
- <img
- src={rightChevron}
- alt="Next Month"
- onClick={handleNextMonth}
- className="arrow"
- />
+ <IconButton onClick={handleNextMonth}>
+ <img src={rightChevron} alt="Next Month" className="arrow" />
+ </IconButton>
+
{openModal && (
<Modal>
<>
diff --git a/src/components/Newsletter/DateSelector/dateSelector.scss b/src/components/Newsletter/DateSelector/dateSelector.scss
index cb2a92c0..729caa02 100644
--- a/src/components/Newsletter/DateSelector/dateSelector.scss
+++ b/src/components/Newsletter/DateSelector/dateSelector.scss
@@ -26,14 +26,11 @@
padding: 0.5rem;
border-radius: 50%;
background: #343641;
- margin: 0 0.5rem;
- box-shadow: 0px 5px 5px rgb(0 0 0 / 20%), 0px 3px 14px rgb(0 0 0 / 12%),
+ box-shadow:
+ 0px 5px 5px rgb(0 0 0 / 20%),
+ 0px 3px 14px rgb(0 0 0 / 12%),
0px 8px 10px rgb(0 0 0 / 14%);
transition: all 300ms ease;
- &:hover {
- background: $text-grey;
- opacity: 0.9;
- }
}
}
.modal-text {
--
GitLab