update styles

package.json

@@ -1,8 +1,8 @@
 {
-  "name": "goit-react-hw-08-phonebook",
+  "name": "phonebook",
   "version": "0.1.0",
   "private": true,
-  "homepage": "https://IhorLeonov.github.io/goit-react-hw-08-phonebook/",
+  "homepage": "https://IhorLeonov.github.io/phonebook/",
   "dependencies": {
     "@redux-devtools/extension": "^3.2.5",
     "@reduxjs/toolkit": "^1.9.3",

src/components/constants/GlobalStyle.js

@@ -9,6 +9,8 @@ export const GlobalStyle = createGlobalStyle`
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  background-color: #f8efe8;
 }
 
 code {

src/components/constants/Theme.js

@@ -1,7 +1,7 @@
 export const theme = {
   colors: {
     bg: 'rgba(196, 186, 186, 0.12)',
-    bd: 'rgba(224, 227, 230, 0.78)',
+    bd: '#f6c6a7',
     font: 'rgb(126, 124, 124)',
     green: 'rgb(169, 251, 46)',
     red: 'rgb(241, 14, 14)',

src/components/contactList/ContactList.styled.jsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
 
 export const List = styled.ul`
-  margin-top: 15px;
+  margin-top: 10px;
 `;

src/components/filter/Filter.styled.jsx

@@ -1,14 +1,9 @@
 import styled from 'styled-components';
 
 export const Label = styled.label`
-  /* display: block;
-  margin-top: 10px;*/
   margin-left: auto;
 `;
 
 export const Input = styled.input`
-  /* display: block;
-  margin-top: 10px;
-  width: 100%; */
   margin-left: 10px;
 `;

src/components/notification/Notfication.styled.jsx

@@ -2,5 +2,5 @@ import styled from 'styled-components';
 
 export const Notify = styled.p`
   text-align: center;
-  margin-top: 15px;
+  margin-top: 30px;
 `;

src/index.js

@@ -16,7 +16,7 @@ ReactDOM.createRoot(document.getElementById('root')).render(
     <ThemeProvider theme={theme}>
       <Provider store={store}>
         <PersistGate loading={null} persistor={persistor}>
-          <BrowserRouter basename="/goit-react-hw-08-phonebook">
+          <BrowserRouter basename="/phonebook">
             <App />
             <GlobalStyle />
           </BrowserRouter>

src/pages/contacts/ContactsPage.js

@@ -64,8 +64,8 @@ const ContactsPage = () => {
         {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

@@ -10,25 +10,24 @@ export const Phonebook = styled.div`
 `;
 
 export const SecondTitle = styled.h2`
-  /* margin-top: 15px;
-  text-align: center; */
   display: inline;
 `;
 
 export const UpperBox = styled.div`
-  padding-bottom: 15px;
+  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: 10px;
+  margin-left: 15px;
   padding: 0.2em 0.6em;
 
-  background: rgb(128, 244, 126);
-  color: rgb(68, 68, 68);
+  background: #ed8e6b;
+  color: rgb(247, 239, 239);
   font-size: 18px;
 `;
 
@@ -37,8 +36,6 @@ export const Headers = styled.div`
   padding-bottom: 10px;
   padding-top: 10px;
   align-items: center;
-  /* margin-left: 10px; */
-  /* border: 1px solid black; */
   border-bottom: ${props => `1px solid ${props.theme.colors.bd}`};
 `;
 
@@ -48,12 +45,9 @@ export const Total = styled.div`
 
 export const Name = styled.div`
   width: 200px;
-  /* border: 1px solid red; */
   margin-left: 10px;
 `;
 
 export const Number = styled.div`
   width: 200px;
-  /* border: 1px solid blue; */
-  /* margin-left: 10px; */
 `;