#789 alternative text for images format

FrontEnd/src/components/HeaderFooter/footer/Footer.jsx

@@ -7,8 +7,8 @@
 
 function Footer(props) {
     return (
-        <footer className={css['footer-content']}>
+        <footer className={css['footer-content-main']}>
             {UNSUITABLE_PAGES.includes(props.page) ? (<ShortFooter/>) :
                 (<>
                     <FooterTop></FooterTop>
                     <FooterBottom></FooterBottom>

FrontEnd/src/components/HeaderFooter/footer/Footer.module.css

@@ -1,4 +1,4 @@
-.footer-content {
-    margin-top: auto;
-    width: var(--main-block-size);
+.footer-content-main {
+    display: flex;
+    flex-direction: column;
 }

FrontEnd/src/components/HeaderFooter/footer/bottom/FooterBottom.jsx

@@ -4,7 +4,7 @@ function FooterBottom() {
     return (
         <div className={css['footer-bottom']}>
             <p className={css['footer-bottom__text']}>
-                Copyright 2023 Forum. All rights reserved.
+                Copyright 2023 CraftMerge. All rights reserved.
             </p>
             <img
                 className={css['footer-bottom-logo__svg']}

FrontEnd/src/components/HeaderFooter/footer/bottom/FooterBottom.module.css

@@ -1,6 +1,5 @@
 .footer-bottom {
     display: flex;
-    width: var(--main-block-size);
     height: 33px;
     justify-content: flex-start;
     background: var(--footer-bottom-backround);

FrontEnd/src/components/HeaderFooter/footer/top/FooterNavigation.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { HashLink } from 'react-router-hash-link';
 import { Link } from 'react-router-dom';
 import axios from 'axios';

FrontEnd/src/components/HeaderFooter/footer/top/FooterPolicy.jsx

@@ -25,8 +25,8 @@ function FooterPolicy() {
             <img
                 className={css['policy-content__main-logo']}
                 src={`${process.env.REACT_APP_PUBLIC_URL}/craftMerge-logo-white.svg`}
-                alt="craft merge logo"
-                title="CraftMerge logo">
+                alt="Footer craft merge logo"
+                title="CraftMerge">
             </img>
             <div className={css['policy-content-links']}>
                 {POLICY_LINKS.map((element) => (

FrontEnd/src/components/HeaderFooter/footer/top/FooterPolicy.module.css

@@ -25,7 +25,7 @@
     white-space: nowrap;
 }
 
-.policy-content__main_logo {
+.policy-content__main-logo {
     width: 199px;
     height: 24px;
 }

FrontEnd/src/components/HeaderFooter/footer/top/FooterTop.module.css

@@ -1,6 +1,5 @@
 .footer-top {
     display: flex;
-    width: var(--main-block-size);
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;

FrontEnd/src/components/HeaderFooter/header/Header.module.css

@@ -2,11 +2,11 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+    width: var(--main-block-size);
 }
 
 .header-divider {
     width: var(--main-block-size);
     height: 1px;
-
     background: var(--main-black-20, #E2E5EB);
 }

FrontEnd/src/components/HeaderFooter/header/navbar/Navbar.jsx

@@ -10,20 +10,18 @@
     <div className={css['navbar-content']}>
       <div className={css['navbar-logo__text']}>
         <Link to="/">
-            <img
-                className={css['main-logo']}
-                src={`${process.env.REACT_APP_PUBLIC_URL}/craftMerge-logo.svg`}
-                alt="craft merge logo"
-                width="199"
-                height="24"
-            ></img>
+          <img
+            className={css['navbar-main-logo']}
+            src={`${process.env.REACT_APP_PUBLIC_URL}/craftMerge-logo.svg`}
+            alt="CraftMerge logo"
+          ></img>
         </Link>
       </div>
-        <div className={css['navbar-utility-bar']}>
-            {props.page === 'login' || props.page === 'registration' ? null : (
-                <>
-                    <Menu/>
-                    <SearchBox></SearchBox>
+      <div className={css['navbar-utility-bar']}>
+        {props.page === 'login' || props.page === 'registration' ? null : (
+          <>
+            <Menu />
+            <SearchBox></SearchBox>
           </>
         )}
         {props.isAuthorized === true ? <Profile /> : <Buttons />}

FrontEnd/src/components/HeaderFooter/header/navbar/Navbar.module.css

@@ -1,25 +1,18 @@
 .navbar-content {
   display: flex;
-  width: 1305px;
   padding: 8px 104px;
   align-items: center;
   justify-content: space-between;
 }
 
-/* .navbar-logo__text {
-    color: #292E32;
-    font-feature-settings: 'calt' off;
-    font-family: var(--font-logo);
-    font-size: 24px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 24px;
-    letter-spacing: -0.24px;
-} */
+.navbar-logo__text{
+  display: flex;
+}
 
-.navbar-logo__img {
-  width: 600px;
-  height: 400px;
+.navbar-main-logo{
+  display: flex;
+  width: 199px;
+  height: 24px;
 }
 
 .navbar-utility-bar {

FrontEnd/src/components/HeaderFooter/header/navbar/Profile.jsx

@@ -30,7 +30,7 @@ function Profile() {
       <img
         className={css['header-profile__avatar']}
         src={`${process.env.REACT_APP_PUBLIC_URL}/img/Avatar.png`}
-        alt="avatar"
+        alt="Avatar"
         onClick={navigateToProfile}
       />
       <DropdownMenu toggleText="Профіль">

FrontEnd/src/components/HeaderFooter/header/navbar/Profile.module.css

@@ -14,4 +14,4 @@
   border-radius: 100px;
   border: 1px solid var(--main-black-20, #E2E5EB);
   background: var(--conditional-pop-over, #FFF)
-}
+}

FrontEnd/src/components/HeaderFooter/header/navbar/SearchBox.jsx

@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import icon_search from './search-icon.svg';
 import { useNavigate } from 'react-router-dom';
 import css from './SearchBox.module.css';
 
@@ -36,7 +35,7 @@ function SearchBox() {
         className={css['header-search-form__addon']}
         disabled={!searchTerm.trim()}
       >
-        <img src={icon_search} alt="" />
+        <img src={`${process.env.REACT_APP_PUBLIC_URL}/svg/search-icon.svg`} alt="Search" />
       </button>
     </div>
   );

FrontEnd/src/components/HeaderFooter/header/navbar/SearchBox.module.css

@@ -68,4 +68,4 @@ textarea:focus,
 .header-search-form__input:focus {
   border: none;
   outline: none;
-}
+}

FrontEnd/src/components/ProfilePage/FormComponents/WarnUnsavedDataModal.jsx

@@ -9,7 +9,7 @@ const WarnUnsavedDataModal = ({ onCancel, onConfirm }) => {
                     Збереження введених даних
                 </p>
                 <button onClick={onCancel} className={classes['modal-header--close-icon']}>
-                    <img src={`${process.env.REACT_APP_PUBLIC_URL}/svg/cross-btn.svg`} />
+                    <img src={`${process.env.REACT_APP_PUBLIC_URL}/svg/cross-btn.svg`} alt="Cancel button" />
                 </button>
             </div>
             <div className={classes['modal-content']}>

FrontEnd/src/components/landing-page/about-section/About.jsx

@@ -33,7 +33,7 @@ const MainAboutSection = () => {
             src={`${process.env.REACT_APP_PUBLIC_URL}/img/about.jpeg`}
             alt="about img"
             loading="lazy"
-            title="about img"
+            title="About CarftMerge"
           />
         </div>
       </div>

FrontEnd/src/components/landing-page/banner/Banner.jsx

@@ -49,25 +49,25 @@ const MainBanner = (props) => {
       <img
         className="main-banner-group__banner-image1"
         src={`${process.env.REACT_APP_PUBLIC_URL}/img/banner-img1.jpeg`}
-        alt="banner img"
+        alt="Banner img"
       />
       <img
         className="main-banner-group__banner-image2"
         src={`${process.env.REACT_APP_PUBLIC_URL}/img/banner-img2.jpeg`}
-        alt="banner img"
+        alt="Banner img"
       />
       <img
         className="main-banner-group__banner-image3"
         src={`${process.env.REACT_APP_PUBLIC_URL}/img/banner-img3.jpeg`}
-        alt="banner img"
+        alt="Banner img"
       />
       <div className="main-banner-wine">
         <div className="main-banner-group__frame">
           <div className="main-banner-wine__winemaking">
             <div className="winemaking">
               <img
                 src={`${process.env.REACT_APP_PUBLIC_URL}/svg/winemaking.svg`}
-                alt="winemaking"
+                alt="Winemaking"
                 width="16"
                 height="18"
               />
@@ -91,7 +91,7 @@ const MainBanner = (props) => {
         <div className="cheese">
           <img
             src={`${process.env.REACT_APP_PUBLIC_URL}/svg/cheese.svg`}
-            alt="cheese"
+            alt="Cheese"
             width="20"
             height="20"
           />
@@ -103,7 +103,7 @@ const MainBanner = (props) => {
             <div className="delivery">
               <img
                 src={`${process.env.REACT_APP_PUBLIC_URL}/svg/delivery.svg`}
-                alt="delivery"
+                alt="Delivery"
                 width="20"
                 height="20"
               />

FrontEnd/src/components/landing-page/partners/Partners.jsx

@@ -8,12 +8,12 @@ const MainPartners = () => {
         <div className="partners-section__navi-icons">
           <div className="partners-section__navi-icon">
             <div className="partners-section__icon">
-              <img src="/svg/icon-left.svg" alt="" />
+              <img src="/svg/icon-left.svg" alt="Left navigation" />
             </div>
           </div>
           <div className="partners-section__navi-icon">
             <div className="partners-section__icon">
-              <img src="/svg/icon-right.svg" alt="" />
+              <img src="/svg/icon-right.svg" alt="Right navigation" />
             </div>
           </div>
         </div>

FrontEnd/src/components/terms-and-conditions-app/terms_conditions/TermsAndConditionsComponent.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styles from './TermsAndConditionsComponent.module.css';
 import TermsAndConditionsText from './text';
 import TEXT_CONTENT from './text';