reports create, refactoring

src/components/LogoutButton/LogoutButton.js

@@ -1,31 +1,31 @@
-import React, { useState } from 'react';
-import { useHistory } from 'react-router-dom';
-import { useDispatch, useSelector } from 'react-redux';
-import { Loader } from '../Loader/Loader';
-import { auth } from '../../redux/outstaffingSlice';
-import { getRole } from '../../redux/roleSlice';
+import React, { useState } from 'react'
+import { useHistory } from 'react-router-dom'
+import { useDispatch, useSelector } from 'react-redux'
+import { Loader } from '../Loader/Loader'
+import { auth } from '../../redux/outstaffingSlice'
+import { getRole } from '../../redux/roleSlice'
 
-import './logoutButton.css'
+import './logoutButton.scss'
 
 export const LogoutButton = () => {
-    const [isLoggingOut, setIsLoggingOut] = useState(false);
-    const dispatch = useDispatch();
-    const userRole = useSelector(getRole);
-    const history = useHistory();
+  const [isLoggingOut, setIsLoggingOut] = useState(false)
+  const dispatch = useDispatch()
+  const userRole = useSelector(getRole)
+  const history = useHistory()
 
-    return (
-        <div className='logout-button'>
-            <button onClick={()=>{
-                setIsLoggingOut(true); 
-                localStorage.clear(); 
-                dispatch(auth(false)); 
-                setIsLoggingOut(false); 
-                history.push(userRole === 'ROLE_DEV' ? '/authdev' : '/auth') 
-            }}>
-
-            {
-            isLoggingOut ? <Loader /> : 'Выйти'
-            } </button>
-        </div>
-    )
-}
+  return (
+    <div className='logout-button'>
+      <button
+        onClick={() => {
+          setIsLoggingOut(true)
+          localStorage.clear()
+          dispatch(auth(false))
+          setIsLoggingOut(false)
+          history.push(userRole === 'ROLE_DEV' ? '/authdev' : '/auth')
+        }}
+      >
+        {isLoggingOut ? <Loader /> : 'Выйти'}{' '}
+      </button>
+    </div>
+  )
+}

src/components/LogoutButton/logoutButton.scss

@@ -1,11 +1,10 @@
 .logout-button {
-    position: absolute;
-    top: 70px;
-    right: 2.5rem;
-    z-index: 100;
-}
+  position: absolute;
+  top: 70px;
+  right: 2.5rem;
+  z-index: 100;
 
-.logout-button button {
+  button {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -21,19 +20,21 @@
     border: 3px solid #6aaf5c;
     font-family: 'Muller';
     text-align: center;
-}
+  }
 
-.logout-button:hover button {
-    background-color: #ffffff;
-    color: #6aaf5c;
-    border: 3px solid #6aaf5c;
-    box-shadow: 3px 2px 5px rgba(82, 151, 34, 0.21);
-    transition: .3s;
+  &:hover {
+    button {
+      background-color: #ffffff;
+      color: #6aaf5c;
+      border: 3px solid #6aaf5c;
+      box-shadow: 3px 2px 5px rgba(82, 151, 34, 0.21);
+      transition: 0.3s;
+    }
+  }
 }
 
 @media (max-width: 1199px) {
-    .logout-button {
-        top: 16px !important;
-    }
+  .logout-button {
+    top: 16px !important;
+  }
 }
-