Merge pull request #36 from Blockchain-Country/forgotpassword

added forgot password functionality and updated css
Blockchain-Country · Jan 6, 2025 · 04ac582 · 04ac582
2 parents 27aaf9d + 504c8cb
commit 04ac582
Show file tree

Hide file tree

Showing 18 changed files with 381 additions and 126 deletions.
diff --git a/src/App.css b/src/App.css
@@ -4,9 +4,8 @@
   height: 100%;
   width: 80%;
   gap: 2rem;
-  padding-top: 9rem;
-  padding-bottom: 2rem;
-  margin: auto;
+  /* padding-top: 9rem; */
+  margin: 9rem auto;
   font-size: 1.5rem;
 }
 
@@ -28,7 +27,6 @@
 [data-testid='search_book_section'],
 [data-testid='manualAddBook_section'],
 [data-testid='random_book_section'],
-[data-testid='random_book_section'],
 [data-testid='filters_section'],
 [data-testid='bookList_section'] {
   display: flex;
@@ -43,10 +41,9 @@
 
 @media screen and (max-width: 768px) {
   [data-testid='app_main'] {
-    width: 100%;
+    width: 90%;
     flex-direction: column;
     justify-content: start;
-    padding-top: 13rem;
     gap: 1rem;
   }
 
@@ -60,9 +57,27 @@
   [data-testid='manualAddBook_section'],
   [data-testid='filters_section'],
   [data-testid='bookList_section'] {
-    padding: 0.2rem;
+    font-size: 1.2rem;
+  }
+
+  [data-testid='random_book_section'] {
+    display: none;
   }
 }
+
+@media screen and (max-width: 480px) {
+  [data-testid='app_main'] {
+    width: 95%;
+  }
+
+  [data-testid='search_book_section'],
+  [data-testid='manualAddBook_section'],
+  [data-testid='filters_section'],
+  [data-testid='bookList_section'] {
+    font-size: 1rem;
+  }
+}
+
 /* 
 .language-selector {
   position: absolute;

diff --git a/src/App.js b/src/App.js
@@ -11,6 +11,7 @@ import Header from './components/header/Header'
 import Footer from './components/footer/Footer'
 import Login from './components/user/login/Login'
 import Signup from './components/user/signup/Signup'
+import SignInHelp from './components/user/signInHelp/SignInHelp'
 import Error from './components/error/Error'
 import Alert from './components/alertMessage/Alert'
 import { syncLoadBook } from './redux/slices/booksSlice'
@@ -56,6 +57,7 @@ function App() {
             />
             <Route path="/login" element={<Login />} />
             <Route path="/signup" element={<Signup />} />
+            <Route path="/sign-in-help" element={<SignInHelp />} />
             <Route path="*" element={<h1>Not found</h1>} />
           </Routes>
         </main>

diff --git a/src/components/bookListSection/BookListSection.css b/src/components/bookListSection/BookListSection.css
@@ -1,8 +1,9 @@
 section[data-testid='bookList_section'] {
   width: 100%;
-  min-height: 38.4rem;
+  min-height: 34.2rem;
   padding: 0;
   padding-bottom: 1rem;
+  margin-bottom: 8rem;
   overflow-x: hidden;
 }
 
@@ -29,3 +30,28 @@ span[data-testid='highlighted_text'] {
   border-radius: 5px;
   padding: 0 0.5px;
 }
+
+/* Media Queries */
+@media screen and (max-width: 768px) {
+  section[data-testid='bookList_section'] {
+    min-height: 30rem;
+    margin-bottom: 8rem;
+  }
+
+  p[data-testid='bookList_emptyMsg'] {
+    margin: 3rem;
+    font-size: 1rem;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  section[data-testid='bookList_section'] {
+    min-height: 25rem;
+    margin-bottom: 8rem;
+  }
+
+  p[data-testid='bookList_emptyMsg'] {
+    margin: 2rem;
+    font-size: 0.9rem;
+  }
+}
diff --git a/src/components/footer/Footer.css b/src/components/footer/Footer.css
@@ -4,17 +4,25 @@ footer[data-testid='footer_container'] {
   left: 0;
   width: 100%;
   height: 7rem;
+  z-index: 1000;
+  color: #fff;
+  background-color: #0a1a2d;
+  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.2);
+  display: flex;
+  justify-content: center;
+  padding: 0.5rem;
+}
+
+div[data-testid='footer_wrapper'] {
+  width: 80%;
+  height: 100%;
   display: flex;
   align-items: center;
   gap: 2rem;
-  padding: 0 3rem;
-  background-color: #0a1a2d;
-  color: #fff;
-  z-index: 1000;
-  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.2);
+  margin: 0 auto;
 }
 
