Merge branch 'refs/heads/develop' into 854-redesign-search-scenario

# Conflicts: # FrontEnd/src/components/CompanyCard/CompanyCard.module.css # FrontEnd/src/components/Header/Navbar/SearchBox.jsx # FrontEnd/src/components/Header/Navbar/SearchBox.module.css
ita-social-projects · Nov 24, 2024 · 9c49ec5 · 9c49ec5
2 parents 9427424 + a9baac3
commit 9c49ec5
Show file tree

Hide file tree

Showing 65 changed files with 1,227 additions and 784 deletions.
diff --git a/FrontEnd/public/svg/arrow-down.svg b/FrontEnd/public/svg/arrow-down.svg
diff --git a/FrontEnd/public/svg/arrow-up.svg b/FrontEnd/public/svg/arrow-up.svg
diff --git a/FrontEnd/src/App.css b/FrontEnd/src/App.css
@@ -7,4 +7,4 @@
 
 body {
   width: 100vw;
-}
+}
diff --git a/FrontEnd/src/components/CompanyCard/CompanyCard.module.css b/FrontEnd/src/components/CompanyCard/CompanyCard.module.css
@@ -2,11 +2,11 @@
   width: 345px;
   height: 365px;
   display: block;
-  align-items: center;
-  border-radius: 6px;
+  border-radius: 11px;
   position: relative;
   margin: auto;
   background: var(--company-card-color);
+  box-shadow: 0px 0px 2px 0px #41404533;
 }
 
 .company-card:hover {
@@ -46,8 +46,8 @@
 .company-card__image {
   width: 345px;
   height: 188px;
-  border-top-left-radius: 6px;
-  border-top-right-radius: 6px;
+  border-top-left-radius: 11px;
+  border-top-right-radius: 11px;
   flex-shrink: 0;
   object-fit: cover;
 }
@@ -80,7 +80,8 @@
   text-align: left;
   padding-left: 16px;
   padding-top: 6px;
-  max-width: 300px;
+  max-width: 262px;
+  height: 35px;
 }
 
 .company-card__name-text {
@@ -115,7 +116,7 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  width: 345px;
+  width: 302px;
   padding-left: 13px;
   padding-bottom: 2px;
 }
@@ -140,55 +141,35 @@
 }
 
 .company-card__logo {
-  width: 42.2px;
-  height: 42.2px;
+  width: 50px;
+  height: 50px;
   position: absolute;
-  right: 16px;
-  bottom: 153.9px;
+  right: 20px;
+  bottom: 152px;
 }
 
 .company-card__logo-ellipse {
-  width: 42.2px;
-  height: 42.2px;
+  width: 50px;
+  height: 50px;
   background: var(--company-card-color);
   border-radius: 9999px;
-  border: 1px solid #232424;
+  border: 1px solid var(--grey-border-color);
 }
 
 .company-card__logo-image {
-  width: 42.2px;
-  height: 42.2px;
+  width: 50px;
+  height: 50px;
   border-radius: 9999px;
   background: var(--company-card-color);
   object-fit: cover;
 }
 
 .company-card__star {
   position: absolute;
-  left: 292px;
+  left: 296px;
   bottom: 13px;
 }
 
-@media only screen and (min-width: 768px) {
-
-  .company-card,
-  .company-card__image-frame,
-  .company-card__image,
-  .company-card__text-block {
-    width: 344px;
-  }
-
-  .company-card__star {
-    left: 296px;
-  }
-
-  .company-card__category-text {
-    max-width: 250px;
-  }
-
-}
-
-
 @media only screen and (min-width: 1512px) {
 
   .company-card,
@@ -203,6 +184,6 @@
   }
 
   .company-card__category-text {
-    max-width: 250px;
+    max-width: 220px;
   }
-}
+}
diff --git a/FrontEnd/src/components/Header/Navbar/BurgerMenu.jsx b/FrontEnd/src/components/Header/Navbar/BurgerMenu.jsx
@@ -1,26 +1,24 @@
-import React, { useState } from 'react';
+import React from 'react';
 import Hamburger from 'hamburger-react';
 import Menu from './Menu';
 import SearchBox from './SearchBox';
