final etap

src/components/App.jsx

@@ -1,52 +1,40 @@
-import { Contacts } from 'pages/Contacts/Contacts';
 import { Layout } from 'pages/Layout/Layout';
-import { Login } from 'pages/Login/Login';
-import { Register } from 'pages/Register/Register';
-import { Suspense, useEffect } from 'react';
+import { Suspense, lazy, useEffect } from 'react';
 import { Route, Routes } from 'react-router-dom';
 import { AppBar } from './AppBar/AppBar';
-import { Welcome } from 'pages/Welcome/Welcome';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { refreshUser } from 'redux/auth/operations';
+import { selectIsRefreshing } from 'redux/auth/selectors';
+
+
+import { Loading } from './Loading';
+const Welcome = lazy(() => import('pages/Welcome/Welcome'));
+const Register = lazy(() => import('pages/Register/Register'));
+const Login= lazy(() => import('pages/Login/Login'));
+const Contacts = lazy(() => import('pages/Contacts/Contacts'));
 
 export function App() {
+  const isRefreshing = useSelector(selectIsRefreshing);
   const dispatch = useDispatch();
 
   useEffect(() => {
     dispatch(refreshUser());
   }, [dispatch]);
 
   return (
-    <>
-      <AppBar />
-      <Routes>
-        <Route path="/" element={<Layout />} />
-        <Route index path="/" element={<Welcome />} />
-        <Route
-          path="/register"
-          element={
-            <Suspense>
-              <Register />
-            </Suspense>
-          }
-        />
-        <Route
-          path="/login"
-          element={
-            <Suspense>
-              <Login />
-            </Suspense>
-          }
-        />
-        <Route
-          path="/contacts"
-          element={
-            <Suspense>
-              <Contacts />
-            </Suspense>
-          }
-        />
-      </Routes>
-    </>
+    !isRefreshing && (
+      <>
+        <AppBar />
+        <Suspense fallback={<Loading/>}>
+          <Routes>
+            <Route path="/" element={<Layout />} />
+            <Route index path="/" element={<Welcome />} />
+            <Route path="/register" element={<Register />} />
+            <Route path="/login" element={<Login />} />
+            <Route path="/contacts" element={<Contacts />} />
+          </Routes>
+        </Suspense>
+      </>
+    )
   );
 }

src/components/AppBar/AppBar.jsx

@@ -3,11 +3,12 @@ import { Navigation } from 'components/Navigation/Navigation';
 import { UserMenu } from 'components/UserMenu/UserMenu';
 import { useSelector } from 'react-redux';
 import { selectIsLoggedIn } from 'redux/auth/selectors';
