diff --git a/src/components/Alert/index.js b/src/components/Alert/index.js index c0de31d..8392632 100644 --- a/src/components/Alert/index.js +++ b/src/components/Alert/index.js @@ -88,8 +88,8 @@ function Alert(props) { cancelButtonText: "متوجه شدم", customClass: { title: "title-error-4", - confirmButton: "confirm-button-2", - cancelButton: "cancle-button2", + confirmButton: "confirm-button-4", + cancelButton: "cancle-button4", popup: "alert-popup4", }, }) @@ -179,8 +179,8 @@ function Alert(props) { cancelButtonText: "متوجه شدم", customClass: { title: "title-error-8", - confirmButton: "confirm-button-7", - cancelButton: "cancle-button7", + confirmButton: "confirm-button-8", + cancelButton: "cancle-button-8", popup: "alert-popup8", }, }) diff --git a/src/components/Alert/index.scss b/src/components/Alert/index.scss index f066819..def55f8 100644 --- a/src/components/Alert/index.scss +++ b/src/components/Alert/index.scss @@ -11,23 +11,16 @@ $lightBlue: #06bace; $confirmBtnBgColor: #f6feff; $blueTitleBgColor: #dfe6e9; -// ? green alert Box , error1 +// * green alert Box , error1 $lightGreen: #3ee924; $darkGreen: #21ae0b; $greenTitleBgColor: #91ff5233; -$darkRed: #e92424; - -// $errorcolor1: #06bace; -// $errorcolor2: #3ee924; -// $errorcolor7: #c70000; -// $errorcolor7button: #e92424; -// $white: #fff; -// $black: #000; -// $contentcolor: #646464; -// $toastbgerror: #ffeaea; -// $toastbgsuccess: #c3ffb9; -// $toastsuccesscolor: #21ae0b; +// ! red alert Box , error7 +$darkRed: #c70000; +$redTitleBgColor: #ff525233; +$red: #e92424; + // ! common styles // * alert box .swal2-container.swal2-center > .swal2-popup { @@ -212,126 +205,205 @@ $darkRed: #e92424; color: $lightGreen !important; } -/* !error4 */ -/* ? تایتل */ +// ? error4 +// TODO تایتل .title-error-4 { text-align: center !important; - color: var(--error-color2) !important; + color: $darkGreen !important; +} + +// * کانفرم باتن +.confirm-button-4 { + background-color: $white !important; + border: solid 1px $lightGreen !important; + color: $darkGreen !important; +} + +// * هاور کانفرم باتن +.confirm-button-4:hover { + background-color: $lightGreen !important; + color: $white !important; +} + +// * کنسل باتن +.cancle-button4 { + background-color: $lightGreen !important; + color: $white !important; + border: solid 1px $lightGreen !important; } + +// * هاور کنسل باتن +.cancle-button4:hover { + background: $white !important; + color: $lightGreen !important; +} + +// * alert box width .alert-popup4 { width: 440px !important; } -/* !error5 */ -/* ? کانفرم باتن */ + +// ? error5 +// TODO کانفرم باتن .confirm-button-5 { - background-color: var(--error-color2) !important; - margin-top: -81px !important; - margin-left: -260px !important; + background-color: $lightGreen !important; padding: 12px 15px !important; border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; + position: absolute; + left: 4% !important; + bottom: 8% !important; } -/* ? اینپوت فیلد */ + +// *input field .input-error-5 { - width: 70% !important; - height: 47px !important ; + position: relative; border-top-left-radius: 0px !important; border-bottom-left-radius: 0px !important; } -/* !error6 */ -/* ? دکمه ضربدر بالا سمت چپ */ + +// ? error6 +// TODO دکمه ضربدر بالا سمت چپ .close-button-6 { - color: var(--error-color1) !important; -} -/* ? هاور دکمه ضربدر بالا سمت چپ */ -.close-button-6:hover { - background-color: var(--error-color1) !important; - color: var(--white) !important; - border: solid 4px var(--error-color1) !important; + color: $lightBlue !important; } -/* !error7 */ -/* ? تایتل */ + +// ? error7 +// TODO تایتل .title-error-7 { - color: var(--error-color7) !important; + color: $darkRed !important; + background-color: $redTitleBgColor !important; } -/* ? دکمه ضربدر بالا سمت چپ */ + +// * دکمه ضربدر بالا سمت چپ .close-button-7 { - background-color: var(--error-color7-button) !important; - color: var(--white) !important; + background-color: $red !important; + color: $white !important; } -/* ? هاور دکمه ضربدر بالا سمت چپ */ + +// * هاور دکمه ضربدر بالا سمت چپ .close-button-7:hover { - background-color: var(--white) !important; - color: var(--error-color7) !important; - border: solid 4px var(--error-color7-button) !important; + background-color: $white !important; + color: $red !important; + border: solid 2px $red !important; } -/* ? کانفرم باتن */ + +// * کانفرم باتن .confirm-button-7 { - background-color: var(--white) !important; - border: solid 2px var(--error-color7-button) !important; - color: var(--error-color7) !important; + background-color: $redTitleBgColor !important; + border: solid 1px $darkRed !important; + color: $darkRed !important; + // + position: absolute !important; + left: 20px !important; + margin-bottom: 33px !important; } -/* ? هاور کانفرم باتن */ + +// * هاور کانفرم باتن .confirm-button-7:hover { - background-color: var(--error-color7-button) !important; - color: var(--white) !important; + background-color: $red !important; + color: $white !important; } -/* ? کنسل باتن */ + +// * کنسل باتن .cancle-button7 { - background-color: var(--error-color7-button) !important; - color: var(--white) !important; - border: solid 2px var(--error-color7-button) !important; + background-color: $red !important; + border: solid 1px $red !important; + color: $white !important; + // + position: absolute !important; + left: 33% !important; + margin-bottom: 33px !important; } -/* ? هاور کنسل باتن */ + +// * هاور کنسل باتن .cancle-button7:hover { - background-color: var(--white) !important; - color: var(--error-color7-button) !important; + background: $white !important; + color: $red !important; } -/* !error8 */ + +// ? error8 .title-error-8 { - color: var(--error-color7-button) !important; + color: $darkRed !important; text-align: center !important; } + +// * کانفرم باتن +.confirm-button-8 { + background-color: $redTitleBgColor !important; + border: solid 1px $darkRed !important; + color: $darkRed !important; +} + +// * هاور کانفرم باتن +.confirm-button-8:hover { + background-color: $red !important; + color: $white !important; +} + +// * کنسل باتن +.cancle-button-8 { + background-color: $red !important; + border: solid 1px $red !important; + color: $white !important; +} + +// * هاور کنسل باتن +.cancle-button-8:hover { + background: $white !important; + color: $red !important; +} + +// * alert box width .alert-popup8 { width: 440px !important; } -/* !error9 */ + +// ? error9 .title-error-9 { - color: var(--white) !important; + color: $white !important; } + .alert-popup9 { - background-color: var(--error-color2) !important; - border-color: var(--error-color2) !important; + background-color: $darkRed !important; + border-color: $darkRed !important; } + .close-button-9 { - background-color: var(--toast-bg-success) !important; - color: var(--toast-success-color) !important; + background-color: $white !important; + color: $red !important; } + .confirm-button-9 { - background-color: #35bb20 !important; + background-color: $red !important; } + .cancle-button9 { - background-color: var(--white) !important; - color: var(--error-color2) !important; + background-color: $white !important; + color: $red !important; } + .footer-error-9 a { - color: var(--white) !important; - border-bottom-color: var(--white) !important; - font-size: 18px !important; + color: $white !important; } -/* !error10 */ + +// ? error10 + .alert-popup10 { - background-color: var(--error-color7-button) !important; - border-color: var(--error-color7-button) !important; + background-color: $darkGreen !important; + border-color: $darkGreen !important; } + .close-button-10 { - background-color: #fd6a6a !important; - color: var(--white) !important; + background-color: $white !important; + color: $darkGreen !important; } + .confirm-button-10 { - background-color: #bb2020 !important; + background-color: $lightGreen !important; } + .cancle-button10 { - background-color: var(--white) !important; - color: var(--error-color7-button) !important; + background-color: $white !important; + color: $lightGreen !important; }