loader hover and devlist fixes

src/components/Auth/AuthForDevelopers.module.css

@@ -156,6 +156,10 @@
   border: 2px solid #6aaf5c;
 }
 
+.form__btn:hover .loader * {
+  fill: #6aaf5c;
+}
+
 .form__btn:hover {
   background-image: none;
   background-color: #ffffff;

src/components/Auth/AuthForPartners.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { auth } from '../../redux/outstaffingSlice';
-import { loading } from '../../redux/loaderSlice'
+import { loading } from '../../redux/loaderSlice';
 import style from './AuthForPartners.module.css';
 import ellipse from '../../images/ellipse.png';
 import arrow from '../../images/arrow__login_page.png';
@@ -25,7 +25,7 @@ const AuthForPartners = () => {
   const dispatch = useDispatch()
   const isAuth = useSelector(selectAuth)
   const isLoading = useSelector(selectIsLoading)
-console.log('iL',isLoading);
+  
   const [username, setUsername] = useState('')
   const [password, setPassword] = useState('')
 
@@ -67,14 +67,14 @@ console.log('iL',isLoading);
                     onClick={!isLoading ? (e) => {
                       e.preventDefault();
                       dispatch(loading(true))
-                      fetchAuth({
+                      // fetchAuth({
-                        username,
+                      //   username,
-                        password,
+                      //   password,
-                        dispatch: ()=> {
+                      //   dispatch: ()=> {
-                          dispatch(auth(true))
+                      //     dispatch(auth(true))
-                          dispatch(loading(false))
+                      //     dispatch(loading(false))
-                        }
+                      //   }
-                      })
+                      // })
                     } : ()=>{}}
                   >
                   { isLoading ? <Loader /> : 'Войти' }

src/components/Description/Description.js

@@ -21,44 +21,46 @@ const Description = ({ onLoadMore }) => {
     <section className={style.description}>
       <div className="container">
         <div className={style.description__wrapper}>
-          {filteredListArr && filteredListArr.length > 0
+          {filteredListArr
-            ? filteredListArr.map((el) => (
+            ? (filteredListArr.length > 0 
-                <div className="row" key={el.id}>
+              ? <></> 
-                  <div className="col-2">
+              : filteredListArr.map((el) => (
-                    <img className={style.description__img} src={male} alt="" />
+                  <div className="row" key={el.id}>
-                  </div>
+                    <div className="col-2">
-                  <div className="col-12 col-xl-6">
+                      <img className={style.description__img} src={male} alt="" />
-                    <h3 className={style.description__title}>
+                    </div>
-                      <Link to={`/candidate/${el.id}`}>
+                    <div className="col-12 col-xl-6">
-                        {SKILLS[el.position_id]}, {LEVELS[el.level]}
+                      <h3 className={style.description__title}>
-                      </Link>
+                        <Link to={`/candidate/${el.id}`}>
-                    </h3>
+                          {SKILLS[el.position_id]}, {LEVELS[el.level]}
+                        </Link>
+                      </h3>
 
-                    {el.vc_text_short ? (
+                      {el.vc_text_short ? (
-                      <div className={style.description__text}>{el.vc_text_short}</div>
+                        <div className={style.description__text}>{el.vc_text_short}</div>
-                    ) : (
+                      ) : (
-                      <p className={style.description__textSecondary}>Описание отсутствует...</p>
+                        <p className={style.description__textSecondary}>Описание отсутствует...</p>
-                    )}
+                      )}
+                    </div>
+                    <div className="col-12 col-xl-4">
+                      <Link to={`/candidate/${el.id}`}>
+                        <button className={style.description__button}>Подробное резюме</button>
+                      </Link>
+                    </div>
+                    <div className="col-xl-2"></div>
+                    <div className="col-12 col-xl-6">
+                      <ul className={style.description__list}>
+                        {el.skillValues.map((e) => (
+                          <li key={e.id} className={style.description__list__item}>
+                            {e.skill.name}
+                          </li>
+                        ))}
+                      </ul>
+                      <img className={style.description__rectangle} src={rectangle} alt="" />
+                    </div>
+                    <div className="col-xl-4"></div>
                   </div>
-                  <div className="col-12 col-xl-4">
+                )))
-                    <Link to={`/candidate/${el.id}`}>
-                      <button className={style.description__button}>Подробное резюме</button>
-                    </Link>
-                  </div>
-                  <div className="col-xl-2"></div>
-                  <div className="col-12 col-xl-6">
-                    <ul className={style.description__list}>
-                      {el.skillValues.map((e) => (
-                        <li key={e.id} className={style.description__list__item}>
-                          {e.skill.name}
-                        </li>
-                      ))}
-                    </ul>
-                    <img className={style.description__rectangle} src={rectangle} alt="" />
-                  </div>
-                  <div className="col-xl-4"></div>
-                </div>
-              ))
             : candidatesListArr.map((el) => (
                 <div className="row" key={el.id}>
                   <div className="col-2">

src/components/Loader/Loader.js

@@ -1,4 +1,6 @@
 import SVGLoader from "react-loader-spinner";
+import './loader.css'
+
 export const Loader = () => {
     return (
         <div className='loader'>
@@ -7,7 +9,6 @@ export const Loader = () => {
                 color="#fff"
                 height={50}
                 width={50}
-                timeout={3000}
             />
         </div>
     );

src/components/Loader/loader.css

@@ -0,0 +1,11 @@
+.loader {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.loader:hover path {
+        fill: #6aaf5c;
+}

src/components/Select/TagSelect.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import Select from 'react-select';
+import { Loader } from '../Loader/Loader';
 import style from './TagSelect.module.css';
 import { selectedItems, selectItems, selectTags, filteredCandidates } from '../../redux/outstaffingSlice';
 import { fetchItemsForId } from '../../server/server';
+import { selectIsLoading } from '../../redux/loaderSlice';
 
 const TagSelect = () => {
   const dispatch = useDispatch();
+  const isLoading = useSelector(selectIsLoading)
 
   const itemsArr = useSelector(selectItems);
 
@@ -41,8 +44,8 @@ const TagSelect = () => {
                     return { id: item.id, value: item.value, label: item.value };
                   })}
                 />
-                <button onClick={handleSubmit} type="submit">
+                <button onClick={handleSubmit} type="submit" className={style.search__submit}>
-                  Поиск
+                { isLoading ? <Loader /> : 'Поиск' }
                 </button>
               </div>
             </div>

src/components/Select/TagSelect.module.css

@@ -70,3 +70,7 @@
   font-size: 1.6em !important;
   color: gray !important;
 }
+
+.search__submit:hover .loader path {
+    fill: #6aaf5c;
+}