From 1f107a09674545d1b7fa646ff3611a2abf154f29 Mon Sep 17 00:00:00 2001 From: Vo7kov Date: Fri, 21 Jul 2023 23:40:09 +0300 Subject: [PATCH 01/60] add basic layout and 404 page --- README.md | 262 ++++++++++-------- src/App.scss | 4 +- src/App.tsx | 16 +- src/Root.tsx | 36 +++ src/components/Buttons/Button.scss | 13 + .../Buttons/MainButton/MainButton.scss | 48 ++++ .../Buttons/MainButton/MainButton.tsx | 25 ++ src/components/Footer/Footer.scss | 157 +++++++++++ src/components/Footer/Footer.tsx | 69 +++++ src/components/Header/Header.scss | 60 ++++ src/components/Header/Header.tsx | 51 ++++ src/components/NavItem/NavItem.tsx | 65 +++++ src/helpers/NavLinks.ts | 33 +++ src/helpers/makeUrl.ts | 15 + src/helpers/setUrl.ts | 27 ++ src/images/404.svg | 4 + src/images/burger.svg | 5 + src/images/cursor.png | Bin 0 -> 1307 bytes src/images/logo.svg | 1 + src/images/selectAfter.svg | 3 + src/images/social/instagram.svg | 6 + src/images/social/pinterest.svg | 10 + src/images/social/tikTok.svg | 4 + src/index.tsx | 5 +- src/pages/HomePage/HomePage.scss | 1 + src/pages/HomePage/HomePage.tsx | 15 + src/pages/Page404/Page404.scss | 51 ++++ src/pages/Page404/Page404.tsx | 36 +++ src/styles/icon.scss | 66 +++++ src/styles/page.scss | 9 + src/styles/utils/container.scss | 4 + src/styles/utils/grid.scss | 16 ++ src/styles/utils/mixins.scss | 3 + src/styles/utils/mixins/font.scss | 22 ++ src/styles/utils/mixins/media.scss | 11 + src/styles/utils/mixins/transitions.scss | 12 + src/styles/utils/normalize.scss | 36 +++ src/styles/utils/utils.scss | 5 + src/styles/utils/variables.scss | 3 + src/styles/utils/variables/colors.scss | 17 ++ src/styles/utils/variables/params.scss | 1 + src/styles/utils/variables/z-index.scss | 5 + src/types/ButtonText.ts | 3 + src/types/NavLinks.ts | 17 ++ 44 files changed, 1133 insertions(+), 119 deletions(-) create mode 100644 src/Root.tsx create mode 100644 src/components/Buttons/Button.scss create mode 100644 src/components/Buttons/MainButton/MainButton.scss create mode 100644 src/components/Buttons/MainButton/MainButton.tsx create mode 100644 src/components/Footer/Footer.scss create mode 100644 src/components/Footer/Footer.tsx create mode 100644 src/components/Header/Header.scss create mode 100644 src/components/Header/Header.tsx create mode 100644 src/components/NavItem/NavItem.tsx create mode 100644 src/helpers/NavLinks.ts create mode 100644 src/helpers/makeUrl.ts create mode 100644 src/helpers/setUrl.ts create mode 100644 src/images/404.svg create mode 100644 src/images/burger.svg create mode 100644 src/images/cursor.png create mode 100644 src/images/logo.svg create mode 100644 src/images/selectAfter.svg create mode 100644 src/images/social/instagram.svg create mode 100644 src/images/social/pinterest.svg create mode 100644 src/images/social/tikTok.svg create mode 100644 src/pages/HomePage/HomePage.scss create mode 100644 src/pages/HomePage/HomePage.tsx create mode 100644 src/pages/Page404/Page404.scss create mode 100644 src/pages/Page404/Page404.tsx create mode 100644 src/styles/icon.scss create mode 100644 src/styles/page.scss create mode 100644 src/styles/utils/container.scss create mode 100644 src/styles/utils/grid.scss create mode 100644 src/styles/utils/mixins.scss create mode 100644 src/styles/utils/mixins/font.scss create mode 100644 src/styles/utils/mixins/media.scss create mode 100644 src/styles/utils/mixins/transitions.scss create mode 100644 src/styles/utils/normalize.scss create mode 100644 src/styles/utils/utils.scss create mode 100644 src/styles/utils/variables.scss create mode 100644 src/styles/utils/variables/colors.scss create mode 100644 src/styles/utils/variables/params.scss create mode 100644 src/styles/utils/variables/z-index.scss create mode 100644 src/types/ButtonText.ts create mode 100644 src/types/NavLinks.ts diff --git a/README.md b/README.md index efb45c226a..9430c139bd 100644 --- a/README.md +++ b/README.md @@ -1,118 +1,160 @@ -# React Phone catalog -- If you work alone follow the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline) -- If you work in a team follow the [Work in a team guideline](https://github.com/mate-academy/react_task-guideline/blob/master/team-flow.md#how-to-work-in-a-team) +# React Cloth catalog (PET Project) [Link](https://vo7kov.github.io/react_cloth-catalog/) ## Description -Implement Products catalog following [this design](https://www.figma.com/file/uEetgWenSRxk9jgiym6Yzp/Phone-catalog-redesign?node-id=1%3A2). - -Use [products](https://mate-academy.github.io/react_phone-catalog/api/products.json) -and [product details](https://mate-academy.github.io/react_phone-catalog/api/products/dell-streak-7.json) -tо fetch data (use actual `productId` as a last part of the URL before `.json`). - -Store the Cart in the `localStorage` +I have my own **UI design ([Link](https://www.figma.com/file/xejFOilkG3UWJZcGlZTUiT/Kuroso.ee?type=design&node-id=0%3A1&mode=design&t=pdYLMT5ezAqbwqIc-1))** and I've decided to compare pleasure with useful. I'll make my own `cloth` catalog in this project. +
+I have my own server where I'll fetch all data **([Link](https://gosyanich.cloudns.nz:9353/kuroso/goods.json))**. I can't update the data, because I haven't learn how to write my own `API` yet. +
+Also, at this moment there is only one good to test (may be I'll need more fields to good). +
+Last thing I want to add is that I made arrangements with my coordinator. ## Tasks -- Create `pages`, `components` and `helpers` folders to structure your app -- Use `scss` files per component -- Use component names as BEM block names with all the other BEM rules applied +There is a checklist for all pages, that I'm going to implement: ### App -1. Add `
` with links to all the pages - - The `Logo` and the `Nav` are aligned left - - The `Favorites` and the `Cart` are aligned right -1. Use `NavLink` to highlight current page in `Header` -1. Add `
-)); + + ); +}); diff --git a/src/components/NavItem/NavItem.tsx b/src/components/NavItem/NavItem.tsx deleted file mode 100644 index 7017cb9fe9..0000000000 --- a/src/components/NavItem/NavItem.tsx +++ /dev/null @@ -1,69 +0,0 @@ -/* eslint-disable react/require-default-props */ -import React from 'react'; -import classNames from 'classnames'; -import { NavLink } from 'react-router-dom'; - -import { makeUrl } from '../../helpers/makeUrl'; -import { setUrl } from '../../helpers/setUrl'; - -type Props = { - item: string, - isDesktop?: boolean, - defaultLiClass: string, - defaultLinkClass: string, - mobileClass?: string, - desktopClass?: string, - onClick?: () => void, -}; - -export const NavItem: React.FC = ({ - item, - isDesktop = false, - defaultLiClass, - defaultLinkClass, - mobileClass = '', - desktopClass = '', - onClick = () => {}, -}) => { - return ( -
  • - {( - item.includes('logo') - || item.includes('burger') - || item.includes('instagram') - || item.includes('tikTok') - || item.includes('pinterest') - || item.includes('close')) - ? ( - -
    - - ) : ( - - {item} - - )} -
    • - ); -}; diff --git a/src/helpers/NavLinks.ts b/src/helpers/NavLinks.ts index d8b440d929..746e69a077 100644 --- a/src/helpers/NavLinks.ts +++ b/src/helpers/NavLinks.ts @@ -1,47 +1,22 @@ -import { NavLinks } from '../types/NavLinks'; +import { NavLink } from '../types/NavLink'; -export const HEADER_MOBILE_NAV_ITEMS = [ - NavLinks.Burger, - NavLinks.Logo, - NavLinks.Bag, +export const HEADER_LEFT_NAV_LINKS = [ + NavLink.NewArrivals, + NavLink.AllGender, + NavLink.LookBook, + NavLink.Search, ]; -export const HEADER_DESKTOP_NAV_ITEMS = [ - NavLinks.NewArrivals, - NavLinks.AllGender, - NavLinks.LookBook, - NavLinks.Search, - NavLinks.Logo, - NavLinks.Delivering, - NavLinks.Bag, - NavLinks.WishList, - NavLinks.Profile, +export const HEADER_RIGHT_NAV_LINKS = [ + NavLink.Delivering, + NavLink.Bag, + NavLink.WishList, + NavLink.Profile, ]; -export const BURGER_NAV_ITEMS = [ - NavLinks.Logo, - NavLinks.Close, -]; - -export const BURGER_ITEMS = [ - NavLinks.NewArrivals, - NavLinks.AllGender, - NavLinks.LookBook, - NavLinks.Delivering, - NavLinks.WishList, - NavLinks.Profile, -]; - -export const FOOTER_NAV_ITEMS = [ - NavLinks.Logo, - NavLinks.NewArrivals, - NavLinks.LookBook, - NavLinks.ContactUs, - NavLinks.Delivering, -]; - -export const FOOTER_SOCIAL_ITEMS = [ - NavLinks.Instagram, - NavLinks.TikTok, - NavLinks.Pinterest, +export const FOOTER_NAV_LINKS = [ + NavLink.NewArrivals, + NavLink.LookBook, + NavLink.ContactUs, + NavLink.Delivering, ]; diff --git a/src/helpers/getScreenType.ts b/src/helpers/getScreenType.ts new file mode 100644 index 0000000000..e6e7bf934c --- /dev/null +++ b/src/helpers/getScreenType.ts @@ -0,0 +1,17 @@ +import { Resolutions } from '../types/Resolutions'; + +export const getScreenType = () => { + switch (true) { + case window.matchMedia('(min-width: 1280px)').matches: { + return Resolutions.Desktop; + } + + case window.matchMedia('(min-width: 768px)').matches: { + return Resolutions.Tablet; + } + + default: { + return Resolutions.Mobile; + } + } +}; diff --git a/src/helpers/makeUrl.ts b/src/helpers/makeUrl.ts index eb367711dc..39ee72f17b 100644 --- a/src/helpers/makeUrl.ts +++ b/src/helpers/makeUrl.ts @@ -1,14 +1,16 @@ -export const makeUrl = (word: string) => { - let result = word[0].toLowerCase(); +export const makeUrl = (param: string) => { + let result = ''; + const normalizedParam = param.toLowerCase(); - for (let index = 1; index < word.length; index += 1) { - if (word[index] === ' ') { - result += word[index + 1].toUpperCase() + word.slice(index + 2); + for (let index = 0; index < normalizedParam.length; index += 1) { + if (normalizedParam[index] === ' ') { + result += normalizedParam[index + 1].toUpperCase() + + normalizedParam.slice(index + 2); return result; } - result += word[index]; + result += normalizedParam[index].toLowerCase(); } return result; diff --git a/src/helpers/setUrl.ts b/src/helpers/setUrl.ts deleted file mode 100644 index c70030c9f7..0000000000 --- a/src/helpers/setUrl.ts +++ /dev/null @@ -1,28 +0,0 @@ -export const setUrl = (item: string) => { - switch (true) { - case item.includes('logo'): - case item.includes('close'): { - return '/'; - } - - case item.includes('burger'): { - return 'burger'; - } - - case item.includes('instagram'): { - return 'https://instagram.com'; - } - - case item.includes('tikTok'): { - return 'https://tiktok.com'; - } - - case item.includes('pinterest'): { - return 'https://pinterest.com'; - } - - default: { - return ''; - } - } -}; diff --git a/src/images/logo.svg b/src/images/logo.svg index 26cd2378df..3480917670 100644 --- a/src/images/logo.svg +++ b/src/images/logo.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/src/pages/Page404/Page404.tsx b/src/pages/Page404/Page404.tsx index b6430c5b66..5f6cc4b68a 100644 --- a/src/pages/Page404/Page404.tsx +++ b/src/pages/Page404/Page404.tsx @@ -3,7 +3,6 @@ import { Link } from 'react-router-dom'; import { MainButton } from '../../components/Buttons/MainButton/MainButton'; -import { NavLinks } from '../../types/NavLinks'; import { ButtonText } from '../../types/ButtonText'; import './Page404.scss'; @@ -16,9 +15,7 @@ export const Page404: React.FC = React.memo(() => ( -
    - + />

    Sorry, we couldn`t find this page diff --git a/src/styles/icon.scss b/src/styles/icon.scss index 01a940eb2b..b66256bda2 100644 --- a/src/styles/icon.scss +++ b/src/styles/icon.scss @@ -1,73 +1,19 @@ -@import "./utils/utils.scss"; +@import "./utils.scss"; .icon { - display: block; - &__image { - --logo-height: 100px; - --logo-width: 140px; - --height-404: 200px; + &--logo { + height: 100px; - background-position: center; - background-repeat: no-repeat; - background-size: contain; + fill: $red-600; + transition: fill $animationDuration; - &--logo { - width: var(--logo-width); - height: var(--logo-height); - - background-image: url("../images/logo.svg"); - - @include onTablet { - --logo-height: 120px; - --logo-width: 150px; - } - - @include onDesktop { - --logo-height: 140px; - } - } - - &--burger { - height: 24px; - background-image: url("../images/burger.svg"); - } - - &--404 { - height: var(--height-404); - background-image: url("../images/404.svg"); - - @include onTablet { - --height-404: 350px; - } - } - - &--instagram { - width: 40px; - height: 40px; - - background-image: url("../images/social/instagram.svg"); - } - - &--tikTok { - width: 40px; - height: 40px; - - background-image: url("../images/social/tikTok.svg"); - } - - &--pinterest { - width: 40px; - height: 40px; - - background-image: url("../images/social/pinterest.svg"); + &:hover { + fill: $red-700; } + } - &--close { - width: 16px; - height: 16px; - - background-image: url("../images/close.svg"); - } + &--burger { + height: 20px; } -} +} \ No newline at end of file diff --git a/src/styles/utils.scss b/src/styles/utils.scss new file mode 100644 index 0000000000..ec50ee43d0 --- /dev/null +++ b/src/styles/utils.scss @@ -0,0 +1,5 @@ +@import "./utils/normalize.scss"; +@import "./utils/container.scss"; +@import "./utils/grid.scss"; +@import "./utils/variables.scss"; +@import "./utils/mixins.scss"; diff --git a/src/styles/utils/utils.scss b/src/styles/utils/utils.scss deleted file mode 100644 index e444c270b7..0000000000 --- a/src/styles/utils/utils.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import "./normalize.scss"; -@import "./container.scss"; -@import "./grid.scss"; -@import "./variables.scss"; -@import "./mixins.scss"; diff --git a/src/types/NavLink.ts b/src/types/NavLink.ts new file mode 100644 index 0000000000..d3818216ff --- /dev/null +++ b/src/types/NavLink.ts @@ -0,0 +1,11 @@ +export enum NavLink { + NewArrivals = 'New Arrivals', + AllGender = 'All gender', + LookBook = 'Look Book', + Search = 'Search', + Delivering = 'Delivering', + Bag = 'Bag', + WishList = 'Wish List', + Profile = 'Profile', + ContactUs = 'Contact us', +} diff --git a/src/types/NavLinks.ts b/src/types/NavLinks.ts deleted file mode 100644 index 8b32ceaa84..0000000000 --- a/src/types/NavLinks.ts +++ /dev/null @@ -1,18 +0,0 @@ -export enum NavLinks { - NewArrivals = 'New arrivals', - AllGender = 'All gender', - LookBook = 'Look book', - Search = 'Search', - Logo = 'icon__image--logo', - Delivering = 'Delivering', - Bag = 'Bag', - WishList = 'Wish list', - Profile = 'Profile', - Burger = 'icon__image--burger', - NotFound = 'icon__image--404', - ContactUs = 'Contact us', - Instagram = 'icon__image--instagram', - TikTok = 'icon__image--tikTok', - Pinterest = 'icon__image--pinterest', - Close = 'icon__image--close', -} diff --git a/src/types/Resolutions.ts b/src/types/Resolutions.ts new file mode 100644 index 0000000000..2a075bd9a1 --- /dev/null +++ b/src/types/Resolutions.ts @@ -0,0 +1,5 @@ +export enum Resolutions { + Mobile = 'Mobile', + Tablet = 'Tablet', + Desktop = 'Desktop', +} From 5e54e0cdf6044de6590865274c9820e9f1208b91 Mon Sep 17 00:00:00 2001 From: Vo7kov Date: Thu, 10 Aug 2023 18:01:47 +0300 Subject: [PATCH 06/60] commit for chat --- src/styles/icon.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/icon.scss b/src/styles/icon.scss index b66256bda2..9994f3566e 100644 --- a/src/styles/icon.scss +++ b/src/styles/icon.scss @@ -16,4 +16,4 @@ &--burger { height: 20px; } -} \ No newline at end of file +} From f832a811aab2daa710ac20526021ac1d6752ff9f Mon Sep 17 00:00:00 2001 From: Vo7kov Date: Fri, 11 Aug 2023 18:23:39 +0300 Subject: [PATCH 07/60] header and footer were refactored --- package.json | 4 +- src/App.tsx | 3 + src/components/Footer/Footer.scss | 156 +++++++++++++++++++++++++++ src/components/Footer/Footer.tsx | 158 ++++++++++++++++++++++++++++ src/components/Header/Header.scss | 15 +-- src/components/Header/Header.tsx | 23 +--- src/components/Logo/Logo.tsx | 31 ++++++ src/helpers/getScreenType.ts | 2 +- src/images/selectAfterHover.svg | 3 + src/styles/icon.scss | 12 ++- src/styles/utils/mixins.scss | 1 + src/styles/utils/mixins/blocks.scss | 20 ++++ src/styles/utils/mixins/font.scss | 20 ++-- src/styles/utils/mixins/media.scss | 2 +- src/styles/utils/normalize.scss | 5 + 15 files changed, 413 insertions(+), 42 deletions(-) create mode 100644 src/components/Footer/Footer.scss create mode 100644 src/components/Footer/Footer.tsx create mode 100644 src/components/Logo/Logo.tsx create mode 100644 src/images/selectAfterHover.svg create mode 100644 src/styles/utils/mixins/blocks.scss diff --git a/package.json b/package.json index fca7537c46..7928ff721f 100755 --- a/package.json +++ b/package.json @@ -13,7 +13,8 @@ "react-dom": "^17.0.2", "react-router": "^6.14.2", "react-router-dom": "^6.14.2", - "react-scripts": "^4.0.3" + "react-scripts": "^4.0.3", + "react-transition-group": "^4.4.5" }, "devDependencies": { "@cypress/webpack-dev-server": "^1.8.4", @@ -26,6 +27,7 @@ "@types/node": "^17.0.23", "@types/react": "^17.0.43", "@types/react-dom": "^17.0.14", + "@types/react-transition-group": "^4.4.6", "cypress": "^9.5.3", "eslint": "^7.32.0", "eslint-plugin-cypress": "^2.11.2", diff --git a/src/App.tsx b/src/App.tsx index 6ea9c499b3..dc51d09cdf 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,11 +2,14 @@ import React from 'react'; import { Outlet as Main } from 'react-router-dom'; import { Header } from './components/Header/Header'; +import { Footer } from './components/Footer/Footer'; + import './App.scss'; export const App: React.FC = () => (

    +
    ); diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss new file mode 100644 index 0000000000..dd268ed910 --- /dev/null +++ b/src/components/Footer/Footer.scss @@ -0,0 +1,156 @@ +@import "../../styles/utils.scss"; + +.footer { + padding-bottom: 60px; + + &__content { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(3, min-content); + + align-items: center; + justify-items: center; + + @include onTablet { + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(2, min-content); + } + } + + &__nav { + grid-column: 1/3; + width: 100%; + + list-style: none; + + @include onTablet { + grid-column: 2/4; + } + } + + &__nav-list { + list-style: none; + + @include onDesktop { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(2, min-content); + } + } + + &__nav-list-item { + display: flex; + justify-content: center; + + &:first-child { + + @include onDesktop { + grid-column: 1/5; + } + } + + &:nth-child(2) { + margin-top: 32px; + } + + &:nth-last-child(-n + 3) { + margin-top: 24px; + } + + &:not(:first-child) { + + @include onDesktop { + margin-top: 24px; + } + } + } + + &__nav-list-link { + @include NavLink; + } + + &__info { + grid-column: 1/3; + grid-row: 2/2; + + display: flex; + align-items: center; + justify-content: space-between; + + margin-top: 60px; + width: 100%; + } + + &__lang-button { + grid-column: 1/2; + + position: relative; + margin-top: 60px; + + font-size: 18px; + font-weight: 400; + + &::after { + @include selectAfter; + + right: -24px; + } + + &:hover { + + &::after { + @include selectAfterHover; + } + } + + @include onTablet { + grid-row: 1/1; + margin-top: 0; + } + } + + &__social-list { + grid-column: 2/3; + grid-row: 2/2; + + margin-top: 60px; + + display: flex; + gap: 16px; + + list-style: none; + + @include onTablet { + grid-column: 4/4; + grid-row: 1/1; + + margin-top: 0; + } + } + + &__copyright { + grid-column: 1/3; + grid-row: 3/3; + + margin-top: 60px; + + text-align: center; + + @include onTablet { + grid-column: 1/5; + } + } + + &__copyright-link { + text-decoration: none; + color: $red-600; + + transition: color $animationDuration; + + @include onDesktop { + &:hover { + color: $red-700; + } + } + } +} diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx new file mode 100644 index 0000000000..4a8d224761 --- /dev/null +++ b/src/components/Footer/Footer.tsx @@ -0,0 +1,158 @@ +/* eslint-disable max-len */ +import React from 'react'; +import { NavLink, Link } from 'react-router-dom'; + +import { makeUrl } from '../../helpers/makeUrl'; +import { FOOTER_NAV_LINKS } from '../../helpers/NavLinks'; + +import { Logo } from '../Logo/Logo'; + +import './Footer.scss'; + +export const Footer: React.FC = React.memo(() => { + return ( +
    +
    +
    + + + + +
      +
    • + + + + + + + + + + + +
      • + +
    • + + + + + + + +
      • + +
    • + + + + + + + + + + + + + +
      • +
    + +

    + © + {' '} + {`Kuroso, ${new Date().toDateString().slice(11)}`} +
    + Design & Development - + {' '} + + Jegor Volkov + +

    +
    +
    +
    + ); +}); diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss index 6cc838a0e8..a6988baad8 100644 --- a/src/components/Header/Header.scss +++ b/src/components/Header/Header.scss @@ -1,22 +1,25 @@ @import "../../styles/utils.scss"; .header { + margin-top: 20px; &__nav-list { - list-style: none; - display: grid; grid-template-columns: min-content 1fr min-content; align-items: center; + + list-style: none; + + @include onDesktop { + grid-template-columns: repeat(9, 1fr); + } } &__nav-list-item { width: 100%; } - &__nav-list-button { - background: none; - border: none; - cursor: pointer; + &__nav-list-link { + @include NavLink; } } diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 7a1ba19afb..241fff4a38 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -12,6 +12,8 @@ import { import { Resolutions } from '../../types/Resolutions'; import { NavLink as HeaderLink } from '../../types/NavLink'; +import { Logo } from '../Logo/Logo'; + import './Header.scss'; export const Header: React.FC = React.memo(() => { @@ -93,26 +95,9 @@ export const Header: React.FC = React.memo(() => { ))}
  • - - - - - - + />
    • {screenType === Resolutions.Desktop diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx new file mode 100644 index 0000000000..72c7b3012a --- /dev/null +++ b/src/components/Logo/Logo.tsx @@ -0,0 +1,31 @@ +/* eslint-disable max-len */ +import React from 'react'; +import { NavLink } from 'react-router-dom'; + +type Props = { + className: string, +}; + +export const Logo: React.FC = React.memo(({ className }) => { + return ( + + + + + + ); +}); diff --git a/src/helpers/getScreenType.ts b/src/helpers/getScreenType.ts index e6e7bf934c..ff1a7b1463 100644 --- a/src/helpers/getScreenType.ts +++ b/src/helpers/getScreenType.ts @@ -2,7 +2,7 @@ import { Resolutions } from '../types/Resolutions'; export const getScreenType = () => { switch (true) { - case window.matchMedia('(min-width: 1280px)').matches: { + case window.matchMedia('(min-width: 1366px)').matches: { return Resolutions.Desktop; } diff --git a/src/images/selectAfterHover.svg b/src/images/selectAfterHover.svg new file mode 100644 index 0000000000..19b5a0f364 --- /dev/null +++ b/src/images/selectAfterHover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/styles/icon.scss b/src/styles/icon.scss index 9994f3566e..89f89257d0 100644 --- a/src/styles/icon.scss +++ b/src/styles/icon.scss @@ -1,18 +1,20 @@ @import "./utils.scss"; .icon { + fill: $red-600; + transition: fill $animationDuration; - &--logo { - height: 100px; - - fill: $red-600; - transition: fill $animationDuration; + @include onDesktop { &:hover { fill: $red-700; } } + &--logo { + height: 100px; + } + &--burger { height: 20px; } diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss index 0f4dd5ba73..5b893c2aea 100644 --- a/src/styles/utils/mixins.scss +++ b/src/styles/utils/mixins.scss @@ -1,3 +1,4 @@ @import "./mixins/media.scss"; @import "./mixins/font.scss"; @import "./mixins/transitions.scss"; +@import "./mixins/blocks.scss"; diff --git a/src/styles/utils/mixins/blocks.scss b/src/styles/utils/mixins/blocks.scss new file mode 100644 index 0000000000..66e4212940 --- /dev/null +++ b/src/styles/utils/mixins/blocks.scss @@ -0,0 +1,20 @@ +@mixin selectAfter { + position: absolute; + top: 50%; + transform: translateY(-50%); + + display: block; + content: ""; + + width: 16px; + height: 16px; + + background-image: url("../../../images/selectAfter.svg"); + background-position: center; + background-repeat: no-repeat; + background-size: contain; +} + +@mixin selectAfterHover { + background-image: url("../../../images/selectAfterHover.svg"); +} diff --git a/src/styles/utils/mixins/font.scss b/src/styles/utils/mixins/font.scss index 1cf8433779..b6fbe4d905 100644 --- a/src/styles/utils/mixins/font.scss +++ b/src/styles/utils/mixins/font.scss @@ -1,21 +1,23 @@ @import "./media.scss"; -@mixin default { - display: block; - padding: 20px 0; +@mixin NavLink { + padding: 8px 0; - font-size: 18px; + font-size: 20px; font-weight: 500; - color: $black-800; - text-decoration: none; - text-align: center; + + color: $black-800; + transition: color $animationDuration; @include onDesktop { - transition: color $animationDuration; + display: block; + + font-size: 18px; + text-align: center; &:hover { - color: $red-600; + color: $red-700; } } } diff --git a/src/styles/utils/mixins/media.scss b/src/styles/utils/mixins/media.scss index c76ac5c5d2..c6f97fa77a 100644 --- a/src/styles/utils/mixins/media.scss +++ b/src/styles/utils/mixins/media.scss @@ -5,7 +5,7 @@ } @mixin onDesktop { - @media (min-width: 1280px) { + @media (min-width: 1366px) { @content; } } diff --git a/src/styles/utils/normalize.scss b/src/styles/utils/normalize.scss index 4ebe24df73..ec77f3c8e3 100644 --- a/src/styles/utils/normalize.scss +++ b/src/styles/utils/normalize.scss @@ -34,3 +34,8 @@ video { iframe { display: none; } + +button { + border: none; + background: none; +} From 0ee981761fca028bdf5f625f449460176f8b980d Mon Sep 17 00:00:00 2001 From: Vo7kov Date: Fri, 11 Aug 2023 19:07:55 +0300 Subject: [PATCH 08/60] fix footer --- src/components/Footer/Footer.scss | 31 +++--- src/components/Footer/Footer.tsx | 172 +++++++++++++++--------------- 2 files changed, 101 insertions(+), 102 deletions(-) diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss index dd268ed910..226287bab1 100644 --- a/src/components/Footer/Footer.scss +++ b/src/components/Footer/Footer.scss @@ -69,19 +69,8 @@ @include NavLink; } - &__info { - grid-column: 1/3; - grid-row: 2/2; - - display: flex; - align-items: center; - justify-content: space-between; - - margin-top: 60px; + &__lang-wrapper { width: 100%; - } - - &__lang-button { grid-column: 1/2; position: relative; @@ -93,7 +82,7 @@ &::after { @include selectAfter; - right: -24px; + left: 84px; } &:hover { @@ -109,16 +98,15 @@ } } - &__social-list { + &__social-list-wrapper { grid-column: 2/3; grid-row: 2/2; - margin-top: 60px; - display: flex; - gap: 16px; + justify-content: flex-end; - list-style: none; + width: 100%; + margin-top: 60px; @include onTablet { grid-column: 4/4; @@ -128,6 +116,13 @@ } } + &__social-list { + display: flex; + gap: 16px; + + list-style: none; + } + &__copyright { grid-column: 1/3; grid-row: 3/3; diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 4a8d224761..779bb4b945 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -38,103 +38,107 @@ export const Footer: React.FC = React.memo(() => { - +
    + +
    -
      -
    • - - +
        +
      • + - - - - - + + - - - -
        • + -
      • - - - + - - - -
        • + + + + -
      • - - + - + + - + + +
        • - - + + + - - - - - - -
      + + + + + + + + + +
      • +
    +

    © From 99e1064f649fe4136287099dad22e6882b24a726 Mon Sep 17 00:00:00 2001 From: Vo7kov Date: Sun, 13 Aug 2023 15:41:50 +0300 Subject: [PATCH 09/60] small header && footer fix. Burger was added --- src/App.tsx | 40 ++++++++++++++++----- src/components/Burger/Burger.scss | 31 ++++++++++++++++ src/components/Burger/Burger.tsx | 59 +++++++++++++++++++++++++++++++ src/components/Footer/Footer.scss | 9 +++-- src/components/Footer/Footer.tsx | 21 ++++++----- src/components/Header/Header.tsx | 50 ++++++++++++++++++++++---- src/components/Logo/Logo.tsx | 6 ++-- src/helpers/NavLinks.ts | 9 +++++ src/images/close.svg | 5 +-- src/pages/Page404/Page404.scss | 24 ++++--------- src/pages/Page404/Page404.tsx | 47 ++++++++++++++---------- src/styles/icon.scss | 26 +++++++++++--- 12 files changed, 256 insertions(+), 71 deletions(-) create mode 100644 src/components/Burger/Burger.scss create mode 100644 src/components/Burger/Burger.tsx diff --git a/src/App.tsx b/src/App.tsx index dc51d09cdf..8feec79afb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,15 +1,39 @@ -import React from 'react'; +import React, { useState } from 'react'; import { Outlet as Main } from 'react-router-dom'; +import { getScreenType } from './helpers/getScreenType'; +import { Resolutions } from './types/Resolutions'; + import { Header } from './components/Header/Header'; +import { Burger } from './components/Burger/Burger'; import { Footer } from './components/Footer/Footer'; import './App.scss'; -export const App: React.FC = () => ( -

    -
    -
    -
    -
    -); +export const App: React.FC = () => { + const [screenType, setScreenType] = useState(getScreenType()); + const [isMenuOpened, setIsMenuOpened] = useState(false); + + return ( +
    +
    + {isMenuOpened && screenType !== Resolutions.Desktop && ( + + )} +
    +
    +
    + ); +}; diff --git a/src/components/Burger/Burger.scss b/src/components/Burger/Burger.scss new file mode 100644 index 0000000000..9c05200d91 --- /dev/null +++ b/src/components/Burger/Burger.scss @@ -0,0 +1,31 @@ +@import "../../styles/utils.scss"; + +.burger { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + + background-color: $black-100; + z-index: $z-index--2; + + &__nav { + margin-top: 32px; + } + + &__nav-list { + list-style: none; + } + + &__nav-list-item { + + &:not(:first-child) { + margin-top: 40px; + } + } + + &__nav-list-link { + @include NavLink; + } +} diff --git a/src/components/Burger/Burger.tsx b/src/components/Burger/Burger.tsx new file mode 100644 index 0000000000..b8ec995355 --- /dev/null +++ b/src/components/Burger/Burger.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { NavLink } from 'react-router-dom'; + +import { BURGER_NAV_LINKS } from '../../helpers/NavLinks'; +import { makeUrl } from '../../helpers/makeUrl'; + +import { Resolutions } from '../../types/Resolutions'; + +import { Header } from '../Header/Header'; + +import './Burger.scss'; + +type Props = { + isMenuOpened: boolean, + setIsMenuOpened: ( + param: boolean | ((prevState: boolean) => boolean) + ) => void, + screenType: Resolutions, + setScreenType: (param: Resolutions) => void, +}; + +export const Burger: React.FC = React.memo(({ + isMenuOpened, + setIsMenuOpened, + screenType, + setScreenType, +}) => { + return ( +
    +
    + +
    + +
    +
    + ); +}); diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss index 226287bab1..31f453ef62 100644 --- a/src/components/Footer/Footer.scss +++ b/src/components/Footer/Footer.scss @@ -1,7 +1,10 @@ @import "../../styles/utils.scss"; .footer { - padding-bottom: 60px; + margin-top: 150px; + padding: 60px 0; + + border-top: 2px solid $black-500; &__content { display: grid; @@ -69,7 +72,7 @@ @include NavLink; } - &__lang-wrapper { + &__lang-container { width: 100%; grid-column: 1/2; @@ -98,7 +101,7 @@ } } - &__social-list-wrapper { + &__social-list-container { grid-column: 2/3; grid-row: 2/2; diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 779bb4b945..20bde41ad1 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -9,9 +9,13 @@ import { Logo } from '../Logo/Logo'; import './Footer.scss'; -export const Footer: React.FC = React.memo(() => { +type Props = { + setIsMenuOpened: (param: boolean | ((prevState: boolean) => boolean)) => void, +}; + +export const Footer: React.FC = React.memo(({ setIsMenuOpened }) => { return ( -