Merge pull request #62 from fs-jun24-team-3/global-fixes

Global fixes

src/components/Breadcrumbs/Breadcrumbs.module.scss

@@ -1,7 +1,6 @@
 .breadcrumbs {
   list-style: none;
   padding: 0;
-  margin: 24px 0 0;
 
   display: flex;
   align-items: center;

src/components/Catalog/Catalog.tsx

@@ -7,6 +7,7 @@ import { Dropdown } from '../Dropdown';
 import { ItemsPerPageDropdown } from '../ItemsPerPageDropdown';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { sortProducts } from '../../utils/helpers/sortProducts';
+import { Breadcrumbs } from '../Breadcrumbs';
 
 type Props = {
   items: UnionProduct[];
@@ -107,11 +108,7 @@ export const Catalog: React.FC<Props> = ({ items, title, isFiltered }) => {
   return (
     <>
       <div className={styles.phones}>
-        <div className={styles.phones__routs}>
-          <div className={styles.phones__routs__home}></div>
-          <div className={styles.phones__routs__array}></div>
-          <div className={styles.phones__routs__currentPage}>Phones</div>
-        </div>
+        <Breadcrumbs />
         <div className={styles.phones__title}>{title}</div>
         <div className={styles.phones__countModel}>{items.length} models</div>
         {isFiltered && (

src/components/Loading/Loading.module.scss

@@ -1,26 +1,32 @@
-.loader {
-  margin: 20px;
-  width: 40px;
-  height: 40px;
-  border: 3px solid $accent-color;
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-}
-.loader::after {
-  content: '';
-  box-sizing: border-box;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 46px;
-  height: 46px;
-  border-radius: 50%;
-  border: 3px solid transparent;
-  border-bottom-color: $secondary-color;
+.loader-block {
+  display: flex;
+  justify-content: center;
+
+  &__element {
+    margin: 20px;
+    width: 40px;
+    height: 40px;
+    border: 3px solid $accent-color;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+
+    &::after {
+      content: '';
+      box-sizing: border-box;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 46px;
+      height: 46px;
+      border-radius: 50%;
+      border: 3px solid transparent;
+      border-bottom-color: $secondary-color;
+    }
+  }
 }
 
 @keyframes rotation {

src/components/Loading/Loading.tsx

@@ -5,5 +5,9 @@ import styles from './Loading.module.scss';
 type Props = {};
 
 export const Loading: React.FC<Props> = () => {
-  return <span className={styles.loader}></span>;
+  return (
+    <div className={styles['loader-block']}>
+      <span className={styles['loader-block__element']}></span>
+    </div>
+  );
 };

src/components/Main/CategoriesList/CategoriesItem/CategoriesItem.scss

@@ -1,6 +1,13 @@
 .categorie {
   grid-column: span 4;
   text-decoration: none;
+  margin-bottom: 32px;
+  transition: transform 1s;
+
+  &:hover {
+    transform: scale(105%);
+  }
+
   @include onDesktop {
     grid-column: span 8;
   }

src/components/Main/CategoriesList/CategoriesItem/CategoriesItem.tsx

@@ -14,9 +14,9 @@ export const CategoriesItem: React.FC<Props> = ({ img, title, text, link }) => {
     <div className="categorie">
       <NavLink to={link}>
         <img className="categorie__img" src={img} />
+        <div className="categorie__title">{title}</div>
+        <div className="categorie__text">{text}</div>
       </NavLink>
-      <div className="categorie__title">{title}</div>
-      <div className="categorie__text">{text}</div>
     </div>
   );
 };

src/components/Main/GoodsSlider/GoodSlider.scss

@@ -13,6 +13,10 @@
   margin: 0;
   list-style: none;
   column-gap: 16px;
+
+  > div {
+    padding: 13px;
+  }
 }
 
 .slider__list::-webkit-scrollbar {

src/components/Main/Main.tsx

@@ -24,7 +24,7 @@ export const Main: React.FC<Props> = () => {
         <MainBannerSlider />
         <GoodsSlider sliderTitle={'Brand new models'} productsList={phones} />
         <CategoriesList />
-        <GoodsSlider sliderTitle={'Brand new models'} productsList={phones} />;
+        <GoodsSlider sliderTitle={'Brand new models'} productsList={phones} />
       </div>
     </>
   );

src/components/Main/PhoneCard/PhoneCard.tsx

@@ -21,8 +21,8 @@ export const PhoneCard: React.FC<Props> = ({ item }) => {
             alt="phone logo"
             className="card__logo"
           />
+          <p className="card__title">{name}</p>
         </Link>
-        <p className="card__title">{name}</p>
         <div className="card__inform">
           <p className="card__price">${priceRegular}</p>
           <p className="card__separator"></p>

src/components/ProductDetails/About/About.module.scss

@@ -13,9 +13,6 @@
 }
 
 .sectionTitle {
-  font-size: 20px;
-  line-height: 26px;
-  font-weight: 700;
   color: $primary-color;
 
   @include onTablet {
@@ -37,17 +34,11 @@
   gap: 8px;
 
   @include onTablet {
-    font-size: 20px;
-    line-height: 26px;
-    font-weight: 600;
     color: $primary-color;
   }
 }
 
 .descriptionText {
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 21px;
-
   color: $secondary-color;
+  font-weight: 500;
 }

src/components/ProductDetails/VariantsActions/VariantsActions.tsx

@@ -77,8 +77,8 @@ export const VariantsActions: React.FC<Props> = ({
       </VariantsBlock>
       <div className={styles['variants-block__line']} />
       <div className={styles['variants-block__price']}>
-        <h2>${priceRegular}</h2>
-        <p>${priceDiscount}</p>
+        <h2>${priceDiscount}</h2>
+        <p>${priceRegular}</p>
       </div>
       <div className="variants-block__actions">
         <ProductActions size={ButtonSize.Large} item={product} />

src/pages/AccessoriesPage/AccessoriesPage.tsx

@@ -3,25 +3,29 @@ import { useAppDispatch, useAppSelector } from '../../app/reduxHooks';
 import { RootState } from '../../app/store';
 import { loadAccessories } from '../../app/slices/accessoriesSlice';
 import { Catalog } from '../../components/Catalog/Catalog';
+import { Loading } from '../../components/Loading';
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 type Props = {};
 
 export const AccessoriesPage: React.FC<Props> = () => {
   const dispatch = useAppDispatch();
-  const accessories = useAppSelector(
-    (state: RootState) => state.accessories.accessories,
-  );
+
+  const { accessories, loading } = useAppSelector((state: RootState) => ({
+    accessories: state.accessories.accessories,
+    loading: state.accessories.isAccessoryLoading,
+  }));
 
   useEffect(() => {
     dispatch(loadAccessories());
   }, [dispatch]);
+
+  if (loading || !accessories.length) {
+    return <Loading />;
+  }
+
   return (
     <>
-      <Catalog
-        items={accessories}
-        title={'Accessories phones'}
-        isFiltered={true}
-      />
+      <Catalog items={accessories} title={'Accessories'} isFiltered={true} />
     </>
   );
 };

src/pages/FavoritesPage/FavoritesPage.tsx

@@ -1,8 +1,8 @@
 import { Catalog } from '../../components/Catalog/Catalog';
-import { Breadcrumbs } from '../../components/Breadcrumbs/Breadcrumbs';
 // import styles from './FavoritesPage.module.scss';
 import { useAppSelector } from '../../app/reduxHooks';
 import { RootState } from '../../app/store';
+import { Breadcrumbs } from '../../components/Breadcrumbs';
 
 export const FavoritesPage = () => {
   //в цій компоненті я передію не данні favorites, а данні accessories(це заглушка).

src/pages/PhonesPage/PhonesPage.tsx

@@ -4,20 +4,24 @@ import { loadPhones } from '../../app/slices/phonesSlice';
 import { RootState } from '../../app/store';
 import { useAppDispatch, useAppSelector } from '../../app/reduxHooks';
 import { Catalog } from '../../components/Catalog/Catalog';
+import { Loading } from '../../components/Loading';
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 type Props = {};
 
 export const PhonesPage: React.FC<Props> = () => {
   const dispatch = useAppDispatch();
-  const phones = useAppSelector((state: RootState) => state.phones.phones);
+  const { phones, loading } = useAppSelector((state: RootState) => ({
+    phones: state.phones.phones,
+    loading: state.phones.isPhonesLoading,
+  }));
 
   useEffect(() => {
     dispatch(loadPhones());
   }, [dispatch]);
 
-  return (
-    <>
-      <Catalog items={phones} title={'Mobile phones'} isFiltered={true} />
-    </>
-  );
+  if (loading || !phones.length) {
+    return <Loading />;
+  }
+
+  return <Catalog items={phones} title={'Mobile phones'} isFiltered={true} />;
 };

src/pages/ProductDetailsPage/ProductDetailsPage.module.scss

@@ -1,5 +1,6 @@
 .container {
   @include container();
+  padding-top: 24px;
 }
 
 .loading-wrapper {

src/pages/TabletspPage/TabletsPage.tsx

@@ -3,19 +3,29 @@ import { Catalog } from '../../components/Catalog/Catalog';
 import { useAppDispatch, useAppSelector } from '../../app/reduxHooks';
 import { RootState } from '../../app/store';
 import { loadTablets } from '../../app/slices/tabletsSlice';
+import { Loading } from '../../components/Loading';
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 type Props = {};
 
 export const TabletsPage: React.FC<Props> = () => {
   const dispatch = useAppDispatch();
-  const tablets = useAppSelector((state: RootState) => state.tablets.tablets);
+
+  const { tablets, loading } = useAppSelector((state: RootState) => ({
+    tablets: state.tablets.tablets,
+    loading: state.tablets.isTabletsLoading,
+  }));
 
   useEffect(() => {
     dispatch(loadTablets());
   }, [dispatch]);
+
+  if (loading || !tablets.length) {
+    return <Loading />;
+  }
+
   return (
     <>
-      <Catalog items={tablets} title={'Tablets phones'} isFiltered={true} />
+      <Catalog items={tablets} title={'Tablets'} isFiltered={true} />
     </>
   );
 };

src/styles/utils/_mixins.scss

@@ -66,17 +66,17 @@
   height: 100%;
   @include onMobile {
     width: 212px;
-    height: 439px;
+    // height: 439px;
   }
 
   @include onTablet {
     width: 237px;
-    height: 512px;
+    // height: 512px;
   }
 
   @include onDesktop {
     width: 272px;
-    height: 506px;
+    // height: 506px;
   }
 }