add main and header tags

MargoMarm · Sep 28, 2023 · 7b5602c · 7b5602c
1 parent 3e98339
commit 7b5602c
Show file tree

Hide file tree

Showing 14 changed files with 185 additions and 171 deletions.
diff --git a/src/components/BtnSubtitle/BtnSubtitle.styled.jsx b/src/components/BtnSubtitle/BtnSubtitle.styled.jsx
@@ -17,6 +17,11 @@ export const BtnSubtitleLink = styled(Link)`
   line-height: 150%;
   text-decoration-line: underline;
   margin-left: 5px;
+  transition: color 250ms cubic-bezier(0.075, 0.82, 0.165, 1);
+  &:hover,
+  &:focus {
+    color: ${colors.orange};
+  }
 `;
 
 export const TextWrapper = styled.div`

diff --git a/src/components/Title/Title.styled.jsx b/src/components/Title/Title.styled.jsx
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { mq, colors } from '../../utils';
 
-export const StyledTitle = styled.h2`
+export const StyledTitle = styled.h1`
   animation: backInLeft 1s ease-in-out  alternate;
   color: ${colors.white};
 

diff --git a/src/components/headersComp/Header/Header.styled.js b/src/components/headersComp/Header/Header.styled.js
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { mq, colors } from '../../../utils';
 
-export const HeaderContainer = styled.div`
+export const HeaderContainer = styled.header`
   position: relative;
   background-color: ${colors.black};
   height: 61px;

diff --git a/src/components/headersComp/UserNav/UserNav.jsx b/src/components/headersComp/UserNav/UserNav.jsx
@@ -18,7 +18,8 @@ import { selectUser } from '../../../redux/auth/selectors';
 export const UserNav = () => {
   const dispatch = useDispatch();
   const { avatarURL } = useSelector(selectUser);
-  return (
+	return (
+
     <WrapUserNav>
       <CustomNavLink to="/diary" text="Diary" isinheader={'true'} />
       <CustomNavLink to="/products" text="Products" isinheader={'true'} />

diff --git a/src/components/headersComp/UserNav/UserNav.styled.js b/src/components/headersComp/UserNav/UserNav.styled.js
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { mq, colors, button, svgUser } from '../../../utils';
 
-export const WrapUserNav = styled.div`
+export const WrapUserNav = styled.nav`
   ${mq.smallMobile} {
     display: none;
   }
@@ -19,7 +19,7 @@ export const Svg = styled.svg`
   transition: scale 250ms cubic-bezier(0.4, 0, 0.2, 1);
 
   &:hover,