+import { useBurgerMenu } from '../../../context/BurgerMenuContext';
 import css from './BurgerMenu.module.css';
 
 const BurgerMenu = () => {
-  const [isOpen, setOpen] = useState(false);
+  const { isOpen, toggleMenu } = useBurgerMenu();
 
   return (
     <div className={css.burgerMenuContainer}>
-      <Hamburger
-          toggled={isOpen}
-          toggle={setOpen}
-          size={30}
-          className={css.hamburgerIcon}
-      />
-      {isOpen && (
-        <div className={css.menu}>
-          <SearchBox className={css.searchBar} />
-          <Menu />
-        </div>
-      )}
+      <Hamburger toggled={isOpen} toggle={toggleMenu} size={30} className={css.hamburgerIcon} />
+      <div className={`${css.menu} ${isOpen ? css.open : ''}`}>
+        {isOpen && (
+          <>
+            <SearchBox className={css.searchBar} />
+            <Menu />
+          </>
+        )}
+      </div>
     </div>
   );
 };

diff --git a/FrontEnd/src/components/Header/Navbar/BurgerMenu.module.css b/FrontEnd/src/components/Header/Navbar/BurgerMenu.module.css
@@ -1,17 +1,23 @@
-.burgerMenuContainer {
-    position: relative;
-    top: -4px;
+.menu {
+  position: absolute;
+  top: 61px;
+  left: -100vw;
+  width: 100vw;
+  background-color: white;
+  overflow: hidden;
+  max-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  transition: max-height 0.3s ease, left 0.3s ease, padding 0.3s ease;
 }
 
-.menu {
-    position: absolute;
-    top: 61px;
-    left: calc(-100vw + 80px);
-    width: calc(100vw - 40px);
-    background-color: white;
-    padding: 30px 20px;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    z-index: 1000;
+.menu.open {
+  left: 0;
+  max-height: 180px;
+  padding: 20px;
 }
+
+
+
+
diff --git a/FrontEnd/src/components/Header/Navbar/Navbar.module.css b/FrontEnd/src/components/Header/Navbar/Navbar.module.css
@@ -8,7 +8,7 @@
   display: flex;
   max-width: calc(1512px - 208px);
   width: 100%;
-  padding: 16px 104px;
+  padding: 16px 23px;
   align-items: center;
   justify-content: space-between;
   height: var(--navbar-content-height);
@@ -17,12 +17,13 @@
 
 .navbar-logo__text {
   display: flex;
+  align-items: center;
+  flex-shrink: 0;
 }
 
 .navbar-main-logo {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: 10px;
   color: var(--header-bunner-text-color);
   width: 208px;
@@ -34,9 +35,11 @@
 .navbar-utility-bar {
   display: flex;
   gap: 24px;
-  height: 40px;
+  align-items: center;
 }
 
+
+
 .burger-menu-wrapper {
   display: none;
 }
@@ -53,15 +56,58 @@
 
   .burger-menu-wrapper {
     display: block;
+    margin-left: auto;
   }
 }
 
 @media (max-width: 630px) {
+  .navbar-content {
+    padding: 8px 16px;
+    justify-content: space-between;
+  }
+
   .navbar-main-logo {
-    width: 30px;
+    order: 2;
+    margin: 0 auto;
+    width: auto;
+    font-size: 20px;
+  }
+
+  .burger-menu-wrapper {
+    order: 1;
+    margin: 0;
+  }
+
+  .navbar-utility-bar {
+    order: 3;
+    gap: 12px;
   }
 
   .navbar-main-logo span {
     display: none;
   }
 }
+
+@media (max-width: 380px) {
+  .navbar-content {
+    padding: 8px 12px;
+  }
+
+  .navbar-utility-bar {
+    gap: 8px;
+    justify-content: flex-end;
+  }
+
+  .navbar-utility-bar button {
+    padding: 6px 12px;
+    font-size: 12px;
+  }
+
+  .navbar-main-logo {
+    margin: 0 auto;
+  }
+
+  .burger-menu-wrapper {
+    margin-right: 0;
+  }
+}
diff --git a/FrontEnd/src/components/Header/Navbar/Profile.jsx b/FrontEnd/src/components/Header/Navbar/Profile.jsx
@@ -35,7 +35,7 @@ function Profile() {
         />
       </div>
       <div className={css['dropdown-section']}>
-        <DropdownMenu toggleText={isStaff ? 'Адміністратор' : 'Профіль'}>
+        <DropdownMenu toggleText={isStaff ? 'Адміністратор' : 'Мій профіль'}>
           <Link to={isStaff ? '/customadmin/admin-profile/admin-info' : '/profile/user-info'}>Мій профіль</Link>
           {!isStaff && <Link to="/profiles/companies">Мої збережені</Link>}
           <button onClick={performLogout}>Вихід</button>
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,4 +7,4 @@ @@
     body {
       width: 100vw;
-    }
+    }