Merge pull request #12 from ViktorSvertoka/Dima-Diary

Fix(Calender) Error correction

package.json

@@ -19,6 +19,7 @@
     "modern-normalize": "^2.0.0",
     "proptypes": "^1.1.0",
     "react": "^18.2.0",
+    "react-datepicker": "^4.18.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.15.0",
     "react-select": "^5.7.4",

src/components/Diary/DayDashboard/DayDashboard.jsx

@@ -1,6 +1,12 @@
 import DashboardItem from '../../DashboardItem/DashboardItem';
-import Icon from '../../Icon/Icon';
-import { Grid, GridItem, Wrapper } from './DayDashboard.styled';
+import ExclamationCircle from '../ExclamationCircle/ExclamationCircle';
+import {
+  Grid,
+  GridItem,
+  TextWarning,
+  WrapWarning,
+  Wrapper,
+} from './DayDashboard.styled';
 
 const icons = [
   'icon-apple',
@@ -24,13 +30,13 @@ const DayDashboard = () => {
           );
         })}
       </Grid>
-      <div>
-        <Icon symbolId="icon-arrow-right" width="16" height="16" />
-        <span>
+      <WrapWarning>
+        <ExclamationCircle />
+        <TextWarning>
           Record all your meals in a calorie diary every day. This will help me
           be aware of my nutrition and make me responsible for my choices.
-        </span>
-      </div>
+        </TextWarning>
+      </WrapWarning>
     </Wrapper>
   );
 };

src/components/Diary/DayDashboard/DayDashboard.styled.jsx

@@ -7,6 +7,23 @@ const Wrapper = styled.div`
   width: 100%;
 `;
 
+const WrapWarning = styled.div`
+  display: flex;
+  margin-top: 48px;
+  gap: 8px;
+`;
+
+const TextWarning = styled.span`
+  width: 358px;
+  flex-shrink: 0;
+  color: rgba(239, 237, 232, 0.3);
+  font-family: Roboto;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+`;
+
 const Grid = styled.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -17,4 +34,4 @@ const GridItem = styled.div`
   width: 100%;
 `;
 
-export { Wrapper, Grid, GridItem };
+export { Wrapper, Grid, GridItem, WrapWarning, TextWarning };