Merge pull request #45 from Tasitaforme/Header-fixing

header fix Nell
Tasitaforme · Dec 26, 2023 · 8d6157f · 8d6157f
2 parents 2f5b62a + 43458ae
commit 8d6157f
Show file tree

Hide file tree

Showing 7 changed files with 143 additions and 131 deletions.
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
@@ -1,11 +1,5 @@
 import { Container } from '../StyledComponents/Container';
-import {
-  Navigation,
-  Logo,
-  HeaderWrap,
-  SignInLink,
-  SignUpLink,
-} from './Header.styled';
+import { Navigation, Logo, HeaderWrap, NavigationLink } from './Header.styled';
 
 import sprite from 'assets/sprite.svg';
 
@@ -63,8 +57,8 @@ export default function Header() {
             />
           ) : (
             <Navigation>
-              <SignInLink to="/signin">Sign in</SignInLink>/
-              <SignUpLink to="/signup">Sign up</SignUpLink>
+              <NavigationLink to="/signin"> Sign in</NavigationLink>/
+              <NavigationLink to="/signup"> Sign up</NavigationLink>
               <svg width="26px" height="26px">
                 <use href={`${sprite}#profile`} stroke="white" fill="none" />
               </svg>

diff --git a/src/components/Header/Header.styled.js b/src/components/Header/Header.styled.js
@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom';
+import { Link, NavLink } from 'react-router-dom';
 import styled from 'styled-components';
 
 export const HeaderWrap = styled.div`
@@ -33,7 +33,7 @@ export const Logo = styled(Link)`
   }
 `;
 
-export const SignInLink = styled(Link)`
+export const NavigationLink = styled(NavLink)`
   color: #fff;
   text-align: right;
   font-family: Poppins;
@@ -42,19 +42,9 @@ export const SignInLink = styled(Link)`
   font-weight: 400;
   line-height: 1.33;
 