-span[data-testid='foote_header_text'] {
+span[data-testid='footer_header_text'] {
   font-style: italic;
   font-weight: normal;
 }
@@ -67,14 +75,32 @@ img[data-testid^='footer_icon_']:hover {
   box-shadow: 0px 0px 10px #fff;
 }
 
-@media (max-width: 768px) {
-  footer[data-testid='footer_container'] {
+/* Media Queries */
+@media screen and (max-width: 768px) {
+  div[data-testid='footer_wrapper'] {
+    width: 90%;
+    height: 100%;
     flex-direction: column;
-    height: auto;
-    padding: 1rem;
+    justify-content: space-around;
+    gap: 0;
+    font-size: 0.9rem;
+  }
+
+  a[data-testid='footer_nav_element'] {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  div[data-testid='footer_wrapper'] {
+    width: 100%;
+    font-size: 0.7rem;
+    padding: 0.5rem;
   }
 
-  nav[data-testid='footer_nav_elements'] {
-    gap: 0.5rem;
+  a[data-testid='footer_nav_element'] {
+    width: 2rem;
+    height: 2rem;
   }
 }
diff --git a/src/components/footer/Footer.jsx b/src/components/footer/Footer.jsx
@@ -3,55 +3,57 @@ import './Footer.css'
 const Footer = () => {
   return (
     <footer data-testid="footer_container">
-      <h2>
-        <span data-testid="foote_header_text">Developed by</span>{' '}
-        <a
-          href="https://www.linkedin.com/in/antonishchenko"
-          target="_blank"
-          rel="noopener noreferrer"
-          data-testid="footer_header_name_link"
-        >
-          Anton Ishchenko
-        </a>
-      </h2>
-      <nav data-testid="footer_nav_elements">
-        <a
-          href="https://www.linkedin.com/in/antonishchenko"
-          target="_blank"
-          rel="noopener noreferrer"
-          data-testid="footer_nav_element"
-        >
-          <img
-            src="/social/linkedin.png"
-            alt="LinkedIn"
-            data-testid="footer_icon_linkedin"
-          />
-        </a>
-        <a
-          href="https://github.com/Blockchain-Country/books-storage"
-          target="_blank"
-          rel="noopener noreferrer"
-          data-testid="footer_nav_element"
-        >
-          <img
-            src="/social/github.png"
-            alt="GitHub"
-            data-testid="footer_icon_github"
-          />
-        </a>
-        <a
-          href="mailto:[email protected]"
-          target="_blank"
-          rel="noopener noreferrer"
-          data-testid="footer_nav_element"
-        >
-          <img
-            src="/social/email.png"
-            alt="Email"
-            data-testid="footer_icon_email"
-          />
-        </a>
-      </nav>
+      <div data-testid="footer_wrapper">
+        <h2>
+          <span data-testid="foote_header_text">Developed by</span>{' '}
+          <a
+            href="https://www.linkedin.com/in/antonishchenko"
+            target="_blank"
+            rel="noopener noreferrer"
+            data-testid="footer_header_name_link"
+          >
+            Anton Ishchenko
+          </a>
+        </h2>
+        <nav data-testid="footer_nav_elements">
+          <a
+            href="https://www.linkedin.com/in/antonishchenko"
+            target="_blank"
+            rel="noopener noreferrer"
+            data-testid="footer_nav_element"
+          >
+            <img
+              src="/social/linkedin.png"
+              alt="LinkedIn"
+              data-testid="footer_icon_linkedin"
+            />
+          </a>
+          <a
+            href="https://github.com/Blockchain-Country/books-storage"
+            target="_blank"
+            rel="noopener noreferrer"
+            data-testid="footer_nav_element"
+          >
+            <img
+              src="/social/github.png"
+              alt="GitHub"
+              data-testid="footer_icon_github"
+            />
+          </a>
+          <a
+            href="mailto:[email protected]"
+            target="_blank"
+            rel="noopener noreferrer"
+            data-testid="footer_nav_element"
+          >
+            <img
+              src="/social/email.png"
+              alt="Email"
+              data-testid="footer_icon_email"
+            />
+          </a>
+        </nav>
+      </div>
     </footer>
   )
 }

diff --git a/src/components/header/Header.css b/src/components/header/Header.css
@@ -4,27 +4,35 @@ header[data-testid='header_container'] {
   left: 0;
   width: 100%;
   height: 7rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 2rem 3rem;
   z-index: 1000;
   color: #fff;
   background-color: #0a1a2d;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+  display: flex;
+  justify-content: center;
+}
+
+div[data-testid='header_wrapper'] {
+  width: 80%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
-span[data-testid='header_logo'] {
-  margin: 1rem;
+span[data-testid='header_logo_and_title'] {
+  display: flex;
+  align-items: center;
+  column-gap: 2rem;
 }
 
 h1[data-testid='header_title'] {
-  text-align: center;
   font-size: 2rem;
 }
 
-div[data-testid='header_login_wrapper'] {
-  margin: 1rem;
+nav[data-testid='header_nav'] {
+  display: flex;
+  gap: 1.5rem;
 }
 
 a[data-testid='header_login_btn'] {
@@ -33,7 +41,6 @@ a[data-testid='header_login_btn'] {
   cursor: pointer;
   color: #fff;
   display: inline-block;
-  margin: 1rem;
   transition: transform 0.1s linear;
 }
 
@@ -47,18 +54,44 @@ a[data-testid='header_login_btn']:active {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
-@media screen and (max-width: 650px) {
+/* Media Queries */
+@media screen and (max-width: 768px) {
+  a[data-testid='header_login_btn'] {
+    font-size: 1.2rem;
+  }
+}
+
+@media screen and (max-width: 480px) {
   header[data-testid='header_container'] {
+    padding: 1rem;
+  }
+
+  div[data-testid='header_wrapper'] {
+    width: 95%;
     flex-direction: column;
-    padding: 0;
-    height: auto;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  span[data-testid='header_logo_and_title'] {
+    column-gap: 1rem;
+    align-self: flex-start;
+  }
+
+  a[data-testid='header_logo'] img {
+    height: 2.5rem;
+    min-width: 2.5rem;
   }
 
   h1[data-testid='header_title'] {
     font-size: 1.5rem;
   }
 
-  [data-testid='header_login_btn'] {
-    font-size: 1.3rem;
+  nav[data-testid='header_nav'] {
+    align-self: end;
+  }
+
+  a[data-testid='header_login_btn'] {
+    font-size: 1rem;
   }
 }