From fe413bef1b835c4c5801f2e412408534062b43a2 Mon Sep 17 00:00:00 2001 From: KyzukY Date: Mon, 4 Nov 2024 14:35:07 +0200 Subject: [PATCH 001/171] add new text --- .../AboutSection/AboutText/AboutText.css | 131 +++++++----------- .../AboutSection/AboutText/AboutText.jsx | 34 ++--- .../AboutSection/AboutText/text.js | 92 ++++++------ 3 files changed, 108 insertions(+), 149 deletions(-) diff --git a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.css b/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.css index c98511b11..5edaf22dd 100644 --- a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.css +++ b/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.css @@ -1,88 +1,57 @@ .about-us-text-section { display: flex; - padding: 80px 104px; flex-direction: column; - align-items: flex-start; - gap: 80px; - background: var(--about-text-background-color); - overflow: hidden; -} -.about-us-text-section__text-field { - display: flex; - flex-direction: column; - align-items: flex-end; - gap: 24px; - position: relative; - z-index: 1; -} -.about-us-text-section__header-text { - width: 990px; - color: var(--about-text-font-color); - font-family: var(--font-main); - font-size: 32px; - font-style: normal; + align-items: center; + padding: 80px 0; + background-color: #f9f4ea; /* Бежевий фон */ + } + + .about-us-text-section__header-text { + font-family: Geologica; + font-size: 40px; font-weight: 700; - line-height: 120%; -} -.about-us-text-section__text { - width: 971px; - height: 62px; - color: var(--about-text-font-color); - font-feature-settings: 'calt' off; - font-family: var(--font-main); - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: 20px; /* 125% */ - letter-spacing: -0.16px; -} - -.about-us-text-section__paragraphs { + line-height: 48px; + letter-spacing: 0.01em; + text-align: center; + color: #333; + margin-bottom: 40px; + } + + /* Контейнер для карток */ + .about-us-text-section__grid { + display: grid; + grid-template-columns: repeat(4, 1fr); /* 4 колонки */ + gap: 32px; /* Відступ 32px між картками з усіх сторін */ + max-width: 1304px; /* Максимальна ширина для контейнера */ + width: 100%; + } + + /* Стиль для кожної картки */ + .about-us-text-section__card { display: flex; - width: 1304px; - justify-content: flex-end; - align-items: flex-start; - gap: 36px; -} -.about-us-text-section__paragraph-one { - align-self: flex-start; - width: 466px; - flex-shrink: 0; - color: var(--about-text-font-color); - font-feature-settings: 'calt' off; - font-family: var(--font-main); - font-size: 16px; - font-style: normal; - font-weight: 600; - line-height: 30px; /* 187.5% */ - letter-spacing: -0.16px; - /* content: "\2022"; */ -} -.about-us-text-section__paragraph-two { - align-self: flex-start; - width: 489px; - flex-shrink: 0; - color: var(--about-text-font-color); - font-feature-settings: 'calt' off; - font-family: var(--font-main); + align-items: center; /* Вирівнює іконку та текст по вертикалі */ + gap: 12px; /* Відстань між іконкою та текстом */ + background-color: #fff; + width: 100%; /* Ширина картки залежить від колонки */ + max-width: 302px; /* Максимальна ширина картки */ + height: 102px; /* Фіксована висота картки */ + border-radius: 6px; + box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); + text-align: left; /* Текст вирівняний ліворуч */ + } + + /* Стиль для іконки */ + .about-us-text-section__icon { + width: 24px; + height: 24px; + margin-left: 12px; + } + + /* Стиль для тексту в картці */ + .about-us-text-section__card p { font-size: 16px; - font-style: normal; font-weight: 600; - line-height: 30px; /* 187.5% */ - letter-spacing: -0.16px; -} -.about-us-text-section__paragraph-one span::before, -.about-us-text-section__paragraph-two span::before { - /* content: "\2022"; */ - margin-right: 8px; -} - -.about-us-text-section__dots { - width: 353px; - height: auto; - padding: 50px 0 0 10px; - object-fit: cover; - position: absolute; - transform: translateX(-50%); - z-index: 0; -} \ No newline at end of file + color: #333; + margin: 0; + } + \ No newline at end of file diff --git a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.jsx b/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.jsx index f11bae322..47458a5b4 100644 --- a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.jsx +++ b/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.jsx @@ -2,33 +2,23 @@ import './AboutText.css'; import AboutText from './text.js'; const AboutSectionText = () => { - const renderParagraphs = (paragraphNumber) => { - return AboutText.content - .filter(item => item.paragraph === paragraphNumber) - .map((item, index) => ( -
  • {item.text}
    • - )); - }; - return (
    -
    -
    {AboutText.title}
    -
    -
      - {renderParagraphs(1)} -
    -
      - {renderParagraphs(2)} -
    -
    +

    {AboutText.title}

    +
    + {AboutText.content.map((item) => ( +
    + {item.text} +

    {item.text}

    +
    + ))}
    - dots_12x10.png
    ); }; export default AboutSectionText; - diff --git a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/text.js b/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/text.js index d2ac50788..6fc7c1920 100644 --- a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/text.js +++ b/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/text.js @@ -1,49 +1,49 @@ const AboutText = { - id: 1, - title: 'ДЛЯ КОГО', - level: 2, - content: [ - { - id: 2, - paragraph: 1, - text: 'Виробники крафтової продукції: винороби, сировари, медовари та інші майстри своєї справи.' - }, - { - id: 3, - paragraph: 1, - text: 'Сомельє та ресторатори: знавці, які прагнуть до нових смаків та ексклюзивних продуктів.' - }, - { - id: 4, - paragraph: 1, - text: 'Представники готельно-ресторанного бізнесу: шукаєте унікальні пропозиції для своїх гостей?' - }, - { - id: 5, - paragraph: 1, - text: 'Представники роздрібних та гуртових торгових мереж: розширяйте асортимент крафтовими делікатесами.' - }, - { - id: 6, - paragraph: 2, - text: 'Представники пакувальної індустрії: знаходьте нових клієнтів та партнерів.' - }, - { - id: 7, - paragraph: 2, - text: 'Представники логістичних компаній та служб доставки: пропонуйте еко-рішення для крафтового бізнесу.' - }, - { - id: 8, - paragraph: 2, - text: 'Стартапери: втілюйте свої ідеї у життя за підтримки спільноти.' - }, - { - id: 9, - paragraph: 2, - text: 'Інші фахівці галузі: діліться досвідом, знаннями та знаходьте однодумців.' - }, - ], + id: 1, + title: 'Для кого', + level: 2, + content: [ + { + id: 2, + icon: 'craft.png', // Add icon filename here + text: 'Виробники крафтової продукції' + }, + { + id: 3, + icon: 'sommelier.png', + text: 'Сомельє та ресторатори' + }, + { + id: 4, + icon: 'hotel.png', + text: 'Представники готельно-ресторанного бізнесу' + }, + { + id: 5, + icon: 'retail.png', + text: 'Представники роздрібних та гуртових торгових мереж' + }, + { + id: 6, + icon: 'packaging.png', + text: 'Представники пакувальної індустрії' + }, + { + id: 7, + icon: 'logistics.png', + text: 'Представники логістичних компаній та служб доставки' + }, + { + id: 8, + icon: 'startup.png', + text: 'Стартапери' + }, + { + id: 9, + icon: 'specialists.png', + text: 'Інші фахівці галузі' + }, + ], }; -export default AboutText; \ No newline at end of file +export default AboutText; From 941cbaf0e8d17a14342349d3262dc0c7cffa4c46 Mon Sep 17 00:00:00 2001 From: Alex Date: Tue, 5 Nov 2024 14:45:48 +0200 Subject: [PATCH 002/171] Redesigned search box in header --- .../components/Header/Navbar/SearchBox.jsx | 56 +++++++++------- .../Header/Navbar/SearchBox.module.css | 64 +++++++++---------- 2 files changed, 62 insertions(+), 58 deletions(-) diff --git a/FrontEnd/src/components/Header/Navbar/SearchBox.jsx b/FrontEnd/src/components/Header/Navbar/SearchBox.jsx index f27e41262..e8d8373d2 100644 --- a/FrontEnd/src/components/Header/Navbar/SearchBox.jsx +++ b/FrontEnd/src/components/Header/Navbar/SearchBox.jsx @@ -1,5 +1,7 @@ import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; +import {Button, Input} from 'antd'; +import {CloseOutlined, SearchOutlined} from '@ant-design/icons'; import css from './SearchBox.module.css'; function SearchBox() { @@ -8,37 +10,43 @@ function SearchBox() { const [searchTerm, setSearchTerm] = useState(''); const searchPage = 'search'; - const handleSearch = (searchTerm, searchPage) => { + const handleSearch = () => { if (searchTerm.trim() !== '') { navigate(`/${searchPage}/?name=${searchTerm}`); setSearchTerm(''); } }; + + const handleClear = () => { + setSearchTerm(''); + }; return ( -
    -
    - setSearchTerm(e.target.value)} - onKeyDown={(e) => { - if (e.key === 'Enter') { - handleSearch(searchTerm, searchPage); - } - }} - /> +
    +
    + setSearchTerm(e.target.value)} + /> + {searchTerm && ( +
    - -
    + ); } diff --git a/FrontEnd/src/components/Header/Navbar/SearchBox.module.css b/FrontEnd/src/components/Header/Navbar/SearchBox.module.css index 3bb402c52..7aaad81da 100644 --- a/FrontEnd/src/components/Header/Navbar/SearchBox.module.css +++ b/FrontEnd/src/components/Header/Navbar/SearchBox.module.css @@ -2,55 +2,50 @@ display: flex; align-items: center; flex-shrink: 0; - width: 264px; - - border-radius: 2px; - border: 1px solid #d9d9d9; + height: 40px; + width: 225px; + border-radius: 4px; + border: solid 1px #aaa; background: #fff; } .header-search-form { display: flex; - padding: 4px 12px; - align-items: flex-start; + padding: 4px 8px; + align-items: center; gap: 10px; flex: 1 0 0; position: relative; } -.header-search-form::after { - content: ""; - position: absolute; - border-right: 1px solid #d9d9d9; - height: 32px; - top: -3.5px; - right: 0; -} .header-search-form__input { - display: flex; - padding: 1px 0px; - align-items: flex-start; - gap: 10px; - flex: 1 0 0; + font-size: 16px; + flex: 1; + outline: none; border: none; } .header-search-form__addon { - display: flex; - padding: 6px; - justify-content: center; - align-items: center; - gap: 8px; - align-self: stretch; - background-color: transparent; + padding: 0; + color: black; cursor: pointer; border: none; } +.header-search-form__addon:hover { + color: black; +} + -.header-search-form__addon img { - width: 20px; - height: 20px; + +.header-search-form__addon:last-child::before { + content: ""; + position: absolute; + right: 40px; + top: -4px; + bottom: -4px; + width: 1px; + background-color: rgba(0, 0, 0, 0.25); } .header-search-form__input::placeholder { @@ -59,13 +54,14 @@ font-family: var(--font-main); font-size: 14px; font-style: normal; - font-weight: 400; - line-height: 20px; - letter-spacing: -0.14px; + font-weight: 300; + line-height: 1.25; + letter-spacing: -0.16px; + } textarea:focus, .header-search-form__input:focus { - border: none; outline: none; -} + box-shadow: none; +} \ No newline at end of file From 2767bc3840c53084a3841316e08e5d9d51ab1de8 Mon Sep 17 00:00:00 2001 From: Alex Date: Tue, 5 Nov 2024 14:47:23 +0200 Subject: [PATCH 003/171] Updated react requirements --- FrontEnd/package-lock.json | 27 +++++++++++++++++++++++++++ FrontEnd/package.json | 1 + 2 files changed, 28 insertions(+) diff --git a/FrontEnd/package-lock.json b/FrontEnd/package-lock.json index 84cc3dff0..dc664644c 100644 --- a/FrontEnd/package-lock.json +++ b/FrontEnd/package-lock.json @@ -23,6 +23,7 @@ "react-cookie": "^6.1.0", "react-dom": "^18.2.0", "react-google-recaptcha": "^3.1.0", + "react-highlight-words": "^0.20.0", "react-hook-form": "^7.45.4", "react-router-dom": "^6.22.3", "react-router-hash-link": "^2.4.3", @@ -10025,6 +10026,12 @@ "he": "bin/he" } }, + "node_modules/highlight-words-core": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/highlight-words-core/-/highlight-words-core-1.2.3.tgz", + "integrity": "sha512-m1O9HW3/GNHxzSIXWw1wCNXXsgLlxrP0OI6+ycGUhiUHkikqW3OrwVHz+lxeNBe5yqLESdIcj8PowHQ2zLvUvQ==", + "license": "MIT" + }, "node_modules/hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -14121,6 +14128,12 @@ "node": ">= 4.0.0" } }, + "node_modules/memoize-one": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-4.0.3.tgz", + "integrity": "sha512-QmpUu4KqDmX0plH4u+tf0riMc1KHE1+lw95cMrLlXQAFOx/xnBtwhZ52XJxd9X2O6kwKBqX32kmhbhlobD0cuw==", + "license": "MIT" + }, "node_modules/merge-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", @@ -17138,6 +17151,20 @@ "react": ">=16.4.1" } }, + "node_modules/react-highlight-words": { + "version": "0.20.0", + "resolved": "https://registry.npmjs.org/react-highlight-words/-/react-highlight-words-0.20.0.tgz", + "integrity": "sha512-asCxy+jCehDVhusNmCBoxDf2mm1AJ//D+EzDx1m5K7EqsMBIHdZ5G4LdwbSEXqZq1Ros0G0UySWmAtntSph7XA==", + "license": "MIT", + "dependencies": { + "highlight-words-core": "^1.2.0", + "memoize-one": "^4.0.0", + "prop-types": "^15.5.8" + }, + "peerDependencies": { + "react": "^0.14.0 || ^15.0.0 || ^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0" + } + }, "node_modules/react-hook-form": { "version": "7.46.0", "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.46.0.tgz", diff --git a/FrontEnd/package.json b/FrontEnd/package.json index c13a37322..33aae53f9 100644 --- a/FrontEnd/package.json +++ b/FrontEnd/package.json @@ -24,6 +24,7 @@ "react-cookie": "^6.1.0", "react-dom": "^18.2.0", "react-google-recaptcha": "^3.1.0", + "react-highlight-words": "^0.20.0", "react-hook-form": "^7.45.4", "react-router-dom": "^6.22.3", "react-router-hash-link": "^2.4.3", From 7f2976ec5fe7fc2b295ba680b1e35dcf4dfb7854 Mon Sep 17 00:00:00 2001 From: KyzukY Date: Tue, 5 Nov 2024 20:34:04 +0200 Subject: [PATCH 004/171] add icon --- FrontEnd/public/svg/baget.svg | 3 +++ FrontEnd/public/svg/car.svg | 3 +++ FrontEnd/public/svg/hotel.svg | 3 +++ FrontEnd/public/svg/people.svg | 3 +++ FrontEnd/public/svg/post.svg | 3 +++ FrontEnd/public/svg/rocket.svg | 3 +++ FrontEnd/public/svg/shop.svg | 3 +++ FrontEnd/public/svg/wine.svg | 3 +++ .../AboutSection/AboutText/AboutText.css | 9 +++++---- .../AboutSection/AboutText/AboutText.jsx | 2 +- .../LandingPage/AboutSection/AboutText/text.js | 16 ++++++++-------- 11 files changed, 38 insertions(+), 13 deletions(-) create mode 100644 FrontEnd/public/svg/baget.svg create mode 100644 FrontEnd/public/svg/car.svg create mode 100644 FrontEnd/public/svg/hotel.svg create mode 100644 FrontEnd/public/svg/people.svg create mode 100644 FrontEnd/public/svg/post.svg create mode 100644 FrontEnd/public/svg/rocket.svg create mode 100644 FrontEnd/public/svg/shop.svg create mode 100644 FrontEnd/public/svg/wine.svg diff --git a/FrontEnd/public/svg/baget.svg b/FrontEnd/public/svg/baget.svg new file mode 100644 index 000000000..c56202f38 --- /dev/null +++ b/FrontEnd/public/svg/baget.svg @@ -0,0 +1,3 @@ + + + diff --git a/FrontEnd/public/svg/car.svg b/FrontEnd/public/svg/car.svg new file mode 100644 index 000000000..23e6ebbf1 --- /dev/null +++ b/FrontEnd/public/svg/car.svg @@ -0,0 +1,3 @@ + + + diff --git a/FrontEnd/public/svg/hotel.svg b/FrontEnd/public/svg/hotel.svg new file mode 100644 index 000000000..f74fcef79 --- /dev/null +++ b/FrontEnd/public/svg/hotel.svg @@ -0,0 +1,3 @@ + + + diff --git a/FrontEnd/public/svg/people.svg b/FrontEnd/public/svg/people.svg new file mode 100644 index 000000000..a729ee4e5 --- /dev/null +++ b/FrontEnd/public/svg/people.svg @@ -0,0 +1,3 @@ + + + diff --git a/FrontEnd/public/svg/post.svg b/FrontEnd/public/svg/post.svg new file mode 100644 index 000000000..71e6ed313 --- /dev/null +++ b/FrontEnd/public/svg/post.svg @@ -0,0 +1,3 @@ + + + diff --git a/FrontEnd/public/svg/rocket.svg b/FrontEnd/public/svg/rocket.svg new file mode 100644 index 000000000..044c4b44f --- /dev/null +++ b/FrontEnd/public/svg/rocket.svg @@ -0,0 +1,3 @@ + + + diff --git a/FrontEnd/public/svg/shop.svg b/FrontEnd/public/svg/shop.svg new file mode 100644 index 000000000..7b4f5365c --- /dev/null +++ b/FrontEnd/public/svg/shop.svg @@ -0,0 +1,3 @@ + + + diff --git a/FrontEnd/public/svg/wine.svg b/FrontEnd/public/svg/wine.svg new file mode 100644 index 000000000..bf9f7f6a3 --- /dev/null +++ b/FrontEnd/public/svg/wine.svg @@ -0,0 +1,3 @@ + + + diff --git a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.css b/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.css index 5edaf22dd..c468e24b3 100644 --- a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.css +++ b/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.css @@ -42,16 +42,17 @@ /* Стиль для іконки */ .about-us-text-section__icon { - width: 24px; - height: 24px; - margin-left: 12px; + width: 36px; + height: 36px; + margin-left: 18px; } /* Стиль для тексту в картці */ .about-us-text-section__card p { + font-family: Geologica; font-size: 16px; font-weight: 600; - color: #333; + color:#232424; margin: 0; } \ No newline at end of file diff --git a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.jsx b/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.jsx index 47458a5b4..a84ac8f81 100644 --- a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.jsx +++ b/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.jsx @@ -9,7 +9,7 @@ const AboutSectionText = () => { {AboutText.content.map((item) => (
    {item.text} diff --git a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/text.js b/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/text.js index 6fc7c1920..5abfe98dc 100644 --- a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/text.js +++ b/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/text.js @@ -5,42 +5,42 @@ const AboutText = { content: [ { id: 2, - icon: 'craft.png', // Add icon filename here + icon: 'baget.svg', text: 'Виробники крафтової продукції' }, { id: 3, - icon: 'sommelier.png', + icon: 'wine.svg', text: 'Сомельє та ресторатори' }, { id: 4, - icon: 'hotel.png', + icon: 'hotel.svg', text: 'Представники готельно-ресторанного бізнесу' }, { id: 5, - icon: 'retail.png', + icon: 'shop.svg', text: 'Представники роздрібних та гуртових торгових мереж' }, { id: 6, - icon: 'packaging.png', + icon: 'post.svg', text: 'Представники пакувальної індустрії' }, { id: 7, - icon: 'logistics.png', + icon: 'car.svg', text: 'Представники логістичних компаній та служб доставки' }, { id: 8, - icon: 'startup.png', + icon: 'rocket.svg', text: 'Стартапери' }, { id: 9, - icon: 'specialists.png', + icon: 'people.svg', text: 'Інші фахівці галузі' }, ], From f8f97bc23faad5634a3a602decdda28688604a2d Mon Sep 17 00:00:00 2001 From: KyzukY Date: Thu, 7 Nov 2024 13:42:11 +0200 Subject: [PATCH 005/171] change css --- .../AboutSection/AboutText/AboutText.css | 120 ++++++++++-------- .../AboutSection/AboutText/AboutText.jsx | 29 +++-- 2 files changed, 88 insertions(+), 61 deletions(-) diff --git a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.css b/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.css index c468e24b3..3138d4407 100644 --- a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.css +++ b/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.css @@ -1,58 +1,76 @@ +/* Основний контейнер */ .about-us-text-section { - display: flex; - flex-direction: column; - align-items: center; - padding: 80px 0; - background-color: #f9f4ea; /* Бежевий фон */ + display: flex; + flex-direction: column; + align-items: center; + width: 375px; + /* padding: 40px 16px; */ + margin: auto; + background-color: #f9f4ea; +} + +/* Заголовок */ +.about-us-text-section__header-text { + font-family: Geologica; + font-size: 24px; + font-weight: 700; + line-height: 28px; + letter-spacing: 0.01em; + text-align: center; + color: #333; + margin-bottom: 40px; +} + +/* Стиль для карток */ +.about-us-text-section__card { + display: flex; + align-items: center; + gap: 12px; + background-color: #fff; + width: 100%; + max-width: 302px; + height: 102px; + border-radius: 6px; + box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); + text-align: left; +} + +/* Іконка */ +.about-us-text-section__icon { + width: 36px; + height: 36px; + margin-left: 18px; +} + +/* Текст */ +.about-us-text-section__card p { + font-family: Geologica; + font-size: 16px; + font-weight: 600; + color: #232424; + margin: 0; +} + +/* Адаптивність для планшетів */ +@media only screen and (min-width: 768px) { + .about-us-text-section { + max-width: 768px; } - + .about-us-text-section__header-text { - font-family: Geologica; - font-size: 40px; - font-weight: 700; - line-height: 48px; - letter-spacing: 0.01em; - text-align: center; - color: #333; - margin-bottom: 40px; + font-size: 32px; + line-height: 36px; } - - /* Контейнер для карток */ - .about-us-text-section__grid { - display: grid; - grid-template-columns: repeat(4, 1fr); /* 4 колонки */ - gap: 32px; /* Відступ 32px між картками з усіх сторін */ - max-width: 1304px; /* Максимальна ширина для контейнера */ - width: 100%; - } - - /* Стиль для кожної картки */ + .about-us-text-section__card { - display: flex; - align-items: center; /* Вирівнює іконку та текст по вертикалі */ - gap: 12px; /* Відстань між іконкою та текстом */ - background-color: #fff; - width: 100%; /* Ширина картки залежить від колонки */ - max-width: 302px; /* Максимальна ширина картки */ - height: 102px; /* Фіксована висота картки */ - border-radius: 6px; - box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); - text-align: left; /* Текст вирівняний ліворуч */ - } - - /* Стиль для іконки */ - .about-us-text-section__icon { - width: 36px; - height: 36px; - margin-left: 18px; + max-width: 364px; + height: 128px; } - - /* Стиль для тексту в картці */ - .about-us-text-section__card p { - font-family: Geologica; - font-size: 16px; - font-weight: 600; - color:#232424; - margin: 0; +} + +/* Адаптивність для десктопів */ +@media only screen and (min-width: 1200px) { + .about-us-text-section { + max-width: 1304px; } - \ No newline at end of file +} diff --git a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.jsx b/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.jsx index a84ac8f81..efdd31871 100644 --- a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.jsx +++ b/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.jsx @@ -1,3 +1,5 @@ +import React from 'react'; +import { Row, Col } from 'antd'; import './AboutText.css'; import AboutText from './text.js'; @@ -5,18 +7,25 @@ const AboutSectionText = () => { return (

    {AboutText.title}

    -
    + {AboutText.content.map((item) => ( -
    - {item.text} -

    {item.text}

    -
    + =768px) + xl={6} // Чотири колонки на десктопах (>=1200px) + > +
    + {item.text} +

    {item.text}

    +
    + ))} -
    +
    ); }; From b6488ff9e175bc4d82b82f3bf4891c7111c8cc5b Mon Sep 17 00:00:00 2001 From: KyzukY Date: Fri, 8 Nov 2024 12:28:30 +0200 Subject: [PATCH 006/171] change AboutText.css --- .../LandingPage/AboutSection/AboutText/AboutText.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.css b/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.css index 3138d4407..4ee8fc113 100644 --- a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.css +++ b/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.css @@ -3,8 +3,8 @@ display: flex; flex-direction: column; align-items: center; - width: 375px; - /* padding: 40px 16px; */ + width: 100vw;; + padding: 40px 16px; margin: auto; background-color: #f9f4ea; } @@ -14,11 +14,12 @@ font-family: Geologica; font-size: 24px; font-weight: 700; - line-height: 28px; + line-height: 48px; letter-spacing: 0.01em; text-align: center; - color: #333; + color: #232424; margin-bottom: 40px; + margin-top: 80px; } /* Стиль для карток */ From 3af228e4c33ce0be653e3309c617dcb49d89a49a Mon Sep 17 00:00:00 2001 From: Parcival Date: Mon, 11 Nov 2024 12:47:37 +0200 Subject: [PATCH 007/171] first commit --- .gitignore | 3 +- .../src/components/Header/Navbar/Menu.jsx | 2 +- FrontEnd/src/global.css | 5 +- .../src/pages/AboutUsPage/AboutTextContent.js | 32 ++++++++ .../src/pages/AboutUsPage/AboutUs.module.css | 73 +++++++++++++++++++ .../src/pages/AboutUsPage/AboutUsPage.jsx | 40 ++++++++++ FrontEnd/src/routes/ClientRouter.jsx | 2 + 7 files changed, 153 insertions(+), 4 deletions(-) create mode 100644 FrontEnd/src/pages/AboutUsPage/AboutTextContent.js create mode 100644 FrontEnd/src/pages/AboutUsPage/AboutUs.module.css create mode 100644 FrontEnd/src/pages/AboutUsPage/AboutUsPage.jsx diff --git a/.gitignore b/.gitignore index 2bbe866d3..88dc386a4 100644 --- a/.gitignore +++ b/.gitignore @@ -4,8 +4,9 @@ /.idea /venv /.venv +.venv /.env -env +.env /.vscode /*/.env /.DS_Store diff --git a/FrontEnd/src/components/Header/Navbar/Menu.jsx b/FrontEnd/src/components/Header/Navbar/Menu.jsx index 4e05cb98e..45beadd9c 100644 --- a/FrontEnd/src/components/Header/Navbar/Menu.jsx +++ b/FrontEnd/src/components/Header/Navbar/Menu.jsx @@ -18,7 +18,7 @@ const MENU_LINKS = [ }, { title: 'Про нас', - link: '/#about-us', + link: '/about-us', }, ]; diff --git a/FrontEnd/src/global.css b/FrontEnd/src/global.css index 80b9f54dd..e0bff0e03 100644 --- a/FrontEnd/src/global.css +++ b/FrontEnd/src/global.css @@ -25,8 +25,9 @@ :root { --main-block-size: 1512px; - - /* background color*/ + + /* background */ + --main-background-light-green: #F9F5EC; --main-header-color: #1F9A7C; --main-footer-background: #3C4044; --new-members-section-background: #F1FFF7; diff --git a/FrontEnd/src/pages/AboutUsPage/AboutTextContent.js b/FrontEnd/src/pages/AboutUsPage/AboutTextContent.js new file mode 100644 index 000000000..b95b693b3 --- /dev/null +++ b/FrontEnd/src/pages/AboutUsPage/AboutTextContent.js @@ -0,0 +1,32 @@ + +const AboutTextContent = { + id: 1, + header: 'ХТО МИ', + contents: [ + { + id: 3, + text: 'CraftMerge - перший форум України, який створений у ' + + 'співпраці з Національним університетом «Львівська політехніка». Наша ' + + 'місія - не лише об`єднання українських виробників та стартапів, а й ' + + 'відкриття нових перспектив у виробничій галузі.' + }, + { + id: 4, + text: 'CraftMerge - це не лише платформа для обміну досвідом та ідеями, але ' + + 'й комунікаційний майданчик для обговорення актуальних тенденцій та ' + + 'передових технологій.' + }, + { + id: 5, + text: 'Учасники форуму отримають можливість не лише обмінятися досвідом ' + + 'та ідеями, але й ознайомитися з найсучаснішими рішеннями ' + + 'виробництва крафтової продукції. Ми створили CraftMerge, щоб ' + + 'допомогти українським виробникам збільшити свою популярність та ' + + 'впізнаваність, розширити аудиторію споживачів та залучити нових ' + + 'клієнтів. Приєднуйтеся до нашого форуму та розвивайте свій бізнес ' + + 'разом з нами!' + } + ] + }; + +export default AboutTextContent; diff --git a/FrontEnd/src/pages/AboutUsPage/AboutUs.module.css b/FrontEnd/src/pages/AboutUsPage/AboutUs.module.css new file mode 100644 index 000000000..b20a50df8 --- /dev/null +++ b/FrontEnd/src/pages/AboutUsPage/AboutUs.module.css @@ -0,0 +1,73 @@ +.about-us-section { + flex-direction: column; + align-items: flex-start; +} + +.about-us-section-content { + height: 542px; +} + +.about-us-section-content__field { + width: 580px; + height: 542px; + flex-direction: column; + align-items: flex-start; + gap: 24px; + flex-shrink: 0; + position: absolute; +} + +.about-us-rectangle { + width: var(--main-block-size); + height: 542px; + flex-shrink: 0; + background: var(--about-as-background-color); + position: absolute; +} + +.about-us-section-content__text { + padding: 80px 0 0 104px; + height: 402px; + display: inline-flex; + flex-direction: column; + align-items: flex-start; + gap: 24px; +} + +.about-us-section-content__header-text { + color: var(--about-as-font-color); + font-family: var(--font-main); + font-size: 32px; + font-style: normal; + font-weight: 700; + line-height: 120%; + /* 38.4px */ +} + +.about-us-section-content__smart-text { + width: 567px; + color: var(--about-as-font-color); + font-feature-settings: 'calt' off; + font-family: var(--font-main); + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 20px; + /* 125% */ + letter-spacing: -0.16px; + +} + +.about-us-section-content__image { + width: 749px; + height: 542px; + flex-shrink: 0; + position: absolute; + top: 0; + right: 0; + object-fit: cover; +} + +#about-us { + scroll-margin-top: 320px; +} diff --git a/FrontEnd/src/pages/AboutUsPage/AboutUsPage.jsx b/FrontEnd/src/pages/AboutUsPage/AboutUsPage.jsx new file mode 100644 index 000000000..89d21f0bb --- /dev/null +++ b/FrontEnd/src/pages/AboutUsPage/AboutUsPage.jsx @@ -0,0 +1,40 @@ +import './AboutUs.module.css'; +import React from 'react'; +import AboutTextContent from './AboutTextContent'; + +const AboutUs = () => { + const TextStrong = (text, keyword) => + text.split(keyword).map((part, i, arr) => ( + + {part} + {i < arr.length - 1 && {keyword}} + + )); + + + return ( +
    +
    +
    +
    +

    {AboutTextContent.header}

    + {AboutTextContent.contents.map(({ id, text }) => ( +

    + {TextStrong(text, 'CraftMerge')} +

    + ))} +
    + about img +
    +
    +
    + ); +}; + +export default AboutUs; diff --git a/FrontEnd/src/routes/ClientRouter.jsx b/FrontEnd/src/routes/ClientRouter.jsx index 311c4fdce..ae36bfa0a 100644 --- a/FrontEnd/src/routes/ClientRouter.jsx +++ b/FrontEnd/src/routes/ClientRouter.jsx @@ -7,6 +7,7 @@ import 'react-toastify/dist/ReactToastify.css'; import customTheme from '../pages/CustomThemes/customTheme.js'; import LoginPage from '../pages/Authorization/LoginPage'; +import AboutUsPage from '../pages/AboutUsPage/AboutUsPage.jsx'; import CookiesPolicyComponent from '../pages/CookiesPolicyPage/CookiesPolicyComponent'; import Footer from '../components/Footer/Footer'; import Header from '../components/Header/Header'; @@ -52,6 +53,7 @@ function ClientRouter() { {isLoading ? : ( } /> + } /> {isAuth ? ( } /> ) : ( From 9fc3763ba601d0756a5c9fdcba2da2ec889a39f9 Mon Sep 17 00:00:00 2001 From: Yan Zhylavy Date: Tue, 12 Nov 2024 10:17:44 +0200 Subject: [PATCH 008/171] sketch version of mobile view for profile editing, remove one general form submit button with current form handling in favor of individual buttons for each form. --- FrontEnd/public/svg/arrow-down.svg | 3 + FrontEnd/public/svg/arrow-up.svg | 3 + .../MiniComponents/CategoryBadges.jsx | 1 + .../FormComponents/AdditionalInfo.jsx | 4 +- .../FormComponents/ChangePassword.jsx | 6 -- .../FormComponents/ContactsInfo.jsx | 6 +- .../DeleteProfilePage.jsx | 8 +- .../FormFields/PasswordField.module.css | 1 - .../FormComponents/GeneralInfo.jsx | 47 ++++++------ .../FormComponents/ProductServiceInfo.jsx | 6 +- .../FormComponents/StartupInfo.jsx | 12 +-- .../ProfilePage/FormComponents/UserInfo.jsx | 48 ++++++------ .../pages/ProfilePage/Mobile/Accordion.jsx | 14 ++++ .../ProfilePage/Mobile/Accordion.module.css | 0 .../ProfilePage/Mobile/AccordionItem.jsx | 23 ++++++ .../Mobile/AccordionItem.module.css | 39 ++++++++++ .../ProfilePage/Mobile/EditProfileMobile.jsx | 38 ++++++++++ .../Mobile/EditProfileMobile.module.css | 13 ++++ .../src/pages/ProfilePage/ProfilePage.jsx | 73 ++++++++++++------- .../ProfilePageComponents/Description.jsx | 22 +++--- .../ProfilePageComponents/ProfileContent.jsx | 59 ++++----------- .../ProfileFormButton/ProfileFormButton.jsx | 3 +- 22 files changed, 277 insertions(+), 152 deletions(-) create mode 100644 FrontEnd/public/svg/arrow-down.svg create mode 100644 FrontEnd/public/svg/arrow-up.svg create mode 100644 FrontEnd/src/pages/ProfilePage/Mobile/Accordion.jsx create mode 100644 FrontEnd/src/pages/ProfilePage/Mobile/Accordion.module.css create mode 100644 FrontEnd/src/pages/ProfilePage/Mobile/AccordionItem.jsx create mode 100644 FrontEnd/src/pages/ProfilePage/Mobile/AccordionItem.module.css create mode 100644 FrontEnd/src/pages/ProfilePage/Mobile/EditProfileMobile.jsx create mode 100644 FrontEnd/src/pages/ProfilePage/Mobile/EditProfileMobile.module.css diff --git a/FrontEnd/public/svg/arrow-down.svg b/FrontEnd/public/svg/arrow-down.svg new file mode 100644 index 000000000..96d156440 --- /dev/null +++ b/FrontEnd/public/svg/arrow-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/FrontEnd/public/svg/arrow-up.svg b/FrontEnd/public/svg/arrow-up.svg new file mode 100644 index 000000000..224c57140 --- /dev/null +++ b/FrontEnd/public/svg/arrow-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/FrontEnd/src/components/MiniComponents/CategoryBadges.jsx b/FrontEnd/src/components/MiniComponents/CategoryBadges.jsx index eacb7298b..be2cc7805 100644 --- a/FrontEnd/src/components/MiniComponents/CategoryBadges.jsx +++ b/FrontEnd/src/components/MiniComponents/CategoryBadges.jsx @@ -8,6 +8,7 @@ export default function CategoryBadges({ categories }) { fontFamily: 'Geologica', fontSize: 10, margin: 5, + boxShadow: 'none', }; return (
    diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/AdditionalInfo.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/AdditionalInfo.jsx index cc0f0fd14..7077f0f82 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/AdditionalInfo.jsx +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/AdditionalInfo.jsx @@ -33,8 +33,8 @@ const AdditionalInfo = (props) => { }, [mainProfile, profile]); useEffect(() => { - props.currentFormNameHandler(props.curForm); - }, []); + setProfile(props.profile); + }, [props.profile]); const onUpdateFoundationYearField = (e) => { const currentYear = new Date().getFullYear(); diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/ChangePassword.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/ChangePassword.jsx index d466d07bf..6240b0d19 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/ChangePassword.jsx +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/ChangePassword.jsx @@ -11,7 +11,6 @@ import css from './ChangePassword.module.css'; export default function ChangePassword(props) { const { setFormIsDirty } = useContext(DirtyFormContext); - const { currentFormNameHandler, curForm } = props; const { register, handleSubmit, @@ -28,9 +27,6 @@ export default function ChangePassword(props) { }, }); - useEffect(() => { - currentFormNameHandler(curForm); - }, [currentFormNameHandler, curForm]); useEffect(() => { setFormIsDirty(isDirty); @@ -121,6 +117,4 @@ ChangePassword.propTypes = { profile_id: PropTypes.number.isRequired, is_staff: PropTypes.bool.isRequired, }).isRequired, - currentFormNameHandler: PropTypes.func.isRequired, - curForm: PropTypes.string.isRequired, }; diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/ContactsInfo.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/ContactsInfo.jsx index 6d5f9fe88..38f0054d0 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/ContactsInfo.jsx +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/ContactsInfo.jsx @@ -9,6 +9,7 @@ import { formatPhoneNumber } from '../../../utils/formatPhoneNumber'; import FullField from './FormFields/FullField'; import HalfFormField from './FormFields/HalfFormField'; import Loader from '../../../components/Loader/Loader'; +import ProfileFormButton from '../UI/ProfileFormButton/ProfileFormButton'; import css from './FormComponents.module.css'; import { useMask } from '@react-input/mask'; @@ -38,8 +39,8 @@ const ContactsInfo = (props) => { const inputRef = useMask({ mask: '+380XX XXX XX XX', replacement: { X: /\d/ } }); useEffect(() => { - props.currentFormNameHandler(props.curForm); - }, []); + setProfile(props.profile); + }, [props.profile]); useEffect(() => { if (mainProfile?.phone) { @@ -145,6 +146,7 @@ const ContactsInfo = (props) => { value={profile.address ?? ''} />
    + ) : ( diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfilePage.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfilePage.jsx index eef063fa3..b7875bc95 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfilePage.jsx +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfilePage.jsx @@ -1,15 +1,11 @@ import css from './DeleteProfilePage.module.css'; import DeleteProfileModal from './DeleteProfileModal'; import MyModal from '../../UI/MyModal/MyModal'; -import { useState, useEffect } from 'react'; +import { useState } from 'react'; -const DeleteProfilePage = (props) => { +const DeleteProfilePage = () => { const [modal, setModal] = useState(false); - useEffect(() => { - props.currentFormNameHandler(props.curForm); - }, []); - const cancelHandler = () => { setModal(false); }; diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/PasswordField.module.css b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/PasswordField.module.css index 1d9636d5b..4c298d864 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/PasswordField.module.css +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/PasswordField.module.css @@ -112,7 +112,6 @@ } .error-dot::before { - position: absolute; margin-left: -8px; content: "*"; color: #ff4d4f; diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/GeneralInfo.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/GeneralInfo.jsx index 1de7f2ee7..763bd89eb 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/GeneralInfo.jsx +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/GeneralInfo.jsx @@ -20,6 +20,7 @@ import Loader from '../../../components/Loader/Loader'; import validateEdrpou from '../../../utils/validateEdrpou'; import validateRnokpp from '../../../utils/validateRnokpp'; import BanerModeration from './BanerModeration'; +import ProfileFormButton from '../UI/ProfileFormButton/ProfileFormButton'; const LABELS = { name: 'Назва компанії', @@ -62,8 +63,8 @@ const GeneralInfo = (props) => { const { profile: mainProfile, mutate: profileMutate } = useProfile(); const [profile, setProfile] = useState(props.profile); const [formStateErr, setFormStateErr] = useState(ERRORS); - const [bannerImage, setBannerImage] = useState(props.profile.banner?.path); - const [logoImage, setLogoImage] = useState(props.profile.logo?.path); + const [bannerImage, setBannerImage] = useState(props.profile?.banner?.path); + const [logoImage, setLogoImage] = useState(props.profile?.logo?.path); const [bannerImageError, setBannerImageError] = useState(null); const [logoImageError, setLogoImageError] = useState(null); const [edrpouFieldError, setEdrpouFieldError] = useState(null); @@ -106,8 +107,8 @@ const GeneralInfo = (props) => { }, [mainProfile, profile]); useEffect(() => { - props.currentFormNameHandler(props.curForm); - }, []); + setProfile(props.profile); + }, [props.profile]); const checkRequiredFields = () => { let isValid = true; @@ -290,10 +291,12 @@ const GeneralInfo = (props) => { try { const response = await axios.post(url, formData); setProfile((prevState) => { - return { ...prevState, [imageKey]: { - ...prevState[imageKey], - uuid: response.data.uuid - }}; + return { + ...prevState, [imageKey]: { + ...prevState[imageKey], + uuid: response.data.uuid + } + }; }); } catch (error) { console.error( @@ -327,12 +330,12 @@ const GeneralInfo = (props) => { e.target.value = ''; const imageUrl = e.target.name === 'banner' - ? `${process.env.REACT_APP_BASE_API_URL}/api/image/banner/` - : `${process.env.REACT_APP_BASE_API_URL}/api/image/logo/`; + ? `${process.env.REACT_APP_BASE_API_URL}/api/image/banner/` + : `${process.env.REACT_APP_BASE_API_URL}/api/image/logo/`; const setImage = e.target.name === 'banner' - ? setBannerImage - : setLogoImage; + ? setBannerImage + : setLogoImage; if (file && checkMaxImageSize(e.target.name, file)) { setImage(URL.createObjectURL(file)); await uploadImage(imageUrl, e.target.name, file); @@ -342,8 +345,8 @@ const GeneralInfo = (props) => { const deleteImageHandler = async (name) => { const imageUrl = name === 'banner' - ? `${process.env.REACT_APP_BASE_API_URL}/api/image/banner/${profile.banner?.uuid}` - : `${process.env.REACT_APP_BASE_API_URL}/api/image/logo/${profile.logo?.uuid}`; + ? `${process.env.REACT_APP_BASE_API_URL}/api/image/banner/${profile.banner?.uuid}` + : `${process.env.REACT_APP_BASE_API_URL}/api/image/logo/${profile.logo?.uuid}`; try { await axios.delete(imageUrl); if (name === 'banner') setBannerImage(null); @@ -352,12 +355,12 @@ const GeneralInfo = (props) => { setProfile((prevState) => { const newState = { ...prevState, [name]: null }; return newState; - }); - } catch (error) { - console.error('Error deleting image:', - error.response ? error.response.data : error.message); - toast.error('Не вдалося видалити банер/лого, сталася помилка'); - } + }); + } catch (error) { + console.error('Error deleting image:', + error.response ? error.response.data : error.message); + toast.error('Не вдалося видалити банер/лого, сталася помилка'); + } }; const errorMessages = { @@ -396,7 +399,7 @@ const GeneralInfo = (props) => { try { const response = await axios.patch( `${process.env.REACT_APP_BASE_API_URL}/api/profiles/${user.profile_id}`, - data.profileChanges + data.profileChanges ); profileMutate(response.data); toast.success('Зміни успішно збережено'); @@ -558,6 +561,7 @@ const GeneralInfo = (props) => { requiredField={true} />
    + ) : ( @@ -590,6 +594,5 @@ GeneralInfo.propTypes = { path: PropTypes.string, }), }).isRequired, - currentFormNameHandler: PropTypes.func, curForm: PropTypes.string, }; diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/ProductServiceInfo.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/ProductServiceInfo.jsx index 54aade2c0..214b7d808 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/ProductServiceInfo.jsx +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/ProductServiceInfo.jsx @@ -8,6 +8,7 @@ import defineChanges from '../../../utils/defineChanges'; import { useAuth, useProfile } from '../../../hooks'; import TextField from './FormFields/TextField'; import Loader from '../../../components/Loader/Loader'; +import ProfileFormButton from '../UI/ProfileFormButton/ProfileFormButton'; import css from './FormComponents.module.css'; const LABELS = { @@ -34,8 +35,8 @@ const ProductServiceInfo = (props) => { }, [mainProfile, profile]); useEffect(() => { - props.currentFormNameHandler(props.curForm); - }, []); + setProfile(props.profile); + }, [props.profile]); const onUpdateTextAreaField = (e) => { if (e.target.value.length <= TEXT_AREA_MAX_LENGTH) @@ -94,6 +95,7 @@ const ProductServiceInfo = (props) => { maxLength={TEXT_AREA_MAX_LENGTH} />
    + ) : ( diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/StartupInfo.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/StartupInfo.jsx index 376338db9..d3e23ff35 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/StartupInfo.jsx +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/StartupInfo.jsx @@ -8,6 +8,7 @@ import defineChanges from '../../../utils/defineChanges'; import { useAuth, useProfile } from '../../../hooks'; import TextField from './FormFields/TextField'; import Loader from '../../../components/Loader/Loader'; +import ProfileFormButton from '../UI/ProfileFormButton/ProfileFormButton'; import css from './FormComponents.module.css'; const LABELS = { @@ -26,15 +27,15 @@ const StartupInfo = (props) => { startup_idea: { defaultValue: mainProfile?.startup_idea ?? null }, }; + useEffect(() => { + setProfile(props.profile); + }, [props.profile]); + useEffect(() => { const isDirty = checkFormIsDirty(fields, null, profile); setFormIsDirty(isDirty); }, [mainProfile, profile]); - useEffect(() => { - props.currentFormNameHandler(props.curForm); - }, []); - const onUpdateTextAreaField = (e) => { if (e.target.value.length <= TEXT_AREA_MAX_LENGTH) setProfile((prevState) => { @@ -80,10 +81,11 @@ const StartupInfo = (props) => { label={LABELS.startup_idea} updateHandler={onUpdateTextAreaField} requiredField={false} - value={profile.startup_idea ?? ''} + value={profile?.startup_idea ?? ''} maxLength={TEXT_AREA_MAX_LENGTH} />
    + ) : ( diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/UserInfo.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/UserInfo.jsx index 329f01315..58edfff0a 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/UserInfo.jsx +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/UserInfo.jsx @@ -8,6 +8,7 @@ import checkFormIsDirty from '../../../utils/checkFormIsDirty'; import defineChanges from '../../../utils/defineChanges'; import HalfFormField from './FormFields/HalfFormField'; import Loader from '../../../components/Loader/Loader'; +import ProfileFormButton from '../UI/ProfileFormButton/ProfileFormButton'; import css from './FormComponents.module.css'; const LABELS = { @@ -46,14 +47,19 @@ const UserInfo = (props) => { person_position: { defaultValue: profile?.person_position ?? null }, }; + useEffect(() => { + setUpdateUser(props.user); + }, [props.user]); + + useEffect(() => { + setUpdateProfile(props.profile); + }, [props.profile]); + useEffect(() => { const isDirty = checkFormIsDirty(fields, updateUser, updateProfile); setFormIsDirty(isDirty); }, [user, profile, updateUser, updateProfile]); - useEffect(() => { - props.currentFormNameHandler(props.curForm); - }, []); const errorMessageTemplates = { requiredField: 'Обов’язкове поле', @@ -137,18 +143,18 @@ const UserInfo = (props) => { } }; - const onBlurHandler = (e) => { - const { value: rawFieldValue, name: fieldName } = e.target; - const fieldValue = rawFieldValue.replace(/\s{2,}/g, ' ').trim(); - if (fieldName === 'person_position') { - setUpdateProfile((prevState) => ({ - ...prevState, - [fieldName]: fieldValue, - })); - } else { - setUpdateUser((prevState) => ({ ...prevState, [fieldName]: fieldValue })); - } - }; + // const onBlurHandler = (e) => { + // const { value: rawFieldValue, name: fieldName } = e.target; + // const fieldValue = rawFieldValue.replace(/\s{2,}/g, ' ').trim(); + // if (fieldName === 'person_position') { + // setUpdateProfile((prevState) => ({ + // ...prevState, + // [fieldName]: fieldValue, + // })); + // } else { + // setUpdateUser((prevState) => ({ ...prevState, [fieldName]: fieldValue })); + // } + // }; const handleSubmit = async (event) => { event.preventDefault(); @@ -200,9 +206,8 @@ const UserInfo = (props) => { noValidate >
    { name="surname" label={LABELS.surname} updateHandler={onUpdateField} - onBlur={onBlurHandler} + // onBlur={onBlurHandler} error={ formStateErr['surname']['error'] ? formStateErr['surname']['message'] @@ -225,7 +230,7 @@ const UserInfo = (props) => { name="name" label={LABELS.name} updateHandler={onUpdateField} - onBlur={onBlurHandler} + // onBlur={onBlurHandler} error={ formStateErr['name']['error'] ? formStateErr['name']['message'] @@ -242,7 +247,7 @@ const UserInfo = (props) => { name="person_position" label={LABELS.person_position} updateHandler={onUpdateField} - onBlur={onBlurHandler} + // onBlur={onBlurHandler} error={ formStateErr['person_position']?.['error'] ? formStateErr['person_position']['message'] @@ -261,6 +266,7 @@ const UserInfo = (props) => { />
    + ) : ( diff --git a/FrontEnd/src/pages/ProfilePage/Mobile/Accordion.jsx b/FrontEnd/src/pages/ProfilePage/Mobile/Accordion.jsx new file mode 100644 index 000000000..95dc8c47b --- /dev/null +++ b/FrontEnd/src/pages/ProfilePage/Mobile/Accordion.jsx @@ -0,0 +1,14 @@ +import AccordionItem from './AccordionItem'; + +const Accordion = ({ sections }) => { + + return ( +
    + {sections.map((section, index) => ( + + ))} +
    + ); +}; + +export default Accordion; \ No newline at end of file diff --git a/FrontEnd/src/pages/ProfilePage/Mobile/Accordion.module.css b/FrontEnd/src/pages/ProfilePage/Mobile/Accordion.module.css new file mode 100644 index 000000000..e69de29bb diff --git a/FrontEnd/src/pages/ProfilePage/Mobile/AccordionItem.jsx b/FrontEnd/src/pages/ProfilePage/Mobile/AccordionItem.jsx new file mode 100644 index 000000000..39e1d03a5 --- /dev/null +++ b/FrontEnd/src/pages/ProfilePage/Mobile/AccordionItem.jsx @@ -0,0 +1,23 @@ +import { useState } from 'react'; +import css from './AccordionItem.module.css'; + +const AccordionItem = (props) => { + const [isOpen, setIsOpen] = useState(false); + + const toggle = () => { + setIsOpen(!isOpen); + }; + + return ( +
    + +
    + {props.content} +
    +
    + ); +}; + +export default AccordionItem; \ No newline at end of file diff --git a/FrontEnd/src/pages/ProfilePage/Mobile/AccordionItem.module.css b/FrontEnd/src/pages/ProfilePage/Mobile/AccordionItem.module.css new file mode 100644 index 000000000..0d2e6e98e --- /dev/null +++ b/FrontEnd/src/pages/ProfilePage/Mobile/AccordionItem.module.css @@ -0,0 +1,39 @@ +.accordion-content { + max-height: 1100px; + transition: max-height 1s ease-in-out; + overflow: hidden; + border-radius: 6px; +} + +.accordion-content.close { + max-height: 0; +} + +.accordion-button { + display: flex; + background-color: var(--main-white); + font-family: var(--font-main); + font-size: 16px; + width: 335px; + margin-left: 3px; + text-align: left; + padding: 4px 6px; + position: relative; + border-radius: 10px; + padding-top: 13px; + height: 49px; + cursor: pointer; +} + +.accordion-button img { + top: 20px; + position: absolute; + right: 5px; +} + +.accordion-item { + border-radius: 6px; + width: 342px; + background-color: var(--main-white); + margin: 6px; +} \ No newline at end of file diff --git a/FrontEnd/src/pages/ProfilePage/Mobile/EditProfileMobile.jsx b/FrontEnd/src/pages/ProfilePage/Mobile/EditProfileMobile.jsx new file mode 100644 index 000000000..8f2b8eed0 --- /dev/null +++ b/FrontEnd/src/pages/ProfilePage/Mobile/EditProfileMobile.jsx @@ -0,0 +1,38 @@ +import Accordion from './Accordion'; +import AdditionalInfo from '../FormComponents/AdditionalInfo'; +import ContactsInfo from '../FormComponents/ContactsInfo'; +import DeleteProfilePage from '../FormComponents/DeleteProfileComponent/DeleteProfilePage'; +import GeneralInfo from '../FormComponents/GeneralInfo'; +import ProductServiceInfo from '../FormComponents/ProductServiceInfo'; +import StartupInfo from '../FormComponents/StartupInfo'; +import UserInfo from '../FormComponents/UserInfo'; +import ChangePassword from '../FormComponents/ChangePassword'; +import { useAuth, useProfile } from '../../../hooks'; +import css from './EditProfileMobile.module.css'; + + + + +const EditProfileMobile = () => { + const { user } = useAuth(); + const { profile } = useProfile(); + const sections = [ + { title: 'Інформація про користувача', content: }, + { title: 'Загальна інформація', content: }, + { title: 'Контакти', content: }, + { title: 'Інформація про товари/послуги', content: }, + { title: 'Додаткова інформація', content: }, + { title: 'Стартап', content: }, + { title: 'Змінити пароль', content: }, + { title: 'Видалити профіль', content: }, + ]; + + return ( +
    +

    Профіль користувача

    + +
    + ); +}; + +export default EditProfileMobile; \ No newline at end of file diff --git a/FrontEnd/src/pages/ProfilePage/Mobile/EditProfileMobile.module.css b/FrontEnd/src/pages/ProfilePage/Mobile/EditProfileMobile.module.css new file mode 100644 index 000000000..142b6914c --- /dev/null +++ b/FrontEnd/src/pages/ProfilePage/Mobile/EditProfileMobile.module.css @@ -0,0 +1,13 @@ +.container { + width: 375px; + padding: 20px 16px; + background-color: #F9F5EC; + margin: auto; +} + +.head { + font-family: var(--font-main); + font-size: 20px; + font-weight: 700; + padding: 14px 8px; +} \ No newline at end of file diff --git a/FrontEnd/src/pages/ProfilePage/ProfilePage.jsx b/FrontEnd/src/pages/ProfilePage/ProfilePage.jsx index 7de127d7b..4c16eae8e 100644 --- a/FrontEnd/src/pages/ProfilePage/ProfilePage.jsx +++ b/FrontEnd/src/pages/ProfilePage/ProfilePage.jsx @@ -1,41 +1,64 @@ import css from './ProfilePage.module.css'; import Description from './ProfilePageComponents/Description'; import ProfileContent from './ProfilePageComponents/ProfileContent'; -import { useState } from 'react'; -import BreadCrumbs from '../../components/BreadCrumbs/BreadCrumbs'; +import { useState, useEffect } from 'react'; +import { DirtyFormContext } from '../../context/DirtyFormContext'; import Loader from '../../components/Loader/Loader'; import { useAuth, useProfile } from '../../hooks'; +import useWindowWidth from '../../hooks/useWindowWidth'; +import EditProfileMobile from './Mobile/EditProfileMobile'; const ProfilePage = () => { + const [formIsDirty, setFormIsDirty] = useState(false); const { user } = useAuth(); const { profile } = useProfile(); - const [formName, setFormName] = useState(''); + const windowWidth = useWindowWidth(); - const currentFormNameHandler = (currentName) => { - setFormName(currentName); - }; + useEffect(() => { + const onBeforeUnload = (e) => { + if (formIsDirty) { + e.preventDefault(); + e.returnValue = ''; + } + }; + window.addEventListener('beforeunload', onBeforeUnload); + return () => { + window.removeEventListener('beforeunload', onBeforeUnload); + }; + }, [formIsDirty]); + + + if (windowWidth < 768) { + return ( + <> + + + + + ); + } return (
    - - {!profile ? ( - - ) : ( - <> - - - - )} -
    + + {!profile ? ( + + ) : ( + <> + + + + )} + + ); }; diff --git a/FrontEnd/src/pages/ProfilePage/ProfilePageComponents/Description.jsx b/FrontEnd/src/pages/ProfilePage/ProfilePageComponents/Description.jsx index c1e2a89a9..3546e7fdc 100644 --- a/FrontEnd/src/pages/ProfilePage/ProfilePageComponents/Description.jsx +++ b/FrontEnd/src/pages/ProfilePage/ProfilePageComponents/Description.jsx @@ -1,16 +1,16 @@ import { PropTypes } from 'prop-types'; import css from './Description.module.css'; -const DESCRIPTIONS = { - UserInfo: 'Інформація про користувача платформи', - GeneralInfo: 'Інформація про компанію', - ContactsInfo: 'Інформація про компанію', - ProductServiceInfo: 'Інформація про компанію', - AdditionalInfo: 'Інформація про компанію', - StartupInfo: 'Інформація про стартап', - Delete: 'Видалення профілю', - ChangePassword: 'Зміна паролю користувача', -}; +// const DESCRIPTIONS = { +// UserInfo: 'Інформація про користувача платформи', +// GeneralInfo: 'Інформація про компанію', +// ContactsInfo: 'Інформація про компанію', +// ProductServiceInfo: 'Інформація про компанію', +// AdditionalInfo: 'Інформація про компанію', +// StartupInfo: 'Інформація про стартап', +// Delete: 'Видалення профілю', +// ChangePassword: 'Зміна паролю користувача', +// }; const Description = (props) => { return ( @@ -28,7 +28,6 @@ const Description = (props) => {
    {props.companyName}
    - {DESCRIPTIONS[props.formName]}
    @@ -40,5 +39,4 @@ export default Description; Description.propTypes = { companyName: PropTypes.string, companyLogo: PropTypes.string, - formName: PropTypes.string, }; diff --git a/FrontEnd/src/pages/ProfilePage/ProfilePageComponents/ProfileContent.jsx b/FrontEnd/src/pages/ProfilePage/ProfilePageComponents/ProfileContent.jsx index 0e4e89ee0..1a0cb1875 100644 --- a/FrontEnd/src/pages/ProfilePage/ProfilePageComponents/ProfileContent.jsx +++ b/FrontEnd/src/pages/ProfilePage/ProfilePageComponents/ProfileContent.jsx @@ -1,7 +1,7 @@ import { Tooltip } from 'antd'; import { PropTypes } from 'prop-types'; import { Link, NavLink, Route, Routes, useBlocker } from 'react-router-dom'; -import { useEffect, useState } from 'react'; +import { useEffect, useState,useContext } from 'react'; import { DirtyFormContext } from '../../../context/DirtyFormContext'; import AdditionalInfo from '../FormComponents/AdditionalInfo'; import ContactsInfo from '../FormComponents/ContactsInfo'; @@ -10,19 +10,17 @@ import GeneralInfo from '../FormComponents/GeneralInfo'; import ProductServiceInfo from '../FormComponents/ProductServiceInfo'; import StartupInfo from '../FormComponents/StartupInfo'; import UserInfo from '../FormComponents/UserInfo'; -import ProfileFormButton from '../UI/ProfileFormButton/ProfileFormButton'; import MyModal from '../UI/MyModal/MyModal'; import WarnUnsavedDataModal from '../FormComponents/WarnUnsavedDataModal'; import ChangePassword from '../FormComponents/ChangePassword'; import css from './ProfileContent.module.css'; import tooltipInnerContentStyles from '../../CustomThemes/customProfileTooltipThemes'; import INFOLINKS from './TextInfoLinks'; -import FORM_NAMES from './TextFormNames'; const ProfileContent = (props) => { const [modal, setModal] = useState(false); - const [formIsDirty, setFormIsDirty] = useState(false); + const { formIsDirty, setFormIsDirty } = useContext(DirtyFormContext); const blocker = useBlocker( ({ currentLocation, nextLocation }) => formIsDirty && @@ -48,18 +46,7 @@ const ProfileContent = (props) => { setModal(false); }; - useEffect(() => { - const onBeforeUnload = (e) => { - if (formIsDirty) { - e.preventDefault(); - e.returnValue = ''; - } - }; - window.addEventListener('beforeunload', onBeforeUnload); - return () => { - window.removeEventListener('beforeunload', onBeforeUnload); - }; - }, [formIsDirty]); + return (
    @@ -109,59 +96,41 @@ const ProfileContent = (props) => { Видалити профіль
    - + } /> + profile={props.profile} />} /> } /> + profile={props.profile} />} /> } /> + profile={props.profile} />} /> } /> + profile={props.profile} />} /> } /> + profile={props.profile} />} /> } /> + profile={props.profile} />} /> } /> + element={} /> } /> + user={props.user} />} /> - - - {props.formName !== 'Delete' && } + {blocker.state === 'blocked' && ( @@ -198,6 +167,4 @@ ProfileContent.propTypes = { categories: PropTypes.array, activities: PropTypes.array, }).isRequired, - currentFormNameHandler: PropTypes.func, - formName: PropTypes.string, }; diff --git a/FrontEnd/src/pages/ProfilePage/UI/ProfileFormButton/ProfileFormButton.jsx b/FrontEnd/src/pages/ProfilePage/UI/ProfileFormButton/ProfileFormButton.jsx index 2f716b84b..e9b55bba7 100644 --- a/FrontEnd/src/pages/ProfilePage/UI/ProfileFormButton/ProfileFormButton.jsx +++ b/FrontEnd/src/pages/ProfilePage/UI/ProfileFormButton/ProfileFormButton.jsx @@ -4,10 +4,9 @@ const ProfileFormButton = (props) => { return (
    From 769e3e2bc5bca09a382d305f4834f730130f3723 Mon Sep 17 00:00:00 2001 From: Yan Zhylavy Date: Tue, 12 Nov 2024 12:11:00 +0200 Subject: [PATCH 009/171] css adjustments for form fields, textareas --- .../ProfilePage/FormComponents/ContactsInfo.jsx | 3 +-- .../FormComponents/FormComponents.module.css | 3 ++- .../FormFields/HalfFormField.module.css | 12 ++++++++---- .../FormComponents/FormFields/TextField.module.css | 4 ++-- .../pages/ProfilePage/FormComponents/GeneralInfo.jsx | 3 +-- .../ProfilePage/Mobile/AccordionItem.module.css | 2 +- 6 files changed, 15 insertions(+), 12 deletions(-) diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/ContactsInfo.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/ContactsInfo.jsx index 38f0054d0..b7abab15b 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/ContactsInfo.jsx +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/ContactsInfo.jsx @@ -6,7 +6,6 @@ import { useAuth, useProfile } from '../../../hooks'; import checkFormIsDirty from '../../../utils/checkFormIsDirty'; import defineChanges from '../../../utils/defineChanges'; import { formatPhoneNumber } from '../../../utils/formatPhoneNumber'; -import FullField from './FormFields/FullField'; import HalfFormField from './FormFields/HalfFormField'; import Loader from '../../../components/Loader/Loader'; import ProfileFormButton from '../UI/ProfileFormButton/ProfileFormButton'; @@ -138,7 +137,7 @@ const ContactsInfo = (props) => { error={phoneNumberError} />
    - { maxLength={100} /> - Date: Tue, 12 Nov 2024 12:47:32 +0200 Subject: [PATCH 010/171] Change css for submit button --- .../FormComponents/AdditionalInfo.jsx | 2 ++ .../ProfileFormButton/ProfileFormButton.jsx | 6 ++-- .../ProfileFormButton.module.css | 34 ++++--------------- 3 files changed, 12 insertions(+), 30 deletions(-) diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/AdditionalInfo.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/AdditionalInfo.jsx index 7077f0f82..07855becc 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/AdditionalInfo.jsx +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/AdditionalInfo.jsx @@ -8,6 +8,7 @@ import defineChanges from '../../../utils/defineChanges'; import { useAuth, useProfile } from '../../../hooks'; import HalfFormField from './FormFields/HalfFormField'; import Loader from '../../../components/Loader/Loader'; +import ProfileFormButton from '../UI/ProfileFormButton/ProfileFormButton'; import css from './FormComponents.module.css'; const LABELS = { @@ -112,6 +113,7 @@ const AdditionalInfo = (props) => { /> + ) : ( diff --git a/FrontEnd/src/pages/ProfilePage/UI/ProfileFormButton/ProfileFormButton.jsx b/FrontEnd/src/pages/ProfilePage/UI/ProfileFormButton/ProfileFormButton.jsx index e9b55bba7..f8e357f00 100644 --- a/FrontEnd/src/pages/ProfilePage/UI/ProfileFormButton/ProfileFormButton.jsx +++ b/FrontEnd/src/pages/ProfilePage/UI/ProfileFormButton/ProfileFormButton.jsx @@ -2,13 +2,13 @@ import css from './ProfileFormButton.module.css'; const ProfileFormButton = (props) => { return ( -
    +
    ); diff --git a/FrontEnd/src/pages/ProfilePage/UI/ProfileFormButton/ProfileFormButton.module.css b/FrontEnd/src/pages/ProfilePage/UI/ProfileFormButton/ProfileFormButton.module.css index a30e8a64a..3761e63e6 100644 --- a/FrontEnd/src/pages/ProfilePage/UI/ProfileFormButton/ProfileFormButton.module.css +++ b/FrontEnd/src/pages/ProfilePage/UI/ProfileFormButton/ProfileFormButton.module.css @@ -1,38 +1,18 @@ -.sign-up-footer__buttons { +.submit-button__conteiner { display: flex; align-items: flex-start; - padding: 6px 0px; - background: #EFFFF6; - width: var(--main-block-size); + padding: 11px 7px; + background-color: var(--main-white); } -.sign-up__button { - display: flex; - justify-content: center; - align-items: center; - gap: 10px; - border-radius: 4px; - border: 1px solid #1F9A7C; - background: #1F9A7C; - box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.04); - color: white; - text-align: center; - font-feature-settings: 'calt' off; - font-style: normal; - padding: 5px 15px 5px 15px; +.submit-button { border-radius: 4px; - border: 1px; - gap: 10px; + background: var(--main-button-color); + color: var(--main-white); + padding: 10px 16px; font-family: var(--font-main); font-size: 16px; font-weight: 600; line-height: 20px; - letter-spacing: -0.01em; - text-align: center; cursor: pointer; - margin-left: 430px; -} - -.sign-up__button:active { - transform: translateY(2px); } From 66d71403455f7267dd7867ad5b15835b5063e2ae Mon Sep 17 00:00:00 2001 From: Yan Zhylavy Date: Tue, 12 Nov 2024 13:52:31 +0200 Subject: [PATCH 011/171] Adjust ChangePassword inputs --- .../FormComponents/ChangePassword.module.css | 3 +-- .../FormFields/PasswordField.jsx | 2 +- .../FormFields/PasswordField.module.css | 19 +++++++------------ .../Mobile/EditProfileMobile.module.css | 2 +- 4 files changed, 10 insertions(+), 16 deletions(-) diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/ChangePassword.module.css b/FrontEnd/src/pages/ProfilePage/FormComponents/ChangePassword.module.css index 776533af1..1fba01340 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/ChangePassword.module.css +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/ChangePassword.module.css @@ -1,5 +1,4 @@ .form__container { word-wrap: break-word; - width: 530px; - margin-left: 10px; + margin-left: 15px; } \ No newline at end of file diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/PasswordField.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/PasswordField.jsx index 5f0060e1f..b1bf8bf39 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/PasswordField.jsx +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/PasswordField.jsx @@ -57,7 +57,7 @@ const PasswordField = (props) => { onKeyDown={preventEnterSubmit} id={inputId} type={showPassword ? 'text' : 'password'} - placeholder={label} + // placeholder={label} {...register(name, { required: errorMessages.requiredField, pattern: checkValid && { diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/PasswordField.module.css b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/PasswordField.module.css index 4c298d864..c8df65002 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/PasswordField.module.css +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/PasswordField.module.css @@ -45,6 +45,10 @@ .password-field__item input { border: none; + font-family: 'Geologica'; + font-size: 14px; + font-weight: 400; + line-height: 22px; } .password-field__item input:focus { @@ -52,17 +56,6 @@ outline: none; } -.password-field__item input::placeholder { - font-style: normal; - font-family: "Inter", sans-serif; - font-size: 14px; - font-weight: 400; - line-height: 22px; - letter-spacing: -0.01em; - text-align: left; - color: #00000040; -} - .password-field__password { display: flex; padding: 4px 12px; @@ -72,6 +65,8 @@ border-radius: 2px; border: 1px solid #d9d9d9; background: #fff; + height: 30.5px; + width: 285.5px; } .password-field__password:focus { @@ -112,7 +107,7 @@ } .error-dot::before { - margin-left: -8px; + margin-left: -11px; content: "*"; color: #ff4d4f; text-align: right; diff --git a/FrontEnd/src/pages/ProfilePage/Mobile/EditProfileMobile.module.css b/FrontEnd/src/pages/ProfilePage/Mobile/EditProfileMobile.module.css index 142b6914c..ddce67b96 100644 --- a/FrontEnd/src/pages/ProfilePage/Mobile/EditProfileMobile.module.css +++ b/FrontEnd/src/pages/ProfilePage/Mobile/EditProfileMobile.module.css @@ -1,5 +1,5 @@ .container { - width: 375px; + width: 343px; padding: 20px 16px; background-color: #F9F5EC; margin: auto; From 650910bb97d81355fb2523362f8217ff9380d067 Mon Sep 17 00:00:00 2001 From: Yan Zhylavy Date: Tue, 12 Nov 2024 14:09:20 +0200 Subject: [PATCH 012/171] Delete some redundant code --- .../FormFields/PasswordField.jsx | 1 - .../FormComponents/GeneralInfo.jsx | 22 +++++++------- .../ProfilePage/FormComponents/UserInfo.jsx | 30 +++++++++---------- .../ProfilePageComponents/Description.jsx | 11 ------- 4 files changed, 25 insertions(+), 39 deletions(-) diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/PasswordField.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/PasswordField.jsx index b1bf8bf39..ad32f908f 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/PasswordField.jsx +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/PasswordField.jsx @@ -57,7 +57,6 @@ const PasswordField = (props) => { onKeyDown={preventEnterSubmit} id={inputId} type={showPassword ? 'text' : 'password'} - // placeholder={label} {...register(name, { required: errorMessages.requiredField, pattern: checkValid && { diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/GeneralInfo.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/GeneralInfo.jsx index 84620d474..ec2b0a8f8 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/GeneralInfo.jsx +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/GeneralInfo.jsx @@ -290,12 +290,10 @@ const GeneralInfo = (props) => { try { const response = await axios.post(url, formData); setProfile((prevState) => { - return { - ...prevState, [imageKey]: { - ...prevState[imageKey], - uuid: response.data.uuid - } - }; + return { ...prevState, [imageKey]: { + ...prevState[imageKey], + uuid: response.data.uuid + }}; }); } catch (error) { console.error( @@ -329,12 +327,12 @@ const GeneralInfo = (props) => { e.target.value = ''; const imageUrl = e.target.name === 'banner' - ? `${process.env.REACT_APP_BASE_API_URL}/api/image/banner/` - : `${process.env.REACT_APP_BASE_API_URL}/api/image/logo/`; + ? `${process.env.REACT_APP_BASE_API_URL}/api/image/banner/` + : `${process.env.REACT_APP_BASE_API_URL}/api/image/logo/`; const setImage = e.target.name === 'banner' - ? setBannerImage - : setLogoImage; + ? setBannerImage + : setLogoImage; if (file && checkMaxImageSize(e.target.name, file)) { setImage(URL.createObjectURL(file)); await uploadImage(imageUrl, e.target.name, file); @@ -344,8 +342,8 @@ const GeneralInfo = (props) => { const deleteImageHandler = async (name) => { const imageUrl = name === 'banner' - ? `${process.env.REACT_APP_BASE_API_URL}/api/image/banner/${profile.banner?.uuid}` - : `${process.env.REACT_APP_BASE_API_URL}/api/image/logo/${profile.logo?.uuid}`; + ? `${process.env.REACT_APP_BASE_API_URL}/api/image/banner/${profile.banner?.uuid}` + : `${process.env.REACT_APP_BASE_API_URL}/api/image/logo/${profile.logo?.uuid}`; try { await axios.delete(imageUrl); if (name === 'banner') setBannerImage(null); diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/UserInfo.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/UserInfo.jsx index 58edfff0a..63e41f35b 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/UserInfo.jsx +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/UserInfo.jsx @@ -143,18 +143,18 @@ const UserInfo = (props) => { } }; - // const onBlurHandler = (e) => { - // const { value: rawFieldValue, name: fieldName } = e.target; - // const fieldValue = rawFieldValue.replace(/\s{2,}/g, ' ').trim(); - // if (fieldName === 'person_position') { - // setUpdateProfile((prevState) => ({ - // ...prevState, - // [fieldName]: fieldValue, - // })); - // } else { - // setUpdateUser((prevState) => ({ ...prevState, [fieldName]: fieldValue })); - // } - // }; + const onBlurHandler = (e) => { + const { value: rawFieldValue, name: fieldName } = e.target; + const fieldValue = rawFieldValue.replace(/\s{2,}/g, ' ').trim(); + if (fieldName === 'person_position') { + setUpdateProfile((prevState) => ({ + ...prevState, + [fieldName]: fieldValue, + })); + } else { + setUpdateUser((prevState) => ({ ...prevState, [fieldName]: fieldValue })); + } + }; const handleSubmit = async (event) => { event.preventDefault(); @@ -215,7 +215,7 @@ const UserInfo = (props) => { name="surname" label={LABELS.surname} updateHandler={onUpdateField} - // onBlur={onBlurHandler} + onBlur={onBlurHandler} error={ formStateErr['surname']['error'] ? formStateErr['surname']['message'] @@ -230,7 +230,7 @@ const UserInfo = (props) => { name="name" label={LABELS.name} updateHandler={onUpdateField} - // onBlur={onBlurHandler} + onBlur={onBlurHandler} error={ formStateErr['name']['error'] ? formStateErr['name']['message'] @@ -247,7 +247,7 @@ const UserInfo = (props) => { name="person_position" label={LABELS.person_position} updateHandler={onUpdateField} - // onBlur={onBlurHandler} + onBlur={onBlurHandler} error={ formStateErr['person_position']?.['error'] ? formStateErr['person_position']['message'] diff --git a/FrontEnd/src/pages/ProfilePage/ProfilePageComponents/Description.jsx b/FrontEnd/src/pages/ProfilePage/ProfilePageComponents/Description.jsx index 3546e7fdc..cda34aab2 100644 --- a/FrontEnd/src/pages/ProfilePage/ProfilePageComponents/Description.jsx +++ b/FrontEnd/src/pages/ProfilePage/ProfilePageComponents/Description.jsx @@ -1,17 +1,6 @@ import { PropTypes } from 'prop-types'; import css from './Description.module.css'; -// const DESCRIPTIONS = { -// UserInfo: 'Інформація про користувача платформи', -// GeneralInfo: 'Інформація про компанію', -// ContactsInfo: 'Інформація про компанію', -// ProductServiceInfo: 'Інформація про компанію', -// AdditionalInfo: 'Інформація про компанію', -// StartupInfo: 'Інформація про стартап', -// Delete: 'Видалення профілю', -// ChangePassword: 'Зміна паролю користувача', -// }; - const Description = (props) => { return (
    From 5577b5fe4475d395a4b95eaffc758a9850fc4e97 Mon Sep 17 00:00:00 2001 From: Parcival Date: Tue, 12 Nov 2024 16:23:53 +0200 Subject: [PATCH 013/171] second commit --- FrontEnd/src/global.css | 6 +- .../src/pages/AboutUsPage/AboutTextContent.js | 2 +- .../src/pages/AboutUsPage/AboutUs.module.css | 100 ++++++++++++------ .../src/pages/AboutUsPage/AboutUsPage.jsx | 24 +++-- 4 files changed, 83 insertions(+), 49 deletions(-) diff --git a/FrontEnd/src/global.css b/FrontEnd/src/global.css index 44cea3c12..68b532cf3 100644 --- a/FrontEnd/src/global.css +++ b/FrontEnd/src/global.css @@ -35,7 +35,7 @@ --new-members-section-background: #F1FFF7; --why-should-section-background: #F0F1F3; --copyright-info-background: #333333; - --about-as-main-background: #0B6C61; + --about-us-main-background: #F9F5EC; --star-background: #FFD800; --hint-background: #25292C; --light-seashell-background: #F9F5EC; @@ -92,8 +92,8 @@ /* main pages About block*/ --about-text-font-color: #292E32; --about-text-background-color: #FFF; - --about-as-font-color: #FFF; - --about-as-background-color: #0B6C61; + --about-us-font-color: #25292C; + --about-us-background-color: #F9F5EC; --about-cards-font-color: #292E32; --about-cards-background-color: #F0F1F3; --about-cards-background-content-color: #FFF; diff --git a/FrontEnd/src/pages/AboutUsPage/AboutTextContent.js b/FrontEnd/src/pages/AboutUsPage/AboutTextContent.js index b95b693b3..81855da0a 100644 --- a/FrontEnd/src/pages/AboutUsPage/AboutTextContent.js +++ b/FrontEnd/src/pages/AboutUsPage/AboutTextContent.js @@ -1,7 +1,7 @@ const AboutTextContent = { id: 1, - header: 'ХТО МИ', + header: 'Хто ми', contents: [ { id: 3, diff --git a/FrontEnd/src/pages/AboutUsPage/AboutUs.module.css b/FrontEnd/src/pages/AboutUsPage/AboutUs.module.css index b20a50df8..5b94d69fb 100644 --- a/FrontEnd/src/pages/AboutUsPage/AboutUs.module.css +++ b/FrontEnd/src/pages/AboutUsPage/AboutUs.module.css @@ -1,73 +1,103 @@ .about-us-section { - flex-direction: column; - align-items: flex-start; + /* width: var(--main-block-size); */ + padding-top: 5%; + min-width: 100vh; + min-height: 472px; + background: var(--about-us-background-color); + } .about-us-section-content { - height: 542px; -} - -.about-us-section-content__field { - width: 580px; - height: 542px; - flex-direction: column; - align-items: flex-start; - gap: 24px; - flex-shrink: 0; - position: absolute; + max-width: 1304px; + min-height: 542px; + padding: 0 10%; + margin: 0 auto; } .about-us-rectangle { - width: var(--main-block-size); - height: 542px; + display: flex; + justify-content: space-between; flex-shrink: 0; - background: var(--about-as-background-color); - position: absolute; + margin: 0 52px; } .about-us-section-content__text { - padding: 80px 0 0 104px; + max-width: 532px; height: 402px; display: inline-flex; flex-direction: column; align-items: flex-start; - gap: 24px; } -.about-us-section-content__header-text { - color: var(--about-as-font-color); +.about-us-section-content__header { + color: var(--about-us-font-color); + margin-bottom: 5%; font-family: var(--font-main); font-size: 32px; - font-style: normal; font-weight: 700; - line-height: 120%; - /* 38.4px */ + line-height: 48px; + text-align: center; + width: 100%; } .about-us-section-content__smart-text { - width: 567px; - color: var(--about-as-font-color); + color: var(--hint-text-color); font-feature-settings: 'calt' off; font-family: var(--font-main); font-size: 16px; font-style: normal; font-weight: 400; - line-height: 20px; - /* 125% */ - letter-spacing: -0.16px; - + line-height: 24px; + letter-spacing: -1%; + padding-bottom: 5%; } .about-us-section-content__image { - width: 749px; - height: 542px; + min-width: 345px; + max-width: 532px; + max-height: 340px; flex-shrink: 0; - position: absolute; - top: 0; - right: 0; + border-radius: 2%; object-fit: cover; } #about-us { scroll-margin-top: 320px; } + +@media (max-width: 1440px){ + .about-us-section-content { + padding: 0 5%; + } + +} +@media (max-width: 1304px){ + .about-us-section-content { + padding: 0 4%; + } + +} +@media (max-width: 1265px){ + .about-us-section-content { + padding: 0 2%; + } +} +@media (max-width: 1220px){ + .about-us-section-content { + padding: 0 1%; + } +} +@media (max-width: 940px){ + .about-us-section { + padding: 5% 0; + } + .about-us-section-content__text{ + padding-bottom: 2%; + } + .about-us-rectangle { + margin: 0; + flex-direction: column; + align-items: center; + } + +} diff --git a/FrontEnd/src/pages/AboutUsPage/AboutUsPage.jsx b/FrontEnd/src/pages/AboutUsPage/AboutUsPage.jsx index 89d21f0bb..3e9f22d7c 100644 --- a/FrontEnd/src/pages/AboutUsPage/AboutUsPage.jsx +++ b/FrontEnd/src/pages/AboutUsPage/AboutUsPage.jsx @@ -1,4 +1,4 @@ -import './AboutUs.module.css'; +import css from './AboutUs.module.css'; import React from 'react'; import AboutTextContent from './AboutTextContent'; @@ -13,19 +13,23 @@ const AboutUs = () => { return ( -
    -
    -
    -
    -

    {AboutTextContent.header}

    - {AboutTextContent.contents.map(({ id, text }) => ( -

    - {TextStrong(text, 'CraftMerge')} +

    +
    +

    {AboutTextContent.header}

    +
    +
    +
    +
    + {AboutTextContent.contents.map(({ id, text }, i) => ( +

    + {i === 0 ? + TextStrong(text, 'CraftMerge') + : text}

    ))}
    about img Date: Tue, 12 Nov 2024 16:41:15 +0200 Subject: [PATCH 014/171] fix --- FrontEnd/src/pages/AboutUsPage/AboutUs.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/FrontEnd/src/pages/AboutUsPage/AboutUs.module.css b/FrontEnd/src/pages/AboutUsPage/AboutUs.module.css index 5b94d69fb..0570b50c7 100644 --- a/FrontEnd/src/pages/AboutUsPage/AboutUs.module.css +++ b/FrontEnd/src/pages/AboutUsPage/AboutUs.module.css @@ -1,7 +1,7 @@ .about-us-section { /* width: var(--main-block-size); */ padding-top: 5%; - min-width: 100vh; + min-width: 100vw; min-height: 472px; background: var(--about-us-background-color); From e03480671cc047a7d74c9a20622037a885a9b8a6 Mon Sep 17 00:00:00 2001 From: Parcival Date: Wed, 13 Nov 2024 11:58:57 +0200 Subject: [PATCH 015/171] third commit --- FrontEnd/src/global.css | 1 + .../src/pages/AboutUsPage/AboutUs.module.css | 126 ++++++++---------- .../src/pages/AboutUsPage/AboutUsPage.jsx | 44 +++--- 3 files changed, 81 insertions(+), 90 deletions(-) diff --git a/FrontEnd/src/global.css b/FrontEnd/src/global.css index 68b532cf3..eb84a46d3 100644 --- a/FrontEnd/src/global.css +++ b/FrontEnd/src/global.css @@ -93,6 +93,7 @@ --about-text-font-color: #292E32; --about-text-background-color: #FFF; --about-us-font-color: #25292C; + --about-us-header-color: #232424; --about-us-background-color: #F9F5EC; --about-cards-font-color: #292E32; --about-cards-background-color: #F0F1F3; diff --git a/FrontEnd/src/pages/AboutUsPage/AboutUs.module.css b/FrontEnd/src/pages/AboutUsPage/AboutUs.module.css index 0570b50c7..47507a432 100644 --- a/FrontEnd/src/pages/AboutUsPage/AboutUs.module.css +++ b/FrontEnd/src/pages/AboutUsPage/AboutUs.module.css @@ -1,103 +1,89 @@ .about-us-section { - /* width: var(--main-block-size); */ - padding-top: 5%; min-width: 100vw; - min-height: 472px; background: var(--about-us-background-color); - + justify-content: center; + align-items: center; } - -.about-us-section-content { - max-width: 1304px; - min-height: 542px; - padding: 0 10%; - margin: 0 auto; +.about-us-section-main { + padding: 0 15px; +} +.about-us-section-content__header { + color: var(--about-us-header-color); + margin-bottom: 24px; + margin-top: 40px; + font-family: var(--font-main); + font-size: 24px; + font-weight: 700; + line-height: 1.2; + letter-spacing: 0.24px; + text-align: center; + width: 100%; } - .about-us-rectangle { display: flex; justify-content: space-between; - flex-shrink: 0; - margin: 0 52px; + flex-direction: column; + align-items: center; } - .about-us-section-content__text { - max-width: 532px; - height: 402px; display: inline-flex; flex-direction: column; align-items: flex-start; -} - -.about-us-section-content__header { - color: var(--about-us-font-color); - margin-bottom: 5%; - font-family: var(--font-main); - font-size: 32px; - font-weight: 700; - line-height: 48px; - text-align: center; - width: 100%; -} - -.about-us-section-content__smart-text { color: var(--hint-text-color); - font-feature-settings: 'calt' off; font-family: var(--font-main); font-size: 16px; font-style: normal; - font-weight: 400; - line-height: 24px; - letter-spacing: -1%; - padding-bottom: 5%; + font-weight: normal; + line-height: 1.5; + letter-spacing: -0.16; } - -.about-us-section-content__image { - min-width: 345px; - max-width: 532px; - max-height: 340px; - flex-shrink: 0; - border-radius: 2%; +.about-us-section-content__smart-text { + padding-bottom: 32px; +} +.about-us-section-content__image-container{ + width: 100%; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + padding-bottom: 40px; +} +.about-us-section-content__image { + border-radius: 6px; object-fit: cover; + object-position: 80%; + width: 100%; + min-height: 340px; } - #about-us { scroll-margin-top: 320px; } - -@media (max-width: 1440px){ - .about-us-section-content { - padding: 0 5%; +@media only screen and (min-width: 768px) { + .about-us-section-main { + padding: 0 122.5px; } - } -@media (max-width: 1304px){ +@media only screen and (min-width: 1440px) { .about-us-section-content { - padding: 0 4%; + max-width: 1304px; } - -} -@media (max-width: 1265px){ - .about-us-section-content { - padding: 0 2%; + .about-us-rectangle { + flex-direction: row; + align-items: flex-start; } -} -@media (max-width: 1220px){ - .about-us-section-content { - padding: 0 1%; + .about-us-section-content__image-container { + width: 50%; + padding: 0 16px; } -} -@media (max-width: 940px){ - .about-us-section { - padding: 5% 0; + .about-us-section-content__text { + width: 50%; + padding: 0 16px; } - .about-us-section-content__text{ - padding-bottom: 2%; + .about-us-section-content { + padding: 40px 104px 48px; } - .about-us-rectangle { - margin: 0; - flex-direction: column; - align-items: center; + .about-us-section-content__header { + margin-top: 80px; } - } + diff --git a/FrontEnd/src/pages/AboutUsPage/AboutUsPage.jsx b/FrontEnd/src/pages/AboutUsPage/AboutUsPage.jsx index 3e9f22d7c..548e93224 100644 --- a/FrontEnd/src/pages/AboutUsPage/AboutUsPage.jsx +++ b/FrontEnd/src/pages/AboutUsPage/AboutUsPage.jsx @@ -11,30 +11,34 @@ const AboutUs = () => { )); - return (
    -
    -

    {AboutTextContent.header}

    +
    +
    +

    {AboutTextContent.header}

    -
    -
    -
    - {AboutTextContent.contents.map(({ id, text }, i) => ( -

    - {i === 0 ? - TextStrong(text, 'CraftMerge') - : text} -

    - ))} +
    +
    +
    + {AboutTextContent.contents.map(({ id, text }, i) => ( +

    + {i === 0 ? TextStrong(text, 'CraftMerge') : text} +

    + ))} +
    +
    + about img +
    - about img
    From 69f78517f52a555b49706beacf2db82698d3f2c8 Mon Sep 17 00:00:00 2001 From: Parcival Date: Wed, 13 Nov 2024 12:04:20 +0200 Subject: [PATCH 016/171] deleted about section --- .../pages/LandingPage/AboutSection/About.css | 73 ------------ .../pages/LandingPage/AboutSection/About.jsx | 44 ------- .../LandingPage/AboutSection/AboutMainText.js | 31 ----- .../AboutSection/AboutText/AboutText.css | 88 -------------- .../AboutSection/AboutText/AboutText.jsx | 34 ------ .../AboutSection/AboutText/text.js | 49 -------- .../AboutSection/Cards/AboutCards.css | 110 ------------------ .../AboutSection/Cards/AboutCards.jsx | 34 ------ .../LandingPage/AboutSection/Cards/text.js | 45 ------- FrontEnd/src/pages/LandingPage/MainPage.jsx | 2 - 10 files changed, 510 deletions(-) delete mode 100644 FrontEnd/src/pages/LandingPage/AboutSection/About.css delete mode 100644 FrontEnd/src/pages/LandingPage/AboutSection/About.jsx delete mode 100644 FrontEnd/src/pages/LandingPage/AboutSection/AboutMainText.js delete mode 100644 FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.css delete mode 100644 FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.jsx delete mode 100644 FrontEnd/src/pages/LandingPage/AboutSection/AboutText/text.js delete mode 100644 FrontEnd/src/pages/LandingPage/AboutSection/Cards/AboutCards.css delete mode 100644 FrontEnd/src/pages/LandingPage/AboutSection/Cards/AboutCards.jsx delete mode 100644 FrontEnd/src/pages/LandingPage/AboutSection/Cards/text.js diff --git a/FrontEnd/src/pages/LandingPage/AboutSection/About.css b/FrontEnd/src/pages/LandingPage/AboutSection/About.css deleted file mode 100644 index b20a50df8..000000000 --- a/FrontEnd/src/pages/LandingPage/AboutSection/About.css +++ /dev/null @@ -1,73 +0,0 @@ -.about-us-section { - flex-direction: column; - align-items: flex-start; -} - -.about-us-section-content { - height: 542px; -} - -.about-us-section-content__field { - width: 580px; - height: 542px; - flex-direction: column; - align-items: flex-start; - gap: 24px; - flex-shrink: 0; - position: absolute; -} - -.about-us-rectangle { - width: var(--main-block-size); - height: 542px; - flex-shrink: 0; - background: var(--about-as-background-color); - position: absolute; -} - -.about-us-section-content__text { - padding: 80px 0 0 104px; - height: 402px; - display: inline-flex; - flex-direction: column; - align-items: flex-start; - gap: 24px; -} - -.about-us-section-content__header-text { - color: var(--about-as-font-color); - font-family: var(--font-main); - font-size: 32px; - font-style: normal; - font-weight: 700; - line-height: 120%; - /* 38.4px */ -} - -.about-us-section-content__smart-text { - width: 567px; - color: var(--about-as-font-color); - font-feature-settings: 'calt' off; - font-family: var(--font-main); - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: 20px; - /* 125% */ - letter-spacing: -0.16px; - -} - -.about-us-section-content__image { - width: 749px; - height: 542px; - flex-shrink: 0; - position: absolute; - top: 0; - right: 0; - object-fit: cover; -} - -#about-us { - scroll-margin-top: 320px; -} diff --git a/FrontEnd/src/pages/LandingPage/AboutSection/About.jsx b/FrontEnd/src/pages/LandingPage/AboutSection/About.jsx deleted file mode 100644 index 2456193f5..000000000 --- a/FrontEnd/src/pages/LandingPage/AboutSection/About.jsx +++ /dev/null @@ -1,44 +0,0 @@ -import './About.css'; -import React from 'react'; -import AboutSectionCards from './Cards/AboutCards'; -import AboutSectionText from './AboutText/AboutText'; -import AboutTextContent from './AboutMainText.js'; - -const MainAboutSection = () => { - const TextStrong = (text, keyword) => - text.split(keyword).map((part, i, arr) => ( - - {part} - {i < arr.length - 1 && {keyword}} - - )); - - - return ( -
    - - -
    -
    -
    -

    {AboutTextContent.header}

    - {AboutTextContent.contents.map(({ id, text }) => ( -

    - {TextStrong(text, 'CraftMerge')} -

    - ))} -
    - about img -
    -
    -
    - ); -}; - -export default MainAboutSection; diff --git a/FrontEnd/src/pages/LandingPage/AboutSection/AboutMainText.js b/FrontEnd/src/pages/LandingPage/AboutSection/AboutMainText.js deleted file mode 100644 index 17bdebfa6..000000000 --- a/FrontEnd/src/pages/LandingPage/AboutSection/AboutMainText.js +++ /dev/null @@ -1,31 +0,0 @@ -const AboutTextContent = { - id: 1, - header: 'ХТО МИ', - contents: [ - { - id: 3, - text: 'CraftMerge - перший форум України, який створений у ' + - 'співпраці з Національним університетом «Львівська політехніка». Наша ' + - 'місія - не лише об`єднання українських виробників та стартапів, а й ' + - 'відкриття нових перспектив у виробничій галузі.' - }, - { - id: 4, - text: 'CraftMerge - це не лише платформа для обміну досвідом та ідеями, але ' + - 'й комунікаційний майданчик для обговорення актуальних тенденцій та ' + - 'передових технологій.' - }, - { - id: 5, - text: 'Учасники форуму отримають можливість не лише обмінятися досвідом ' + - 'та ідеями, але й ознайомитися з найсучаснішими рішеннями ' + - 'виробництва крафтової продукції. Ми створили CraftMerge, щоб ' + - 'допомогти українським виробникам збільшити свою популярність та ' + - 'впізнаваність, розширити аудиторію споживачів та залучити нових ' + - 'клієнтів. Приєднуйтеся до нашого форуму та розвивайте свій бізнес ' + - 'разом з нами!' - } - ] - }; - -export default AboutTextContent; diff --git a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.css b/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.css deleted file mode 100644 index c98511b11..000000000 --- a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.css +++ /dev/null @@ -1,88 +0,0 @@ -.about-us-text-section { - display: flex; - padding: 80px 104px; - flex-direction: column; - align-items: flex-start; - gap: 80px; - background: var(--about-text-background-color); - overflow: hidden; -} -.about-us-text-section__text-field { - display: flex; - flex-direction: column; - align-items: flex-end; - gap: 24px; - position: relative; - z-index: 1; -} -.about-us-text-section__header-text { - width: 990px; - color: var(--about-text-font-color); - font-family: var(--font-main); - font-size: 32px; - font-style: normal; - font-weight: 700; - line-height: 120%; -} -.about-us-text-section__text { - width: 971px; - height: 62px; - color: var(--about-text-font-color); - font-feature-settings: 'calt' off; - font-family: var(--font-main); - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: 20px; /* 125% */ - letter-spacing: -0.16px; -} - -.about-us-text-section__paragraphs { - display: flex; - width: 1304px; - justify-content: flex-end; - align-items: flex-start; - gap: 36px; -} -.about-us-text-section__paragraph-one { - align-self: flex-start; - width: 466px; - flex-shrink: 0; - color: var(--about-text-font-color); - font-feature-settings: 'calt' off; - font-family: var(--font-main); - font-size: 16px; - font-style: normal; - font-weight: 600; - line-height: 30px; /* 187.5% */ - letter-spacing: -0.16px; - /* content: "\2022"; */ -} -.about-us-text-section__paragraph-two { - align-self: flex-start; - width: 489px; - flex-shrink: 0; - color: var(--about-text-font-color); - font-feature-settings: 'calt' off; - font-family: var(--font-main); - font-size: 16px; - font-style: normal; - font-weight: 600; - line-height: 30px; /* 187.5% */ - letter-spacing: -0.16px; -} -.about-us-text-section__paragraph-one span::before, -.about-us-text-section__paragraph-two span::before { - /* content: "\2022"; */ - margin-right: 8px; -} - -.about-us-text-section__dots { - width: 353px; - height: auto; - padding: 50px 0 0 10px; - object-fit: cover; - position: absolute; - transform: translateX(-50%); - z-index: 0; -} \ No newline at end of file diff --git a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.jsx b/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.jsx deleted file mode 100644 index f11bae322..000000000 --- a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.jsx +++ /dev/null @@ -1,34 +0,0 @@ -import './AboutText.css'; -import AboutText from './text.js'; - -const AboutSectionText = () => { - const renderParagraphs = (paragraphNumber) => { - return AboutText.content - .filter(item => item.paragraph === paragraphNumber) - .map((item, index) => ( -
  • {item.text}
    • - )); - }; - - return ( -
    -
    -
    {AboutText.title}
    -
    -
      - {renderParagraphs(1)} -
    -
      - {renderParagraphs(2)} -
    -
    -
    - dots_12x10.png -
    - ); -}; - -export default AboutSectionText; - diff --git a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/text.js b/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/text.js deleted file mode 100644 index d2ac50788..000000000 --- a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/text.js +++ /dev/null @@ -1,49 +0,0 @@ -const AboutText = { - id: 1, - title: 'ДЛЯ КОГО', - level: 2, - content: [ - { - id: 2, - paragraph: 1, - text: 'Виробники крафтової продукції: винороби, сировари, медовари та інші майстри своєї справи.' - }, - { - id: 3, - paragraph: 1, - text: 'Сомельє та ресторатори: знавці, які прагнуть до нових смаків та ексклюзивних продуктів.' - }, - { - id: 4, - paragraph: 1, - text: 'Представники готельно-ресторанного бізнесу: шукаєте унікальні пропозиції для своїх гостей?' - }, - { - id: 5, - paragraph: 1, - text: 'Представники роздрібних та гуртових торгових мереж: розширяйте асортимент крафтовими делікатесами.' - }, - { - id: 6, - paragraph: 2, - text: 'Представники пакувальної індустрії: знаходьте нових клієнтів та партнерів.' - }, - { - id: 7, - paragraph: 2, - text: 'Представники логістичних компаній та служб доставки: пропонуйте еко-рішення для крафтового бізнесу.' - }, - { - id: 8, - paragraph: 2, - text: 'Стартапери: втілюйте свої ідеї у життя за підтримки спільноти.' - }, - { - id: 9, - paragraph: 2, - text: 'Інші фахівці галузі: діліться досвідом, знаннями та знаходьте однодумців.' - }, - ], -}; - -export default AboutText; \ No newline at end of file diff --git a/FrontEnd/src/pages/LandingPage/AboutSection/Cards/AboutCards.css b/FrontEnd/src/pages/LandingPage/AboutSection/Cards/AboutCards.css deleted file mode 100644 index 100e04297..000000000 --- a/FrontEnd/src/pages/LandingPage/AboutSection/Cards/AboutCards.css +++ /dev/null @@ -1,110 +0,0 @@ -.about-us-cards-section { - display: flex; - width: 1304px; - padding: 80px 104px; - flex-direction: column; - justify-content: center; - align-items: center; - gap: 24px; - background: var(--about-cards-background-color); -} -.about-us-cards-section__header-text { - color: var(--about-cards-font-color); - font-family: var(--font-main); - font-size: 32px; - font-style: normal; - font-weight: 700; - line-height: 120%; /* 38.4px */ -} -.about-us-cards-section__cards { - display: flex; - width: 884px; - align-items: flex-start; - align-content: flex-start; - gap: 24px; - flex-wrap: wrap; -} -.about-us-cards-section__first-card { - display: flex; - width: 430px; - height: 128px; - flex-direction: column; - align-items: flex-start; - gap: 10px; - flex-shrink: 0; - box-shadow: 0 0 2px 0 rgba(65, 64, 69, 0.20); - border-radius: 9999px; - transition: transform 0.2s ease; -} -.about-us-cards-section__cards-content { - display: flex; - padding: 36px 16px 16px 16px; - flex-direction: column; - align-items: flex-start; - gap: 16px; - border-radius: 12px; - background: var(--about-cards-background-content-color); -} -.about-us-cards-section__cards-logo { - width: 54px; - height: 50px; - position: relative; - right: 0; -} -.about-us-cards-section__cards-logo__intersect { - width: 54px; - height: 50px; - flex-shrink: 0; - fill: #F1FFF7; - position: relative; - right: -360px; - top: -36.2px; -} -.about-us-cards-section__cards-logo__expert { - width: 24px; - height: 24px; - flex-shrink: 0; - position: absolute; - right: -350px; - top: -28px; -} -.about-us-cards-section__cards-content__text-header { - align-self: stretch; - color: var(--about-cards-font-color); - font-feature-settings: 'calt' off; - font-family: var(--font-main); - font-size: 16px; - font-style: normal; - font-weight: 600; - line-height: 20px; /* 125% */ - letter-spacing: -0.16px; - position: absolute; - text-transform: uppercase; -} - -.about-us-cards-section__cards-content__text { - width: 398px; - height: 40px; - color: var(--about-cards-font-color); - font-feature-settings: 'calt' off; - font-family: var(--font-main); - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: 20px; /* 125% */ - letter-spacing: -0.16px; - position: relative; - top: -20px; -} -.about-us-cards-section__next-card { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 10px; - border-radius: 9999px; - box-shadow: 0 0 2px 0 rgba(65, 64, 69, 0.20); - transition: transform 0.2s ease; -} -.about-us-cards-section__next-card:hover, .about-us-cards-section__first-card:hover { - transform: scale(1.1); -} \ No newline at end of file diff --git a/FrontEnd/src/pages/LandingPage/AboutSection/Cards/AboutCards.jsx b/FrontEnd/src/pages/LandingPage/AboutSection/Cards/AboutCards.jsx deleted file mode 100644 index 8351a1066..000000000 --- a/FrontEnd/src/pages/LandingPage/AboutSection/Cards/AboutCards.jsx +++ /dev/null @@ -1,34 +0,0 @@ -import './AboutCards.css'; -import AboutUsText from './text.js'; - -const AboutSectionCards = () => { - return ( -
    -

    {AboutUsText.title}

    -
    - {AboutUsText.content.map((card, index) => ( -
    -
    -
    - About us cards - Logo -
    -

    {card.title}

    -

    {card.text}

    -
    -
    - ))} -
    -
    - ); -}; - -export default AboutSectionCards; diff --git a/FrontEnd/src/pages/LandingPage/AboutSection/Cards/text.js b/FrontEnd/src/pages/LandingPage/AboutSection/Cards/text.js deleted file mode 100644 index 049d38e78..000000000 --- a/FrontEnd/src/pages/LandingPage/AboutSection/Cards/text.js +++ /dev/null @@ -1,45 +0,0 @@ -const AboutUsText = { - id: 1, - title: 'ЧОМУ ВАРТО', - level: 2, - content: [ - { - id: 2, - logo: 'expert.svg', - title: 'Прямий зв\'язок з виробниками', - text: 'Знайомтеся з історією та цінностями брендів.' - }, - { - id: 3, - logo: 'info.svg', - title: 'Ексклюзивні пропозиції', - text: 'Знаходьте унікальні продукти, недоступні в масовому продажі.' - }, - { - id: 4, - logo: 'contacts.svg', - title: 'Інновації та тренди', - text: 'Будьте в курсі останніх новинок та технологій галузі.' - }, - { - id: 5, - logo: 'contacts.svg', - title: 'Співпраця та синергія', - text: 'Об\'єднуйтесь, щоб творити нове та ділитися досвідом.' - }, - { - id: 6, - logo: 'contacts.svg', - title: 'Розвиток та масштабування', - text: 'Знаходьте нових партнерів, клієнтів та ринки збуту.' - }, - { - id: 7, - logo: 'exchange.svg', - title: 'Підтримка та знання', - text: 'Отримуйте консультації, експертну допомогу та доступ до освітніх ресурсів.' - }, - ], -}; - -export default AboutUsText; \ No newline at end of file diff --git a/FrontEnd/src/pages/LandingPage/MainPage.jsx b/FrontEnd/src/pages/LandingPage/MainPage.jsx index 2ef3e31ee..2310dca6d 100644 --- a/FrontEnd/src/pages/LandingPage/MainPage.jsx +++ b/FrontEnd/src/pages/LandingPage/MainPage.jsx @@ -2,7 +2,6 @@ import { useState } from 'react'; import MainBanner from './Banner/Banner'; import MainCompanies from './Companies/Companies'; import JoinUs from './JoinUs/JoinUs'; -import MainAboutSection from './AboutSection/About'; import CookieMod from '../../components/CookieAcception/CookieMod'; import css from './MainPage.module.css'; import PropTypes from 'prop-types'; @@ -17,7 +16,6 @@ const MainPage = ({ isAuthorized }) => { {!isAuthorized ? : null} - Date: Wed, 13 Nov 2024 12:26:35 +0200 Subject: [PATCH 017/171] fix --- FrontEnd/src/pages/AboutUsPage/AboutUs.module.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/FrontEnd/src/pages/AboutUsPage/AboutUs.module.css b/FrontEnd/src/pages/AboutUsPage/AboutUs.module.css index 47507a432..463381100 100644 --- a/FrontEnd/src/pages/AboutUsPage/AboutUs.module.css +++ b/FrontEnd/src/pages/AboutUsPage/AboutUs.module.css @@ -6,6 +6,9 @@ } .about-us-section-main { padding: 0 15px; + align-items: center; + display: flex; + flex-direction: column; } .about-us-section-content__header { color: var(--about-us-header-color); From a6687a87aba2c1782365b5e50a441624f96225c8 Mon Sep 17 00:00:00 2001 From: Ostap Ohorodnyk Date: Wed, 13 Nov 2024 13:21:06 +0200 Subject: [PATCH 018/171] removed unnecessary styles --- .../pages/LandingPage/AboutSection/About.css | 6 +- .../pages/LandingPage/AboutSection/About.jsx | 4 +- .../AboutSection/Cards/AboutCards.css | 66 +++++++------------ .../AboutSection/Cards/AboutCards.jsx | 10 --- 4 files changed, 30 insertions(+), 56 deletions(-) diff --git a/FrontEnd/src/pages/LandingPage/AboutSection/About.css b/FrontEnd/src/pages/LandingPage/AboutSection/About.css index b20a50df8..fb0fc9c77 100644 --- a/FrontEnd/src/pages/LandingPage/AboutSection/About.css +++ b/FrontEnd/src/pages/LandingPage/AboutSection/About.css @@ -4,7 +4,7 @@ } .about-us-section-content { - height: 542px; + height: auto; } .about-us-section-content__field { @@ -14,7 +14,7 @@ align-items: flex-start; gap: 24px; flex-shrink: 0; - position: absolute; + } .about-us-rectangle { @@ -22,7 +22,7 @@ height: 542px; flex-shrink: 0; background: var(--about-as-background-color); - position: absolute; + } .about-us-section-content__text { diff --git a/FrontEnd/src/pages/LandingPage/AboutSection/About.jsx b/FrontEnd/src/pages/LandingPage/AboutSection/About.jsx index 2456193f5..028eb1c45 100644 --- a/FrontEnd/src/pages/LandingPage/AboutSection/About.jsx +++ b/FrontEnd/src/pages/LandingPage/AboutSection/About.jsx @@ -1,7 +1,7 @@ import './About.css'; import React from 'react'; import AboutSectionCards from './Cards/AboutCards'; -import AboutSectionText from './AboutText/AboutText'; + import AboutTextContent from './AboutMainText.js'; const MainAboutSection = () => { @@ -16,7 +16,7 @@ const MainAboutSection = () => { return (
    - +
    diff --git a/FrontEnd/src/pages/LandingPage/AboutSection/Cards/AboutCards.css b/FrontEnd/src/pages/LandingPage/AboutSection/Cards/AboutCards.css index 100e04297..4cbcbe9fa 100644 --- a/FrontEnd/src/pages/LandingPage/AboutSection/Cards/AboutCards.css +++ b/FrontEnd/src/pages/LandingPage/AboutSection/Cards/AboutCards.css @@ -1,11 +1,11 @@ .about-us-cards-section { display: flex; - width: 1304px; + width: 100%; padding: 80px 104px; flex-direction: column; - justify-content: center; + justify-content:center; align-items: center; - gap: 24px; + gap: px; background: var(--about-cards-background-color); } .about-us-cards-section__header-text { @@ -22,7 +22,7 @@ align-items: flex-start; align-content: flex-start; gap: 24px; - flex-wrap: wrap; + flex-wrap:wrap; } .about-us-cards-section__first-card { display: flex; @@ -36,6 +36,7 @@ border-radius: 9999px; transition: transform 0.2s ease; } + .about-us-cards-section__cards-content { display: flex; padding: 36px 16px 16px 16px; @@ -45,55 +46,38 @@ border-radius: 12px; background: var(--about-cards-background-content-color); } -.about-us-cards-section__cards-logo { - width: 54px; - height: 50px; - position: relative; - right: 0; -} -.about-us-cards-section__cards-logo__intersect { - width: 54px; - height: 50px; - flex-shrink: 0; - fill: #F1FFF7; - position: relative; - right: -360px; - top: -36.2px; -} -.about-us-cards-section__cards-logo__expert { - width: 24px; - height: 24px; - flex-shrink: 0; - position: absolute; - right: -350px; - top: -28px; -} + .about-us-cards-section__cards-content__text-header { + height: 24px; align-self: stretch; - color: var(--about-cards-font-color); - font-feature-settings: 'calt' off; - font-family: var(--font-main); - font-size: 16px; + flex-grow: 0; + font-family: Geologica; + font-size: 20px; + font-weight: bold; + font-stretch: normal; font-style: normal; - font-weight: 600; - line-height: 20px; /* 125% */ - letter-spacing: -0.16px; - position: absolute; + line-height: 1.2; + letter-spacing: normal; + text-align: left; + color: #232424; text-transform: uppercase; } .about-us-cards-section__cards-content__text { width: 398px; height: 40px; - color: var(--about-cards-font-color); - font-feature-settings: 'calt' off; - font-family: var(--font-main); + height: 40px; + align-self: stretch; + flex-grow: 0; + font-family: Geologica; font-size: 16px; + font-weight: normal; + font-stretch: normal; font-style: normal; - font-weight: 400; - line-height: 20px; /* 125% */ + line-height: 1.25; letter-spacing: -0.16px; - position: relative; + text-align: left; + color: #292e32; top: -20px; } .about-us-cards-section__next-card { diff --git a/FrontEnd/src/pages/LandingPage/AboutSection/Cards/AboutCards.jsx b/FrontEnd/src/pages/LandingPage/AboutSection/Cards/AboutCards.jsx index 8351a1066..74465a190 100644 --- a/FrontEnd/src/pages/LandingPage/AboutSection/Cards/AboutCards.jsx +++ b/FrontEnd/src/pages/LandingPage/AboutSection/Cards/AboutCards.jsx @@ -11,16 +11,6 @@ const AboutSectionCards = () => { ${index === 0 ? 'about-us-cards-section__first-card' : 'about-us-cards-section__next-card'}`} >
    -
    - About us cards - Logo -

    {card.title}

    {card.text}

    From 84362ccfc6febb338797dfc9306e9d30fa78fce7 Mon Sep 17 00:00:00 2001 From: KyzukY Date: Wed, 13 Nov 2024 15:59:15 +0200 Subject: [PATCH 019/171] add hover --- .../AboutSection/AboutText/AboutText.css | 107 +++++++++++++----- .../AboutSection/AboutText/AboutText.jsx | 6 +- 2 files changed, 81 insertions(+), 32 deletions(-) diff --git a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.css b/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.css index 4ee8fc113..8587c0370 100644 --- a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.css +++ b/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.css @@ -1,77 +1,126 @@ -/* Основний контейнер */ .about-us-text-section { display: flex; flex-direction: column; align-items: center; - width: 100vw;; - padding: 40px 16px; + width: 100%; + padding: 20px 16px; margin: auto; background-color: #f9f4ea; + box-sizing: border-box; + max-width: 100%; } -/* Заголовок */ .about-us-text-section__header-text { - font-family: Geologica; - font-size: 24px; + font-family: var(--font-logo); + font-size: 20px; font-weight: 700; - line-height: 48px; - letter-spacing: 0.01em; + line-height: 28px; text-align: center; color: #232424; - margin-bottom: 40px; - margin-top: 80px; + margin-bottom: 20px; +} + +.about-us-text-section__grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 16px; + width: 100%; + max-width: 340px; + box-sizing: border-box; } -/* Стиль для карток */ .about-us-text-section__card { display: flex; align-items: center; - gap: 12px; + gap: 8px; background-color: #fff; width: 100%; - max-width: 302px; - height: 102px; + height: auto; + padding: 12px; border-radius: 6px; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); - text-align: left; + transition: box-shadow 0.3s ease; + box-sizing: border-box; } -/* Іконка */ +.about-us-text-section__card:hover { + box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.2); +} + + .about-us-text-section__icon { - width: 36px; - height: 36px; - margin-left: 18px; + width: 28px; + height: 28px; + margin-left: 8px; + margin-right: 8px; } -/* Текст */ .about-us-text-section__card p { - font-family: Geologica; - font-size: 16px; + font-family: var(--font-logo); + font-size: 14px; font-weight: 600; color: #232424; margin: 0; + word-wrap: break-word; +} + +@media only screen and (max-width: 767px) { + .about-us-text-section__card { + flex-direction: column; + align-items: center; + text-align: center; + } + + .about-us-text-section__icon { + margin: 0; + } } -/* Адаптивність для планшетів */ @media only screen and (min-width: 768px) { .about-us-text-section { max-width: 768px; + max-height: 672px; } .about-us-text-section__header-text { - font-size: 32px; - line-height: 36px; + font-size: 24px; + line-height: 32px; + } + + .about-us-text-section__grid { + grid-template-columns: repeat(4, 1fr); + gap: 24px; } .about-us-text-section__card { - max-width: 364px; - height: 128px; + max-width: 344px; + height: 102px; + } + .about-us-text-section__card p { + font-size: 12px; } } -/* Адаптивність для десктопів */ @media only screen and (min-width: 1200px) { .about-us-text-section { max-width: 1304px; } -} + + .about-us-text-section__header-text { + font-size: 32px; + line-height: 36px; + } + + .about-us-text-section__grid { + gap: 32px; + } + + .about-us-text-section__card { + max-width: 345px; + height: 102px; + } + + .about-us-text-section__card p { + font-size: 16px; + } +} \ No newline at end of file diff --git a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.jsx b/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.jsx index efdd31871..ec184a467 100644 --- a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.jsx +++ b/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.jsx @@ -11,9 +11,9 @@ const AboutSectionText = () => { {AboutText.content.map((item) => ( =768px) - xl={6} // Чотири колонки на десктопах (>=1200px) + xs={12} + md={6} + xl={6} >
    Date: Thu, 14 Nov 2024 10:20:50 +0200 Subject: [PATCH 020/171] Add optional chaining into checkFormIsDirty --- FrontEnd/src/utils/checkFormIsDirty.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/FrontEnd/src/utils/checkFormIsDirty.js b/FrontEnd/src/utils/checkFormIsDirty.js index 4c9b5dc1d..2d58f5809 100644 --- a/FrontEnd/src/utils/checkFormIsDirty.js +++ b/FrontEnd/src/utils/checkFormIsDirty.js @@ -45,7 +45,7 @@ const checkFormIsDirty = (fields, userData, profileData) => { } if (key === 'founded') { - if ((defaultValue !== null && currentValue !== null && defaultValue.toString() !== currentValue.toString()) || + if ((defaultValue !== null && currentValue !== null && defaultValue?.toString() !== currentValue?.toString()) || (defaultValue === null && (currentValue !== null && currentValue !== ''))) { return true; } From 22d3e8e73109cf75c29f765cb109a6d1e6d57aa3 Mon Sep 17 00:00:00 2001 From: Yan Zhylavy Date: Thu, 14 Nov 2024 11:20:09 +0200 Subject: [PATCH 021/171] Change structure and Loader rendering logic, remove apparently redundant useEffects from profile editing form components --- .../FormComponents/AdditionalInfo.jsx | 4 -- .../FormComponents/ContactsInfo.jsx | 4 -- .../FormComponents/FormFields/ImageField.jsx | 1 - .../FormComponents/GeneralInfo.jsx | 4 -- .../FormComponents/StartupInfo.jsx | 4 -- .../ProfilePage/FormComponents/UserInfo.jsx | 8 ---- .../ProfilePage/Mobile/EditProfileMobile.jsx | 38 ++++++++++--------- 7 files changed, 21 insertions(+), 42 deletions(-) diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/AdditionalInfo.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/AdditionalInfo.jsx index 07855becc..61a982bc4 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/AdditionalInfo.jsx +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/AdditionalInfo.jsx @@ -33,10 +33,6 @@ const AdditionalInfo = (props) => { setFormIsDirty(isDirty); }, [mainProfile, profile]); - useEffect(() => { - setProfile(props.profile); - }, [props.profile]); - const onUpdateFoundationYearField = (e) => { const currentYear = new Date().getFullYear(); const year = Number(e.target.value); diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/ContactsInfo.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/ContactsInfo.jsx index b7abab15b..812020b6c 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/ContactsInfo.jsx +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/ContactsInfo.jsx @@ -37,10 +37,6 @@ const ContactsInfo = (props) => { const inputRef = useMask({ mask: '+380XX XXX XX XX', replacement: { X: /\d/ } }); - useEffect(() => { - setProfile(props.profile); - }, [props.profile]); - useEffect(() => { if (mainProfile?.phone) { setProfile((prevState) => ({ diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/ImageField.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/ImageField.jsx index 84b8c86c0..f262fb46b 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/ImageField.jsx +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/ImageField.jsx @@ -121,7 +121,6 @@ const ImageField = ({
    - {renderInput()} {renderUpdateImageLabel('змінити')} {renderDeleteButton('видалити')}
    diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/GeneralInfo.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/GeneralInfo.jsx index ec2b0a8f8..6dc8ef2a2 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/GeneralInfo.jsx +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/GeneralInfo.jsx @@ -105,10 +105,6 @@ const GeneralInfo = (props) => { setFormIsDirty(isDirty); }, [mainProfile, profile]); - useEffect(() => { - setProfile(props.profile); - }, [props.profile]); - const checkRequiredFields = () => { let isValid = true; const newFormState = {}; diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/StartupInfo.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/StartupInfo.jsx index d3e23ff35..f4ce14bea 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/StartupInfo.jsx +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/StartupInfo.jsx @@ -27,10 +27,6 @@ const StartupInfo = (props) => { startup_idea: { defaultValue: mainProfile?.startup_idea ?? null }, }; - useEffect(() => { - setProfile(props.profile); - }, [props.profile]); - useEffect(() => { const isDirty = checkFormIsDirty(fields, null, profile); setFormIsDirty(isDirty); diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/UserInfo.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/UserInfo.jsx index 63e41f35b..2a1885d8a 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/UserInfo.jsx +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/UserInfo.jsx @@ -47,14 +47,6 @@ const UserInfo = (props) => { person_position: { defaultValue: profile?.person_position ?? null }, }; - useEffect(() => { - setUpdateUser(props.user); - }, [props.user]); - - useEffect(() => { - setUpdateProfile(props.profile); - }, [props.profile]); - useEffect(() => { const isDirty = checkFormIsDirty(fields, updateUser, updateProfile); setFormIsDirty(isDirty); diff --git a/FrontEnd/src/pages/ProfilePage/Mobile/EditProfileMobile.jsx b/FrontEnd/src/pages/ProfilePage/Mobile/EditProfileMobile.jsx index 8f2b8eed0..c2b03d6ad 100644 --- a/FrontEnd/src/pages/ProfilePage/Mobile/EditProfileMobile.jsx +++ b/FrontEnd/src/pages/ProfilePage/Mobile/EditProfileMobile.jsx @@ -7,6 +7,7 @@ import ProductServiceInfo from '../FormComponents/ProductServiceInfo'; import StartupInfo from '../FormComponents/StartupInfo'; import UserInfo from '../FormComponents/UserInfo'; import ChangePassword from '../FormComponents/ChangePassword'; +import Loader from '../../../components/Loader/Loader'; import { useAuth, useProfile } from '../../../hooks'; import css from './EditProfileMobile.module.css'; @@ -16,23 +17,26 @@ import css from './EditProfileMobile.module.css'; const EditProfileMobile = () => { const { user } = useAuth(); const { profile } = useProfile(); - const sections = [ - { title: 'Інформація про користувача', content: }, - { title: 'Загальна інформація', content: }, - { title: 'Контакти', content: }, - { title: 'Інформація про товари/послуги', content: }, - { title: 'Додаткова інформація', content: }, - { title: 'Стартап', content: }, - { title: 'Змінити пароль', content: }, - { title: 'Видалити профіль', content: }, - ]; - - return ( -
    -

    Профіль користувача

    - -
    - ); + if (user && profile) { + const sections = [ + { title: 'Інформація про користувача', content: }, + { title: 'Загальна інформація', content: }, + { title: 'Контакти', content: }, + { title: 'Інформація про товари/послуги', content: }, + { title: 'Додаткова інформація', content: }, + { title: 'Стартап', content: }, + { title: 'Змінити пароль', content: }, + { title: 'Видалити профіль', content: }, + ]; + return ( +
    +

    Профіль користувача

    + +
    + ); + } else { + return ; + } }; export default EditProfileMobile; \ No newline at end of file From d9c1ebf0f494177d8c4d103aff81696e9307a71d Mon Sep 17 00:00:00 2001 From: Yan Zhylavy Date: Thu, 14 Nov 2024 12:12:34 +0200 Subject: [PATCH 022/171] Fix issues related to html inputs and labels --- .../DeleteProfileComponent/DeleteProfileModal.jsx | 7 +++++-- .../FormComponents/FormFields/CheckBoxField.jsx | 4 +++- .../FormComponents/FormFields/HalfFormField.jsx | 5 ++++- .../ProfilePage/FormComponents/FormFields/ImageField.jsx | 1 + .../FormComponents/FormFields/MultipleSelectChip.jsx | 4 +++- .../ProfilePage/FormComponents/FormFields/TextField.jsx | 4 +++- .../src/pages/ProfilePage/FormComponents/GeneralInfo.jsx | 1 - 7 files changed, 19 insertions(+), 7 deletions(-) diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfileModal.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfileModal.jsx index 6f3cf8658..6905c270c 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfileModal.jsx +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfileModal.jsx @@ -68,23 +68,25 @@ const DeleteProfileModal = (props) => {
    - +
    {!isCorrectEmail && (
    Некоректна пошта
    )}
    - +
    { placeholder="Пароль" onChange={passwordChangeHandler} onKeyDown={preventEnterSubmit} + autoComplete="off" /> {
    {props.requiredField && ( - + * )}