From a1ec6ac40e51065e40f1dffe2dba6cb2aacba343 Mon Sep 17 00:00:00 2001 From: mahdi Date: Tue, 21 Dec 2021 13:15:51 +0330 Subject: [PATCH] button styles added --- src/App.js | 4 +- src/assets/icons/black-downward-arrow.png | Bin 0 -> 404 bytes src/assets/icons/black-downward-arrow.svg | 8 ++ src/assets/icons/black-left-arrow.svg | 8 ++ src/assets/icons/black-right-arrow.svg | 8 ++ src/assets/icons/black-upward-arrow.png | Bin 0 -> 385 bytes src/assets/icons/green-left-arrow.svg | 8 ++ src/assets/icons/white-downward-arrow.svg | 3 + src/assets/icons/white-left-arrow.svg | 6 + src/assets/icons/white-right-arrow.svg | 8 ++ src/assets/icons/white-upward-arrow.svg | 3 + src/components/buttonDesign/ButtonDesign.js | 110 ++++++++++++++++++ src/components/buttonDesign/ButtonDesign.scss | 0 tailwind.config.js | 13 +++ 14 files changed, 178 insertions(+), 1 deletion(-) create mode 100644 src/assets/icons/black-downward-arrow.png create mode 100644 src/assets/icons/black-downward-arrow.svg create mode 100644 src/assets/icons/black-left-arrow.svg create mode 100644 src/assets/icons/black-right-arrow.svg create mode 100644 src/assets/icons/black-upward-arrow.png create mode 100644 src/assets/icons/green-left-arrow.svg create mode 100644 src/assets/icons/white-downward-arrow.svg create mode 100644 src/assets/icons/white-left-arrow.svg create mode 100644 src/assets/icons/white-right-arrow.svg create mode 100644 src/assets/icons/white-upward-arrow.svg create mode 100644 src/components/buttonDesign/ButtonDesign.js create mode 100644 src/components/buttonDesign/ButtonDesign.scss diff --git a/src/App.js b/src/App.js index f7e9a9b..e9ebc07 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,12 @@ import "./App.scss"; +import ButtonDesign from "./components/buttonDesign/ButtonDesign"; import ProductDesign from "./components/productDesign/ProductDesign"; function App() { return (
- + {/* */} +
); } diff --git a/src/assets/icons/black-downward-arrow.png b/src/assets/icons/black-downward-arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..ebe6a8a82757a51f0792d2d2b19a2b42de79fa73 GIT binary patch literal 404 zcmV;F0c-w=P)hP1SOeHRJ!51HYXF;9K4VFe92jHU zrfDuhh$nVYU7mBkjH2k&bzNPSs4U#ZltA!Z#V^109{$Dx}t1lmSr*6l6T<^P6gGr?XjvVVbsb#;Gfpw{?6W7bt6E!yya+0xWI%-@w`nzH`<7r?WIXZ*6S2NSdZQ09pdj+ZCu^ y*9#cNglU$*OifWMv8Kov8M8Hjt)n@HHTD6l)B!e@Jh#ID0000 + + + + + + + diff --git a/src/assets/icons/black-left-arrow.svg b/src/assets/icons/black-left-arrow.svg new file mode 100644 index 0000000..bc9b3f6 --- /dev/null +++ b/src/assets/icons/black-left-arrow.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/icons/black-right-arrow.svg b/src/assets/icons/black-right-arrow.svg new file mode 100644 index 0000000..c540675 --- /dev/null +++ b/src/assets/icons/black-right-arrow.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/icons/black-upward-arrow.png b/src/assets/icons/black-upward-arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..180df5df1f66765d51cbc207edc7af288941655e GIT binary patch literal 385 zcmV-{0e=38P)UjOe{v|PM?J5X@_p&UH zd7huC2y8s7lmJ@$zW)Ua@2(avj4}H(O$!ciGAxecZC%&jfLPrEnx;8>p7+VYO@bk) z3*cNrTez1F%Eggk7z$F`xpdq!0R2edNU$MPS57J1XxJE(ByJRpf|9~LgiS$7;09qF z6c^VElR$BBC`=MH6^Fv2C_2H}^wutV>CP!mi*a+Yqok^;4c1@pU~T{Vl}7a?2b=!D zS{IsF7={*lorOsWr{DD@+;08=UE-8wSt9;-!7c63{Da00000NkvXXu0mjf3Q?k> literal 0 HcmV?d00001 diff --git a/src/assets/icons/green-left-arrow.svg b/src/assets/icons/green-left-arrow.svg new file mode 100644 index 0000000..1daebb0 --- /dev/null +++ b/src/assets/icons/green-left-arrow.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/icons/white-downward-arrow.svg b/src/assets/icons/white-downward-arrow.svg new file mode 100644 index 0000000..ed3c63b --- /dev/null +++ b/src/assets/icons/white-downward-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/white-left-arrow.svg b/src/assets/icons/white-left-arrow.svg new file mode 100644 index 0000000..a97c3c7 --- /dev/null +++ b/src/assets/icons/white-left-arrow.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/icons/white-right-arrow.svg b/src/assets/icons/white-right-arrow.svg new file mode 100644 index 0000000..b22a9ac --- /dev/null +++ b/src/assets/icons/white-right-arrow.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/icons/white-upward-arrow.svg b/src/assets/icons/white-upward-arrow.svg new file mode 100644 index 0000000..c9cb456 --- /dev/null +++ b/src/assets/icons/white-upward-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/buttonDesign/ButtonDesign.js b/src/components/buttonDesign/ButtonDesign.js new file mode 100644 index 0000000..c52b320 --- /dev/null +++ b/src/components/buttonDesign/ButtonDesign.js @@ -0,0 +1,110 @@ +import React from "react"; +import "./ButtonDesign.scss"; + +import greenLeftArrow from "../../assets/icons/green-left-arrow.svg"; + +import whiteLeftArrow from "../../assets/icons/white-left-arrow.svg"; +import whiteRightArrow from "../../assets/icons/white-right-arrow.svg"; +import whiteUpwardArrow from "../../assets/icons/white-upward-arrow.svg"; +import whiteDownwardArrow from "../../assets/icons/white-downward-arrow.svg"; + +import blackRightArrow from "../../assets/icons/black-right-arrow.svg"; +import blackLeftArrow from "../../assets/icons/black-left-arrow.svg"; +import blackUpwardArrow from "../../assets/icons/black-upward-arrow.png"; +import blackDownwardArrow from "../../assets/icons/black-downward-arrow.png"; + +const ButtonDesign = () => { + return ( +
+
+
+

