From bf9ef453f6db6bb325885d75a61e535e04176bfb Mon Sep 17 00:00:00 2001 From: mahdi Date: Tue, 4 Jan 2022 13:20:50 +0330 Subject: [PATCH] update --- src/App.js | 8 +- src/assets/icons/black-comment-icon.svg | 15 --- src/assets/icons/light-blue-icon.svg | 3 + src/assets/icons/light-gray-comment-icon.svg | 11 +++ src/assets/icons/white-comment-icon.svg | 20 ++-- src/components/Blogs/design1/BlogDesign1.js | 39 +++++--- src/components/Blogs/design2/BlogDesign2.js | 31 +++++-- src/components/Blogs/design3/BlogDesign3.js | 35 ++++--- src/components/Blogs/design4/BlogDesign4.js | 91 ++++++++++++------- src/components/Blogs/design5/BlogDesign5.js | 44 ++++++--- src/components/Blogs/design6/BlogDesign6.js | 40 +++++--- .../vodProductDesign/VodProductDesign.js | 9 +- src/index.scss | 2 +- tailwind.config.js | 1 + 14 files changed, 229 insertions(+), 120 deletions(-) delete mode 100644 src/assets/icons/black-comment-icon.svg create mode 100644 src/assets/icons/light-blue-icon.svg create mode 100644 src/assets/icons/light-gray-comment-icon.svg diff --git a/src/App.js b/src/App.js index 5adddaa..c2ac77b 100644 --- a/src/App.js +++ b/src/App.js @@ -16,18 +16,18 @@ import VodProductDesign from "./components/vodProductDesign/VodProductDesign"; function App() { return (
- - + {/* */} + {/* */} {/* */} {/* */} {/* */} {/* */} - {/* */} + {/* */} {/* */} {/* */} {/* */} - {/* */} + {/* */}
); diff --git a/src/assets/icons/black-comment-icon.svg b/src/assets/icons/black-comment-icon.svg deleted file mode 100644 index da56688..0000000 --- a/src/assets/icons/black-comment-icon.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - 17 - - diff --git a/src/assets/icons/light-blue-icon.svg b/src/assets/icons/light-blue-icon.svg new file mode 100644 index 0000000..1be0b07 --- /dev/null +++ b/src/assets/icons/light-blue-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/light-gray-comment-icon.svg b/src/assets/icons/light-gray-comment-icon.svg new file mode 100644 index 0000000..7cd4bda --- /dev/null +++ b/src/assets/icons/light-gray-comment-icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons/white-comment-icon.svg b/src/assets/icons/white-comment-icon.svg index 1f92bb9..d67df87 100644 --- a/src/assets/icons/white-comment-icon.svg +++ b/src/assets/icons/white-comment-icon.svg @@ -1,15 +1,11 @@ - - - - - - - - - - + + + + + + + + - - 17 diff --git a/src/components/Blogs/design1/BlogDesign1.js b/src/components/Blogs/design1/BlogDesign1.js index 63c1a5e..8e2d2be 100644 --- a/src/components/Blogs/design1/BlogDesign1.js +++ b/src/components/Blogs/design1/BlogDesign1.js @@ -3,13 +3,18 @@ import React from "react"; import blogImage from "../../../assets/images/blog-featured-image.jpg"; import blogAuthorImg from "../../../assets/images/blog-author.png"; -import commentIcon from "../../../assets/icons/black-comment-icon.svg"; +import commentIcon from "../../../assets/icons/light-gray-comment-icon.svg"; +import whiteCommentIcon from "../../../assets/icons/white-comment-icon.svg"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import {} from "@fortawesome/free-brands-svg-icons"; -import { faComment } from "@fortawesome/free-solid-svg-icons"; - -const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => { +const BlogDesign1 = ({ + blogExcerpt, + blogAuthor, + blogComments, + commentNumBgColor, + commentNumTextColor, + commentNumTopPosition, + commentNumRightPosition, +}) => { return (
@@ -56,11 +61,10 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => { زمان مطالعه 30 دقیقه

- - + + 26
@@ -75,8 +79,21 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => { export default BlogDesign1; +// background color i used in commnet number background color +// bg-lightGrayBgColor +// bg-white + +// text color i used for comment number text color: +// text-grayTextColor +// text-white + BlogDesign1.defaultProps = { blogExcerpt: true, blogAuthor: true, blogComments: true, + + commentNumBgColor: "bg-lightGrayBgColor", + commentNumTextColor: "text-white", + commentNumTopPosition: "-top-2", + commentNumRightPosition: "-right-2", }; diff --git a/src/components/Blogs/design2/BlogDesign2.js b/src/components/Blogs/design2/BlogDesign2.js index 08422b2..bfd918e 100644 --- a/src/components/Blogs/design2/BlogDesign2.js +++ b/src/components/Blogs/design2/BlogDesign2.js @@ -5,18 +5,19 @@ import "./BlogDesign2.scss"; import blogFeaturedImage2 from "../../../assets/images/blog-featured-image2.jpg"; import blogAuthorImg from "../../../assets/images/blog-author.png"; +import commentIcon from "../../../assets/icons/light-gray-comment-icon.svg"; import whiteCommentIcon from "../../../assets/icons/white-comment-icon.svg"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import {} from "@fortawesome/free-brands-svg-icons"; -import { faComment } from "@fortawesome/free-solid-svg-icons"; - const BlogDesign2 = ({ blogSubTitle, dateButton, tagButton, blogAuthor, blogComments, + commentNumBgColor, + commentNumTextColor, + commentNumTopPosition, + commentNumRightPosition, }) => { return (
@@ -79,11 +80,10 @@ const BlogDesign2 = ({ زمان مطالعه 30 دقیقه

- - + + 26
@@ -105,10 +105,23 @@ const BlogDesign2 = ({ export default BlogDesign2; +// background color i used in commnet number background color +// bg-lightGrayBgColor +// bg-white + +// text color i used for comment number text color: +// text-grayTextColor +// text-white + BlogDesign2.defaultProps = { blogSubTitle: true, dateButton: true, tagButton: false, blogAuthor: true, blogComments: true, + + commentNumBgColor: "bg-white", + commentNumTextColor: "text-grayTextColor", + commentNumTopPosition: "-top-2", + commentNumRightPosition: "-right-2", }; diff --git a/src/components/Blogs/design3/BlogDesign3.js b/src/components/Blogs/design3/BlogDesign3.js index 5cf21bc..1eed0fc 100644 --- a/src/components/Blogs/design3/BlogDesign3.js +++ b/src/components/Blogs/design3/BlogDesign3.js @@ -3,11 +3,8 @@ import React from "react"; import blogFeaturedImage2 from "../../../assets/images/blog-featured-image2.jpg"; import blogAuthorImg from "../../../assets/images/blog-author.png"; -import commentIcon from "../../../assets/icons/black-comment-icon.svg"; - -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import {} from "@fortawesome/free-brands-svg-icons"; -import { faComment } from "@fortawesome/free-solid-svg-icons"; +import commentIcon from "../../../assets/icons/light-gray-comment-icon.svg"; +import whiteCommentIcon from "../../../assets/icons/white-comment-icon.svg"; const BlogDesign3 = ({ blogSubTitle, @@ -15,6 +12,10 @@ const BlogDesign3 = ({ blogComments, blogTitleColor, blogCommentAuthorTextColor, + commentNumBgColor, + commentNumTextColor, + commentNumTopPosition, + commentNumRightPosition, }) => { return (
@@ -73,14 +74,13 @@ const BlogDesign3 = ({ زمان مطالعه 30 دقیقه

- - + + 26 -
{" "} +
)} @@ -97,6 +97,14 @@ export default BlogDesign3; // text-productTitle // text-lightGrayTextColor +// background color i used in commnet number background color +// bg-lightGrayBgColor +// bg-white + +// text color i used for comment number text color: +// text-grayTextColor +// text-white + BlogDesign3.defaultProps = { blogTitleColor: "text-lightGrayTextColor", blogCommentAuthorTextColor: "text-lightGrayTextColor", @@ -104,4 +112,9 @@ BlogDesign3.defaultProps = { blogSubTitle: true, blogAuthor: true, blogComments: true, + + commentNumBgColor: "bg-lightGrayBgColor", + commentNumTextColor: "text-white", + commentNumTopPosition: "-top-2", + commentNumRightPosition: "-right-2", }; diff --git a/src/components/Blogs/design4/BlogDesign4.js b/src/components/Blogs/design4/BlogDesign4.js index 74a7d30..7876c36 100644 --- a/src/components/Blogs/design4/BlogDesign4.js +++ b/src/components/Blogs/design4/BlogDesign4.js @@ -3,13 +3,18 @@ import React from "react"; import blogImage from "../../../assets/images/blog-featured-image.jpg"; import blogAuthorImg from "../../../assets/images/blog-author.png"; -import commentIcon from "../../../assets/icons/black-comment-icon.svg"; +import commentIcon from "../../../assets/icons/light-gray-comment-icon.svg"; +import whiteCommentIcon from "../../../assets/icons/white-comment-icon.svg"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import {} from "@fortawesome/free-brands-svg-icons"; -import { faComment } from "@fortawesome/free-solid-svg-icons"; - -const BlogDesign4 = () => { +const BlogDesign4 = ({ + blogExcerpt, + blogAuthor, + blogComments, + commentNumBgColor, + commentNumTextColor, + commentNumTopPosition, + commentNumRightPosition, +}) => { return (
{/* title holder */} @@ -35,32 +40,37 @@ const BlogDesign4 = () => {

آیا مواد غذای پر فیبر و مفید هستند؟

-

- در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد - شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا - دیگران متوجه شوند. -

+ {blogExcerpt && ( +

+ در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد + شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا + دیگران متوجه شوند. +

+ )}
-
- -

- حامد دژبانی نسب -

-
-
-

- زمان مطالعه 30 دقیقه -

-
- - - 26 - -
{" "} -
+ {blogAuthor && ( +
+ +

+ حامد دژبانی نسب +

+
+ )} + {blogComments && ( +
+

+ زمان مطالعه 30 دقیقه +

+
+ + + 26 + +
+
+ )}
@@ -69,3 +79,22 @@ const BlogDesign4 = () => { }; export default BlogDesign4; + +// background color i used in commnet number background color +// bg-lightGrayBgColor +// bg-white + +// text color i used for comment number text color: +// text-grayTextColor +// text-white + +BlogDesign4.defaultProps = { + blogExcerpt: true, + blogAuthor: true, + blogComments: true, + + commentNumBgColor: "bg-lightGrayBgColor", + commentNumTextColor: "text-white", + commentNumTopPosition: "-top-2", + commentNumRightPosition: "-right-2", +}; diff --git a/src/components/Blogs/design5/BlogDesign5.js b/src/components/Blogs/design5/BlogDesign5.js index a841861..a76a26a 100644 --- a/src/components/Blogs/design5/BlogDesign5.js +++ b/src/components/Blogs/design5/BlogDesign5.js @@ -3,15 +3,20 @@ import React from "react"; import blogImage from "../../../assets/images/blog-featured-image.jpg"; import blogAuthorImg from "../../../assets/images/blog-author.png"; -import commentIcon from "../../../assets/icons/black-comment-icon.svg"; +import commentIcon from "../../../assets/icons/light-gray-comment-icon.svg"; +import whiteCommentIcon from "../../../assets/icons/white-comment-icon.svg"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import {} from "@fortawesome/free-brands-svg-icons"; -import { faComment } from "@fortawesome/free-solid-svg-icons"; - -const BlogDesign5 = ({ blogExcerpt, blogAuthor, blogComments }) => { +const BlogDesign5 = ({ + blogExcerpt, + blogAuthor, + blogComments, + commentNumBgColor, + commentNumTextColor, + commentNumTopPosition, + commentNumRightPosition, +}) => { return ( -
+
{/* title holder */}

@@ -42,7 +47,6 @@ const BlogDesign5 = ({ blogExcerpt, blogAuthor, blogComments }) => { دیگران متوجه شوند.

)} -
{blogAuthor && (
@@ -58,14 +62,13 @@ const BlogDesign5 = ({ blogExcerpt, blogAuthor, blogComments }) => { زمان مطالعه 30 دقیقه

- - + + 26 -
{" "} +
)}

@@ -77,8 +80,21 @@ const BlogDesign5 = ({ blogExcerpt, blogAuthor, blogComments }) => { export default BlogDesign5; +// background color i used in commnet number background color +// bg-lightGrayBgColor +// bg-white + +// text color i used for comment number text color: +// text-grayTextColor +// text-white + BlogDesign5.defaultProps = { blogExcerpt: true, blogAuthor: true, blogComments: true, + + commentNumBgColor: "bg-lightGrayBgColor", + commentNumTextColor: "text-white", + commentNumTopPosition: "-top-2", + commentNumRightPosition: "-right-2", }; diff --git a/src/components/Blogs/design6/BlogDesign6.js b/src/components/Blogs/design6/BlogDesign6.js index bf2b694..9e019b2 100644 --- a/src/components/Blogs/design6/BlogDesign6.js +++ b/src/components/Blogs/design6/BlogDesign6.js @@ -3,14 +3,20 @@ import React from "react"; import blogImage from "../../../assets/images/blog-featured-image.jpg"; import blogAuthorImg from "../../../assets/images/blog-author.png"; -import commentIcon from "../../../assets/icons/black-comment-icon.svg"; import FeaturedImage from "../../../assets/images/article-featured-image.svg"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import {} from "@fortawesome/free-brands-svg-icons"; -import { faComment } from "@fortawesome/free-solid-svg-icons"; +import commentIcon from "../../../assets/icons/light-gray-comment-icon.svg"; +import whiteCommentIcon from "../../../assets/icons/white-comment-icon.svg"; -const BlogDesign6 = ({ blogExcerpt, blogAuthor, blogComments }) => { +const BlogDesign6 = ({ + blogExcerpt, + blogAuthor, + blogComments, + commentNumBgColor, + commentNumTextColor, + commentNumTopPosition, + commentNumRightPosition, +}) => { return (
{/* title holder */} @@ -56,14 +62,13 @@ const BlogDesign6 = ({ blogExcerpt, blogAuthor, blogComments }) => { زمان مطالعه 30 دقیقه

- - + + 26 -
{" "} + )} @@ -75,8 +80,21 @@ const BlogDesign6 = ({ blogExcerpt, blogAuthor, blogComments }) => { export default BlogDesign6; +// background color i used in commnet number background color +// bg-lightGrayBgColor +// bg-white + +// text color i used for comment number text color: +// text-grayTextColor +// text-white + BlogDesign6.defaultProps = { blogExcerpt: true, blogAuthor: true, blogComments: true, + + commentNumBgColor: "bg-lightGrayBgColor", + commentNumTextColor: "text-white", + commentNumTopPosition: "-top-2", + commentNumRightPosition: "-right-2", }; diff --git a/src/components/vodProductDesign/VodProductDesign.js b/src/components/vodProductDesign/VodProductDesign.js index beb2d8d..214a095 100644 --- a/src/components/vodProductDesign/VodProductDesign.js +++ b/src/components/vodProductDesign/VodProductDesign.js @@ -45,6 +45,7 @@ const VodProductDesign = ({ priceStarHolder, priceStarAlignment, rangeWidth, + playBtnBgColor, }) => { return (
@@ -97,7 +98,7 @@ const VodProductDesign = ({ )} {/* play button */} -
+
{/* select Color */} @@ -258,6 +259,10 @@ export default VodProductDesign; // text color i used for product cat: // text-darkCrimsonTextColor +// bg color i used for play button icon: +// bg-playButtonIcon +// bg-playButtonIcon2 + VodProductDesign.defaultProps = { // icons on product image colors: true, @@ -298,6 +303,8 @@ VodProductDesign.defaultProps = { productTitleCategoryHolder: "flex-row", productTitleCategoryHolderAlignment: "items-center", + playBtnBgColor: "bg-playButtonIcon", + // برای اینکه بتونیم ستاره هارو بالا قیمت بزاریم و دیزاین را مثل کتاب ها در بیاریم // یادمون باشه که حتما رویه // flex-col-reverse diff --git a/src/index.scss b/src/index.scss index a7c5efc..e3004a8 100644 --- a/src/index.scss +++ b/src/index.scss @@ -16,7 +16,7 @@ body { } .comment-num { - font-size: 10px; + font-size: 8px; padding-top: 4px; padding-bottom: 2px; padding-left: 4px; diff --git a/tailwind.config.js b/tailwind.config.js index caef8f2..bb0cb35 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -54,6 +54,7 @@ module.exports = { rangeBgColor: "#D3E9FF", rangeFillBgColor: "#68A8E6", playButtonIcon: "#0D0D0D99", + playButtonIcon2: "#E8E8E899", }), borderColor: (theme) => ({ ...theme("colors"),