From 7bd4503ef1052ce2076bad09d65bf180e4e4f28c Mon Sep 17 00:00:00 2001 From: Damla Koksal Date: Fri, 29 Oct 2021 17:41:06 +0300 Subject: [PATCH 1/9] [#2] fix: create Sidebar, LinkList and Link components --- .../src/components/Layout/Sidebar/index.jsx | 32 +++++++++++++++++-- .../Layout/Sidebar/styles.module.scss | 5 ++- client/src/components/Layout/index.jsx | 11 ++++--- .../src/components/Layout/styles.module.scss | 12 ++++++- client/src/components/Link/index.jsx | 5 +++ client/src/components/Link/styles.module.scss | 15 +++++++++ client/src/components/LinkList/index.jsx | 10 ++++++ .../components/LinkList/styles.module.scss | 18 +++++++++++ .../components/PageInfo/styles.module.scss | 8 ++--- client/src/components/index.jsx | 2 ++ 10 files changed, 105 insertions(+), 13 deletions(-) create mode 100644 client/src/components/Link/index.jsx create mode 100644 client/src/components/Link/styles.module.scss create mode 100644 client/src/components/LinkList/index.jsx create mode 100644 client/src/components/LinkList/styles.module.scss diff --git a/client/src/components/Layout/Sidebar/index.jsx b/client/src/components/Layout/Sidebar/index.jsx index 8092399..0a6be9c 100644 --- a/client/src/components/Layout/Sidebar/index.jsx +++ b/client/src/components/Layout/Sidebar/index.jsx @@ -1,5 +1,33 @@ +import { LinkList } from "../.."; import styles from "./styles.module.scss"; +import { Link } from "../.."; -export default function Sidebar({ children }) { - return ; +export default function Sidebar() { + return ( + + ); } diff --git a/client/src/components/Layout/Sidebar/styles.module.scss b/client/src/components/Layout/Sidebar/styles.module.scss index a386e82..66d9d09 100644 --- a/client/src/components/Layout/Sidebar/styles.module.scss +++ b/client/src/components/Layout/Sidebar/styles.module.scss @@ -1,4 +1,7 @@ -.container { +.Container { + width: 206px; + min-width: 206px; + padding-top: 19px; display: flex; flex-direction: column; } diff --git a/client/src/components/Layout/index.jsx b/client/src/components/Layout/index.jsx index 5511c2e..67a6c9c 100644 --- a/client/src/components/Layout/index.jsx +++ b/client/src/components/Layout/index.jsx @@ -5,14 +5,15 @@ import { Section } from ".."; import styles from "./styles.module.scss"; -export default function Layout({ children }) { +export default function Layout() { return ( -
+
- -
- {children} +
+ +
+
); } diff --git a/client/src/components/Layout/styles.module.scss b/client/src/components/Layout/styles.module.scss index 87ef385..bd3cf6c 100644 --- a/client/src/components/Layout/styles.module.scss +++ b/client/src/components/Layout/styles.module.scss @@ -1,8 +1,18 @@ -.container { +@use "../../global/variables.scss" as vars; + +.Container { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; height: 100vh; width: 100vw; + + .Wrapper { + display: flex; + min-width: vars.$desktop-width; + max-width: vars.$desktop-width; + padding: 0 80px 2px 80px; + justify-content: space-between; + } } diff --git a/client/src/components/Link/index.jsx b/client/src/components/Link/index.jsx new file mode 100644 index 0000000..363d7ec --- /dev/null +++ b/client/src/components/Link/index.jsx @@ -0,0 +1,5 @@ +import styles from "./styles.module.scss"; + +export default function Link({ filterName }) { + return
  • {filterName}
    • ; +} diff --git a/client/src/components/Link/styles.module.scss b/client/src/components/Link/styles.module.scss new file mode 100644 index 0000000..db6e1b0 --- /dev/null +++ b/client/src/components/Link/styles.module.scss @@ -0,0 +1,15 @@ +@use "../../global/variables.scss" as vars; + +.Container { + font-family: Roboto; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 24px; + color: vars.$link-color; + cursor: pointer; + + &:hover { + color: vars.$hover-link-color; + } +} diff --git a/client/src/components/LinkList/index.jsx b/client/src/components/LinkList/index.jsx new file mode 100644 index 0000000..0b2b330 --- /dev/null +++ b/client/src/components/LinkList/index.jsx @@ -0,0 +1,10 @@ +import styles from "./styles.module.scss"; + +export default function LinkList({ filterTitle, children }) { + return ( + <> +

    {filterTitle}

    + + + ); +} diff --git a/client/src/components/LinkList/styles.module.scss b/client/src/components/LinkList/styles.module.scss new file mode 100644 index 0000000..eb2a1bb --- /dev/null +++ b/client/src/components/LinkList/styles.module.scss @@ -0,0 +1,18 @@ +@use "../../global/variables.scss" as vars; + +.Container { + display: flex; + flex-direction: column; + margin-bottom: 24px; +} + +.Title { + padding-left: 1px; + font-family: Roboto; + font-style: normal; + font-weight: 500; + font-size: 16px; + line-height: 150%; + color: vars.$primary-font-color; + margin-bottom: 20px; +} diff --git a/client/src/components/PageInfo/styles.module.scss b/client/src/components/PageInfo/styles.module.scss index 79dafef..03714ad 100644 --- a/client/src/components/PageInfo/styles.module.scss +++ b/client/src/components/PageInfo/styles.module.scss @@ -5,7 +5,7 @@ flex-grow: 3; position: relative; flex-direction: column; - padding-left: 3px; + margin-left: 3px; .PageTitle { font-family: Roboto; @@ -31,12 +31,12 @@ .SearchLabel { color: vars.$muted-font-color; - width: 100.33px; - min-width: 100.33px; + width: 101px; + min-width: 101px; } .searchText { - margin-left: 6px; + margin-left: 3px; color: black; } } diff --git a/client/src/components/index.jsx b/client/src/components/index.jsx index cc73779..1ab2f03 100644 --- a/client/src/components/index.jsx +++ b/client/src/components/index.jsx @@ -11,3 +11,5 @@ export { default as ImageBox } from "./ImageBox"; export { default as PageInfo } from "./PageInfo"; export { default as SelectBox } from "./SelectBox"; export { default as SelectBoxItem } from "./SelectBox/SelectBoxItem"; +export { default as LinkList } from "./LinkList"; +export { default as Link } from "./Link"; From a83ad9ce82dd07c5579c1a81bdefc46dd888a224 Mon Sep 17 00:00:00 2001 From: Damla Koksal Date: Fri, 29 Oct 2021 18:03:18 +0300 Subject: [PATCH 2/9] [#2] fix: create ProductTable and ProductRow components --- client/src/components/Layout/Section/index.jsx | 13 +++++++++++-- .../components/Layout/Section/styles.module.scss | 2 ++ client/src/components/Layout/Sidebar/index.jsx | 3 +-- client/src/components/Layout/index.jsx | 5 +---- .../components/ProductTable/ProductRow/index.jsx | 5 +++++ .../ProductTable/ProductRow/styles.module.scss | 8 ++++++++ client/src/components/ProductTable/index.jsx | 10 ++++++++++ .../src/components/ProductTable/styles.module.scss | 13 +++++++++++++ client/src/components/index.jsx | 2 ++ 9 files changed, 53 insertions(+), 8 deletions(-) create mode 100644 client/src/components/ProductTable/ProductRow/index.jsx create mode 100644 client/src/components/ProductTable/ProductRow/styles.module.scss create mode 100644 client/src/components/ProductTable/index.jsx create mode 100644 client/src/components/ProductTable/styles.module.scss diff --git a/client/src/components/Layout/Section/index.jsx b/client/src/components/Layout/Section/index.jsx index b899cd3..998a119 100644 --- a/client/src/components/Layout/Section/index.jsx +++ b/client/src/components/Layout/Section/index.jsx @@ -1,5 +1,14 @@ import styles from "./styles.module.scss"; +import { ProductTable, ProductRow } from "../.."; -export default function Section({ children }) { - return
    section {children}
    ; +export default function Section() { + return ( +
    + + + + + +
    + ); } diff --git a/client/src/components/Layout/Section/styles.module.scss b/client/src/components/Layout/Section/styles.module.scss index abde53a..9b3da53 100644 --- a/client/src/components/Layout/Section/styles.module.scss +++ b/client/src/components/Layout/Section/styles.module.scss @@ -1,3 +1,5 @@ .container { display: flex; + width: 1058px; + min-width: 1058px; } diff --git a/client/src/components/Layout/Sidebar/index.jsx b/client/src/components/Layout/Sidebar/index.jsx index 0a6be9c..02bebe1 100644 --- a/client/src/components/Layout/Sidebar/index.jsx +++ b/client/src/components/Layout/Sidebar/index.jsx @@ -1,6 +1,5 @@ -import { LinkList } from "../.."; +import { LinkList, Link } from "../.."; import styles from "./styles.module.scss"; -import { Link } from "../.."; export default function Sidebar() { return ( diff --git a/client/src/components/Layout/index.jsx b/client/src/components/Layout/index.jsx index 67a6c9c..608bb2e 100644 --- a/client/src/components/Layout/index.jsx +++ b/client/src/components/Layout/index.jsx @@ -1,7 +1,4 @@ -import { Header } from ".."; -import { SubHeader } from ".."; -import { Sidebar } from ".."; -import { Section } from ".."; +import { Header, SubHeader, Sidebar, Section } from ".."; import styles from "./styles.module.scss"; diff --git a/client/src/components/ProductTable/ProductRow/index.jsx b/client/src/components/ProductTable/ProductRow/index.jsx new file mode 100644 index 0000000..40519ae --- /dev/null +++ b/client/src/components/ProductTable/ProductRow/index.jsx @@ -0,0 +1,5 @@ +import styles from "./styles.module.scss"; + +export default function ProductRow() { + return
    product row
    ; +} diff --git a/client/src/components/ProductTable/ProductRow/styles.module.scss b/client/src/components/ProductTable/ProductRow/styles.module.scss new file mode 100644 index 0000000..f464438 --- /dev/null +++ b/client/src/components/ProductTable/ProductRow/styles.module.scss @@ -0,0 +1,8 @@ +@use "../../../global/variables.scss" as vars; + +.Row { + display: flex; + width: 100%; + height: 465px; + background-color: slategray; +} diff --git a/client/src/components/ProductTable/index.jsx b/client/src/components/ProductTable/index.jsx new file mode 100644 index 0000000..3639f7c --- /dev/null +++ b/client/src/components/ProductTable/index.jsx @@ -0,0 +1,10 @@ +import styles from "./styles.module.scss"; + +export default function ProductTable({ children }) { + return ( +
    +
    {children}
    +
    Pagination
    +
    + ); +} diff --git a/client/src/components/ProductTable/styles.module.scss b/client/src/components/ProductTable/styles.module.scss new file mode 100644 index 0000000..495c8a7 --- /dev/null +++ b/client/src/components/ProductTable/styles.module.scss @@ -0,0 +1,13 @@ +@use "../../global/variables.scss" as vars; + +.Container { + display: flex; + flex-direction: column; + width: 100%; + + .Table { + display: flex; + flex-direction: column; + width: 100%; + } +} diff --git a/client/src/components/index.jsx b/client/src/components/index.jsx index 1ab2f03..78f3b89 100644 --- a/client/src/components/index.jsx +++ b/client/src/components/index.jsx @@ -13,3 +13,5 @@ export { default as SelectBox } from "./SelectBox"; export { default as SelectBoxItem } from "./SelectBox/SelectBoxItem"; export { default as LinkList } from "./LinkList"; export { default as Link } from "./Link"; +export { default as ProductTable } from "./ProductTable"; +export { default as ProductRow } from "./ProductTable/ProductRow"; From 073bdaa24c6dcc0eebf05cb00280aade7475681f Mon Sep 17 00:00:00 2001 From: Damla Koksal Date: Fri, 29 Oct 2021 18:34:28 +0300 Subject: [PATCH 3/9] [#2] fix: create ProductRow and ProductItem component --- .../Layout/Header/styles.module.scss | 1 + .../src/components/Layout/Section/index.jsx | 23 +++++++++++++++---- .../ProductTable/ProductItem/index.jsx | 5 ++++ .../ProductItem/styles.module.scss | 10 ++++++++ .../ProductTable/ProductRow/index.jsx | 4 ++-- .../ProductRow/styles.module.scss | 3 +-- .../ProductTable/styles.module.scss | 4 ++++ .../components/SelectBox/styles.module.scss | 2 +- client/src/components/index.jsx | 1 + 9 files changed, 44 insertions(+), 9 deletions(-) create mode 100644 client/src/components/ProductTable/ProductItem/index.jsx create mode 100644 client/src/components/ProductTable/ProductItem/styles.module.scss diff --git a/client/src/components/Layout/Header/styles.module.scss b/client/src/components/Layout/Header/styles.module.scss index d6ca4c6..436233e 100644 --- a/client/src/components/Layout/Header/styles.module.scss +++ b/client/src/components/Layout/Header/styles.module.scss @@ -3,6 +3,7 @@ .Container { display: flex; width: 100%; + min-height: 96px; height: 96px; padding: 0 80px; align-items: center; diff --git a/client/src/components/Layout/Section/index.jsx b/client/src/components/Layout/Section/index.jsx index 998a119..3b9454a 100644 --- a/client/src/components/Layout/Section/index.jsx +++ b/client/src/components/Layout/Section/index.jsx @@ -1,13 +1,28 @@ import styles from "./styles.module.scss"; -import { ProductTable, ProductRow } from "../.."; +import { ProductTable, ProductRow, ProductItem } from "../.."; export default function Section() { return (
    - - - + + + + + + + + + + + + + + + + + +
    ); diff --git a/client/src/components/ProductTable/ProductItem/index.jsx b/client/src/components/ProductTable/ProductItem/index.jsx new file mode 100644 index 0000000..594974c --- /dev/null +++ b/client/src/components/ProductTable/ProductItem/index.jsx @@ -0,0 +1,5 @@ +import styles from "./styles.module.scss"; + +export default function ProductItem() { + return
    product item
    ; +} diff --git a/client/src/components/ProductTable/ProductItem/styles.module.scss b/client/src/components/ProductTable/ProductItem/styles.module.scss new file mode 100644 index 0000000..c14f688 --- /dev/null +++ b/client/src/components/ProductTable/ProductItem/styles.module.scss @@ -0,0 +1,10 @@ +@use "../../../global/variables.scss" as vars; + +.Container { + display: flex; + flex-direction: column; + width: 254px; + min-height: 384px; + height: 384px; + background-color: yellow; +} diff --git a/client/src/components/ProductTable/ProductRow/index.jsx b/client/src/components/ProductTable/ProductRow/index.jsx index 40519ae..5a8c49a 100644 --- a/client/src/components/ProductTable/ProductRow/index.jsx +++ b/client/src/components/ProductTable/ProductRow/index.jsx @@ -1,5 +1,5 @@ import styles from "./styles.module.scss"; -export default function ProductRow() { - return
    product row
    ; +export default function ProductRow({ children }) { + return
    {children}
    ; } diff --git a/client/src/components/ProductTable/ProductRow/styles.module.scss b/client/src/components/ProductTable/ProductRow/styles.module.scss index f464438..723e7fb 100644 --- a/client/src/components/ProductTable/ProductRow/styles.module.scss +++ b/client/src/components/ProductTable/ProductRow/styles.module.scss @@ -3,6 +3,5 @@ .Row { display: flex; width: 100%; - height: 465px; - background-color: slategray; + justify-content: space-between; } diff --git a/client/src/components/ProductTable/styles.module.scss b/client/src/components/ProductTable/styles.module.scss index 495c8a7..ca2263c 100644 --- a/client/src/components/ProductTable/styles.module.scss +++ b/client/src/components/ProductTable/styles.module.scss @@ -8,6 +8,10 @@ .Table { display: flex; flex-direction: column; + justify-content: space-between; + width: 100%; + height: 1171px; + min-height: 1171px; } } diff --git a/client/src/components/SelectBox/styles.module.scss b/client/src/components/SelectBox/styles.module.scss index d23a638..ab42eab 100644 --- a/client/src/components/SelectBox/styles.module.scss +++ b/client/src/components/SelectBox/styles.module.scss @@ -41,7 +41,7 @@ display: block; position: absolute; top: 47px; - right: 0; + right: -1px; width: 274px; max-width: 274px; height: 152px; diff --git a/client/src/components/index.jsx b/client/src/components/index.jsx index 78f3b89..4e38a8c 100644 --- a/client/src/components/index.jsx +++ b/client/src/components/index.jsx @@ -15,3 +15,4 @@ export { default as LinkList } from "./LinkList"; export { default as Link } from "./Link"; export { default as ProductTable } from "./ProductTable"; export { default as ProductRow } from "./ProductTable/ProductRow"; +export { default as ProductItem } from "./ProductTable/ProductItem"; From 122dd546fd6e6b87497921b9a6135efdf11593f3 Mon Sep 17 00:00:00 2001 From: Damla Koksal Date: Fri, 29 Oct 2021 21:45:44 +0300 Subject: [PATCH 4/9] [#2] feat: edit ProductItem component --- client/src/components/ImageBox/index.jsx | 13 +++- .../components/ImageBox/styles.module.scss | 8 ++ .../src/components/Layout/Section/index.jsx | 2 +- .../Layout/Section/styles.module.scss | 3 +- .../ProductTable/ProductItem/index.jsx | 25 ++++++- .../ProductItem/styles.module.scss | 74 ++++++++++++++++++- .../ProductRow/styles.module.scss | 2 + .../ProductTable/styles.module.scss | 5 +- 8 files changed, 121 insertions(+), 11 deletions(-) diff --git a/client/src/components/ImageBox/index.jsx b/client/src/components/ImageBox/index.jsx index e43b1b6..58587b2 100644 --- a/client/src/components/ImageBox/index.jsx +++ b/client/src/components/ImageBox/index.jsx @@ -4,7 +4,7 @@ import cn from "classnames"; export default function ImageBox({ src, basketImg, productImg }) { const basketItemClasses = cn(styles.Container, styles.BasketItemImg); - + const productItemClasses = cn(styles.Container, styles.ProductItemImg); return ( <> {basketImg && ( @@ -18,7 +18,16 @@ export default function ImageBox({ src, basketImg, productImg }) {
    )} - {productImg && product} + {productImg && ( +
    + product +
    + )} ); } diff --git a/client/src/components/ImageBox/styles.module.scss b/client/src/components/ImageBox/styles.module.scss index f937bb9..a7e340e 100644 --- a/client/src/components/ImageBox/styles.module.scss +++ b/client/src/components/ImageBox/styles.module.scss @@ -12,4 +12,12 @@ height: 72px; margin-right: 10px; } + + &.ProductItemImg { + background-color: white; + min-height: 339px; + min-width: 254px; + width: 100%; + padding: 3px 15px 4px 15px; + } } diff --git a/client/src/components/Layout/Section/index.jsx b/client/src/components/Layout/Section/index.jsx index 3b9454a..5f2f03b 100644 --- a/client/src/components/Layout/Section/index.jsx +++ b/client/src/components/Layout/Section/index.jsx @@ -3,7 +3,7 @@ import { ProductTable, ProductRow, ProductItem } from "../.."; export default function Section() { return ( -
    +
    diff --git a/client/src/components/Layout/Section/styles.module.scss b/client/src/components/Layout/Section/styles.module.scss index 9b3da53..2439814 100644 --- a/client/src/components/Layout/Section/styles.module.scss +++ b/client/src/components/Layout/Section/styles.module.scss @@ -1,5 +1,6 @@ -.container { +.Container { display: flex; width: 1058px; min-width: 1058px; + margin-bottom: 298px; } diff --git a/client/src/components/ProductTable/ProductItem/index.jsx b/client/src/components/ProductTable/ProductItem/index.jsx index 594974c..ca580b7 100644 --- a/client/src/components/ProductTable/ProductItem/index.jsx +++ b/client/src/components/ProductTable/ProductItem/index.jsx @@ -1,5 +1,28 @@ +import ImageBox from "../../ImageBox"; import styles from "./styles.module.scss"; export default function ProductItem() { - return
    product item
    ; + return ( +
    + +
    +
    + Apple iPhone 11 Pro Maxi Phone 11 Pro Max iPhone 11 (Max 2 Line)... +
    +
    + + Apple +
    +
    + + Siyah +
    + 90,85 TL +
    + 124,00 TL + 12% +
    +
    +
    + ); } diff --git a/client/src/components/ProductTable/ProductItem/styles.module.scss b/client/src/components/ProductTable/ProductItem/styles.module.scss index c14f688..708432e 100644 --- a/client/src/components/ProductTable/ProductItem/styles.module.scss +++ b/client/src/components/ProductTable/ProductItem/styles.module.scss @@ -3,8 +3,76 @@ .Container { display: flex; flex-direction: column; + align-items: center; width: 254px; - min-height: 384px; - height: 384px; - background-color: yellow; + min-height: 100%; + max-height: 100%; + height: 100%; + + .Content { + display: flex; + width: 230px; + max-width: 230px; + align-items: flex-start; + flex-direction: column; + + .Name { + font-family: Roboto; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 18px; + margin-top: 9px; + margin-bottom: 10px; + } + + .Variant { + font-family: Roboto; + font-style: normal; + font-weight: bold; + font-size: 12px; + line-height: 18px; + color: vars.$primary-font-color; + // .Label { + // } + + .Name { + font-weight: normal; + } + } + + .Price { + height: 17px; + margin-top: 13px; + font-style: normal; + font-weight: bold; + font-size: 14px; + line-height: 18px; + color: #000; + } + + .DiscountContainer { + display: flex; + + .DiscountedPrice { + height: 17px; + min-width: 60px; + font-style: normal; + font-weight: normal; + font-size: 13px; + line-height: 18px; + color: vars.$disabled-font-color; + text-decoration-line: line-through; + } + + .Discount { + font-family: Roboto; + font-style: normal; + font-weight: bold; + font-size: 12px; + line-height: 18px; + color: vars.$highlight-font-color; + } + } + } } diff --git a/client/src/components/ProductTable/ProductRow/styles.module.scss b/client/src/components/ProductTable/ProductRow/styles.module.scss index 723e7fb..ad82f36 100644 --- a/client/src/components/ProductTable/ProductRow/styles.module.scss +++ b/client/src/components/ProductTable/ProductRow/styles.module.scss @@ -4,4 +4,6 @@ display: flex; width: 100%; justify-content: space-between; + height: 479px; + max-height: 479px; } diff --git a/client/src/components/ProductTable/styles.module.scss b/client/src/components/ProductTable/styles.module.scss index ca2263c..79da9e5 100644 --- a/client/src/components/ProductTable/styles.module.scss +++ b/client/src/components/ProductTable/styles.module.scss @@ -9,9 +9,8 @@ display: flex; flex-direction: column; justify-content: space-between; - width: 100%; - height: 1171px; - min-height: 1171px; + height: 1465px; + min-height: 1465px; } } From ceeeaad135a03d67ccf71670f6064c51a1afa062 Mon Sep 17 00:00:00 2001 From: Damla Koksal Date: Fri, 29 Oct 2021 21:59:49 +0300 Subject: [PATCH 5/9] [#2] feat: add Pagination component --- .../ProductTable/Pagination/index.jsx | 13 ++++++++++ .../Pagination/styles.module.scss | 25 +++++++++++++++++++ client/src/components/ProductTable/index.jsx | 3 ++- client/src/components/index.jsx | 1 + 4 files changed, 41 insertions(+), 1 deletion(-) create mode 100644 client/src/components/ProductTable/Pagination/index.jsx create mode 100644 client/src/components/ProductTable/Pagination/styles.module.scss diff --git a/client/src/components/ProductTable/Pagination/index.jsx b/client/src/components/ProductTable/Pagination/index.jsx new file mode 100644 index 0000000..1cd6a86 --- /dev/null +++ b/client/src/components/ProductTable/Pagination/index.jsx @@ -0,0 +1,13 @@ +import styles from "./styles.module.scss"; + +export default function Pagination() { + return ( +
    + + + + + +
    + ); +} diff --git a/client/src/components/ProductTable/Pagination/styles.module.scss b/client/src/components/ProductTable/Pagination/styles.module.scss new file mode 100644 index 0000000..3c25b02 --- /dev/null +++ b/client/src/components/ProductTable/Pagination/styles.module.scss @@ -0,0 +1,25 @@ +@use "../../../global/variables.scss" as vars; + +.Container { + display: flex; + align-items: center; + margin-top: 39px; + + .Button { + width: 33px; + height: 33px; + background-color: #ffff; + margin-left: 13.2px; + border: 1px solid vars.$pagination-btn-color; + border-radius: 9px; + font-style: normal; + font-weight: normal; + font-size: 10px; + line-height: 20px; + color: vars.$secondary-font-color; + + &:last-child { + margin-right: 0; + } + } +} diff --git a/client/src/components/ProductTable/index.jsx b/client/src/components/ProductTable/index.jsx index 3639f7c..b422e6e 100644 --- a/client/src/components/ProductTable/index.jsx +++ b/client/src/components/ProductTable/index.jsx @@ -1,10 +1,11 @@ +import { Pagination } from ".."; import styles from "./styles.module.scss"; export default function ProductTable({ children }) { return (
    {children}
    -
    Pagination
    +
    ); } diff --git a/client/src/components/index.jsx b/client/src/components/index.jsx index 4e38a8c..577408c 100644 --- a/client/src/components/index.jsx +++ b/client/src/components/index.jsx @@ -16,3 +16,4 @@ export { default as Link } from "./Link"; export { default as ProductTable } from "./ProductTable"; export { default as ProductRow } from "./ProductTable/ProductRow"; export { default as ProductItem } from "./ProductTable/ProductItem"; +export { default as Pagination } from "./ProductTable/Pagination"; From 25d40db8d9fd7db67e5417af4a4536d735ab4122 Mon Sep 17 00:00:00 2001 From: Damla Koksal Date: Sat, 30 Oct 2021 00:35:07 +0300 Subject: [PATCH 6/9] [#2] feat: create AddButton component --- client/src/components/AddButton/index.jsx | 23 ++++++++++++++++ .../components/AddButton/styles.module.scss | 27 +++++++++++++++++++ 2 files changed, 50 insertions(+) create mode 100644 client/src/components/AddButton/index.jsx create mode 100644 client/src/components/AddButton/styles.module.scss diff --git a/client/src/components/AddButton/index.jsx b/client/src/components/AddButton/index.jsx new file mode 100644 index 0000000..dbb5bf5 --- /dev/null +++ b/client/src/components/AddButton/index.jsx @@ -0,0 +1,23 @@ +import React, { useState } from "react"; +import styles from "./styles.module.scss"; + +export default function AddButton() { + const [isActive, setIsActive] = useState(true); + + const handleActive = () => { + setIsActive(false); + }; + + return isActive ? ( + + ) : ( + + ); +} diff --git a/client/src/components/AddButton/styles.module.scss b/client/src/components/AddButton/styles.module.scss new file mode 100644 index 0000000..cda4513 --- /dev/null +++ b/client/src/components/AddButton/styles.module.scss @@ -0,0 +1,27 @@ +@use "../../global/variables.scss" as vars; + +.ActiveButton { + font-weight: 500; + font-size: 14px; + line-height: 18px; + background-color: vars.$add-to-cart-btn-bg; + color: vars.$hover-link-color; + border: 1px solid transparent; + border-radius: 8px; + width: 233px; + height: 32px; + cursor: pointer; +} + +.DeactiveButton { + font-weight: 500; + font-size: 14px; + line-height: 18px; + background-color: vars.$cart-remove-deactive-btn-color; + color: vars.$deactive-font-color; + border: 1px solid transparent; + border-radius: 8px; + width: 233px; + height: 32px; + cursor: pointer; +} From 7dfbdc3abf40e21d64fbf5ae404b3bb1784c15eb Mon Sep 17 00:00:00 2001 From: Damla Koksal Date: Sat, 30 Oct 2021 00:35:33 +0300 Subject: [PATCH 7/9] [#2] feat: edit ImageBox component according to hover event --- client/src/components/ImageBox/index.jsx | 8 +++++-- .../components/ImageBox/styles.module.scss | 21 ++++++++++++------- 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/client/src/components/ImageBox/index.jsx b/client/src/components/ImageBox/index.jsx index 58587b2..11a17e4 100644 --- a/client/src/components/ImageBox/index.jsx +++ b/client/src/components/ImageBox/index.jsx @@ -2,9 +2,13 @@ import styles from "./styles.module.scss"; import cn from "classnames"; -export default function ImageBox({ src, basketImg, productImg }) { +export default function ImageBox({ src, basketImg, productImg, isHovered }) { const basketItemClasses = cn(styles.Container, styles.BasketItemImg); - const productItemClasses = cn(styles.Container, styles.ProductItemImg); + const productItemClasses = cn( + styles.Container, + styles.ProductItemImg, + isHovered && styles.Hovered + ); return ( <> {basketImg && ( diff --git a/client/src/components/ImageBox/styles.module.scss b/client/src/components/ImageBox/styles.module.scss index a7e340e..c582fd2 100644 --- a/client/src/components/ImageBox/styles.module.scss +++ b/client/src/components/ImageBox/styles.module.scss @@ -7,17 +7,24 @@ border: 1px solid vars.$cart-item-border-color; border-radius: 4px; - &.BasketItemImg { - width: 54px; - height: 72px; - margin-right: 10px; - } - &.ProductItemImg { background-color: white; min-height: 339px; min-width: 254px; - width: 100%; padding: 3px 15px 4px 15px; } + + &.Hovered { + border: 1px solid transparent; + outline: unset; + width: 252px; + min-width: 252px; + padding: 2px 13px 4px 13px; + } + + &.BasketItemImg { + width: 54px; + height: 72px; + margin-right: 10px; + } } From c2a85d8a2dcb93757d1642df04443f9d4ec7839b Mon Sep 17 00:00:00 2001 From: Damla Koksal Date: Sat, 30 Oct 2021 00:35:53 +0300 Subject: [PATCH 8/9] [#2] feat: edit ProductItem component according to hover event --- .../ProductTable/ProductItem/index.jsx | 63 +++++++++++++------ .../ProductItem/styles.module.scss | 15 +++-- client/src/global/variables.scss | 4 +- 3 files changed, 55 insertions(+), 27 deletions(-) diff --git a/client/src/components/ProductTable/ProductItem/index.jsx b/client/src/components/ProductTable/ProductItem/index.jsx index ca580b7..1dc0a6b 100644 --- a/client/src/components/ProductTable/ProductItem/index.jsx +++ b/client/src/components/ProductTable/ProductItem/index.jsx @@ -1,28 +1,51 @@ +import { useState } from "react"; import ImageBox from "../../ImageBox"; import styles from "./styles.module.scss"; +import cn from "classnames"; +import AddButton from "../../AddButton"; export default function ProductItem() { + const [isHovered, setIsHovered] = useState(false); + + const onMouseEnter = () => setIsHovered(true); + const onMouseLeave = () => setIsHovered(false); return ( -
    - -
    -
    - Apple iPhone 11 Pro Maxi Phone 11 Pro Max iPhone 11 (Max 2 Line)... -
    -
    - - Apple -
    -
    - - Siyah -
    - 90,85 TL -
    - 124,00 TL - 12% -
    -
    +
    onMouseEnter()} + onMouseLeave={() => onMouseLeave()} + > + {!isHovered ? ( + <> + +
    +
    iPhone 11 Kırmızı Kılıf
    +
    +
    + + Apple +
    +
    + + Siyah +
    +
    + 90,85 TL +
    + 124,00 TL + 12% +
    +
    + + ) : ( + <> + +
    +
    iPhone 11 Kırmızı Kılıf
    + +
    + + )}
    ); } diff --git a/client/src/components/ProductTable/ProductItem/styles.module.scss b/client/src/components/ProductTable/ProductItem/styles.module.scss index 708432e..bb35415 100644 --- a/client/src/components/ProductTable/ProductItem/styles.module.scss +++ b/client/src/components/ProductTable/ProductItem/styles.module.scss @@ -9,21 +9,27 @@ max-height: 100%; height: 100%; + &.Stroke { + border: 1px solid vars.$stroke-border-color; + border-radius: 4px; + } + .Content { display: flex; width: 230px; max-width: 230px; + height: 130px; + max-height: 130px; align-items: flex-start; flex-direction: column; + justify-content: space-between; .Name { - font-family: Roboto; + padding-top: 9px; font-style: normal; font-weight: normal; font-size: 12px; line-height: 18px; - margin-top: 9px; - margin-bottom: 10px; } .Variant { @@ -33,8 +39,6 @@ font-size: 12px; line-height: 18px; color: vars.$primary-font-color; - // .Label { - // } .Name { font-weight: normal; @@ -43,7 +47,6 @@ .Price { height: 17px; - margin-top: 13px; font-style: normal; font-weight: bold; font-size: 14px; diff --git a/client/src/global/variables.scss b/client/src/global/variables.scss index f8c2154..93d3e86 100644 --- a/client/src/global/variables.scss +++ b/client/src/global/variables.scss @@ -5,10 +5,12 @@ $brand-color: #ff6000; // logo, linkler vs $border-color: #b0b0b0; // buttonlar sepetim $sorting-border-color: #b4b4bb; //siralama $hover-border-color: $border-color; // ürüne hover edilmesi +$stroke-border-color: #cdcdcd; $muted-font-color: $border-color; $primary-font-color: #484848; // ana baslik, alt basliklar $secondary-font-color: #646464; // linkler +$deactive-font-color: $border-color; // sepet deactive $disabled-font-color: #9b9b9b; // düşülen para $highlight-font-color: #f90000; // indirim, sepetten kaldir butonu @@ -19,8 +21,8 @@ $hover-link-color: $brand-color; $add-to-cart-btn-bg: rgba(255, 96, 0, 0.11); $cart-item-border-color: #e5e5e5; $cart-remove-btn-color: $highlight-font-color; +$cart-remove-deactive-btn-color: rgba(126, 126, 126, 0.11); $pagination-btn-color: #eeeeee; $search-bg-color: $pagination-btn-color; $search-ph-color: $border-color; // search placeholder -$secondary-bg-color: $border-color; // search, deactive button From 443e4ae406742772517617e11e0ff7b42f1220b9 Mon Sep 17 00:00:00 2001 From: Damla Koksal Date: Sat, 30 Oct 2021 00:36:10 +0300 Subject: [PATCH 9/9] [#2] feat: add Modal component --- client/src/components/Layout/index.jsx | 23 ++++-- .../src/components/Layout/styles.module.scss | 12 +++ client/src/components/Modal/index.jsx | 25 +++++++ .../src/components/Modal/styles.module.scss | 73 +++++++++++++++++++ client/src/components/index.jsx | 2 + 5 files changed, 127 insertions(+), 8 deletions(-) create mode 100644 client/src/components/Modal/index.jsx create mode 100644 client/src/components/Modal/styles.module.scss diff --git a/client/src/components/Layout/index.jsx b/client/src/components/Layout/index.jsx index 608bb2e..b51f46c 100644 --- a/client/src/components/Layout/index.jsx +++ b/client/src/components/Layout/index.jsx @@ -1,16 +1,23 @@ -import { Header, SubHeader, Sidebar, Section } from ".."; +import { useState } from "react"; +import { Header, SubHeader, Sidebar, Section, Modal } from ".."; import styles from "./styles.module.scss"; export default function Layout() { + const [showModal] = useState(false); + return ( -
    -
    - -
    - -
    + <> +
    +
    + +
    + +
    +
    + {showModal && }
    -
    +
    + ); } diff --git a/client/src/components/Layout/styles.module.scss b/client/src/components/Layout/styles.module.scss index bd3cf6c..ac6aaa7 100644 --- a/client/src/components/Layout/styles.module.scss +++ b/client/src/components/Layout/styles.module.scss @@ -7,6 +7,7 @@ align-items: center; height: 100vh; width: 100vw; + position: relative; .Wrapper { display: flex; @@ -16,3 +17,14 @@ justify-content: space-between; } } +.GrayLayer { + position: absolute; + top: 0; + height: 100vh; + width: 100vw; + min-height: 100vh; + min-width: 100vw; + background-color: #e5e5e5; + opacity: 0.5; + z-index: 99; +} diff --git a/client/src/components/Modal/index.jsx b/client/src/components/Modal/index.jsx new file mode 100644 index 0000000..da3a654 --- /dev/null +++ b/client/src/components/Modal/index.jsx @@ -0,0 +1,25 @@ +import styles from "./styles.module.scss"; + +export default function Modal() { + return ( +
    +
    +

    Ürünü silmek istediğinize emin misiniz?

    +
    +
    +

    + Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the industry's standard dummy text ever + since the 1500s, when an unknown printer took a galley of type and + scrambled it to make a type specimen book. It has survived not only + five centuries, but also the leap into electronic typesetting, + remaining essentiall.... +

    +
    +
    + + +
    +
    + ); +} diff --git a/client/src/components/Modal/styles.module.scss b/client/src/components/Modal/styles.module.scss new file mode 100644 index 0000000..e2db0d8 --- /dev/null +++ b/client/src/components/Modal/styles.module.scss @@ -0,0 +1,73 @@ +@use "../../global/variables.scss" as vars; + +.Container { + color: vars.$primary-font-color; + max-width: 400px; + width: 400px; + height: 260px; + background-color: #fff; + border: 1px solid rgba(228, 228, 228, 0.6); + box-shadow: 0px 6px 12px rgba(50, 50, 71, 0.07); + border-radius: 4px; + display: flex; + flex-direction: column; + justify-content: space-between; + position: absolute; + top: 250px; + z-index: 999; + + .Header { + display: flex; + align-items: center; + padding-left: 18px; + padding-right: 18px; + border-bottom: 1px solid #cdcdcd; + height: 60px; + } + + .Body { + display: flex; + align-items: center; + font-weight: normal; + padding-left: 20px; + padding-right: 20px; + padding-top: 16px; + font-size: 12px; + line-height: 17px; + + .Content { + font-weight: normal; + font-size: 12px; + } + } + + .Footer { + display: flex; + justify-content: flex-end; + height: 56px; + padding-right: 20px; + align-items: flex-end; + padding-bottom: 20px; + + .Yes { + background: #90d659; + border-radius: 4px; + width: 70px; + height: 26px; + outline: none; + border: none; + color: #fff; + } + + .No { + margin-left: 10px; + background: #d65959; + width: 70px; + height: 26px; + border-radius: 4px; + outline: none; + border: none; + color: #fff; + } + } +} diff --git a/client/src/components/index.jsx b/client/src/components/index.jsx index 577408c..d0e5809 100644 --- a/client/src/components/index.jsx +++ b/client/src/components/index.jsx @@ -17,3 +17,5 @@ export { default as ProductTable } from "./ProductTable"; export { default as ProductRow } from "./ProductTable/ProductRow"; export { default as ProductItem } from "./ProductTable/ProductItem"; export { default as Pagination } from "./ProductTable/Pagination"; +export { default as AddButton } from "./AddButton"; +export { default as Modal } from "./Modal";