add toast, more styles

package.json

@@ -13,6 +13,7 @@
     "modern-normalize": "^2.0.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-hot-toast": "^2.4.1",
     "react-icons": "^5.0.1",
     "react-loader-spinner": "^6.1.6",
     "react-modal": "^3.16.1",

src/components/AppLayout/AppLayout.jsx

@@ -9,6 +9,7 @@ import {
   HeaderList,
   Nav,
 } from './AppLayout.styled';
+import { Toaster } from 'react-hot-toast';
 
 export const AppLayout = () => {
   return (
@@ -31,7 +32,7 @@ export const AppLayout = () => {
           <Outlet />
         </Suspense>
       </main>
-
+      <Toaster />
       <GlobalStyle />
     </>
   );

src/components/ArticleItem/ArticleItem.jsx

@@ -1,5 +1,12 @@
 import React from 'react';
-import { Image, ImageContainer, Item } from './ArticleItem.styled';
+import {
+  ArticleAuthor,
+  ArticleDescription,
+  ArticleTitle,
+  Image,
+  ImageContainer,
+  Item,
+} from './ArticleItem.styled';
 
 export const ArticleItem = ({ article }) => {
   return (
@@ -13,9 +20,18 @@ export const ArticleItem = ({ article }) => {
           alt="article title"
         />
       </ImageContainer>
-      <h1>{article.author || 'No author'} </h1>
-      <h2>{article.title || 'No title'} </h2>
-      <p>{article.description || 'No description avalable'} </p>
+      <ArticleAuthor>
+        <span style={{ color: '#a2add0' }}>Author: </span>{' '}
+        {article.author || 'No author'}{' '}
+      </ArticleAuthor>
+      <ArticleTitle>
+        <span style={{ color: '#b7c7c3' }}>Title: </span>
+        {article.title || 'No title'}{' '}
+      </ArticleTitle>
+      <ArticleDescription>
+        <span style={{ color: '#ad6d88' }}>Description: </span>
+        {article.description || 'No description avalable'}{' '}
+      </ArticleDescription>
     </Item>
   );
 };

src/components/ArticleItem/ArticleItem.styled.js

@@ -12,9 +12,14 @@ export const Item = styled.li`
 export const ImageContainer = styled.div`
   width: 380px;
   height: 240px;
+  margin-bottom: 10px;
 `;
 
 export const Image = styled.img`
   width: 100%;
   height: 100%;
 `;
+
+export const ArticleAuthor = styled.h3``;
+export const ArticleTitle = styled.h2``;
+export const ArticleDescription = styled.p``;

src/components/UserForm/UserForm.jsx

@@ -11,6 +11,7 @@ import {
   FormField,
   Label,
 } from './UserForm.styled';
+import toast from 'react-hot-toast';
 
 const ArticleSchema = Yup.object().shape({
   imageUrl: Yup.string(),
@@ -48,6 +49,7 @@ export const UserForm = () => {
               article.title.toLowerCase() === values.title.toLowerCase()
           )
         ) {
+          toast.error(`Article ${values.title} already exists`);
           return;
         }
         dispatch(addArticle({ ...values, id: uid() }));
@@ -65,18 +67,18 @@ export const UserForm = () => {
           <FormErrorMessage component={'span'} name="author" />
         </Label>
 
-        <Label>
-          Description
-          <FormField name="description" placeholder="lorem" />
-          <FormErrorMessage component={'span'} name="description" />
-        </Label>
-
         <Label>
           Title
           <FormField name="title" placeholder="lorem" />
           <FormErrorMessage component={'span'} name="title" />
         </Label>
 
+        <Label>
+          Description
+          <FormField name="description" placeholder="lorem" />
+          <FormErrorMessage component={'span'} name="description" />
+        </Label>
+
         <FormButton type="submit">Add article</FormButton>
       </FormContainer>
     </Formik>