update readme

README.md

@@ -18,6 +18,15 @@ This repository contains a project designed for managing phone contacts.
 - Contact filtering
 - Routing
 
+This project is a web application for managing contacts, including functions for
+registering and authorizing users, adding and deleting contacts, and filtering
+contacts. The app allows users to register, log in and manage their contacts
+securely. Users can add new contacts, remove unnecessary ones, and filter
+contacts based on specific criteria such as name or email.
+
+<img src="./src/img/Phonebook.png" alt="Home page" width="900" height="500">
+<img src="./src/img/PhonebookLogin.png" alt="Private page" width="900" height="500">
+
 ## Technologies Used
 
 React Redux Toolkit Axios React-i18next Notiflix ReactLoaderSpinner

README.ua.md

@@ -19,6 +19,16 @@
 - Фільтрація контактів
 - Маршрутизація
 
+Цей проект являє собою веб-додаток для керування контактами, що включає функції
+реєстрації та авторизації користувачів, додавання та видалення контактів, а
+також фільтрування контактів. Програма дозволяє користувачам зареєструватися,
+увійти в систему та безпечно керувати своїми контактами. Користувачі можуть
+додавати нові контакти, видаляти непотрібні та фільтрувати контакти за певними
+критеріями, такими як ім'я або електронна пошта.
+
+<img src="./src/img/Phonebook.png" alt="Home page" width="900" height="500">
+<img src="./src/img/PhonebookLogin.png" alt="Private page" width="900" height="500">
+
 ## Використані технології
 
 React Redux Toolkit Axios React-i18next Notiflix ReactLoaderSpinner

src/components/Form/ContactForm/ContactForm.module.css

@@ -33,9 +33,6 @@
 .tel-label input::placeholder {
   color: var(--placeholder-color);
 }
-/* .tel-label {
-  margin-left: 10px;
-} */
 .name-label,
 .tel-label {
   font-size: 22px;
@@ -67,21 +64,21 @@
   text-align: center;
 }
 @media screen and (min-width: 768px) {
-.form-container {
-  max-width: 630px;
-}
-.name-input,
-.tel-input {
-  width: 258px;
-}
-.button {
-  font-size: 16px;
-  width: 260px;
-  margin: 10px 0 0 168px;
-}
-.tel-label {
-  margin-left: 10px;
-}
+  .form-container {
+    max-width: 630px;
+  }
+  .name-input,
+  .tel-input {
+    width: 258px;
+  }
+  .button {
+    font-size: 16px;
+    width: 260px;
+    margin: 10px 0 0 168px;
+  }
+  .tel-label {
+    margin-left: 6px;
+  }
 }
 
-/* @media screen and (min-width: 1440px) {} */
+/* @media screen and (min-width: 1440px) {} */