-  :focus {
+  &:focus {
     scale: 1.2;
   }
 `;

diff --git a/src/pages/Diary/Diary.jsx b/src/pages/Diary/Diary.jsx
@@ -68,61 +68,63 @@ const Diary = () => {
     handleChangeAndParsedDate(currentDate, currentDate);
   };
 
-  return (
-    <DiaryWrapper>
-      <Title text={'Diary'} margin={mgForTitle} />
-      <CalendarContainer>
-        <Calendar
-          value={date}
-          onChange={handleChangeAndParsedDate}
-          name="name"
-          dateFormat={'dd/MM/yyyy'}
-          customInput={<CustomInputForCalendar />}
-          withoutВorder
-        />
-        <CalendarBtn onClick={() => changeDay('previousDay', date)}>
-          <CalendarBtnIcon>
-            <use href={sprite + `#chevron-left`}></use>
-          </CalendarBtnIcon>
-        </CalendarBtn>
-        <CalendarBtn onClick={() => changeDay('nextDay', date)}>
-          <CalendarBtnIcon>
-            <use href={sprite + `#chevron-right`}></use>
-          </CalendarBtnIcon>
-        </CalendarBtn>
-      </CalendarContainer>
-      <DiaryPageContainer>
-        <CustomDivForCards>
-          <DairyStatisticList />
-          <DescriptionText
-            text="Record all your meals in a calorie diary every day. This will help me be
-     aware of my nutrition and make me responsible for my choices."
-            width={{ tablet: 593, desktop: 390 }}
-            margin={mgForDiary}
+	return (
+    <main>
+      <DiaryWrapper>
+        <Title text={'Diary'} margin={mgForTitle} />
+        <CalendarContainer>
+          <Calendar
+            value={date}
+            onChange={handleChangeAndParsedDate}
+            name="name"
+            dateFormat={'dd/MM/yyyy'}
+            customInput={<CustomInputForCalendar />}
+            withoutВorder
           />
-        </CustomDivForCards>
-        {isLoadingDairy ? (
-          <Loader size={'100'} />
-        ) : (
-          <CustomDivForTables>
-            <DayDiaryProductsOrExercises
-              marginBottom={40}
-              list={productsList}
-              productTable
-              date={parsedDate}
-              to={'/products'}
+          <CalendarBtn onClick={() => changeDay('previousDay', date)}>
+            <CalendarBtnIcon>
+              <use href={sprite + `#chevron-left`}></use>
+            </CalendarBtnIcon>
+          </CalendarBtn>
+          <CalendarBtn onClick={() => changeDay('nextDay', date)}>
+            <CalendarBtnIcon>
+              <use href={sprite + `#chevron-right`}></use>
+            </CalendarBtnIcon>
+          </CalendarBtn>
+        </CalendarContainer>
+        <DiaryPageContainer>
+          <CustomDivForCards>
+            <DairyStatisticList />
+            <DescriptionText
+              text="Record all your meals in a calorie diary every day. This will help me be
+     aware of my nutrition and make me responsible for my choices."
+              width={{ tablet: 593, desktop: 390 }}
+              margin={mgForDiary}
             />
+          </CustomDivForCards>
+          {isLoadingDairy ? (
+            <Loader size={'100'} />
+          ) : (
+            <CustomDivForTables>
+              <DayDiaryProductsOrExercises
+                marginBottom={40}
+                list={productsList}
+                productTable
+                date={parsedDate}
+                to={'/products'}
+              />
 
-            <DayDiaryProductsOrExercises
-              list={exercisesList}
-              exerciseTable
-              date={parsedDate}
-              to={'/exercises'}
-            />
-          </CustomDivForTables>
-        )}
-      </DiaryPageContainer>
-    </DiaryWrapper>
+              <DayDiaryProductsOrExercises
+                list={exercisesList}
+                exerciseTable
+                date={parsedDate}
+                to={'/exercises'}
+              />
+            </CustomDivForTables>
+          )}
+        </DiaryPageContainer>
+      </DiaryWrapper>
+    </main>
   );
 };
 

diff --git a/src/pages/Error/Error.jsx b/src/pages/Error/Error.jsx
@@ -16,34 +16,36 @@ const Error = () => {
   const { isLoggedIn } = UseAuth();
 
   return (
-    <Container>
-      <Content>
-        <WrapLogo>
-          <Logo>
-            <use href={sprite + `#icon-logo_error`}></use>
-          </Logo>
-          <LogoText>
-            <use href={sprite + `#icon-PowerPulse`}></use>
-          </LogoText>
-        </WrapLogo>
-        <Title>404</Title>
-        <Text>
-          Sorry, you have reached a page that we could not find. It seems that
-          you are lost among the numbers and letters of our virtual space.
-          Perhaps this page went on vacation or decided to disappear into
-          another dimension. We apologize for this inconvenience.
-        </Text>
+    <main>
+      <Container>
+        <Content>
+          <WrapLogo>
+            <Logo>
+              <use href={sprite + `#icon-logo_error`}></use>
+            </Logo>
+            <LogoText>
+              <use href={sprite + `#icon-PowerPulse`}></use>
+            </LogoText>
+          </WrapLogo>
+          <Title>404</Title>
+          <Text>
+            Sorry, you have reached a page that we could not find. It seems that
+            you are lost among the numbers and letters of our virtual space.
+            Perhaps this page went on vacation or decided to disappear into
+            another dimension. We apologize for this inconvenience.
+          </Text>
 
-        <CustomBtn
-          type="button"
-          text={'Go Home'}
-          isorange={'true'}
-          to={isLoggedIn ? '/diary' : '/'}
-        />
-      </Content>
+          <CustomBtn
+            type="button"
+            text={'Go Home'}
+            isorange={'true'}
+            to={isLoggedIn ? '/diary' : '/'}
+          />
+        </Content>
 
-      <BGImg />
-    </Container>
+        <BGImg />
+      </Container>
+    </main>
   );
 };
 

