fixed bugs

NosatskyiK · May 25, 2024 · 583643a · 583643a
1 parent 9a8fe28
commit 583643a
Show file tree

Hide file tree

Showing 18 changed files with 852 additions and 84 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -37,6 +38,8 @@
     "stylelint": "14.16.1",
     "typescript": "^5.2.2",
     "vite": "^5.1.6",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^4.3.2"
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,7 @@
 import { useState } from 'react';
 
+import { clsx } from 'clsx';
+
 import { AboutMe } from '@/components/aboutMe/AboutMe.component.tsx';
 import { FooterComponent } from '@/components/footer/Footer.component.tsx';
 import { HeaderComponent } from '@/components/header/Header.component.tsx';
@@ -11,9 +13,10 @@ import './App.css';
 function App() {
     const [activePage, setActivePage] = useState('about');
     const [theme, setTheme] = useState('light');
+    const themeClass = clsx(`${theme}Theme`);
 
     return (
-        <div className={`${theme}Theme`}>
+        <div className={themeClass}>
             <HeaderComponent changeTheme={setTheme} activeTheme={theme} onPageChange={setActivePage} activePage={activePage} />
             <>
                 {activePage === 'about' && <AboutMe />}

diff --git a/src/assets/img/cart.svg b/src/assets/img/cart.svg
diff --git a/src/components/aboutMe/AboutMe.component.tsx b/src/components/aboutMe/AboutMe.component.tsx
@@ -12,7 +12,7 @@ export const AboutMe = () => (
             </p>
             <p className={styles.txtParagraph}>
                 This page was developed during the course&nbsp;
-                <a className={styles.linkMOC} href="https://www.mastersacademy.education/frontend-react-it">
+                <a className={styles.link} href="https://www.mastersacademy.education/frontend-react-it">
                     &lsquo;Intro to React&rsquo;
                 </a>
                 &nbsp;from Masters Academy in 2024.
@@ -23,11 +23,11 @@ export const AboutMe = () => (
             </p>
             <p className={styles.txtParagraph}>
                 You can contact me via&nbsp;
-                <a className={styles.linkSocialNetwork} href="https://t.me/kostyaa_n">
+                <a className={styles.link} href="https://t.me/kostyaa_n">
                     Telegram
                 </a>
                 &nbsp;and check out my&nbsp;
-                <a className={styles.linkSocialNetwork} href="https://github.com/NosatskyiK">
+                <a className={styles.link} href="https://github.com/NosatskyiK">
                     GitHub
                 </a>
                 &nbsp;.

diff --git a/src/components/aboutMe/aboutMe.module.css b/src/components/aboutMe/aboutMe.module.css
@@ -36,9 +36,12 @@
   line-height: 32px;
 }
 
-.linkSocialNetwork, .linkMOC {
-  color: inherit;
-  font-weight: inherit;
+.txtTitle, .txtParagraph, .link {
+  color: var(--txt-primary);
+}
+
+.link {
+  text-decoration: underline;
 }
 
 @media (max-width: 900px) {

diff --git a/src/components/cart/Cart.component.tsx b/src/components/cart/Cart.component.tsx
@@ -1,18 +1,15 @@
 import { useState } from 'react';
 
+import { SvgCart } from '@/components/svgCart/SvgCart.component.tsx';
+
 import styles from './cart.module.css';
 
 export const Cart = () => {
     const [hasCount, setCount] = useState(false);
     return (
         <div>
             <button className={styles.cartButton} onClick={() => setCount(!hasCount)}>
-                <svg xmlns="http://www.w3.org/2000/svg" className={styles.cartSvg}>
-                    <path
-                        className={styles.cartImg}
-                        d="M15.17 15.823c-1.104 0-2 .953-2 2.129 0 1.175.896 2.129 2 2.129 1.105 0 2-.953 2-2.13 0-1.175-.895-2.128-2-2.128Zm0 0H7.464c-.46 0-.692 0-.881-.088a1.016 1.016 0 0 1-.42-.359c-.118-.177-.165-.414-.26-.883L3.442 2.266c-.097-.48-.146-.72-.266-.9a1.017 1.017 0 0 0-.418-.36C2.568.92 2.338.92 1.877.92H1.17m3 3.194h12.874c.721 0 1.082 0 1.324.16.212.14.368.36.436.616.077.292-.023.661-.223 1.4l-1.384 5.109c-.12.441-.18.662-.301.825a1.012 1.012 0 0 1-.409.328c-.18.078-.395.078-.824.078H5.9m.27 7.452c-1.105 0-2-.953-2-2.13 0-1.175.895-2.128 2-2.128 1.104 0 2 .953 2 2.129 0 1.175-.896 2.129-2 2.129Z"
-                    />
-                </svg>
+                <SvgCart />
                 {hasCount && <div className={styles.circleCounter}>1</div>}
             </button>
         </div>

diff --git a/src/components/cart/cart.module.css b/src/components/cart/cart.module.css
@@ -5,6 +5,8 @@
   height: 24px;
   padding: 0;
   cursor: pointer;
+  color: var(--cart);
+  transition: color 300ms, background-color 300ms;
 }
 
 .circleCounter {
@@ -23,16 +25,3 @@
   top: -32px;
   left: 12px;
 }
-
-.cartImg {
-  stroke: var(--cart);
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-width: 1.5;
-}
-
-.cartSvg {
-  width: 20px;
-  height: 21px;
-  fill: none;
-}
diff --git a/src/components/filtersBar/FiltersBar.component.tsx b/src/components/filtersBar/FiltersBar.component.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import searchIcon from '@/assets/img/searchIcon.svg';
+import searchIcon from '@/assets/img/searchIcon.svg?url';
 import { SortList } from '@/components/sortList/SortList.components.tsx';
 
 import styles from './filtersBar.module.css';
@@ -10,7 +10,7 @@ export const FiltersBar = () => (
         <div className={styles.searchBar}>
             <input className={styles.searchInput} type="text" placeholder="Search..." />
             <button className={styles.searchButton}>
-                <img src={searchIcon} alt="search icon" />
+                <img className={styles.searchIcon} src={searchIcon} alt="search icon" />
             </button>
         </div>
         <div className={styles.filterButtons}>

diff --git a/src/components/filtersBar/filtersBar.module.css b/src/components/filtersBar/filtersBar.module.css
@@ -47,8 +47,8 @@
   right: 0;
   border-radius: 50%;
   background-color: #D43824;
-  width: 40px;
-  height: 40px;
+  width: 38px;
+  height: 38px;
   border: none;
   padding: 0;
 }

diff --git a/src/components/header/Header.component.tsx b/src/components/header/Header.component.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
 
+import { clsx } from 'clsx';
+
 import cartWhite from '@/assets/img/headerImg/cartWhite.png';
 import login from '@/assets/img/headerImg/login.png';
 import logoMA from '@/assets/img/headerImg/logoMA.png';
 import signUp from '@/assets/img/headerImg/signUp.png';
+import { SvgDarkThemeIcon, SvgLightThemeIcon } from '@/components/svgTheme/SvgTheme.component.tsx';
 import type { InterfacePageChange } from '@/interface/interfacePageChange.ts';
 
 import styles from './header.module.css';
@@ -13,39 +16,32 @@ export const HeaderComponent: React.FC<InterfacePageChange> = ({ onPageChange, a
         <img className={styles.logoMA} src={logoMA} alt="Logo Masters academy" />
         <div className={styles.switcherTheme}>
             <button
-                className={`${styles.themeDayBtn} ${activeTheme === 'light' ? styles.activeTheme : ''}`}
+                className={clsx(styles.themeDayBtn, { [styles.activeTheme]: activeTheme === 'light' })}
                 onClick={() => changeTheme('light')}
             >
-                <svg className={styles.svgThemeButton} viewBox="0 0 20 20">
-                    <path
-                        className={`${styles.pathSvgTheme} ${activeTheme === 'light' ? styles.activeButtonTheme : styles.inactiveButtonTheme}`}
-                        d="M10 3.333V1.667m0 15v1.666M5.345 5.345 4.167 4.167m10.606 10.606 1.179 1.179M3.333 10H1.667m15 0h1.666m-3.56-4.655 1.18-1.178M5.345 14.773l-1.179 1.179M10 14.167a4.167 4.167 0 1 1 0-8.334 4.167 4.167 0 0 1 0 8.334Z"
-                    />
-                </svg>
+                <SvgLightThemeIcon activeTheme={activeTheme} />
             </button>
             <div className={styles.vertLine}></div>
-            <button className={styles.themeNightBtn} onClick={() => changeTheme('dark')}>
-                <svg className={styles.svgThemeButton} viewBox="0 0 20 20">
-                    <path
-                        className={`${styles.pathSvgTheme} ${activeTheme === 'dark' ? styles.activeButtonTheme : styles.inactiveButtonTheme}`}
-                        d="M7.5 5a7.5 7.5 0 0 0 9.679 7.179 7.5 7.5 0 1 1-9.357-9.357A7.499 7.499 0 0 0 7.5 5Z"
-                    />
-                </svg>
+            <button
+                className={clsx(styles.themeNightBtn, { [styles.activeTheme]: activeTheme === 'dark' })}
+                onClick={() => changeTheme('dark')}
+            >
+                <SvgDarkThemeIcon activeTheme={activeTheme} />
             </button>
         </div>
         <nav>
             <ul className={styles.navMenu}>
                 <li className={styles.menuItem}>
                     <button
-                        className={`${styles.menuBtn} ${activePage === 'about' ? styles.activePage : ''}`}
+                        className={clsx(styles.menuBtn, { [styles.activePage]: activePage === 'about' })}
                         onClick={() => onPageChange('about')}
                     >
                         About
                     </button>
                 </li>
                 <li className={styles.menuItem}>
                     <button
-                        className={`${styles.menuBtn} ${activePage === 'products' ? styles.activePage : ''}`}
+                        className={clsx(styles.menuBtn, { [styles.activePage]: activePage === 'products' })}
                         onClick={() => onPageChange('products')}
                     >
                         Products

diff --git a/src/components/header/header.module.css b/src/components/header/header.module.css
@@ -28,37 +28,12 @@
   padding: 0;
 }
 
-.themeDayImg, .themeNightImg {
-  width: 20px;
-  height: 20px;
-  padding: 10px 5px;
-}
-
 .vertLine {
-  background-color: #656565;
+  background-color: var(--txt-secondary-light);
   width: 2px;
   height: 20px;
 }
 
-.svgThemeButton {
-  width: 20px;
-  height: 20px;
-}
-
-.pathSvgTheme {
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-width: 1.5;
-}
-
-.activeButtonTheme {
-  stroke: #FFF;
-}
-
-.inactiveButtonTheme {
-  stroke: #656565;
-}
-
 /* styles for navigation menu */
 
 .navMenu {

diff --git a/src/components/sortList/SortList.components.tsx b/src/components/sortList/SortList.components.tsx
@@ -6,32 +6,30 @@ export const SortList = () => {
     const [willShowList, setShowList] = useState(false);
     const [selectedValue, setSelectedValue] = useState('Price (High - Low)');
 
-    const toggleList = () => setShowList(!willShowList);
-
     const listItems = ['Price (High - Low)', 'Price (Low - High)', 'Newest', 'Oldest'];
 
     return (
         <div className={styles.sort}>
             <span className={styles.sortLabel}>Sort by:</span>
             <div className={styles.sortList}>
-                <button className={styles.listCurrent} onClick={toggleList}>
+                <button className={styles.listCurrent} onClick={() => setShowList(!willShowList)}>
                     {selectedValue}
                 </button>
                 {willShowList && (
-                    <div className={styles.listBody}>
+                    <ul className={styles.listBody}>
                         {listItems.map((item) => (
-                            <div
+                            <li
                                 key={item}
                                 className={styles.listItem}
                                 onClick={() => {
                                     setSelectedValue(item);
-                                    toggleList();
+                                    setShowList(!willShowList);
                                 }}
                             >
                                 {item}
-                            </div>
+                            </li>
                         ))}
-                    </div>
+                    </ul>
                 )}
             </div>
         </div>

diff --git a/src/components/sortList/sortList.module.css b/src/components/sortList/sortList.module.css
@@ -39,6 +39,9 @@
   top: 0;
   border-radius: 20px;
   z-index: 5;
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
 .listCurrent, .listBody {

diff --git a/src/components/svgCart/SvgCart.component.tsx b/src/components/svgCart/SvgCart.component.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export const SvgCart = () => (
+    <svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M15.1704 16.3227C14.0658 16.3227 13.1704 17.2759 13.1704 18.4517C13.1704 19.6275 14.0658 20.5807 15.1704 20.5807C16.275 20.5807 17.1704 19.6275 17.1704 18.4517C17.1704 17.2759 16.275 16.3227 15.1704 16.3227ZM15.1704 16.3227H7.46436C7.00329 16.3227 6.77234 16.3227 6.58252 16.2353C6.41507 16.1583 6.26979 16.0343 6.16395 15.8761C6.04531 15.6989 5.9976 15.4618 5.90315 14.9926L3.44189 2.76567C3.34525 2.28556 3.29628 2.04577 3.17627 1.86645C3.07043 1.70829 2.92518 1.58381 2.75773 1.50678C2.56787 1.41943 2.3382 1.41943 1.87694 1.41943H1.17041M4.17041 4.61298H17.0436C17.7654 4.61298 18.1259 4.61298 18.3682 4.77304C18.5804 4.91324 18.7357 5.13313 18.8035 5.38902C18.8808 5.68115 18.7814 6.05004 18.5814 6.78828L17.1968 11.898C17.0772 12.3393 17.0173 12.5596 16.896 12.7234C16.7889 12.868 16.6476 12.9811 16.4875 13.0506C16.3065 13.1291 16.0915 13.1291 15.6625 13.1291H5.90088M6.17041 20.5807C5.06584 20.5807 4.17041 19.6275 4.17041 18.4517C4.17041 17.2759 5.06584 16.3227 6.17041 16.3227C7.27498 16.3227 8.17041 17.2759 8.17041 18.4517C8.17041 19.6275 7.27498 20.5807 6.17041 20.5807Z"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+    </svg>
+);
diff --git a/src/components/svgTheme/SvgTheme.component.tsx b/src/components/svgTheme/SvgTheme.component.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { clsx } from 'clsx';
+
+import styles from './svgTheme.module.css';
+
+interface SvgThemeIconProps {
+    activeTheme: string;
+}
+
+export const SvgLightThemeIcon: React.FC<SvgThemeIconProps> = ({ activeTheme }) => (
+    <svg className={styles.svgThemeButton} viewBox="0 0 20 20">
+        <path
+            className={clsx(styles.pathSvgTheme, {
+                [styles.activeButtonTheme]: activeTheme === 'light',
+                [styles.inactiveButtonTheme]: activeTheme !== 'light',
+            })}
+            d="M10 3.333V1.667m0 15v1.666M5.345 5.345 4.167 4.167m10.606 10.606 1.179 1.179M3.333 10H1.667m15 0h1.666m-3.56-4.655 1.18-1.178M5.345 14.773l-1.179 1.179M10 14.167a4.167 4.167 0 1 1 0-8.334 4.167 4.167 0 0 1 0 8.334Z"
+        />
+    </svg>
+);
+
+export const SvgDarkThemeIcon: React.FC<SvgThemeIconProps> = ({ activeTheme }) => (
+    <svg className={styles.svgThemeButton} viewBox="0 0 20 20">
+        <path
+            className={clsx(styles.pathSvgTheme, {
+                [styles.activeButtonTheme]: activeTheme === 'dark',
+                [styles.inactiveButtonTheme]: activeTheme !== 'dark',
+            })}
+            d="M7.5 5a7.5 7.5 0 0 0 9.679 7.179 7.5 7.5 0 1 1-9.357-9.357A7.499 7.499 0 0 0 7.5 5Z"
+        />
+    </svg>
+);
diff --git a/src/components/svgTheme/svgTheme.module.css b/src/components/svgTheme/svgTheme.module.css
@@ -0,0 +1,18 @@
+.svgThemeButton {
+  width: 20px;
+  height: 20px;
+}
+
+.pathSvgTheme {
+  fill: none;
+  stroke: currentcolor;
+  stroke-width: 1.5;
+}
+
+.activeButtonTheme {
+  stroke: #F1F1F1;
+}
+
+.inactiveButtonTheme {
+  stroke: #656565;
+}
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,9 +1,10 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import tsconfigPaths from 'vite-tsconfig-paths';
+import svgLoader from 'vite-svg-loader';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [react(), tsconfigPaths()],
+    plugins: [react(), tsconfigPaths(), svgLoader()],
     base: '/fe-react-2024/',
 });