From 4e6a9a79c00246dc4e1c793e9bd88be06137e116 Mon Sep 17 00:00:00 2001 From: Lvyshnevska Date: Sat, 19 Oct 2024 18:01:28 +0200 Subject: [PATCH 01/19] login desktop styles updated --- FrontEnd/src/global.css | 9 +- .../pages/Authorization/AuthorizationPage.jsx | 6 - .../AuthorizationPage.module.css | 36 +--- .../src/pages/Authorization/EyeVisible.jsx | 4 +- .../src/pages/Authorization/LoginPage.jsx | 48 ++--- .../pages/Authorization/LoginPage.module.css | 187 ++++++++---------- .../Authorization/SignUpInvitation.module.css | 19 +- 7 files changed, 133 insertions(+), 176 deletions(-) diff --git a/FrontEnd/src/global.css b/FrontEnd/src/global.css index 18708495a..83d6606ee 100644 --- a/FrontEnd/src/global.css +++ b/FrontEnd/src/global.css @@ -44,10 +44,12 @@ --delete-text-color: #F15831; --notification-text-color: #F34444; --footer-dark-text-color: #A0ABC0; + --link-text-color-new: #000000; + --error-text-color-new: #F15831; /* button color*/ --main-button-color: #1F9A7C; - --button-color-hover: #0b6c61 ; + --button-color-hover: #0b6c61; --light-button-color: #FFFFFF; /* fonts */ @@ -55,10 +57,11 @@ --font-messages: 'Roboto', sans-serif; --font-error: 'Roboto', sans-serif; --font-logo: 'Geologica', sans-serif; + --font-main-new: 'Geologica', sans-serif; --toastify-color-error: #FFF1F0; --toastify-color-success: #F1FFF7; - --toastify-font-family: var(--font-main); + --toastify-font-family: var(--font-main-new); --toastify-close-button: rgba(0, 0, 0, 0.85); --toastify-toast-width: 395px; --toastify-toast-min-height: 22px; @@ -111,7 +114,7 @@ --character-title-85: rgba(0, 0, 0, 0.85); --wf-base-white: #FFF; - + --profile-min-height-block: calc(100vh - 565px); --min-height-block-main: calc(100vh - 305px); --company-card-color: #FFF; diff --git a/FrontEnd/src/pages/Authorization/AuthorizationPage.jsx b/FrontEnd/src/pages/Authorization/AuthorizationPage.jsx index 9631d6b4e..4d9c16315 100644 --- a/FrontEnd/src/pages/Authorization/AuthorizationPage.jsx +++ b/FrontEnd/src/pages/Authorization/AuthorizationPage.jsx @@ -5,12 +5,6 @@ const AuthorizationPage = () => { return (
- dots_7x6.png - dots_7x6.png
); diff --git a/FrontEnd/src/pages/Authorization/AuthorizationPage.module.css b/FrontEnd/src/pages/Authorization/AuthorizationPage.module.css index c7788d9ce..fa3f419a6 100644 --- a/FrontEnd/src/pages/Authorization/AuthorizationPage.module.css +++ b/FrontEnd/src/pages/Authorization/AuthorizationPage.module.css @@ -1,30 +1,8 @@ .auth-page { - display: flex; - width: var(--main-block-size); - min-height: var(--min-height-block-main); - flex-shrink: 0; - background: #f1fff7; - } - - .frame-img-left { - width: 179px; - height: 150px; - display: inline-flex; - flex-direction: column; - align-items: flex-start; - gap: 24px; - margin: 422px 979px 153px 354px; - position: absolute; - } - - .frame-img-right { - width: 179px; - height: 150px; - display: inline-flex; - flex-direction: column; - align-items: flex-start; - gap: 24px; - margin: 102px 354px 473px 979px; - position: absolute; - } - \ No newline at end of file + display: flex; + width: var(--main-block-size); + min-height: var(--min-height-block-main); + flex-shrink: 0; + background: #F9F5EC; + ; +} diff --git a/FrontEnd/src/pages/Authorization/EyeVisible.jsx b/FrontEnd/src/pages/Authorization/EyeVisible.jsx index c8b285549..07c2d5e77 100644 --- a/FrontEnd/src/pages/Authorization/EyeVisible.jsx +++ b/FrontEnd/src/pages/Authorization/EyeVisible.jsx @@ -2,8 +2,8 @@ const EyeVisible = () => { return ( - - + + ); }; diff --git a/FrontEnd/src/pages/Authorization/LoginPage.jsx b/FrontEnd/src/pages/Authorization/LoginPage.jsx index ca91560b6..f2ccdc77d 100644 --- a/FrontEnd/src/pages/Authorization/LoginPage.jsx +++ b/FrontEnd/src/pages/Authorization/LoginPage.jsx @@ -4,6 +4,7 @@ import { useNavigate, Link } from 'react-router-dom'; import axios from 'axios'; import { useStopwatch } from 'react-timer-hook'; import { toast } from 'react-toastify'; +import classNames from 'classnames'; import validator from 'validator'; import EyeVisible from './EyeVisible'; @@ -29,7 +30,7 @@ const LoginContent = () => { const errorMessageTemplates = { required: 'Обов’язкове поле', - email: 'Електронна пошта не відповідає вимогам', + email: 'Введіть адресу електронної пошти у форматі name@example.com', unspecifiedError: 'Електронна пошта чи пароль вказані некоректно', rateError: 'Небезпечні дії на сторінці. Сторінка заблокована на 10 хвилин', blockedUserError: 'Профіль компанії було заблоковано внаслідок розміщення неприйнятного контенту', @@ -137,13 +138,13 @@ const LoginContent = () => { }; useEffect(() => {}, [disabled]); - + console.log('ERRORS', errors); return (

Вхід на платформу

-
+
@@ -157,12 +158,15 @@ const LoginContent = () => { > Електронна пошта -
+
@@ -186,13 +190,17 @@ const LoginContent = () => { > Пароль -
+
{
- - {errors.password && errors.password.message} - {errors.required && errors.required.message} - {errors.unspecifiedError && errors.unspecifiedError.message} - +
+ + {errors.password && errors.password.message} + {errors.required && errors.required.message} + {errors.unspecifiedError && errors.unspecifiedError.message} + + + Забули пароль? + +
- - Забули пароль? -
- - -
-
- - {errors.password && errors.password.message} - {errors.required && errors.required.message} - {errors.unspecifiedError && errors.unspecifiedError.message} - - - Забули пароль? - -
-
-
-
-
-
- + +
+
+

Вперше на нашому сайті?

+ Зареєструйтесь
- - +
); }; diff --git a/FrontEnd/src/pages/Authorization/LoginPage.module.css b/FrontEnd/src/pages/Authorization/LoginPage.module.css index c03bce032..fbd983960 100644 --- a/FrontEnd/src/pages/Authorization/LoginPage.module.css +++ b/FrontEnd/src/pages/Authorization/LoginPage.module.css @@ -1,6 +1,26 @@ +.login-page { + display: flex; + justify-content: center; + width: 100vw; + min-height: var(--min-height-block-main); + flex-shrink: 0; + background: var(--light-seashell-background); + padding: 80px 0; +} + +.login { + display: flex; + align-self: center; + flex-direction: column; + align-items: center; + max-width: 572px; + min-width: 345px; + gap: 24px; +} + .login-basic { display: flex; - width: 572px; + width: 375px; flex-direction: column; align-items: flex-start; border-radius: 2px; @@ -273,8 +293,54 @@ input:-webkit-autofill { -webkit-text-fill-color: var(--main-text-color) !important; } -@media only screen and (max-width: 767px) { +.login-signup-invitation { + display: flex; + align-items: flex-start; + gap: 8px; + background: var(--light-seashell-background); +} + +.login-signup-invitation p { + margin: 0; + color: var(--link-text-color); + font-feature-settings: "calt" off; + font-family: var(--font-main); + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 22px; + letter-spacing: -0.14px; +} + +.login-signup-invitation a { + color: var(--link-text-color); + font-feature-settings: "calt" off; + font-family: var(--font-main); + font-size: 14px; + font-style: normal; + font-weight: 600; + line-height: 22px; + letter-spacing: -0.14px; + text-decoration-line: underline; + text-decoration-thickness: 1%; +} + +.login-signup-invitation a:focus { + outline: none; +} + +@media only screen and (min-width: 768px) { + .login-page { + padding: 104px 0; + } + .login-basic { - width: 375px; + width: 572px; + } +} + +@media only screen and (min-width: 1512px) { + .login-page { + padding: 120px 0; } } diff --git a/FrontEnd/src/pages/Authorization/SignUpInvitation.jsx b/FrontEnd/src/pages/Authorization/SignUpInvitation.jsx deleted file mode 100644 index bae4e21ec..000000000 --- a/FrontEnd/src/pages/Authorization/SignUpInvitation.jsx +++ /dev/null @@ -1,13 +0,0 @@ -import { Link } from 'react-router-dom'; -import classes from './SignUpInvitation.module.css'; - -const SignUpInvitation = () => { - return ( -
-

Вперше на нашому сайті?

- Зареєструйтесь -
- ); -}; - -export default SignUpInvitation; diff --git a/FrontEnd/src/pages/Authorization/SignUpInvitation.module.css b/FrontEnd/src/pages/Authorization/SignUpInvitation.module.css deleted file mode 100644 index fd4c4fba8..000000000 --- a/FrontEnd/src/pages/Authorization/SignUpInvitation.module.css +++ /dev/null @@ -1,34 +0,0 @@ -.signup-invitation { - display: flex; - align-items: flex-start; - gap: 8px; -} - -.signup-invitation p { - margin: 0; - color: var(--link-text-color); - font-feature-settings: "calt" off; - font-family: var(--font-main); - font-size: 14px; - font-style: normal; - font-weight: 400; - line-height: 22px; - letter-spacing: -0.14px; -} - -.signup-invitation a { - color: var(--link-text-color); - font-feature-settings: "calt" off; - font-family: var(--font-main); - font-size: 14px; - font-style: normal; - font-weight: 600; - line-height: 22px; - letter-spacing: -0.14px; - text-decoration-line: underline; - text-decoration-thickness: 1%; -} - -.signup-invitation a:focus { - outline: none; -} diff --git a/FrontEnd/src/pages/SignUp/SignUp/ActivateProfilePage.jsx b/FrontEnd/src/pages/SignUp/SignUp/ActivateProfilePage.jsx index de99125a0..c98cf2054 100644 --- a/FrontEnd/src/pages/SignUp/SignUp/ActivateProfilePage.jsx +++ b/FrontEnd/src/pages/SignUp/SignUp/ActivateProfilePage.jsx @@ -1,7 +1,7 @@ import React, { useState, useEffect } from 'react'; import axios from 'axios'; import { useParams } from 'react-router-dom'; -import AuthorizationPage from '../../../pages/Authorization/AuthorizationPage'; +import LoginPage from '../../../pages/Authorization/LoginPage'; import styles from './ActivateProfileModal.module.css'; export function ActivationProfilePage() { @@ -37,7 +37,7 @@ export function ActivationProfilePage() { return (
- + {modalVisible && (
diff --git a/FrontEnd/src/routes/ClientRouter.jsx b/FrontEnd/src/routes/ClientRouter.jsx index 4598d5854..311c4fdce 100644 --- a/FrontEnd/src/routes/ClientRouter.jsx +++ b/FrontEnd/src/routes/ClientRouter.jsx @@ -6,7 +6,7 @@ import { SWRConfig } from 'swr'; import 'react-toastify/dist/ReactToastify.css'; import customTheme from '../pages/CustomThemes/customTheme.js'; -import AuthorizationPage from '../pages/Authorization/AuthorizationPage'; +import LoginPage from '../pages/Authorization/LoginPage'; import CookiesPolicyComponent from '../pages/CookiesPolicyPage/CookiesPolicyComponent'; import Footer from '../components/Footer/Footer'; import Header from '../components/Header/Header'; @@ -68,7 +68,7 @@ function ClientRouter() { {isAuth ? ( } /> ) : ( - } /> + } /> )} {isAuth ? ( Date: Fri, 25 Oct 2024 09:50:37 +0200 Subject: [PATCH 13/19] page size, default order added, id removed from ordering --- BackEnd/administration/filters.py | 1 - BackEnd/administration/pagination.py | 1 + BackEnd/administration/views.py | 4 +--- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/BackEnd/administration/filters.py b/BackEnd/administration/filters.py index 5827449cd..2a522ddc5 100644 --- a/BackEnd/administration/filters.py +++ b/BackEnd/administration/filters.py @@ -32,7 +32,6 @@ def filter_is_deleted(self, queryset, name, value): ordering = filters.OrderingFilter( fields=( - ("id", "id"), ("name", "name"), ("surname", "surname"), ("email", "email"), diff --git a/BackEnd/administration/pagination.py b/BackEnd/administration/pagination.py index 4e104712a..7d3548652 100644 --- a/BackEnd/administration/pagination.py +++ b/BackEnd/administration/pagination.py @@ -4,6 +4,7 @@ class ListPagination(PageNumberPagination): page_size_query_param = "page_size" + page_size = 20 def get_paginated_response(self, data): return Response( diff --git a/BackEnd/administration/views.py b/BackEnd/administration/views.py index 3d100d5f6..213c334ae 100644 --- a/BackEnd/administration/views.py +++ b/BackEnd/administration/views.py @@ -55,9 +55,7 @@ class UsersListView(ListAPIView): serializer_class = AdminUserListSerializer filter_backends = [DjangoFilterBackend] filterset_class = UsersFilter - - def get_queryset(self): - return CustomUser.objects.select_related("profile") + queryset = CustomUser.objects.select_related("profile").order_by("id") class UserDetailView(RetrieveUpdateDestroyAPIView): From 4b613425e3fb75ecfc9057b6289e2c398ae5357d Mon Sep 17 00:00:00 2001 From: Lvyshnevska Date: Fri, 25 Oct 2024 09:51:05 +0200 Subject: [PATCH 14/19] tests updated --- .../tests/test_admin_profiles.py | 2 +- .../administration/tests/test_admin_user.py | 56 ++++--------------- 2 files changed, 11 insertions(+), 47 deletions(-) diff --git a/BackEnd/administration/tests/test_admin_profiles.py b/BackEnd/administration/tests/test_admin_profiles.py index f81bb91d1..c4d4fd36d 100644 --- a/BackEnd/administration/tests/test_admin_profiles.py +++ b/BackEnd/administration/tests/test_admin_profiles.py @@ -75,7 +75,7 @@ def test_get_profiles_structure_json(self): } ] self.assertEqual(status.HTTP_200_OK, response.status_code) - self.assertEqual(data, response.json()) + self.assertEqual(data, response.data["results"]) def test_get_profile_id_authenticated(self): self.client.force_authenticate(self.user) diff --git a/BackEnd/administration/tests/test_admin_user.py b/BackEnd/administration/tests/test_admin_user.py index df94a5485..125db72c4 100644 --- a/BackEnd/administration/tests/test_admin_user.py +++ b/BackEnd/administration/tests/test_admin_user.py @@ -29,45 +29,9 @@ def setUp(self): AdminUserFactory.reset_sequence(1) self.user = self.users[0] - def test_get_users_ordering_desc(self): + def test_get_users_ordering_default(self): self.client.force_authenticate(self.user) - response = self.client.get(path="/api/admin/users/?ordering=-id") - data = [ - { - "id": 3, - "email": "test3@test.com", - "name": "Test person 3", - "surname": "Test person 3 surname", - "status": { - "is_active": True, - "is_staff": True, - "is_superuser": False, - "is_deleted": False, - }, - "company_name": None, - "registration_date": None, - }, - { - "id": 2, - "email": "test2@test.com", - "name": "Test person 2", - "surname": "Test person 2 surname", - "status": { - "is_active": True, - "is_staff": True, - "is_superuser": False, - "is_deleted": False, - }, - "company_name": None, - "registration_date": None, - }, - ] - self.assertEqual(response.status_code, status.HTTP_200_OK) - self.assertEqual(data, response.json()) - - def test_get_users_ordering_asc(self): - self.client.force_authenticate(self.user) - response = self.client.get(path="/api/admin/users/?ordering=id") + response = self.client.get(path="/api/admin/users/") data = [ { "id": 2, @@ -99,7 +63,7 @@ def test_get_users_ordering_asc(self): }, ] self.assertEqual(response.status_code, status.HTTP_200_OK) - self.assertEqual(data, response.json()) + self.assertEqual(data, response.data["results"]) def test_get_users_filter_id_surname(self): self.client.force_authenticate(self.user) @@ -121,7 +85,7 @@ def test_get_users_filter_id_surname(self): }, ] self.assertEqual(response.status_code, status.HTTP_200_OK) - self.assertEqual(data, response.json()) + self.assertEqual(data, response.data["results"]) class TestAdminUsersStatusAPITests(APITestCase): @@ -166,7 +130,7 @@ def test_get_users_filter_status_active_staff(self): }, ] self.assertEqual(response.status_code, status.HTTP_200_OK) - self.assertEqual(data, response.json()) + self.assertEqual(data, response.data["results"]) def test_get_users_filter_status_superuser_staff_active(self): self.client.force_authenticate(self.user) @@ -175,7 +139,7 @@ def test_get_users_filter_status_superuser_staff_active(self): ) data = [] self.assertEqual(response.status_code, status.HTTP_200_OK) - self.assertEqual(data, response.json()) + self.assertEqual(data, response.data["results"]) class TestAdminUsersAPITests(APITestCase): @@ -211,11 +175,11 @@ def test_get_users_authenticated(self): } ] self.assertEqual(response.status_code, status.HTTP_200_OK) - self.assertEqual(data, response.json()) + self.assertEqual(data, response.data["results"]) - def test_get_users_filter(self): + def test_get_users(self): self.client.force_authenticate(self.user) - response = self.client.get(path="/api/admin/users/?ordering=id") + response = self.client.get(path="/api/admin/users/") data = [ { "id": 2, @@ -233,7 +197,7 @@ def test_get_users_filter(self): } ] self.assertEqual(response.status_code, status.HTTP_200_OK) - self.assertEqual(data, response.json()) + self.assertEqual(data, response.data["results"]) def test_get_user_id_authenticated(self): self.client.force_authenticate(self.user) From b813f1357ecc376196ac6fb31e102a0db82e6312 Mon Sep 17 00:00:00 2001 From: romanmyko Date: Mon, 28 Oct 2024 18:26:15 +0200 Subject: [PATCH 15/19] main login baner css, deleted partner --- FrontEnd/src/global.css | 12 +- .../LandingPage/LoginBanner/LoginBanner.css | 183 ------------------ .../LandingPage/LoginBanner/LoginBanner.jsx | 56 ++---- .../LoginBanner/LoginBanner.module.css | 77 ++++++++ FrontEnd/src/pages/LandingPage/MainPage.jsx | 2 - .../pages/LandingPage/Partners/Partners.css | 97 ---------- .../pages/LandingPage/Partners/Partners.jsx | 57 ------ 7 files changed, 99 insertions(+), 385 deletions(-) delete mode 100644 FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.css create mode 100644 FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.module.css delete mode 100644 FrontEnd/src/pages/LandingPage/Partners/Partners.css delete mode 100644 FrontEnd/src/pages/LandingPage/Partners/Partners.jsx diff --git a/FrontEnd/src/global.css b/FrontEnd/src/global.css index 80b9f54dd..996efb1c2 100644 --- a/FrontEnd/src/global.css +++ b/FrontEnd/src/global.css @@ -77,8 +77,10 @@ /* Footer */ --footer-backround: #3C4044; --footer-font-color: #FFF; - --footer-links-font-color: #A0ABC0; + --footer-links-font-color: #FFF; --footer-bottom-backround: #333; + --footer-policy-links-font-color: #959595; + --footer-scroll-button: #B4D27A; /* main pages About block*/ --about-text-font-color: #292E32; @@ -90,11 +92,11 @@ --about-cards-font-color: #292E32; --about-cards-background-color: #F0F1F3; --about-cards-background-content-color: #FFF; - /* main pages Banner block*/ --banner-main-font-color: #000; - --banner-main-dark-color: #1F9A7C; - + --banner-main-color: #B4D27A; + --banner-main-batton-text-color: #FFF; + --banner-main-batton-color: black; /* CompanyCard */ --companies-card-text-color: #292e32; --companies-card-box-shadow: rgba(65, 64, 69, 0.2); @@ -113,6 +115,8 @@ --primary-green-80: #1f9a7c; --character-title-85: rgba(0, 0, 0, 0.85); + /*Login Page*/ + --min-height-login-page: calc(100vh - 528px); --wf-base-white: #FFF; --profile-min-height-block: calc(100vh - 565px); diff --git a/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.css b/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.css deleted file mode 100644 index dfad9f503..000000000 --- a/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.css +++ /dev/null @@ -1,183 +0,0 @@ -.login-banner-group { - width: var(--main-block-size); - height: 270px; - position: relative; -} - -.login-banner-group__rectangle { - width: var(--main-block-size); - height: 270px; - flex-shrink: 0; - background: #FFF; - left: 0; - top: 0; - position: absolute; -} - -.login-banner-group__content { - width: 1304px; - height: 198px; - flex-shrink: 0; - border-radius: 12px; - border: 1px solid #E2E5EB; - box-shadow: 0 0 2px 0 rgba(65, 64, 69, 0.20); - left: 104px; - top: 36px; - position: absolute; - overflow: hidden; -} - -.login-banner-group__content__rectangle { - width: 954px; - height: 198px; - flex-shrink: 0; - background: #1F9A7C; - left: 0; - top: 0; - position: absolute; - overflow: hidden; -} - -.login-banner-group__image { - width: 960px; - height: 210px; - flex-shrink: 0; - border-radius: 8px; - background: lightgray 50% / cover no-repeat; - position: relative; -} - -.login-banner-group__content__login-rectangle { - width: 350px; - height: 198px; - flex-shrink: 0; - background: #FFF; - left: 954px; - top: 0; - position: absolute; -} - -.login-banner-group__content__dots { - width: 63px; - height: 150px; - display: inline-flex; - flex-direction: column; - align-items: flex-start; - gap: 24px; - left: 17px; - top: 60px; - position: absolute; -} - -.login-banner-group__login-section-basic { - width: 1160px; - height: 38px; - flex-shrink: 0; - left: 104px; - top: 80px; - position: absolute; -} - -.login-banner-group__login-section { - display: inline-flex; - align-items: center; - gap: 121px; - left: 0; - top: 0; - position: absolute; -} - -.login-banner-group__text-section { - display: flex; - align-items: center; - gap: 10px; - filter: blur(3px); -} - -.login-banner-group__banner-text { - color: #FFF; - text-shadow: 0 6px 6px 0 rgba(72, 72, 72, 0.25); - font-family: var(--font-main); - font-size: 32px; - font-style: normal; - font-weight: 700; - line-height: 120%; - /* 38.4px */ - left: 209px; - top: 117px; - position: absolute; -} - -.login-banner-group__banner-shadow-text { - color: #59636A; - font-family: var(--font-main); - font-size: 32px; - font-style: normal; - font-weight: 700; - line-height: 120%; - /* 38.4px */ - left: 209px; - top: 117px; - position: absolute; -} - -.login-banner-group__login-buttons { - display: flex; - align-items: flex-start; - gap: 12px; - top: 5px; - left: 900px; - position: absolute; -} - -.login-banner-group__login-button { - display: flex; - padding: 5px 15px; - justify-content: center; - align-items: center; - gap: 10px; - border-radius: 4px; - border: 1px solid #1F9A7C; - background: #1F9A7C; - box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04); -} - -.login-banner-group__login-button-text { - color: #FFF; - text-align: center; - 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; - text-decoration: none; -} - -.login-banner-group__register-button { - display: flex; - padding: 5px 15px; - justify-content: center; - align-items: center; - gap: 10px; - border-radius: 4px; - border: 1px solid #1F9A7C; - background: #FFF; - box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.02); -} - -.login-banner-group__register-button-text { - color: #1F9A7C; - text-align: center; - 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; - text-decoration: none; -} \ No newline at end of file diff --git a/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.jsx b/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.jsx index a74da0070..3062d5cf4 100644 --- a/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.jsx +++ b/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.jsx @@ -1,51 +1,23 @@ -import './LoginBanner.css'; +import css from './LoginBanner.module.css'; import { Link } from 'react-router-dom'; const MainLoginBanner = () => { return ( -
-
-
-
- -
- dots_3x5W.png -
-
-
-
-
- - Увійти - -
-
- - Зареєстуватися - -
-
-
+
+
+

+ Майданчик для тих, хто втілює свої ідеї в життя. +

+
+ + Долучитися +
-
- Майданчик для тих, хто втілює свої ідеї в життя. -
-
- Майданчик для тих, хто втілює свої ідеї в життя. -
); }; diff --git a/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.module.css b/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.module.css new file mode 100644 index 000000000..b5f197154 --- /dev/null +++ b/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.module.css @@ -0,0 +1,77 @@ +.login-banner-group { + display: flex; + background: var(--banner-main-color); + width: 100vw; + justify-content: center; + +} + +.login-banner-group__content { + display: flex; + flex-direction: column; + justify-content: center; + width: 365px; + height: 208px; + gap: 24px; +} + + +.login-banner-group__text { + color: var(--banner-main-font-color, black); + font-feature-settings: 'calt' off; + font-family: var(--font-main); + font-size: 24px; + font-style: normal; + font-weight: 700; + line-height: 48px; + letter-spacing: 1%; + text-align: center; + +} + +.login-banner-group__button { + display: flex; + justify-content: center; +} + +.login-banner-group__button-text { + display: flex; + justify-content: center; + align-items: center; + color: var(--banner-main-batton-text-color, white); + font-feature-settings: 'calt' off; + font-family: var(--font-main); + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 20px; + letter-spacing: -1%; + text-decoration: none; + text-align: center; + width: 170px; + height: 46px; + background: var(--banner-main-batton-color, black); + border-radius: 4px; +} + +@media only screen and (min-width: 768px) { + .login-banner-group__content { + width: 694px; + height: 262px; + } + + .login-banner-group__text { + font-size: 40px; + } +} + +@media only screen and (min-width: 1512px) { + .login-banner-group__content { + width: 694px; + height: 326px; + } + + .login-banner-group__text { + font-size: 40px; + } +} diff --git a/FrontEnd/src/pages/LandingPage/MainPage.jsx b/FrontEnd/src/pages/LandingPage/MainPage.jsx index 82527e016..edc5cccdd 100644 --- a/FrontEnd/src/pages/LandingPage/MainPage.jsx +++ b/FrontEnd/src/pages/LandingPage/MainPage.jsx @@ -1,6 +1,5 @@ import { useState } from 'react'; import MainBanner from './Banner/Banner'; -// import MainPartners from './partners/Partners'; import MainCompanies from './Companies/Companies'; import MainLoginBanner from './LoginBanner/LoginBanner'; import MainAboutSection from './AboutSection/About'; @@ -19,7 +18,6 @@ const MainPage = ({ isAuthorized }) => {
- {/* */} {!isAuthorized ? : null}
diff --git a/FrontEnd/src/pages/LandingPage/Partners/Partners.css b/FrontEnd/src/pages/LandingPage/Partners/Partners.css deleted file mode 100644 index b7c34f50c..000000000 --- a/FrontEnd/src/pages/LandingPage/Partners/Partners.css +++ /dev/null @@ -1,97 +0,0 @@ -.partners-section { - width: 1304px; - display: flex; - padding: 80px 104px; - flex-direction: column; - align-items: flex-start; - gap: 24px; - background: #FFF; -} - -.partners-section__header { - display: flex; - align-items: center; - gap: 800px; -} -.partners-section__header-text { - width: 444px; - color: #292E32; - font-family: var(--font-main); - font-size: 20px; - font-style: normal; - font-weight: 700; - line-height: 120%; /* 24px */ - text-transform: uppercase; -} - -.partners-section__navi-icons { - display: flex; - align-items: flex-start; - gap: 12px; - z-index: 1; -} -.partners-section__navi-icon { - display: flex; - width: 24px; - height: 24px; - padding: 2px; - justify-content: center; - align-items: center; -} -.partners-section__icon { - width: 20px; - height: 20px; - flex-shrink: 0; -} -.partners-section__images { - height: 70px; - display: flex; - justify-content: center; - align-items: center; - gap: 50px; - background: #FFF; -} -.partners-section__image1 { - width: 57.692px; - height: 60px; -} -.partners-section__image2 { - width: 121.724px; - height: 60px; -} -.partners-section__image3 { - width: 230px; - height: 98px; - flex-shrink: 0; -} -.partners-section__image4 { - width: 212px; - height: 104px; - flex-shrink: 0; -} -.partners-section__image5 { - width: 156.415px; - height: 60px; -} -.partners-section__image6 { - width: 336.168px; - height: 206.037px; - flex-shrink: 0; -} -.partners-section__image1, -.partners-section__image5, -.partners-section__image2, -.partners-section__image3, -.partners-section__image4, -.partners-section__image6 { - transition: transform 0.2s ease; -} - -.partners-section__image1:hover, -.partners-section__image5:hover, -.partners-section__image2:hover, -.partners-section__image3:hover, -.partners-section__image4:hover, -.partners-section__image6:hover { - transform: scale(1.1); -} \ No newline at end of file diff --git a/FrontEnd/src/pages/LandingPage/Partners/Partners.jsx b/FrontEnd/src/pages/LandingPage/Partners/Partners.jsx deleted file mode 100644 index f2042874a..000000000 --- a/FrontEnd/src/pages/LandingPage/Partners/Partners.jsx +++ /dev/null @@ -1,57 +0,0 @@ -import './Partners.css'; - -const MainPartners = () => { - return ( -
-
-
партнери
-
-
-
- Left navigation -
-
-
-
- Right navigation -
-
-
-
-
- - - - - - -
-
- ); -}; - -export default MainPartners; From 696dd1fdad3ae6f827f32044cfe9db69d023f0d7 Mon Sep 17 00:00:00 2001 From: romanmyko Date: Wed, 30 Oct 2024 22:06:00 +0200 Subject: [PATCH 16/19] font corection --- .../pages/LandingPage/LoginBanner/LoginBanner.jsx | 2 +- .../LandingPage/LoginBanner/LoginBanner.module.css | 14 ++++---------- 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.jsx b/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.jsx index 3062d5cf4..b6e27202b 100644 --- a/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.jsx +++ b/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.jsx @@ -6,7 +6,7 @@ const MainLoginBanner = () => {

- Майданчик для тих, хто втілює свої ідеї в життя. + Майданчик для тих, хто втілює свої ідеї в життя

Date: Thu, 31 Oct 2024 11:07:53 +0200 Subject: [PATCH 17/19] format css in mainPage --- FrontEnd/src/pages/LandingPage/MainPage.module.css | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/FrontEnd/src/pages/LandingPage/MainPage.module.css b/FrontEnd/src/pages/LandingPage/MainPage.module.css index 8e21df79e..22a692266 100644 --- a/FrontEnd/src/pages/LandingPage/MainPage.module.css +++ b/FrontEnd/src/pages/LandingPage/MainPage.module.css @@ -1,16 +1,13 @@ .main-app { - width: var(--main-block-size); - border-radius: 8px; - background: #FFF; - margin-left: auto; - margin-right: auto; + width: 100vw; } .main-app-body { + display: flex; flex-direction: column; - align-items: center; } .main-app-header { + display: flex; flex-direction: column; } From 3a81c3c327182f831ae5ba11c92686e3206e7ad4 Mon Sep 17 00:00:00 2001 From: romanmyko Date: Thu, 31 Oct 2024 15:14:47 +0200 Subject: [PATCH 18/19] rename main baner to JoinUs block --- FrontEnd/src/global.css | 18 ++++++------- .../src/pages/LandingPage/JoinUs/JoinUs.jsx | 25 +++++++++++++++++++ .../JoinUs.module.css} | 24 +++++++++--------- .../LandingPage/LoginBanner/LoginBanner.jsx | 25 ------------------- FrontEnd/src/pages/LandingPage/MainPage.jsx | 24 +++++++----------- .../src/pages/LandingPage/MainPage.module.css | 10 -------- 6 files changed, 53 insertions(+), 73 deletions(-) create mode 100644 FrontEnd/src/pages/LandingPage/JoinUs/JoinUs.jsx rename FrontEnd/src/pages/LandingPage/{LoginBanner/LoginBanner.module.css => JoinUs/JoinUs.module.css} (70%) delete mode 100644 FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.jsx diff --git a/FrontEnd/src/global.css b/FrontEnd/src/global.css index 996efb1c2..7cf43db33 100644 --- a/FrontEnd/src/global.css +++ b/FrontEnd/src/global.css @@ -77,26 +77,24 @@ /* Footer */ --footer-backround: #3C4044; --footer-font-color: #FFF; - --footer-links-font-color: #FFF; + --footer-links-font-color: #A0ABC0; --footer-bottom-backround: #333; - --footer-policy-links-font-color: #959595; - --footer-scroll-button: #B4D27A; - /* 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-cards-font-color: #292E32; --about-cards-background-color: #F0F1F3; --about-cards-background-content-color: #FFF; /* main pages Banner block*/ --banner-main-font-color: #000; - --banner-main-color: #B4D27A; - --banner-main-batton-text-color: #FFF; - --banner-main-batton-color: black; + --banner-main-dark-color: #1F9A7C; + /* main pages JoinUs block*/ + --join-us-batton-color: black; + --join-us-main-color: #B4D27A; + --join-us-font-color: black; + --join-us-batton-text-color: white; /* CompanyCard */ --companies-card-text-color: #292e32; --companies-card-box-shadow: rgba(65, 64, 69, 0.2); @@ -115,8 +113,6 @@ --primary-green-80: #1f9a7c; --character-title-85: rgba(0, 0, 0, 0.85); - /*Login Page*/ - --min-height-login-page: calc(100vh - 528px); --wf-base-white: #FFF; --profile-min-height-block: calc(100vh - 565px); diff --git a/FrontEnd/src/pages/LandingPage/JoinUs/JoinUs.jsx b/FrontEnd/src/pages/LandingPage/JoinUs/JoinUs.jsx new file mode 100644 index 000000000..0bf3d17ef --- /dev/null +++ b/FrontEnd/src/pages/LandingPage/JoinUs/JoinUs.jsx @@ -0,0 +1,25 @@ +import css from './JoinUs.module.css'; +import { Link } from 'react-router-dom'; + +const JoinUs = () => { + return ( +
+
+

+ Майданчик для тих, хто втілює свої ідеї в життя +

+
+ + Долучитися + +
+
+
+ ); +}; + +export default JoinUs; diff --git a/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.module.css b/FrontEnd/src/pages/LandingPage/JoinUs/JoinUs.module.css similarity index 70% rename from FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.module.css rename to FrontEnd/src/pages/LandingPage/JoinUs/JoinUs.module.css index c1025d089..e3d426c37 100644 --- a/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.module.css +++ b/FrontEnd/src/pages/LandingPage/JoinUs/JoinUs.module.css @@ -1,11 +1,11 @@ -.login-banner-group { +.join-us { display: flex; - background: var(--banner-main-color); + background: var(--join-us-main-color); width: 100vw; justify-content: center; } -.login-banner-group__content { +.join-us__content { display: flex; flex-direction: column; justify-content: center; @@ -15,8 +15,8 @@ } -.login-banner-group__text { - color: var(--banner-main-font-color, black); +.join-us__text { + color: var(--join-us-font-color, black); font-feature-settings: 'calt' off; font-family: var(--font-main); font-size: 24px; @@ -27,16 +27,16 @@ text-align: center; } -.login-banner-group__button { +.join-us__button { display: flex; justify-content: center; } -.login-banner-group__button-text { +.join-us__button-text { display: flex; justify-content: center; align-items: center; - color: var(--banner-main-batton-text-color, white); + color: var(--join-us-batton-text-color, white); font-feature-settings: 'calt' off; font-family: var(--font-main); font-size: 16px; @@ -48,24 +48,24 @@ text-align: center; width: 170px; height: 46px; - background: var(--banner-main-batton-color, black); + background: var(--join-us-batton-color, black); border-radius: 4px; } @media only screen and (min-width: 768px) { - .login-banner-group__content { + .join-us__content { width: 694px; height: 262px; } - .login-banner-group__text { + .join-us__text { font-size: 40px; line-height: 48px; } } @media only screen and (min-width: 1512px) { - .login-banner-group__content { + .join-us__content { height: 326px; } } diff --git a/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.jsx b/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.jsx deleted file mode 100644 index b6e27202b..000000000 --- a/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.jsx +++ /dev/null @@ -1,25 +0,0 @@ -import css from './LoginBanner.module.css'; -import { Link } from 'react-router-dom'; - -const MainLoginBanner = () => { - return ( -
-
-

- Майданчик для тих, хто втілює свої ідеї в життя -

-
- - Долучитися - -
-
-
- ); -}; - -export default MainLoginBanner; diff --git a/FrontEnd/src/pages/LandingPage/MainPage.jsx b/FrontEnd/src/pages/LandingPage/MainPage.jsx index edc5cccdd..5cdf613c3 100644 --- a/FrontEnd/src/pages/LandingPage/MainPage.jsx +++ b/FrontEnd/src/pages/LandingPage/MainPage.jsx @@ -1,7 +1,7 @@ import { useState } from 'react'; import MainBanner from './Banner/Banner'; import MainCompanies from './Companies/Companies'; -import MainLoginBanner from './LoginBanner/LoginBanner'; +import JoinUs from './JoinUs/JoinUs'; import MainAboutSection from './AboutSection/About'; import CookieMod from '../../components/CookieAcception/CookieMod'; import css from './MainPage.module.css'; @@ -14,20 +14,14 @@ const MainPage = ({ isAuthorized }) => { const [modalActive, setModalActive] = useState(true); return (
-
- -
- - {!isAuthorized ? : null} - -
- -
-
-
+ + + {!isAuthorized ? : null} + +
); }; diff --git a/FrontEnd/src/pages/LandingPage/MainPage.module.css b/FrontEnd/src/pages/LandingPage/MainPage.module.css index 22a692266..c585079d7 100644 --- a/FrontEnd/src/pages/LandingPage/MainPage.module.css +++ b/FrontEnd/src/pages/LandingPage/MainPage.module.css @@ -1,13 +1,3 @@ .main-app { - width: 100vw; -} - -.main-app-body { - display: flex; - flex-direction: column; -} - -.main-app-header { - display: flex; flex-direction: column; } From a2391d249eb4536a140fb06a00fd7b8f073f49f3 Mon Sep 17 00:00:00 2001 From: romanmyko Date: Thu, 31 Oct 2024 15:20:26 +0200 Subject: [PATCH 19/19] add display flex in main-app --- FrontEnd/src/pages/LandingPage/MainPage.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/FrontEnd/src/pages/LandingPage/MainPage.module.css b/FrontEnd/src/pages/LandingPage/MainPage.module.css index c585079d7..c254f7e2a 100644 --- a/FrontEnd/src/pages/LandingPage/MainPage.module.css +++ b/FrontEnd/src/pages/LandingPage/MainPage.module.css @@ -1,3 +1,4 @@ .main-app { + display: flex; flex-direction: column; }