Fixed some styles on public pages

MAKCKACHKA · Dec 25, 2023 · b3f02c7 · b3f02c7
1 parent 83b5ef0
commit b3f02c7
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 5 deletions.
diff --git a/src/components/AuthNav/AuthNav.styled.js b/src/components/AuthNav/AuthNav.styled.js
@@ -24,6 +24,11 @@ export const SignInBtn = styled(Link)`
   border-radius: 12px;
   color: var(--secondary-text-color);
   background-color: var(--primary-btn-color);
+  transition: opacity 0.2s;
+  &:hover,
+  &:focus {
+    opacity: 0.8;
+  }
 
   @media screen and (min-width: 834px) {
     width: 212px;
@@ -35,4 +40,9 @@ export const SignUpBtn = styled(Link)`
   padding: 8px 10px;
   text-align: center;
   color: var(--primary-title-text-color);
+  transition: opacity 0.2s;
+  &:hover,
+  &:focus {
+    opacity: 0.8;
+  }
 `;
diff --git a/src/components/PrimaryBtn/PrimaryBtn.styled.js b/src/components/PrimaryBtn/PrimaryBtn.styled.js
@@ -10,4 +10,9 @@ export const PrimaryBtnStyled = styled.button`
   border-radius: 12px;
   color: var(--secondary-text-color);
   background-color: var(--primary-btn-color);
+  transition: opacity 0.2s;
+  &:hover,
+  &:focus {
+    opacity: 0.8;
+  }
 `;
diff --git a/src/components/SecondaryBtn/SecondaryBtn.styled.js b/src/components/SecondaryBtn/SecondaryBtn.styled.js
@@ -6,4 +6,9 @@ export const SecondaryBtnStyled = styled.button`
   border: none;
   background-color: transparent;
   color: var(--primary-title-text-color);
+  transition: opacity 0.2s;
+  &:hover,
+  &:focus {
+    opacity: 0.8;
+  }
 `;
diff --git a/src/components/SignInOrUp/SingInOrUp.js b/src/components/SignInOrUp/SingInOrUp.js
@@ -17,4 +17,9 @@ export const SingInOrUpWrap = styled.div`
 export const SingInOrUpLink = styled(Link)`
   font-weight: 500;
   color: var(--primary-title-text-color);
+  transition: opacity 0.2s;
+  &:hover,
+  &:focus {
+    opacity: 0.8;
+  }
 `;
diff --git a/src/pages/ForgotPasswordPage/ForgotPasswordPage.styled.js b/src/pages/ForgotPasswordPage/ForgotPasswordPage.styled.js
@@ -7,6 +7,7 @@ export const Section = styled.section`
   align-content: center;
   gap: 24px;
   margin-top: 24px;
+  justify-content: center;
 
   @media screen and (min-width: 834px) {
     gap: 60px;
@@ -17,6 +18,6 @@ export const Section = styled.section`
     width: 100%;
     flex-direction: row;
     gap: 104px;
-    margin-left: 150px;
+    /* margin-left: 150px; */
   }
 `;
diff --git a/src/pages/SignInPage/SignInPage.styled.js b/src/pages/SignInPage/SignInPage.styled.js
@@ -9,26 +9,28 @@ export const SignInSection = styled.section`
   align-content: center;
   gap: 24px;
   margin-top: 24px;
-
   @media screen and (min-width: 834px) {
     gap: 80px;
     margin-top: 40px;
   }
 
   @media screen and (min-width: 1440px) {
     flex-direction: row;
-    justify-content: left;
     gap: 104px;
     max-width: 100%;
-    margin: 40px 0 72px 150px;
+    margin: 40px 0 72px;
   }
 `;
 
 export const ForgotPassLink = styled(Link)`
   display: block;
   text-align: center;
   color: inherit;
-
+  transition: opacity 0.2s;
+  &:hover,
+  &:focus {
+    opacity: 0.8;
+  }
   @media screen and (min-width: 1440px) {
     text-align: start;
     margin-left: 25px;