update styles

package.json

@@ -19,6 +19,7 @@
     "react-helmet": "^6.1.0",
     "react-helmet-async": "^1.3.0",
     "react-hot-toast": "^2.4.0",
+    "react-icons": "^4.9.0",
     "react-loader-spinner": "^5.3.4",
     "react-private-route": "^1.1.2",
     "react-redux": "^8.0.5",

src/components/PrivateRoute.js

@@ -1,10 +1,8 @@
 import { Navigate } from 'react-router-dom';
 import { useAuth } from 'hooks/useAuth';
 
-/**
- * - If the route is private and the user is logged in, render the component
- * - Otherwise render <Navigate> to redirectTo
- */
+//  - If the route is private and the user is logged in, render the component
+//  - Otherwise render <Navigate> to redirectTo
 
 export const PrivateRoute = ({ component: Component, redirectTo = '/' }) => {
   const { isLoggedIn, isRefreshing } = useAuth();

src/components/RestrictedRoute.js

@@ -1,10 +1,8 @@
 import { useAuth } from 'hooks/useAuth';
 import { Navigate } from 'react-router-dom';
 
-/**
- * - If the route is restricted and the user is logged in, render a <Navigate> to redirectTo
- * - Otherwise render the component
- */
+// - If the route is restricted and the user is logged in, render a <Navigate> to redirectTo
+// - Otherwise render the component
 
 export const RestrictedRoute = ({ component: Component, redirectTo = '/' }) => {
   const { isLoggedIn } = useAuth();

src/components/authNav/AuthNav.styled.jsx

@@ -6,9 +6,14 @@ export const NavLink = styled(Link)`
   text-decoration: none;
   padding: 12px;
   font-weight: 700;
-  color: #2a363b;
+  color: ${props => `${props.theme.colors.primary}`};
 
   &.active {
-    color: #ea8d6b;
+    color: ${props => `${props.theme.colors.hover}`};
+  }
+
+  :hover,
+  :focus {
+    color: ${props => `${props.theme.colors.hover}`};
   }
 `;

src/components/constants/Theme.js

@@ -1,10 +1,11 @@
 export const theme = {
   colors: {
     bg: 'rgba(196, 186, 186, 0.12)',
-    bd: '#f6c6a7',
+    bd: 'rgb(246, 218, 167)',
     font: 'rgb(126, 124, 124)',
-    green: 'rgb(169, 251, 46)',
-    red: 'rgb(241, 14, 14)',
+    hover: 'rgb(158, 47, 9)',
+    primary: 'rgb(237, 155, 107)',
+    btnText: 'rgb(68, 68, 68)',
     white: '#ffffff',
   },
 };

src/components/contactForm/ContactForm.js

@@ -82,7 +82,7 @@ export const ContactForm = () => {
           />
           <ErrorMessage name="number" component="span" />
         </FormLabel>
-        <ButtonSubmit type="submit">Add contact</ButtonSubmit>
+        <ButtonSubmit type="submit">Add</ButtonSubmit>
         <Toaster position="top-left" toastOptions={{ duration: 3000 }} />
       </Form>
     </Formik>

src/components/contactForm/ContactForm.styled.jsx

@@ -39,7 +39,8 @@ export const ButtonSubmit = styled.button`
   font-family: arial, sans-serif;
   font-size: 15px;
   font-weight: bold;
-  color: rgb(68, 68, 68);
+  color: ${props => `${props.theme.colors.btnText}`};
+
   text-transform: capitalize;
   text-decoration: none;
   user-select: none;
@@ -51,7 +52,7 @@ export const ButtonSubmit = styled.button`
   transition: all 0.218s ease 0s;
   :hover,
   :focus {
-    color: rgb(24, 24, 24);
+    color: ${props => `${props.theme.colors.hover}`};
     border: 1px solid rgb(198, 198, 198);
     background: #f7f7f7 linear-gradient(#f7f7f7, #f1f1f1);
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

src/components/contactItem/ContactItem.styled.jsx

@@ -36,12 +36,9 @@ export const FirstLetterBox = styled.div`
 
 export const Name = styled.div`
   width: 200px;
-  /* border: 1px solid red; */
   margin-left: 25px;
 `;
 
 export const Number = styled.div`
   width: 200px;
-  /* border: 1px solid blue; */
-  /* margin-left: 10px; */
 `;

src/components/deleteContactWarning/DeleteContactWarning.styled.jsx

@@ -19,7 +19,6 @@ export const DeleteModal = styled.div`
 
 export const Text = styled.div`
   font-weight: bold;
-  /* margin-right: 10px; */
 `;
 
 export const ButtonWrapper = styled.div`

src/components/loader/Loader.js

@@ -6,7 +6,7 @@ export const Loader = ({ width }) => {
   return (
     <LoaderBox>
       <RotatingLines
-        strokeColor={theme.colors.bd}
+        strokeColor={theme.colors.hover}
         strokeWidth="5"
         animationDuration="0.75"
         width={width}

src/components/navigation/Navigation.styled.jsx

@@ -6,9 +6,14 @@ export const NavLink = styled(Link)`
   text-decoration: none;
   padding: 12px;
   font-weight: 700;
-  color: #2a363b;
+  color: ${props => `${props.theme.colors.primary}`};
 
   &.active {
-    color: #ea8d6b;
+    color: ${props => `${props.theme.colors.hover}`};
+  }
+
+  :hover,
+  :focus {
+    color: ${props => `${props.theme.colors.hover}`};
   }
 `;

src/components/userMenu/UserMenu.js

@@ -1,14 +1,15 @@
 import { useDispatch } from 'react-redux';
 import { logOut } from 'redux/auth/operations';
 import { useAuth } from 'hooks/useAuth';
-import { Wrapper, Username, Button } from './UserMenu.styled';
+import { Wrapper, Username, Button, UserIcon } from './UserMenu.styled';
 
 export const UserMenu = () => {
   const dispatch = useDispatch();
   const { user } = useAuth();
 
   return (
     <Wrapper>
+      <UserIcon />
       <Username>{user.name}</Username>
       <Button type="button" onClick={() => dispatch(logOut())}>
         Logout

src/components/userMenu/UserMenu.styled.jsx

@@ -1,5 +1,10 @@
 import styled from 'styled-components';
 import { ButtonSubmit } from 'components/contactForm/ContactForm.styled';
+import { FaUserAlt } from 'react-icons/fa';
+
+export const UserIcon = styled(FaUserAlt)`
+  fill: ${props => `${props.theme.colors.primary}`};
+`;
 
 export const Wrapper = styled.div`
   display: flex;
@@ -9,6 +14,7 @@ export const Wrapper = styled.div`
 
 export const Username = styled.p`
   font-weight: 700;
+  color: ${props => `${props.theme.colors.hover}`};
 `;
 
 export const Button = styled(ButtonSubmit)`

src/pages/contacts/ContactsPage.js

@@ -19,6 +19,8 @@ import { ContactList } from 'components/contactList/ContactList';
 import { Filter } from 'components/filter/Filter';
 import {
   ButtonAdd,
+  ShowIcon,
+  HideIcon,
   Phonebook,
   SecondTitle,
   UpperBox,
@@ -56,14 +58,14 @@ const ContactsPage = () => {
           <SecondTitle>Contacts</SecondTitle>
           {isLoading && !error && <Loader width={96} />}
           <ButtonAdd type="button" onClick={handleOpenAddForm}>
-            +
+            {!isAddFormOpen ? <ShowIcon /> : <HideIcon />}
           </ButtonAdd>
         </UpperBox>
         {isAddFormOpen && <ContactForm />}
         <Headers>
           <Total>Total: {contacts?.length}</Total>
-          <Name>Name</Name>
-          <Number>Number</Number>
+          <Name>Name:</Name>
+          <Number>Number:</Number>
           <Filter />
         </Headers>
         <div>

src/pages/contacts/ContactsPage.styled.jsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { ButtonSubmit } from 'components/contactForm/ContactForm.styled';
+import { MdExpandMore, MdExpandLess } from 'react-icons/md';
 
 export const Phonebook = styled.div`
   margin-left: auto;
@@ -11,24 +11,57 @@ export const Phonebook = styled.div`
 
 export const SecondTitle = styled.h2`
   display: inline;
+  color: ${props => `${props.theme.colors.hover}`};
 `;
 
 export const UpperBox = styled.div`
   padding-bottom: 25px;
   display: flex;
   align-items: center;
   border-bottom: ${props => `1px solid ${props.theme.colors.bd}`};
-  
 `;
 
-export const ButtonAdd = styled(ButtonSubmit)`
-  margin: 0;
-  margin-left: 15px;
-  padding: 0.2em 0.6em;
+export const ButtonAdd = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 8px;
+  cursor: pointer;
+`;
+
+export const ShowIcon = styled(MdExpandMore)`
+  width: 34px;
+  height: 34px;
+  fill: ${props => `${props.theme.colors.primary}`};
+  border-radius: 2px;
+  border: 1px solid rgba(0, 0, 0, 0);
+  transition: all 0.218s ease 0s;
+
+  :hover,
+  :focus {
+    fill: ${props => `${props.theme.colors.hover}`};
+    border: 1px solid rgb(198, 198, 198);
+    background: #f7f7f7 linear-gradient(#f7f7f7, #f1f1f1);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  }
+`;
+
+export const HideIcon = styled(MdExpandLess)`
+  width: 34px;
+  height: 34px;
+  fill: ${props => `${props.theme.colors.primary}`};
+  border-radius: 2px;
+  border: 1px solid rgba(0, 0, 0, 0);
+
+  transition: all 0.218s ease 0s;
 
-  background: #ed8e6b;
-  color: rgb(247, 239, 239);
-  font-size: 18px;
+  :hover,
+  :focus {
+    fill: ${props => `${props.theme.colors.hover}`};
+    border: 1px solid rgb(198, 198, 198);
+    background: #f7f7f7 linear-gradient(#f7f7f7, #f1f1f1);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  }
 `;
 
 export const Headers = styled.div`

src/pages/home/HomePage.js

@@ -1,6 +1,5 @@
 import { Wrapper, HomePageImage } from 'pages/home/HomePage.styled';
 import { NavLink } from 'components/navigation/Navigation.styled';
-// import Animate, { Pulse } from 'animate-css-styled-components';
 
 const HomePage = () => {
   return (

src/redux/contacts/contactsSlice.js

@@ -2,11 +2,6 @@ import { createSlice, isAnyOf } from '@reduxjs/toolkit';
 import { addContact, deleteContact, fetchContacts } from './operations';
 import { logOut } from 'redux/auth/operations';
 
-// const handleRejected = (state, action) => {
-//   state.isLoading = false;
-//   state.error = action.payload;
-// };
-
 const contactsSlice = createSlice({
   name: 'contacts',
   initialState: {