Merge pull request #5 from ViktorSvertoka/Dima-DiaryPage1

src/components/Diary/DaySwitch/DaySwitch.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { useState } from 'react';
 import {
   Wrap,
@@ -9,6 +7,7 @@ import {
   DayChangeIcon,
   BtnNext,
 } from './DaySwitch.styled';
+import Icon from '../../Icon/Icon';
 
 const DaySwitch = () => {
   const [currentDate, setCurrentDate] = useState(new Date());
@@ -36,11 +35,11 @@ const DaySwitch = () => {
     <Wrap>
       <DateLabel>{formattedDate}</DateLabel>
       <CalenderIcon />
-      <BtnPrev onClick={switchToPreviousDay}>
-        <DayChangeIcon />
+      <BtnPrev onClick={switchToPreviousDay} className="button">
+        <Icon symbolId="icon-arrow-left" width="16" height="16" />
       </BtnPrev>
-      <BtnNext onClick={switchToNextDay}>
-        <DayChangeIcon />
+      <BtnNext onClick={switchToNextDay} className="button">
+        <Icon symbolId="icon-arrow-right" width="16" height="16" />
       </BtnNext>
     </Wrap>
   );

src/components/Diary/DaySwitch/DaySwitch.styled.jsx

@@ -24,14 +24,16 @@ const BtnPrev = styled.button`
   width: 16px;
   height: 16px;
   flex-shrink: 0;
-  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  background-color: transparent;
+  color: white;
 `;
 
 const BtnNext = styled.button`
   width: 16px;
   height: 16px;
   flex-shrink: 0;
-  cursor: pointer;
 `;
 
 const DayChangeIcon = styled.svg``;

src/components/Icon/Icon.jsx

@@ -0,0 +1,18 @@
+import PropTypes from 'prop-types';
+const spritePath = '/src/images/sprite.svg';
+
+const Icon = ({ symbolId, width, height }) => {
+  return (
+    <svg className="icon" width={width} height={height}>
+      <use xlinkHref={`${spritePath}#${symbolId}`} />
+    </svg>
+  );
+};
+
+Icon.propTypes = {
+  symbolId: PropTypes.string.isRequired,
+  width: PropTypes.string.isRequired,
+  height: PropTypes.string.isRequired,
+};
+
+export default Icon;