From f0a92fd8f2a898044d60e3fc136eb1910a07117d Mon Sep 17 00:00:00 2001 From: kurpfish Date: Mon, 9 Aug 2021 15:10:12 +0300 Subject: [PATCH] logout, hover transition and small fixes --- package-lock.json | 8 +++++ package.json | 1 + public/index.html | 30 +++++++++---------- src/components/Auth/AuthForDevelopers.js | 21 ++++++++----- .../Auth/AuthForDevelopers.module.css | 26 ++++++++++++++++ src/components/Auth/AuthForPartners.js | 25 +++++++++++----- .../Auth/AuthForPartners.module.css | 27 +++++++++++++++++ src/components/Description/Description.js | 8 +++-- .../Description/Description.module.css | 4 +++ src/components/Loader/Loader.js | 14 +++++++++ src/components/LogoutButton/LogoutButton.js | 14 +++++++++ src/components/LogoutButton/logoutButton.css | 30 +++++++++++++++++++ src/hoc/withLogout.js | 9 ++++++ src/pages/CalendarPage.js | 3 +- src/pages/CandidatePage.js | 4 +-- src/pages/FormPage.js | 3 +- src/pages/HomePage.js | 4 +-- src/pages/ReportFormPage.js | 3 +- src/redux/loaderSlice.js | 21 +++++++++++++ src/store/store.js | 2 ++ 20 files changed, 218 insertions(+), 39 deletions(-) create mode 100644 src/components/Loader/Loader.js create mode 100644 src/components/LogoutButton/LogoutButton.js create mode 100644 src/components/LogoutButton/logoutButton.css create mode 100644 src/hoc/withLogout.js create mode 100644 src/redux/loaderSlice.js diff --git a/package-lock.json b/package-lock.json index 26b95c25..b058d2ea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12735,6 +12735,14 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "react-loader-spinner": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-4.0.0.tgz", + "integrity": "sha512-RU2vpEej6G4ECei0h3q6bgLU10of9Lw5O+4AwF/mtkrX5oY20Sh/AxoPJ7etbrs/7Q3u4jN5qwCwGLRKCHpk6g==", + "requires": { + "prop-types": "^15.7.2" + } + }, "react-overlays": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-5.0.1.tgz", diff --git a/package.json b/package.json index 8ead7592..9e18959c 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "react": "^17.0.2", "react-bootstrap": "^1.6.0", "react-dom": "^17.0.2", + "react-loader-spinner": "^4.0.0", "react-redux": "^7.2.4", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", diff --git a/public/index.html b/public/index.html index 75621e7e..636c8e9e 100644 --- a/public/index.html +++ b/public/index.html @@ -1,19 +1,19 @@ - - - - - - React App - - - -
+ + + + + - - + Outstaffing + + + + +
+ + + + \ No newline at end of file diff --git a/src/components/Auth/AuthForDevelopers.js b/src/components/Auth/AuthForDevelopers.js index a578dfd7..2acf1375 100644 --- a/src/components/Auth/AuthForDevelopers.js +++ b/src/components/Auth/AuthForDevelopers.js @@ -1,6 +1,7 @@ import React, { useState } from 'react' -import { useDispatch } from 'react-redux' +import { useDispatch, useSelector } from 'react-redux' import { auth } from '../../redux/outstaffingSlice' +import { loading } from '../../redux/loaderSlice' import style from './AuthForDevelopers.module.css' import ellipse from '../../images/ellipse.png' import arrow from '../../images/arrow__login_page.png' @@ -14,13 +15,15 @@ import vector from '../../images/Vector_Smart_Object.png' import vectorBlack from '../../images/Vector_Smart_Object_black.png' import { fetchAuth } from '../../server/server' -import { useSelector } from 'react-redux' import { selectAuth } from '../../redux/outstaffingSlice'; +import { selectIsLoading } from '../../redux/loaderSlice'; import { Redirect, Link } from 'react-router-dom'; +import { Loader } from '../Loader/Loader' const AuthForDevelopers = () => { const dispatch = useDispatch() const isAuth = useSelector(selectAuth) + const isLoading = useSelector(selectIsLoading) const [username, setUsername] = useState('') const [password, setPassword] = useState('') @@ -66,19 +69,23 @@ const AuthForDevelopers = () => { - diff --git a/src/components/Auth/AuthForDevelopers.module.css b/src/components/Auth/AuthForDevelopers.module.css index f55c227c..92a2b572 100644 --- a/src/components/Auth/AuthForDevelopers.module.css +++ b/src/components/Auth/AuthForDevelopers.module.css @@ -153,6 +153,32 @@ letter-spacing: normal; line-height: 71.88px; text-align: center; + border: 2px solid #6aaf5c; +} + +.form__btn:hover { + background-image: none; + background-color: #ffffff; + border: 2px solid #6aaf5c; + color: #6aaf5c !important; + transition: .3s; +} + +.form__btn__partners { + width: 288px; + height: 75px; + border-radius: 38px; + background-color: #ffffff; + border: 2px solid #6aaf5c; + font-family: 'Muller'; + font-size: 2em; + letter-spacing: normal; + line-height: 71.88px; + text-align: center; +} + +.form__btn__partners a { + color: #6aaf5c !important; } @media (max-width: 575.98px) { diff --git a/src/components/Auth/AuthForPartners.js b/src/components/Auth/AuthForPartners.js index dfab8a54..985d6653 100644 --- a/src/components/Auth/AuthForPartners.js +++ b/src/components/Auth/AuthForPartners.js @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import { useDispatch } from 'react-redux'; import { auth } from '../../redux/outstaffingSlice'; +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'; @@ -16,12 +17,15 @@ import { fetchAuth } from '../../server/server' import { useSelector } from 'react-redux' import { selectAuth } from '../../redux/outstaffingSlice'; +import { selectIsLoading } from '../../redux/loaderSlice'; import { Redirect, Link } from 'react-router-dom'; +import { Loader } from '../Loader/Loader' 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('') @@ -58,20 +62,25 @@ const AuthForPartners = () => { onChange={(e) => setPassword(e.target.value)} /> - - diff --git a/src/components/Auth/AuthForPartners.module.css b/src/components/Auth/AuthForPartners.module.css index db43afbe..0df03c43 100644 --- a/src/components/Auth/AuthForPartners.module.css +++ b/src/components/Auth/AuthForPartners.module.css @@ -153,6 +153,33 @@ letter-spacing: normal; line-height: 71.88px; text-align: center; + border: 2px solid #6aaf5c; +} + +.form__btn:hover { + background-image: none; + background-color: #ffffff; + border: 2px solid #6aaf5c; + color: #6aaf5c !important; + transition: .3s; +} + + +.form__btn__dev { + width: 288px; + height: 75px; + border-radius: 38px; + background-color: #ffffff; + border: 2px solid #6aaf5c; + font-family: 'Muller'; + font-size: 2em; + letter-spacing: normal; + line-height: 71.88px; + text-align: center; +} + +.form__btn__dev a { + color: #6aaf5c !important; } @media (max-width: 575.98px) { diff --git a/src/components/Description/Description.js b/src/components/Description/Description.js index 2c77c38b..f34c78af 100644 --- a/src/components/Description/Description.js +++ b/src/components/Description/Description.js @@ -29,7 +29,9 @@ const Description = ({ onLoadMore }) => {

- {SKILLS[el.position_id]}, {LEVELS[el.level]} + + {SKILLS[el.position_id]}, {LEVELS[el.level]} +

{el.vc_text_short ? ( @@ -64,7 +66,9 @@ const Description = ({ onLoadMore }) => {

- {SKILLS[el.position_id]}, {LEVELS[el.level]} + + {SKILLS[el.position_id]}, {LEVELS[el.level]} +

{el.vc_text_short ? ( diff --git a/src/components/Description/Description.module.css b/src/components/Description/Description.module.css index 90cd2921..192adb7f 100644 --- a/src/components/Description/Description.module.css +++ b/src/components/Description/Description.module.css @@ -53,6 +53,10 @@ margin-bottom: 10px; } +.description__title { + color: #333; +} + @media (max-width: 575.98px) { .description__title { text-align: center; diff --git a/src/components/Loader/Loader.js b/src/components/Loader/Loader.js new file mode 100644 index 00000000..a0645068 --- /dev/null +++ b/src/components/Loader/Loader.js @@ -0,0 +1,14 @@ +import SVGLoader from "react-loader-spinner"; +export const Loader = () => { + return ( +
+ +
+ ); +} \ No newline at end of file diff --git a/src/components/LogoutButton/LogoutButton.js b/src/components/LogoutButton/LogoutButton.js new file mode 100644 index 00000000..07d24e39 --- /dev/null +++ b/src/components/LogoutButton/LogoutButton.js @@ -0,0 +1,14 @@ +import React from 'react'; +import { useDispatch } from 'react-redux'; +import { auth } from '../../redux/outstaffingSlice'; + +import './logoutButton.css' + +export const LogoutButton = () => { + const dispatch = useDispatch(); + return ( +
{localStorage.clear(); dispatch(auth(false));}}> + +
+ ) +} \ No newline at end of file diff --git a/src/components/LogoutButton/logoutButton.css b/src/components/LogoutButton/logoutButton.css new file mode 100644 index 00000000..61213fb9 --- /dev/null +++ b/src/components/LogoutButton/logoutButton.css @@ -0,0 +1,30 @@ +.logout-button { + position: fixed; + top: 2rem; + right: 3.5rem; + z-index: 100; +} + +.logout-button button { + display: flex; + justify-content: center; + align-items: center; + margin: 0; + padding: 1rem 2rem; + border-radius: 20px; + background-color: #6aaf5c; + color: #ffffff; + border: 2px solid #6aaf5c; + font-family: 'Muller'; + font-size: 2em; + letter-spacing: normal; + text-align: center; +} + +.logout-button:hover button { + background-color: #ffffff; + color: #6aaf5c; + border: 2px solid #6aaf5c; + box-shadow: 3px 2px 5px rgba(82, 151, 34, 0.21); + transition: .3s; +} \ No newline at end of file diff --git a/src/hoc/withLogout.js b/src/hoc/withLogout.js new file mode 100644 index 00000000..c4b4ffda --- /dev/null +++ b/src/hoc/withLogout.js @@ -0,0 +1,9 @@ +import React from 'react'; +import { LogoutButton } from '../components/LogoutButton/LogoutButton'; + +export const WithLogout = (props) => { + return <> + + {props.children} + +} \ No newline at end of file diff --git a/src/pages/CalendarPage.js b/src/pages/CalendarPage.js index 960b2d1a..9e730a7b 100644 --- a/src/pages/CalendarPage.js +++ b/src/pages/CalendarPage.js @@ -1,8 +1,9 @@ import React from 'react'; +import { WithLogout } from '../hoc/withLogout'; import Calendar from '../components/Calendar/Calendar'; const CalendarPage = () => { - return ; + return ; }; export default CalendarPage; diff --git a/src/pages/CandidatePage.js b/src/pages/CandidatePage.js index 7348bf82..30e8c15b 100644 --- a/src/pages/CandidatePage.js +++ b/src/pages/CandidatePage.js @@ -1,7 +1,7 @@ import React from 'react'; - +import { WithLogout } from '../hoc/withLogout'; import Candidate from '../components/Candidate/Candidate'; -const CandidatePage = () => ; +const CandidatePage = () => ; export default CandidatePage; diff --git a/src/pages/FormPage.js b/src/pages/FormPage.js index 405d5673..2f325117 100644 --- a/src/pages/FormPage.js +++ b/src/pages/FormPage.js @@ -1,6 +1,7 @@ import React from 'react'; +import { WithLogout } from '../hoc/withLogout'; import Form from '../components/Form/Form'; -const FormPage = () =>
; +const FormPage = () => ; export default FormPage; diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js index 66bfc266..a11f569c 100644 --- a/src/pages/HomePage.js +++ b/src/pages/HomePage.js @@ -1,7 +1,7 @@ import React from 'react'; - +import { WithLogout } from '../hoc/withLogout'; import Home from '../components/Home/Home'; -const HomePage = () => ; +const HomePage = () => ; export default HomePage; diff --git a/src/pages/ReportFormPage.js b/src/pages/ReportFormPage.js index 20b63ccb..a4196e79 100644 --- a/src/pages/ReportFormPage.js +++ b/src/pages/ReportFormPage.js @@ -1,6 +1,7 @@ import React from 'react'; +import { WithLogout } from '../hoc/withLogout'; import ReportForm from '../components/ReportForm/ReportForm'; -const ReportFormPage = () => ; +const ReportFormPage = () => ; export default ReportFormPage; diff --git a/src/redux/loaderSlice.js b/src/redux/loaderSlice.js new file mode 100644 index 00000000..1b629307 --- /dev/null +++ b/src/redux/loaderSlice.js @@ -0,0 +1,21 @@ +import { createSlice } from '@reduxjs/toolkit'; + +const initialState = { + isLoading: false, +}; + +export const loaderSlice = createSlice({ + name: 'loader', + initialState, + reducers: { + loading: (state, action) => { + state.isLoading = action.payload; + }, + }, +}); + +export const { loading } = loaderSlice.actions; + +export const selectIsLoading = (state) => state.loader.isLoading; + +export default loaderSlice.reducer; diff --git a/src/store/store.js b/src/store/store.js index 13d57d76..84773a33 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -1,8 +1,10 @@ import { configureStore } from '@reduxjs/toolkit'; import outstaffingReducer from '../redux/outstaffingSlice'; +import loaderReducer from '../redux/loaderSlice'; export const store = configureStore({ reducer: { outstaffing: outstaffingReducer, + loader: loaderReducer, }, });