-  @media screen and (min-width: 834px) {
-    font-size: 14px;
-    line-height: 1.42;
+  &.active {
+     color: #e3ffa8;
   }
-`;
-
-export const SignUpLink = styled(Link)`
-  color: #e3ffa8;
-  font-family: Poppins;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.33;
 
   @media screen and (min-width: 834px) {
     font-size: 14px;
@@ -65,3 +55,4 @@ export const SignUpLink = styled(Link)`
 
 
 
+
diff --git a/src/components/Header/UserInfoNav/UserInfoNav.jsx b/src/components/Header/UserInfoNav/UserInfoNav.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+// import React from 'react';
 import sprite from 'assets/sprite.svg';
 import {
   UserinfoWrapper,

diff --git a/src/components/TargetSelectionModal/TargetSelectionModal.styled.js b/src/components/TargetSelectionModal/TargetSelectionModal.styled.js
@@ -34,8 +34,6 @@ width: 300px;
 border-radius: 12px;
 background:  #0F0F0F;
 box-shadow: 0px 4px 14px 0px rgba(227, 255, 168, 0.20);
-
-
 `;
 
 export const Modal = styled.div`
@@ -130,7 +128,7 @@ line-height: 1.42;
 justify-content: center;
 
 @media screen and (min-width: 834px) {
-   width: 166px; 
+   width: 166px; }
 `;
 
 export const CancelBtn = styled.button`
@@ -161,7 +159,7 @@ margin-left: 48px;
 gap: 6px;
 display: flex;
 flex-direction: row;
-align-itams: center;
+align-items: center;
 
 
 @media screen and (min-width: 834px){

diff --git a/src/components/СurrentWeightModal/CurrentWeightModal.styled.js b/src/components/СurrentWeightModal/CurrentWeightModal.styled.js
@@ -1,48 +1,62 @@
-import styled from 'styled-components'; 
+import styled from 'styled-components';
+import { Field, Form } from 'formik';
+import { FormikStyledErrorMessage } from '../StyledComponents/Formik.styled';
 
+export const ErrorMessage = styled(FormikStyledErrorMessage)`
+  margin-top: 0;
+
+  @media screen and (min-width: 834px) {
+    margin-top: 10px;
+    position: absolute;
+    top: 40px;
+    left: 0;
+  }
+`;
 
 export const ModalWrapper = styled.div`
-   position: absolute;
-   z-index: 100;
-  background: #0F0F0F;
+  position: absolute;
+  z-index: 100;
+  background: #0f0f0f;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   box-shadow: 0 4px 14px 0 rgba(227, 255, 168, 0.2);
- padding: 24px 10px; 
-  
-@media screen and (min-width: 834px) {
-   box-shadow: 0px 4px 14px 0px rgba(227, 255, 168, 0.20);
+  padding: 24px 10px;
+
+  @media screen and (min-width: 834px) {
+    box-shadow: 0px 4px 14px 0px rgba(227, 255, 168, 0.2);
     top: 120px;
     width: 392px;
     left: 260px;
-   height: auto;
-}
+    height: auto;
+  }
   @media screen and (min-width: 1440px) {
     left: 960px;
   }
 `;
 
 export const Modal = styled.div`
-@media screen and (min-width: 834px) {
- padding: 20px 24px 40px;}
+  @media screen and (min-width: 834px) {
+    padding: 20px 24px 40px;
+  }
 `;
 
 export const CloseBtn = styled.button`
-display: none;
+  display: none;
 
-@media screen and (min-width: 834px) {
+  @media screen and (min-width: 834px) {
     display: block;
-background: inherit;
-  border: none;
-  justify-content: center;
-  align-items: center;
-  width: 26px;
-  height: 26px;
-  position: absolute;
-  right: 25px;
-  top: 12px;}
+    background: inherit;
+    border: none;
+    justify-content: center;
+    align-items: center;
+    width: 26px;
+    height: 26px;
+    position: absolute;
+    right: 25px;
+    top: 12px;
+  }
 `;
 
 export const ModalTitle = styled.h3`
@@ -54,16 +68,15 @@ export const ModalTitle = styled.h3`
 `;
 
 export const ModalText = styled.p`
-  color: #B6B6B6;
+  color: #b6b6b6;
   font-weight: 400;
   font-size: 14px;
   margin-bottom: 16px;
   line-height: 1.42;
 `;
 
 export const DateContainer = styled.div`
-  
-display: flex;
+  display: flex;
   align-items: center;
   gap: 6px;
   margin-bottom: 16px;
@@ -78,32 +91,29 @@ export const DateText = styled.p`
 `;
 
 export const DateDay = styled.p`
-   
-color: #B6B6B6;
+  color: #b6b6b6;
   font-weight: 500;
   font-size: 14px;
   margin-bottom: 16px;
-  line-height: 1.42 
-
+  line-height: 1.42;
 `;
 
-export const WeightForm = styled.form`
-
-  flex-direction: collum; 
+export const WeightForm = styled(Form)`
+  position: relative;
+  flex-direction: column;
 
-@media screen and (min-width: 834px) {
+  @media screen and (min-width: 834px) {
     flex-direction: row;
     justify-content: space-between;
-    display: flex;  
+    display: flex;
     gap: 12px;
   }
-  
 `;
 
-export const WeightFormInput = styled.input`
-width: 100%; 
-margin-bottom: 12px;
-padding: 8px 10px;
+export const WeightFormInput = styled(Field)`
+  width: 100%;
+  margin-bottom: 12px;
+  padding: 8px 10px;
   border-radius: 12px;
   border: 1px solid var(--green-light);
   background-color: var(--black-secondary);
@@ -143,35 +153,34 @@ padding: 8px 10px;
   @media screen and (min-width: 834px) {
     margin: 0;
   }
-
 `;
 
 export const WeightFormBtn = styled.button`
-width: 100%; 
-display: flex;
-padding: 8px 10px;
-align-items: flex-start;
-border-radius: 12px;
-background: #E3FFA8;
-font-size: 14px;
-font-weight: 500;
-line-height: 1.42;
-justify-content: center;
+  width: 100%;
+  display: flex;
+  padding: 8px 10px;
+  align-items: flex-start;
+  border-radius: 12px;
+  background: #e3ffa8;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.42;
+  justify-content: center;
+  color: #0f0f0f;
 `;
 
 export const CancelBtn = styled.button`
-display: block;  
-margin: 0 auto;
-font-size: 14px;
-font-style: normal;
-font-weight: 400;
-line-height:1.42;
-color: #B6B6B6;
-margin-top: 24px;
-justify-content: center;
-
+  display: block;
+  margin: 0 auto;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.42;
+  color: #b6b6b6;
+  margin-top: 24px;
+  justify-content: center;
 
   @media screen and (min-width: 834px) {
-    display: none; }
-
- `;
+    display: none;
+  }
+`;