طراحی دکمه های سایت

+
+ {/* Button UI Design */} +
+
+ +
+ +
+ +
+ +
+ +
+
+ +
+ +
+ + + +
+
+ +
+ + +
+ + +
+ + +
+ + +
+
+
+
+ ); +}; + +export default ButtonDesign; diff --git a/src/components/buttonDesign/ButtonDesign.scss b/src/components/buttonDesign/ButtonDesign.scss new file mode 100644 index 0000000..e69de29 diff --git a/tailwind.config.js b/tailwind.config.js index e6987e6..5024341 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,6 +4,7 @@ module.exports = { extend: {}, textColor: (theme) => ({ ...theme("colors"), + // used in ProductDesign Component discountPriceTitle: "#4ACA53", productTitle: "#246E8A", productContent: "#707070", @@ -16,14 +17,26 @@ module.exports = { selectColor2: "#89ECFF", selectColor3: "#FC5353", selectColor4: "#FCF653", + // used in ButtonDesign Component + moreInfoButtonTextColor: "#06BACE", + cancleButtonTextColor: "#646464", }), backgroundColor: (theme) => ({ ...theme("colors"), + // used in ProductDesign Component productTagBg: "#E1FAFF", likeBtnBg: "#FFF3F3", discountPriceBg: "#F0FFF1", counterBg: "#66B1EB", incrementDecrementBg: "#2E7AB5", + // used in ButtonDesign Component + moreInfoButtonBg: "#038A99", + cancleButtonBg: "#DBDBDB", + }), + borderColor: (theme) => ({ + ...theme("colors"), + // used in ButtonDesign Component + moreInfoButtonBorderColor: "#06BACE", }), }, plugins: [],