footer changed

src/App.js

@@ -1,5 +1,7 @@
 import React, { Suspense, lazy } from 'react'
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
+import { useSelector } from 'react-redux'
+import { selectAuth } from './redux/outstaffingSlice';
 import 'bootstrap/dist/css/bootstrap.min.css'
 import './fonts/stylesheet.css'
 import { ProtectedRoute } from './components/ProtectedRoute/ProtectedRoute';
@@ -12,7 +14,8 @@ import CalendarPage from'./pages/CalendarPage';
 import ReportPage from './pages/ReportFormPage.js';
 import FormPage from './pages/FormPage.js';
 
-const App = () => {
+const App = (props) => {
+  const isAuth = useSelector(selectAuth)
   return (<>
     <h1>IT Аутстаффинг в России</h1>
     <Router>

src/components/Auth/AuthForDevelopers.js

@@ -8,9 +8,6 @@ import arrow from '../../images/arrow__login_page.png'
 import authImg from '../../images/auth_img.png'
 import cross from '../../images/cross.png'
 import text from '../../images/Body_Text.png'
-import align from '../../images/align-left.png'
-import phone from '../../images/phone.png'
-import telegram from '../../images/telegram.png'
 import vector from '../../images/Vector_Smart_Object.png'
 import vectorBlack from '../../images/Vector_Smart_Object_black.png'
 import { fetchAuth } from '../../server/server'
@@ -22,6 +19,7 @@ import { Loader } from '../Loader/Loader'
 
 import { withSwalInstance } from 'sweetalert2-react';
 import swal from 'sweetalert2';
+import { Footer } from '../Footer/Footer'
  
 const SweetAlert = withSwalInstance(swal);
 
@@ -153,36 +151,7 @@ const AuthForDevelopers = () => {
               </div>
             </div>
           </div>
-
-          <div className='row'>
-            <div className='col-12 col-xl-7'>
-              <div className={style.developers__footer__left}>
-                <div className={style.footer__left__img}>
-                  <img src={align} alt='' />
-                </div>
-                <div className={style.footer__left__sp}>
-                  <span>
-                    Подберем и документально оформим IT-специалистов, после чего передадим исполнителей под ваше руководство. 
-                    Вы получаете полное управление над сотрудниками, имея возможность контролировать и заменять IT штат.{' '}
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            <div className='col-4 col-xl-2'>
-              <div className={style.developers__footer__icon}>
-                <img src={phone} alt='' />
-                <img src={telegram} alt='' />
-              </div>
-            </div>
-
-            <div className='col-8 col-xl-3'>
-              <div className={style.developers__footer__right}>
-                <p className={style.phone}>+7 495 156 78 98</p>
-                <p className={style.workingHours}>Будни с 9:00 до 21:00</p>
-              </div>
-            </div>
-          </div>
+          <Footer />
         </div>
       </div>
     </section>

src/components/Auth/AuthForDevelopers.module.css

@@ -361,91 +361,6 @@
   }
 }
 
-.developers__footer__left {
-  display: flex;
-  align-items: center;
-  margin-bottom: 60px;
-}
-
-@media (max-width: 575.98px) {
-  .developers__footer__left {
-    margin-top: 120px;
-  }
-}
-
-.footer__left__sp {
-  padding: 0 100px 0 34px;
-}
-
-@media (max-width: 575.98px) {
-  .footer__left__sp {
-    padding: 0;
-    margin-left: 10px;
-  }
-}
-
-.developers__footer__left > div > span {
-  color: #18586e;
-  font-family: 'GT Eesti Pro Display';
-  font-size: 1.6em;
-  font-weight: 400;
-  font-style: normal;
-  letter-spacing: normal;
-  line-height: 16.81px;
-  text-align: left;
-}
-
-@media (max-width: 575.98px) {
-  .developers__footer__left > div > span {
-    font-size: 1.2em;
-  }
-}
-
-.developers__footer__icon {
-  text-align: end;
-}
-
-.developers__footer__icon > img {
-  margin-left: 20px;
-}
-
-@media (max-width: 575.98px) {
-  .developers__footer__icon > img {
-    margin-left: 10px;
-  }
-}
-
-.developers__footer__right {
-  display: flex;
-  flex-direction: column;
-  align-items: left;
-}
-
-@media (max-width: 575.98px) {
-  .developers__footer__right {
-    margin-bottom: 20px;
-  }
-}
-.phone {
-  color: #003b65;
-  font-family: 'CeraPro';
-  font-size: 2.1em;
-  letter-spacing: normal;
-  line-height: 25px;
-  text-align: left;
-}
-
-.workingHours {
-  color: #003b65;
-  font-family: 'CeraPro';
-  font-size: 1.2em;
-  font-weight: 400;
-  font-style: normal;
-  letter-spacing: normal;
-  line-height: normal;
-  margin-left: 24px;
-}
-
 .auth__link {
   display: block;
 }

src/components/Auth/AuthForPartners.js

@@ -23,6 +23,7 @@ import { Loader } from '../Loader/Loader'
 
 import { withSwalInstance } from 'sweetalert2-react';
 import swal from 'sweetalert2';
+import { Footer } from '../Footer/Footer'
  
 const SweetAlert = withSwalInstance(swal);
 
@@ -144,36 +145,7 @@ const AuthForPartners = () => {
               </div>
             </div>
           </div>
-
-          <div className="row">
-            <div className="col-12 col-xl-7">
-              <div className={style.partners__footer__left}>
-                <div className={style.footer__left__img}>
-                  <img src={align} alt="" />
-                </div>
-                <div className={style.footer__left__sp}>
-                  <span>
-                    Подберем и документально оформим IT-специалистов, после чего передадим исполнителей под ваше руководство. 
-                    Вы получаете полное управление над сотрудниками, имея возможность контролировать и заменять IT штат.{' '}
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            <div className="col-4 col-xl-2">
-              <div className={style.partners__footer__icon}>
-                <img src={phone} alt="" />
-                <img src={telegram} alt="" />
-              </div>
-            </div>
-
-            <div className="col-8 col-xl-3">
-              <div className={style.partners__footer__right}>
-                <p className={style.phone}>+7 495 156 78 98</p>
-                <p className={style.workingHours}>Будни с 9:00 до 21:00</p>
-              </div>
-            </div>
-          </div>
+          <Footer />
         </div>
       </div>
     </section>

src/components/Calendar/Calendar.js

@@ -7,6 +7,7 @@ import calendarMale from '../../images/medium_male.png';
 import rectangle from '../../images/rectangle_secondPage.png';
 import CalendarComponent from './CalendarComponent';
 import { currentMonth } from './calendarHelper';
+import { Footer } from '../Footer/Footer';
 
 const Calendar = () => {
   const candidateForCalendar = useSelector(selectCurrentCandidate);
@@ -52,6 +53,7 @@ const Calendar = () => {
             </p>
           </div>
         </div>
+        <Footer />
     </section>
   );
 };

src/components/Calendar/Calendar.module.css

@@ -293,3 +293,7 @@
   letter-spacing: normal;
   line-height: normal;
 }
+
+.calendar footer {
+  margin-top: 2rem !important;
+}

src/components/Candidate/Candidate.js

@@ -10,6 +10,7 @@ import front from '../../images/front_end.png';
 import back from '../../images/back_end.png';
 import design from '../../images/design.png';
 import { fetchItemsForId } from '../../server/server';
+import { Footer } from '../Footer/Footer';
 
 import './candidate.css';
 
@@ -129,6 +130,7 @@ const Candidate = () => {
             </div>
           </div>
         </div>
+        <Footer />
     </div>
   );
 };

src/components/Candidate/candidate.css

@@ -281,3 +281,7 @@
 .candidate + .logout-button{
   top: 80px !important;
 }
+
+.candidate footer {
+  margin-top: 2.5rem !important;
+}

src/components/Footer/Footer.js

@@ -1,10 +1,46 @@
 import React from 'react';
 import './footer.css';
+import align from '../../images/align-left.png'
+import phone from '../../images/phone.png'
+import telegram from '../../images/telegram.png'
 
 export const Footer = () => {
     return (
+        <div className='container'>
         <footer>
-            <div>2021 © Outstaffing</div>
+            
+        <div className='footer row'>
+            <div className='col-12 col-xl-7'>
+                <div className='footer__left'>
+                    <div className='footer__img'>
+                    <img src={align} alt='' />
+                    </div>
+                    <div className='footer__description'>
+                    <span>
+                        Подберем и документально оформим IT-специалистов, после чего передадим исполнителей под ваше руководство. 
+                        Вы получаете полное управление над сотрудниками, имея возможность контролировать и заменять IT штат.{' '}
+                    </span>
+                    </div>
+                </div>
+                </div>
+
+                <div className='col-4 col-xl-2'>
+                <div className='footer__icon'>
+                    <img src={phone} alt='' />
+                    <img src={telegram} alt='' />
+                </div>
+                </div>
+
+                <div className='col-8 col-xl-3'>
+                <div className='footer__right'>
+                    <p className='footer__phone'>+7 495 156 78 98</p>
+                    <p className='footer__hours'>Будни с 9:00 до 21:00</p>
+                </div>
+            </div>
+        </div>
+        <div className='copyright'>2021 © Outstaffing</div>
+
         </footer>
+        </div>
     )
 }

src/components/Footer/footer.css

@@ -1,11 +1,94 @@
 footer {
-    padding: 2rem 5rem;
+  margin-top: -3rem;
 }
   
-footer>div {
-    border-top: 2px solid #73c141;
-    padding: 1rem;
+footer .copyright {
+    padding: 1rem 1rem 1rem 5.6rem;
     font-family: 'Muller';
     font-weight: 300;
     font-size: 1.2em;
 }
+
+.footer__left {
+  display: flex;
+  align-items: center;
+}
+
+@media (max-width: 575.98px) {
+  .footer__left {
+    margin-top: 120px;
+  }
+}
+
+.footer__description {
+  padding: 0 100px 0 34px;
+}
+
+@media (max-width: 575.98px) {
+  .footer__description {
+    padding: 0;
+    margin-left: 10px;
+  }
+}
+
+.footer__left > div > span {
+  color: #18586e;
+  font-family: 'GT Eesti Pro Display';
+  font-size: 1.6em;
+  font-weight: 400;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 16.81px;
+  text-align: left;
+}
+
+@media (max-width: 575.98px) {
+  .footer__left > div > span {
+    font-size: 1.2em;
+  }
+}
+
+.footer__icon {
+  text-align: end;
+}
+
+.footer__icon > img {
+  margin-left: 20px;
+}
+
+@media (max-width: 575.98px) {
+  .footer__icon > img {
+    margin-left: 10px;
+  }
+}
+
+.footer__right {
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+}
+
+@media (max-width: 575.98px) {
+  .footer__right {
+    margin-bottom: 20px;
+  }
+}
+.footer__phone {
+  color: #003b65;
+  font-family: 'CeraPro';
+  font-size: 2.1em;
+  letter-spacing: normal;
+  line-height: 25px;
+  text-align: left;
+}
+
+.footer__working-hours {
+  color: #003b65;
+  font-family: 'CeraPro';
+  font-size: 1.2em;
+  font-weight: 400;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: normal;
+  margin-left: 24px;
+}

src/components/Home/Home.js

@@ -4,6 +4,7 @@ import Outstaffing from '../Outstaffing/Outstaffing';
 import Description from '../Description/Description';
 import { fetchProfile, fetchSkills } from '../../server/server';
 import { profiles, tags } from '../../redux/outstaffingSlice';
+import { Footer } from '../Footer/Footer';
 
 const Home = () => {
   const [isLoadingMore, setIsLoadingMore] = useState(false);
@@ -39,6 +40,7 @@ const Home = () => {
     <>
       <Outstaffing />
       <Description onLoadMore={loadMore} isLoadingMore={isLoadingMore} />
+      <Footer />
     </>
   );
 };

src/index.js

@@ -3,7 +3,6 @@ import ReactDOM from 'react-dom';
 import { store } from './store/store';
 import { Provider } from 'react-redux';
 import App from './App';
-import { Footer } from './components/Footer/Footer';
 
 import './index.css';
 
@@ -11,7 +10,6 @@ ReactDOM.render(
   <Provider store={store}>
     <>
     <App />
-    <Footer />
     </>
   </Provider>,
   document.getElementById('root')

src/pages/FormPage.js

@@ -7,6 +7,7 @@ import { WithLogout } from '../hoc/withLogout';
 import Form from '../components/Form/Form';
 import { LEVELS, SKILLS } from '../components/constants/constants';
 import { fetchItemsForId } from '../server/server';
+import { Footer } from '../components/Footer/Footer';
 
 import arrow from '../images/right-arrow.png';
 import rectangle from '../images/rectangle_secondPage.png';
@@ -70,6 +71,7 @@ const FormPage = () => {
                     </div>
                 </div>
             </div>
+            <Footer />
         </div>
         </WithLogout>
     )

src/pages/formPage.scss

@@ -124,3 +124,7 @@
     top: 0px !important;
     right: 2.5rem;
 }
+
+.form-page footer {
+    margin-top: 2.5rem !important;
+}