module.css

ita-social-projects · Oct 17, 2023 · a15ef48 · a15ef48
1 parent d65e2a7
commit a15ef48
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 36 deletions.
diff --git a/FrontEnd/src/components/HeaderFooter/header/Header.jsx b/FrontEnd/src/components/HeaderFooter/header/Header.jsx
@@ -2,17 +2,19 @@ import css from './Header.module.css';
 import HeaderMenu from './menu/HeaderMenu';
 import Navbar from './navbar/Navbar';
 
-function Header (props) {
-    return (
-        <header>
-            <div className={css['header-content']}>
-                <Navbar isAuthorized={props.isAuthorized} page={props.page}></Navbar>
-                <div className={css['header-divider']}></div>
-                {props.page === 'login' || props.page === 'registration' ? (null): (<HeaderMenu/>)}
-                <div className={css['header-divider']}></div>
-            </div>
-        </header>
-    );
+function Header(props) {
+  return (
+    <header>
+      <div className={css['header-content']}>
+        <Navbar isAuthorized={props.isAuthorized} page={props.page}></Navbar>
+        <div className={css['header-divider']}></div>
+        {props.page === 'login' || props.page === 'registration' ? null : (
+          <HeaderMenu />
+        )}
+        <div className={css['header-divider']}></div>
+      </div>
+    </header>
+  );
 }
 
 export default Header;
diff --git a/FrontEnd/src/components/SearchPage/Search.js b/FrontEnd/src/components/SearchPage/Search.js
@@ -6,7 +6,7 @@ import SearchResults from './search_field/SearchResults';
 import frame42 from './img/frame42.png';
 import link_to_left from './img/link_to_left.svg';
 import link_to_right from './img/link_to_right.svg';
-import './search_page.css';
+import './search_page.module.css';
 
 const ITEMS_PER_PAGE = 6;
 

diff --git a/FrontEnd/src/components/SearchPage/search_field/SearchResults.js b/FrontEnd/src/components/SearchPage/search_field/SearchResults.js
@@ -1,5 +1,5 @@
 import MainCompanies from './companies/Companies';
-import './Text.css';
+import styles from './Text.module.css';
 
 const SearchResults = ({ results, displayedResults, isAuthorized }) => {
   let error = null;
@@ -11,10 +11,10 @@ const SearchResults = ({ results, displayedResults, isAuthorized }) => {
   return (
     <div>
       {!error && (
-        <div className="new-companies-block">
-          <div className="row">
+        <div className={styles['new-companies-block']}>
+          <div className={styles['row']}>
             {displayedResults.map((result, resultIndex) => (
-              <div key={resultIndex} className="col-md-4">
+              <div key={resultIndex} className={styles['col-md-4']}>
                 <MainCompanies
                   companyData={result}
                   isAuthorized={isAuthorized}

diff --git a/...mponents/SearchPage/search_field/Text.css → ...s/SearchPage/search_field/Text.module.css b/...mponents/SearchPage/search_field/Text.css → ...s/SearchPage/search_field/Text.module.css
diff --git a/FrontEnd/src/components/SearchPage/search_field/companies/Companies.js b/FrontEnd/src/components/SearchPage/search_field/companies/Companies.js
@@ -1,7 +1,7 @@
 import { Link } from 'react-router-dom';
 import wish_list_checklist from './img/wish_list_checklist.svg';
 import wish_list_checklist_added from './img/wish_list_checklist_added.svg';
-import './CompaniesCards.css';
+import styles from './CompaniesCards.module.css';
 
 const MainCompanies = ({ companyData, isAuthorized }) => {
   const currentDate = new Date();
@@ -10,40 +10,44 @@ const MainCompanies = ({ companyData, isAuthorized }) => {
   const usersSavedList = [];
 
   return (
-    <div className="product-card">
-      <div className="product-card__block">
-        <div className="product-card__image-frame">
+    <div className={styles['product-card']}>
+      <div className={styles['product-card__block']}>
+        <div className={styles['product-card__image-frame']}>
           <img
-            className="product-card__image"
+            className={styles['product-card__image']}
             src={companyData.banner_image}
             alt={companyData.name}
           />
         </div>
-        <div className="product-card__text-block">
-          <div className="product-card__text-block__header">
-            <div className="product-card__category-text align_items_left">
+        <div className={styles['product-card__text-block']}>
+          <div className={styles['product-card__text-block__header']}>
+            <div
+              className={styles['product-card__category-text align_items_left']}
+            >
               {companyData.categories &&
                 companyData.categories
                   .map((category) => category.name)
                   .join(' ')}
             </div>
-            <div className="product-card__name-text align_items_left">
+            <div className={styles['product-card__name-text align_items_left']}>
               <Link
-                className="product-card__name-text_link"
+                className={styles['product-card__name-text_link']}
                 to={`/profile/${companyData.id}`}
               >
                 {companyData.name}
               </Link>
               <br />
             </div>
           </div>
-          <div className="product-card__address-text align_items_left">
+          <div
+            className={styles['product-card__address-text align_items_left']}
+          >
             {companyData.address}
           </div>
-          <div className="product-card__badges-block">
-            <div className="product-card__badges">
-              <div className="product-card__badge">
-                <div className="product-card__badge-text">
+          <div className={styles['product-card__badges-block']}>
+            <div className={styles['product-card__badges']}>
+              <div className={styles['product-card__badge']}>
+                <div className={styles['product-card__badge-text']}>
                   {currentYear - companyData.founded} років досвіду
                 </div>
               </div>
@@ -58,7 +62,7 @@ const MainCompanies = ({ companyData, isAuthorized }) => {
                     <div>
                       {/* if company added - del from saved list */}
                       <button
-                        className="product-card__buttons"
+                        className={styles['product-card__buttons']}
                         // onClick={() => delFromSavedList(companyData.profile_id)}
                       >
                         <img src={wish_list_checklist_added} alt="" />
@@ -70,7 +74,7 @@ const MainCompanies = ({ companyData, isAuthorized }) => {
                     <div>
                       {/* if compony not added - add to saved list */}
                       <button
-                        className="product-card__buttons"
+                        className={styles['product-card__buttons']}
                         // onClick={() => addToSavedList(companyData.profile_id)}
                       >
                         <img src={wish_list_checklist} alt="Add to wish list" />
@@ -83,10 +87,10 @@ const MainCompanies = ({ companyData, isAuthorized }) => {
           </div>
         </div>
       </div>
-      <div className="product-card__logo">
-        <div className="product-card__logo-ellipse">
+      <div className={styles['product-card__logo']}>
+        <div className={styles['product-card__logo-ellipse']}>
           <img
-            className="product-card__logo-image"
+            className={styles['product-card__logo-image']}
             alt={`${companyData.name} logo`}
           />
         </div>

diff --git a/...search_field/companies/CompaniesCards.css → ...field/companies/CompaniesCards.module.css b/...search_field/companies/CompaniesCards.css → ...field/companies/CompaniesCards.module.css
diff --git a/...src/components/SearchPage/search_page.css → ...ponents/SearchPage/search_page.module.css b/...src/components/SearchPage/search_page.css → ...ponents/SearchPage/search_page.module.css