diff --git a/src/pages/Exercises/Exercises.jsx b/src/pages/Exercises/Exercises.jsx
@@ -64,7 +64,7 @@ const Exercises = () => {
   };
 
   return (
-    <>
+    <main>
       <ExercisesContainer>
         {shouldGetFilters ? null : <ExercisesBtnBack />}
         <TitleThumb>
@@ -135,7 +135,7 @@ const Exercises = () => {
           </ScrollBar>
         </ExercisesListContainer>
       )}
-    </>
+    </main>
   );
 };
 

diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx
@@ -22,7 +22,7 @@ const Home = () => {
   }, [dispatch]);
 
   return (
-    <>
+    <main>
       <WrapperDesktop></WrapperDesktop>
       <Wrapper>
         <MainTitle />
@@ -48,7 +48,7 @@ const Home = () => {
           measure={'cal'}
         />
       </Wrapper>
-    </>
+    </main>
   );
 };
 

diff --git a/src/pages/Params/Params.jsx b/src/pages/Params/Params.jsx
@@ -16,14 +16,14 @@ const Params = () => {
   }, [steps, swiperRef]);
 
   return (
-    <>
+    <main>
       <ParamsPageWrapperDesktop steps={steps}></ParamsPageWrapperDesktop>
       <ParamsPageWrapper steps={steps}>
         <ParamsForm setSwiperRef={setSwiperRef} setSteps={setSteps} />
 
         <ParamsBar steps={steps} setSteps={setSteps} />
       </ParamsPageWrapper>
-    </>
+    </main>
   );
 };
 

diff --git a/src/pages/Products/Products.jsx b/src/pages/Products/Products.jsx
@@ -49,37 +49,39 @@ const Products = () => {
   };
 
   return (
-    <ProductPageContainer>
-      <FlexWrapper>
-        <Title text="Products" />
-        <ProductsFilter />
-      </FlexWrapper>
-      {products.length !== 0 ? (
-        <ScrollBar width={{ dt: '878' }}>
-          <InfiniteScroll
-            pageStart={0}
-            loadMore={onLoadMore}
-            hasMore={hasMore && !isLoadingMoreProducts}
-            loader={<Loader key={'qwe789'} size={'60'} />}
-            useWindow={false}
-          >
-            <ProductsOrExercisesContainer>
-              {products.map(product => {
-                return (
-                  <ProductsOrExercisesItem
-                    key={product.id}
-                    page="product"
-                    data={product}
-                  />
-                );
-              })}
-            </ProductsOrExercisesContainer>
-          </InfiniteScroll>
-        </ScrollBar>
-      ) : (
-        <EmptyProductList />
-      )}
-    </ProductPageContainer>
+    <main>
+      <ProductPageContainer>
+        <FlexWrapper>
+          <Title text="Products" />
+          <ProductsFilter />
+        </FlexWrapper>
+        {products.length !== 0 ? (
+          <ScrollBar width={{ dt: '878' }}>
+            <InfiniteScroll
+              pageStart={0}
+              loadMore={onLoadMore}
+              hasMore={hasMore && !isLoadingMoreProducts}
+              loader={<Loader key={'qwe789'} size={'60'} />}
+              useWindow={false}
+            >
+              <ProductsOrExercisesContainer>
+                {products.map(product => {
+                  return (
+                    <ProductsOrExercisesItem
+                      key={product.id}
+                      page="product"
+                      data={product}
+                    />
+                  );
+                })}
+              </ProductsOrExercisesContainer>
+            </InfiniteScroll>
+          </ScrollBar>
+        ) : (
+          <EmptyProductList />
+        )}
+      </ProductPageContainer>
+    </main>
   );
 };