readme/favicon updated

README.md

@@ -1,9 +1,42 @@
-Phonebook [React, JS, CSS in (@emotion/styled), Webpack, Redux, Axios, JWT Auth,
-REST API]
+# Phonebook app
+
+**Technology stack** - [React, JS, CSS in (@emotion/styled), Redux, Axios, JWT
+Auth, REST API]
+
+## API
+
+[**API Documentation**](https://connections-api.herokuapp.com/docs/)
+
+## About
 
 Individual project
 
 The phonebook application helps save your own private collection of contacts.
 
 Register and log in to your account, add/delete contacts, filter contacts by
 name for a fast search.
+
+Each form field is validated before requesting the server. In case of successful
+or rejected requests to the server, the user receives notifications in the form
+of pop-up windows.
+
+## Overwiev
+
+The base URL address of the application always welcomes users.
+
+![Welcome-page](./img/Welcome-page.jpg)
+
+To manage your contacts, each user must register or log in to an existing
+profile.
+
+![SignIn-page](./img/SignIn-page.jpg)
+
+The general view of the main Phonebook page where you can see a list of all
+contacts. Add new ones, delete unnecessary ones, filter by name and edit a
+contact.
+
+![Phonebook-page](./img/Phonebook-page.jpg)
+
+A modal window with a form opens for editing a contact.
+
+![Edit-modal](./img/Edit-modal.jpg)

public/index.html

@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Phonebook</title>
 
     <!-- Start Single Page Apps for GitHub Pages -->
     <script type="text/javascript">

public/manifest.json

@@ -8,9 +8,9 @@
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
+      "src": "logo128.png",
       "type": "image/png",
-      "sizes": "192x192"
+      "sizes": "128x128"
     },
     {
       "src": "logo512.png",

src/components/AppBarHeader/AppBarHeader.jsx

@@ -46,18 +46,21 @@ const AppBarHeader = () => {
             padding: '0 8px',
           }}
         >
-          <Link to="/">
-            <Typography
-              component={'span'}
-              sx={{
-                marginLeft: '22px',
-                fontWeight: '700',
-                letterSpacing: '3px',
-              }}
-            >
-              Phonebook
-            </Typography>
-          </Link>
+          {!isLoggedIn && (
+            <Link to="/">
+              <Typography
+                component={'span'}
+                sx={{
+                  marginLeft: '22px',
+                  fontWeight: '700',
+                  letterSpacing: '3px',
+                }}
+              >
+                Phonebook
+              </Typography>
+            </Link>
+          )}
+
           {!isLoggedIn ? <AuthNav /> : <UserMenu />}
         </Toolbar>
       </AppBar>

src/components/AuthNav/AuthNav.styled.jsx

@@ -23,9 +23,9 @@ export const Link = styled(NavLink)`
     margin-right: 0;
   }
 
-  :hover,
-  :focus,
-  &.active {
+  ul &:hover,
+  ul &:focus,
+  ul &.active {
     color: #1976d2;
   }
 `;

src/components/LogInForm/validationSchema.js

@@ -11,8 +11,5 @@ export const validationSchema = Yup.object().shape({
   password: Yup.string()
     .min(8)
     .required('Password required')
-    .matches(
-      /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/,
-      'Invalid password.  It must contain letters and numbers only.'
-    ),
+    .matches(/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/, 'Invalid password'),
 });

src/components/SignUpForm/validationSchema.js

@@ -19,6 +19,6 @@ export const validationSchema = Yup.object().shape({
     .required('Password required')
     .matches(
       /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/,
-      'Invalid password. It must contain letters and numbers only.'
+      'Invalid password. It must contain letters and numbers only'
     ),
 });