+import css from './AppBar.module.css'
 
 export const AppBar = () => {
   const isLoggedIn = useSelector(selectIsLoggedIn);
   return (
-    <header>
+    <header className={css.header}>
       <Navigation />
       {isLoggedIn ? <UserMenu /> : <AuthNav />}
     </header>

src/components/AppBar/AppBar.module.css

@@ -0,0 +1,18 @@
+.header {
+  display: flex;
+  gap: 40px;
+  justify-content: center;
+  background: rgb(176, 93, 200);
+  background: linear-gradient(
+    90deg,
+    rgba(176, 93, 200, 1) 13%,
+    rgba(132, 232, 164, 1) 57%,
+    rgba(224, 133, 133, 1) 82%
+  );
+  background-size: 100% 100%; /* Додана властивість background-size */
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+  transition: box-shadow 250ms ease-in-out; 
+}
+.header:hover {
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4); 
+  }

src/components/AuthNav/AuthNav.jsx

@@ -4,12 +4,12 @@ import css from './AuthNav.module.css';
 export const AuthNav = () => {
   return (
     <ul className={css.list}>
-      <li>
+      <li className={css.li}>
         <Link to="/register" className={css.link}>
           Register
         </Link>
       </li>
-      <li>
+      <li className={css.li}>
         <Link to="/login" className={css.link}>
           Login
         </Link>

src/components/AuthNav/AuthNav.module.css

@@ -1,16 +1,22 @@
-.list{
-    display: flex;
-    gap: 20px;
-    list-style: none;
-    padding: 0;
+.list {
+  display: flex;
+  gap: 40px;
+  list-style: none;
+  padding: 0;
 }
-.link{
-    font-size: 20px;
-    text-decoration: none;
-    color: pink;
-    transition: color 200ms ease-in-out;
+.link {
+  font-size: 20px;
+  text-decoration: none;
+  color: #ba3cd0;
+  transition: color 200ms ease-in-out;
 }
 .link:hover,
-.link:focus{
-    color: rgb(241, 131, 149);
-}
+.link:focus {
+  color: #9c27b0;
+}
+.li {
+  padding: 8px 16px;
+  background-color: #ead7ed;
+  border: 1px #9c27b0 solid;
+  border-radius: 20px;
+}

src/components/ContactForm/ContactForm.jsx

@@ -55,9 +55,11 @@ export function ContactForm() {
 
   return (
     <>
-    {error && 'something went wrong'}
+      {error && 'something went wrong'}
       <form onSubmit={handleSubmit} className={css.form}>
-        <label htmlFor={id}>Name</label>
+        <label htmlFor={id} className={css.label}>
+          Name
+        </label>
         <input
           type="text"
           name="name"
@@ -70,7 +72,9 @@ export function ContactForm() {
           className={css.inputName}
           required
         />
-        <label htmlFor={id}>Number</label>
+        <label htmlFor={id} className={css.label}>
+          Number
+        </label>
         <input
           type="tel"
           name="number"
@@ -83,7 +87,7 @@ export function ContactForm() {
           required
         />
         <button type="submit" className={css.buttonContacts}>
-          Add Contact
+          +
         </button>
       </form>
     </>

src/components/ContactForm/ContactForm.module.css

@@ -1,13 +1,42 @@
-.inputName{
-    margin: 0 10px;
-}
-.buttonContacts{
-    background-color: transparent;
-    border: 1px black solid;
-    border-radius: 3px;
-    padding: 5px;
-}
-.form{
-    border: 2px black solid;
-    padding: 20px;
-}
+.inputName {
+  margin: 0 20px;
+  color: rgb(255, 173, 20);
+  font-size: 18px;
+  padding: 4px 8px;
+  border-radius: 8px;
+}
+.buttonContacts {
+  font-size: 28px;
+  color: white;
+  background-color: rgb(81, 232, 81);
+  border: 1px rgb(81, 232, 81) solid;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+  transition: background-color 200ms ease-in-out, transform 200ms,
+    box-shadow 200ms;
+}
+.buttonContacts:hover,
+.buttonContacts:focus {
+  transform: scale(1.1);
+  background-color: rgb(50, 229, 50);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+}
+.form {
+  background: rgb(203, 136, 12);
+  background: linear-gradient(
+    90deg,
+    rgba(203, 136, 12, 1) 0%,
+    rgba(255, 165, 0, 1) 50%,
+    rgba(255, 217, 165, 1) 100%
+  );
+  border: 1px black solid;
+  border-radius: 4px;
+  padding: 20px;
+}
+.label {
+  font-size: 18px;
+  color: black;
+}

src/components/ContactsList/ContactList.jsx

@@ -21,7 +21,7 @@ export const ContactsList = () => {
   return (
     <div>
       {error && 'something went wrong'}
-      <ul>
+      <ul className={css.list}>
         {filteredContacts.map(contact => (
           <li key={contact.id}>
             <span>
@@ -31,7 +31,7 @@ export const ContactsList = () => {
               onClick={() => dispatch(deleteContact(contact.id))}
               className={css.buttonFilter}
             >
-              Delete
+              &#10060;
             </button>
           </li>
         ))}

src/components/ContactsList/ContactList.module.css

@@ -1,7 +1,25 @@
-.buttonFilter{
-    background-color: transparent;
-    border: 1px black solid;
-    border-radius: 3px;
-    padding: 5px;
-    margin-left: 10px;
-}
+.buttonFilter {
+  border-radius: 50%;
+  font-size: 18px;
+  color: rgb(240, 27, 27);
+  background-color: rgb(250, 181, 181);
+  border: 1px red solid;
+  width: 40px;
+  height: 40px;
+  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+  transition: background-color 200ms ease-in-out, transform 200ms,
+    box-shadow 200ms;
+  margin-left: 10px;
+}
+.buttonFilter:hover,
+.buttonFilter:focus {
+  transform: scale(1.1);
+  background-color: rgb(246, 150, 150);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+}
+.list{
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}

src/components/Filter/Filter.jsx

@@ -1,6 +1,7 @@
 import { useDispatch, useSelector } from 'react-redux';
 import { setFilter } from 'redux/contacts/contactsSlice';
 import { selectError, selectFilter } from 'redux/contacts/selectors';
+import css from './Filter.module.css'
 
 export const Filter = () => {
   const error = useSelector(selectError);
@@ -15,8 +16,8 @@ export const Filter = () => {
   return (
     <div>
       {error && 'something went wrong'}
-      <h3>Find contacts by name</h3>
-      <input
+      <h3 className={css.title3}>Find contacts by name</h3>
+      <input className={css.input}
         type="filter"
         name="filter"
         value={filter}

src/components/Filter/Filter.module.css

@@ -0,0 +1,10 @@
+.title3{
+    font-size: 24px;
+    color: rgb(255, 203, 108);
+}
+.input{
+    color: rgb(255, 216, 145);
+    font-size: 16px;
+    padding: 4px 8px;
+    border-radius: 8px;
+}

src/components/Navigation/Navigation.jsx

@@ -8,12 +8,12 @@ export function Navigation() {
   return (
     <nav className={css.nav}>
       <ul className={css.list}>
-        <li>
+        <li className={css.li}>
           <Link to="/" className={css.link}>
             Home
           </Link>
         </li>
-        {isLoggedIn && <li>
+        {isLoggedIn && <li className={css.li}>
           <Link to="/contacts" className={css.link}>
             Contacts
           </Link>

src/components/Navigation/Navigation.module.css

@@ -1,20 +1,22 @@
-.list{
-    display: flex;
-    gap: 20px;
-    list-style: none;
-    padding: 0;
+.list {
+  display: flex;
+  gap: 40px;
+  list-style: none;
+  padding: 0;
 }
-.link{
-    font-size: 20px;
-    text-decoration: none;
-    color: pink;
-    transition: color 200ms ease-in-out;
+.link {
+  font-size: 20px;
+  text-decoration: none;
+  color: #ba3cd0;
+  transition: color 200ms ease-in-out;
 }
 .link:hover,
-.link:focus{
-    color: rgb(241, 131, 149);
+.link:focus {
+  color: #9c27b0;
+}
+.li {
+  padding: 8px 16px;
+  background-color: #ead7ed;
+  border: 1px #9c27b0 solid;
+  border-radius: 20px;
 }
-.nav{
-    display: flex;
-    justify-content: center;
-}