full refactor css

Blockchain-Country · Nov 23, 2024 · fa07b55 · fa07b55
1 parent 473a8ab
commit fa07b55
Show file tree

Hide file tree

Showing 28 changed files with 774 additions and 408 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
     "react-redux": "^9.1.2",
+    "react-router-dom": "^6.28.0",
     "react-scripts": "5.0.1",
     "react-toastify": "^10.0.6",
     "uuid": "^10.0.0",

diff --git a/public/index.html b/public/index.html
@@ -8,6 +8,8 @@
       href="%PUBLIC_URL%/android-chrome-192x192.png"
     />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

diff --git a/src/App.css b/src/App.css
@@ -1,86 +1,88 @@
-.app {
+[data-testid='app_main'] {
   display: flex;
-  flex-direction: column;
-  align-items: center;
   justify-content: center;
-  text-align: center;
+  margin: auto;
+  width: 80%;
+  padding-top: 9rem;
+  gap: 2rem;
+  height: 100%;
+  font-size: 1.5rem;
 }
 
-.app-header {
-  background-color: #0a1a2d;
-  color: #fff;
-  width: 100%;
-  margin-bottom: 20px;
+[data-testid='app_left_column'],
+[data-testid='app_right_column'] {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
 }
 
-.app-main {
-  display: flex;
-  justify-content: space-between;
-  width: 80%;
-  margin: 0 auto;
-  gap: 20px;
+[data-testid='app_left_column'] {
+  width: 35%;
 }
 
-.app-left-column {
-  flex: 1;
-  flex-basis: 35%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  /* align-self: flex-start; */
+[data-testid='app_right_column'] {
+  width: 65%;
 }
 
-.app-right-column {
-  flex: 1;
-  flex-basis: 65%;
+[data-testid='search_section'],
+[data-testid='manualAddBook_section'],
+[data-testid='filters_section'],
+[data-testid='bookList_section'] {
   display: flex;
   flex-direction: column;
-}
-
-.app-block {
-  padding: 20px;
-  margin: 20px;
+  align-items: center;
+  width: 100%;
+  padding: 1rem;
   background-color: #f2f2f2;
   border-radius: 5px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-@media (max-width: 1024px) {
-  .app-main {
+@media screen and (max-width: 767px) {
+  [data-testid='app_main'] {
     width: 100%;
     flex-direction: column;
+    justify-content: start;
+    gap: 1rem;
   }
 
-  .app-left-column,
-  .app-right-column {
-    flex-basis: 100%;
-    align-self: unset;
+  [data-testid='app_left_column'],
+  [data-testid='app_right_column'] {
+    width: 100%;
+    gap: 1rem;
   }
-}
 
+  [data-testid='search_section'],
+  [data-testid='manualAddBook_section'],
+  [data-testid='filters_section'],
+  [data-testid='bookList_section'] {
+    padding: 0.2rem;
+  }
+}
+/* 
 .language-selector {
   position: absolute;
   top: 20px;
   right: 20px;
-}
-
-.language-selector select:hover {
-  background-color: #dbe4f8;
-}
-
-.language-selector select {
-  background-color: #fff;
-  color: #0a1a2d;
-  border: none;
-  padding: 8px 12px;
-  border-radius: 3px;
-  font-size: 12px;
-  cursor: pointer;
-  margin: 10px;
-  transition: background-color 0.3s ease;
-}
-
-.language-selector select:focus {
-  outline: none;
-  border-color: #0a1a2d;
-}
+  }
+  
+  .language-selector select:hover {
+    background-color: #dbe4f8;
+    }
+    
+    .language-selector select {
+      background-color: #fff;
+      color: #0a1a2d;
+      border: none;
+      padding: 8px 12px;
+      border-radius: 3px;
+      font-size: 12px;
+      cursor: pointer;
+      margin: 10px;
+      transition: background-color 0.3s ease;
+      }
+      
+      .language-selector select:focus {
+        outline: none;
+        border-color: #0a1a2d;
+        } */
diff --git a/src/App.js b/src/App.js
@@ -1,28 +1,47 @@
-import './App.css'
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
 import BookFilter from './components/bookFilters/BookFilter'
-import BookForm from './components/manualBookForm/ManualBookForm'
+import ManualBookForm from './components/manualBookForm/ManualBookForm'
 import SearchBookForm from './components/searchBookForm/SearchBookForm'
 import BookList from './components/bookList/BookList'
+import Header from './components/header/Header'
+import Login from './components/login/Login'
 import Error from './components/error/Error'
+import './App.css'
 
 function App() {
   return (
-    <div className="app">
-      <header className="app-header" data-testid="app_header">
-        <h1>My Books Storage</h1>
-      </header>
-      <main className="app-main">
-        <div className="app-left-column">
-          <SearchBookForm />
-          <BookForm />
-        </div>
-        <div className="app-right-column">
-          <BookFilter />
-          <BookList />
-        </div>
-      </main>
-      <Error />
-    </div>
+    <BrowserRouter
+      future={{
+        v7_startTransition: true,
+        v7_relativeSplatPath: true,
+      }}
+    >
+      <div className="app">
+        <Header />
+        <main data-testid="app_main">
+          <Routes>
+            <Route
+              path="/"
+              element={
+                <>
+                  <div data-testid="app_left_column">
+                    <SearchBookForm data-testid="search_section" />
+                    <ManualBookForm data-testid="manualAddBook_section" />
+                  </div>
+                  <div data-testid="app_right_column">
+                    <BookFilter data-testid="filters_section" />
+                    <BookList data-testid="bookList_section" />
+                  </div>
+                </>
+              }
+            />
+            <Route path="/login" element={<Login />} />
+            <Route path="*" element={<h1>Not found</h1>} />
+          </Routes>
+        </main>
+        <Error />
+      </div>
+    </BrowserRouter>
   )
 }
 

diff --git a/src/App.test.js b/src/App.test.js
@@ -35,10 +35,10 @@ describe('App Component Tests', () => {
     setup(App, store)
 
     //main components elements:
-    header = screen.getByTestId('app_header')
-    manualBookForm_Component = screen.getByTestId('manualBookForm_component')
-    bookFilter_Component = screen.getByTestId('book_filter_component')
-    bookList_Component = screen.getByTestId('bookList_component')
+    header = screen.getByTestId('header_container')
+    manualBookForm_Component = screen.getByTestId('manualAddBook_section')
+    bookFilter_Component = screen.getByTestId('filters_section')
+    bookList_Component = screen.getByTestId('bookList_section')
   })
 
   test('Should render the Header to be in the DOM and should contain text "My Books Storage"', async () => {
@@ -65,14 +65,14 @@ describe('App functional Tests', () => {
     setup(App, store)
 
     // ManualBookForm elements:
-    titleInput = screen.getByTestId('manualBookForm_titleInput')
-    authorsInput = screen.getByTestId('manualBookForm_authorsInput')
-    submitBookBtn = screen.getByTestId('manualBookForm_submitBtn')
-    bookList_Component = screen.getByTestId('bookList_component')
+    titleInput = screen.getByTestId('manualAddBook_input_title')
+    authorsInput = screen.getByTestId('manualAddBook_input_author')
+    submitBookBtn = screen.getByTestId('manualAddBook_submit_btn')
+    bookList_Component = screen.getByTestId('bookList_section')
     // BookFilter elements:
-    filterByTitleInput = screen.getByTestId('filterByTitle_input')
-    filterbyAuthorsInput = screen.getByTestId('filterByAuthors_input')
-    clearAllFiltersBtn = screen.getByTestId('clearAllFilters_btn')
+    filterByTitleInput = screen.getByTestId('filter_title_input')
+    filterbyAuthorsInput = screen.getByTestId('filter_author_input')
+    clearAllFiltersBtn = screen.getByTestId('filter_clear_btn')
   })
 
   test('Should Submit a new book to the BookList component', () => {