update css

IhorLeonov · Jun 9, 2023 · 15df123 · 15df123
1 parent 237e483
commit 15df123
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/src/components/contactItem/ContactItem.styled.jsx b/src/components/contactItem/ContactItem.styled.jsx
@@ -5,13 +5,14 @@ export const Item = styled.li`
   display: flex;
   align-items: center;
   margin-top: 10px;
-  padding-bottom: 10px;
+  padding: 10px;
+  font-size: 20px;
+  /* background-color: ${props => ` ${props.theme.colors.bd}`}; */
+  border: ${props => `1px solid ${props.theme.colors.bd}`};
 
   :first-child {
     margin-top: 0;
   }
-  font-size: 20px;
-  border-bottom: ${props => `1px solid ${props.theme.colors.bd}`};
 `;
 
 export const ButtonDelete = styled(ButtonSubmit)`
@@ -21,7 +22,7 @@ export const ButtonDelete = styled(ButtonSubmit)`
 `;
 
 export const FirstLetterBox = styled.div`
-  margin-left: 15px;
+  margin-left: 5px;
   width: 40px;
   height: 40px;
   border-radius: 50%;

diff --git a/src/pages/contacts/ContactsPage.js b/src/pages/contacts/ContactsPage.js
@@ -22,7 +22,7 @@ import {
   ShowIcon,
   HideIcon,
   Phonebook,
-  SecondTitle,
+  Title,
   UpperBox,
   Headers,
   Name,
@@ -55,7 +55,7 @@ const ContactsPage = () => {
     <div>
       <Phonebook>
         <UpperBox>
-          <SecondTitle>Contacts</SecondTitle>
+          <Title>Contacts</Title>
           {isLoading && !error && <Loader width={96} />}
           <ButtonAdd type="button" onClick={handleOpenAddForm}>
             {!isAddFormOpen ? <ShowIcon /> : <HideIcon />}

diff --git a/src/pages/contacts/ContactsPage.styled.jsx b/src/pages/contacts/ContactsPage.styled.jsx
@@ -7,9 +7,10 @@ export const Phonebook = styled.div`
   padding: 30px;
   border: ${props => `1px solid ${props.theme.colors.bd}`};
   border-top: 0px;
+  /* background-color: ${props => ` ${props.theme.colors.primary}`}; */
 `;
 
-export const SecondTitle = styled.h2`
+export const Title = styled.h2`
   display: inline;
   color: ${props => `${props.theme.colors.hover}`};
 `;