From 65f7fc3da13c1bcc5e424e8f8823cba69fcca7e7 Mon Sep 17 00:00:00 2001 From: RezaAshrafi77 Date: Mon, 4 Oct 2021 17:24:22 +0330 Subject: [PATCH] reza designed all --- src/components/Navbar/index.scss | 3 +- src/components/StyledRating/index.tsx | 4 +- src/components/Textarea/index.scss | 22 +- src/custom.scss | 33 +- src/views/Auth/Login/index.scss | 279 ++++++++++++++++- src/views/Auth/Login/index.tsx | 15 +- src/views/Auth/SignUp/index.scss | 154 +++++++++- src/views/Auth/SignUp/index.tsx | 69 +++-- src/views/Contact/index.scss | 282 +++++++++++++++++- src/views/Contact/index.tsx | 76 ++++- src/views/Course/Lesson/index.scss | 82 +++++ src/views/Course/Lesson/index.tsx | 74 ++--- src/views/Course/index.scss | 199 +++++++++++- src/views/Course/index.tsx | 66 ++-- src/views/Faq/index.scss | 78 ++++- src/views/Home/Footer/index.tsx | 2 +- .../Subscription/DiscountCode/index.scss | 45 +++ .../Subscription/SubscribeRadio/index.scss | 70 +++++ src/views/Subscription/index.scss | 38 ++- src/views/VideoTube/Attachments/index.scss | 26 ++ src/views/VideoTube/Book/index.scss | 32 ++ src/views/VideoTube/Comment/index.scss | 38 +++ src/views/VideoTube/LessonPlayList/index.scss | 90 ++++++ src/views/VideoTube/index.scss | 207 +++++++++++++ src/views/VideoTube/index.tsx | 35 ++- 25 files changed, 1890 insertions(+), 129 deletions(-) diff --git a/src/components/Navbar/index.scss b/src/components/Navbar/index.scss index b8cc369..40935db 100644 --- a/src/components/Navbar/index.scss +++ b/src/components/Navbar/index.scss @@ -100,6 +100,7 @@ @media screen and (min-width: 641px) and (max-width: 1007px){ .nav{ + background-color: black; &__container{ max-width: 900px; &--buttons{ @@ -121,7 +122,7 @@ @media screen and (max-width: 640px){ .nav{ - background-color: hsla(0, 0%, 31%, 1); + background-color: black; &__container{ max-width: 500px; &--buttons{ diff --git a/src/components/StyledRating/index.tsx b/src/components/StyledRating/index.tsx index a07d24f..0e0ecf1 100644 --- a/src/components/StyledRating/index.tsx +++ b/src/components/StyledRating/index.tsx @@ -12,8 +12,8 @@ export default function StyledRating(props : any) { name="customized-color" defaultValue={2} precision={0.5} - icon={} - emptyIcon={} + icon={} + emptyIcon={} /> ) diff --git a/src/components/Textarea/index.scss b/src/components/Textarea/index.scss index 8c80231..ca70370 100644 --- a/src/components/Textarea/index.scss +++ b/src/components/Textarea/index.scss @@ -29,9 +29,27 @@ @media screen and (min-width: 1008px) and (max-width: 1440px) { .custom-textarea{ - font-size: calc(100vw / 72); + font-size: calc(100vw / 85); &::placeholder{ - font-size: calc(100vw / 72); + font-size: calc(100vw / 85); + } + } +} + +@media screen and (min-width: 641px) and (max-width: 1007px) { + .custom-textarea{ + font-size: calc(100vw / 40); + &::placeholder{ + font-size: calc(100vw / 40); + } + } +} + +@media screen and (max-width: 640px) { + .custom-textarea{ + font-size: calc(100vw / 30); + &::placeholder{ + font-size: calc(100vw / 30); } } } \ No newline at end of file diff --git a/src/custom.scss b/src/custom.scss index e3f6fa7..debe871 100644 --- a/src/custom.scss +++ b/src/custom.scss @@ -5,6 +5,10 @@ border: 0px; } +.mobile, .desktop{ + display: flex; +} + .submit-large{ padding: 12px 24px; } @@ -126,8 +130,9 @@ } .MuiSelect-select:focus { - background-color: inherit !important; - color: #4d4d4d !important; + // background-color: inherit !important; + // color: #4d4d4d !important; + border: 1px solid #707070; } .MuiMenu-list { @@ -163,6 +168,9 @@ max-width: 1350px; } } + .mobile{ + display: none !important; + } } @media screen and (min-width: 1008px) and (max-width: 1440px){ @@ -174,4 +182,25 @@ max-width: 1250px; } } + .mobile{ + display: none !important; + } +} + +@media screen and (min-width: 641px) and (max-width: 1007px) { + .desktop{ + display: none !important; + } + .submit-large{ + font-size: calc(100vw / 38); + } +} + +@media screen and (max-width: 640px) { + .desktop{ + display: none !important; + } + .submit-large{ + font-size: calc(100vw / 25); + } } \ No newline at end of file diff --git a/src/views/Auth/Login/index.scss b/src/views/Auth/Login/index.scss index 2d714f5..e6d4c47 100644 --- a/src/views/Auth/Login/index.scss +++ b/src/views/Auth/Login/index.scss @@ -10,7 +10,7 @@ } } img { - transform: rotate(-90deg); + // transform: rotate(-90deg); } .MuiButtonBase-root{ padding: 0px !important; @@ -278,3 +278,280 @@ } } } + +@media screen and (min-width: 641px) and (max-width: 1007px) { + .login { + background: black; + .footer{ + display: none !important; + } + section { + // background-color: red; + width: 90%; + max-width: 700px; + height: calc(100% - 60px); + justify-content: center; + b { + color: white; + font-size: calc(100vw / 30); + margin-bottom: 30px; + font-weight: 500; + } + + button { + background-color: #84de56; + color: white; + font-size: calc(100vw / 30); + width : 100%; + max-width: 400px; + margin: 50px auto 0px; + padding: 10px 0px; + border: 0px; + border-radius: 10px; + } + } + &__info { + width: 300px; + margin: 40px auto 0px; + text-align: center; + color: white; + font-size: calc(100vw / 40); + a { + color: #84de56; + } + } + &__back { + position: fixed; + top: 100px; + margin-bottom: 40px; + left: 30px; + a { + color: white; + font-size: calc(100vw / 110); + } + img{ + width : 50px; + } + } + &__options{ + padding-top: 20px; + div{ + font-size: calc(100vw / 40); + } + a{ + font-size: calc(100vw / 45); + } + } + .MuiFormControl-root { + width: 100%; + margin: 10px auto !important; + .MuiSelect-iconOutlined { + display: none; + } + .MuiSelect-outlined.MuiSelect-outlined { + padding-right: 15px; + } + color: #797979 !important; + } + .MuiOutlinedInput-notchedOutline { + top: 0px !important; + } + .MuiOutlinedInput-notchedOutline { + border-color: #666666 !important; + border-width: 1px !important; + color: green !important; + border-radius: 10px !important; + } + + .MuiOutlinedInput-input { + padding: 10px 14px !important; + font-family: numeralLight; + font-size: calc(100vw / 30); + background-color: #2A2A2A; + &:focus{ + border: 0.2px solid #84de56 !important; + border-radius: 10px; + transform : translateY(0px); + z-index: 100; + } + } + .MuiInputLabel-outlined { + font-family: numeralLight !important; + display: inline !important; + position: absolute; + text-align: right !important; + right: 15px; + top: calc(50%); + padding: 0px !important; + transform: translate(0px, -50%) scale(1) !important; + } + .MuiInputLabel-shrink { + text-align: center !important; + display: inline; + position: absolute; + right: 0px; + top: -8px; + transform: translate(0px, 0px) scale(0.85) !important; + padding: 0px 10px !important; + } + + label { + background-color: #2A2A2A; + width: fit-content; + text-align: center; + color: #B5B5B5 !important; + letter-spacing: -1px; + font-size: calc(100vw / 40); + z-index: 110; + } + .Mui-focused { + color: rgba(0, 0, 0, 1) !important; + border-color: #84de56 !important; + // background-color: white; + color: #84de56 !important; + } + + .MuiInputBase-input { + height: auto !important; + } + } +} + + +@media screen and (max-width: 640px) { + .login { + background: black; + section { + // background-color: red; + width: 90%; + max-width: 400px; + height: calc(100% - 60px); + // transform: scale(0.9); + justify-content: center; + // align-items: center; + b { + color: white; + font-size: calc(100vw / 18); + margin-bottom: 30px; + font-weight: 500; + } + + button { + // position: absolute; + // top: 100px; + // left: 20px; + margin-top: 25px; + background-color: #84de56; + color: white; + font-size: calc(100vw / 25); + padding: 10px 0px; + border: 0px; + border-radius: 10px; + } + } + &__info { + width: 300px; + margin: 40px auto 0px; + text-align: center; + color: white; + font-size: calc(100vw / 30); + a { + color: #84de56; + } + } + &__back { + position: fixed; + top: 70px; + left : 20px; + margin-bottom: 40px; + a { + color: white; + font-size: calc(100vw / 110); + } + img{ + // transform: scale() + } + } + &__options{ + div{ + font-size: calc(100vw / 30); + } + a{ + font-size: calc(100vw / 30); + } + } + .MuiFormControl-root { + width: 100%; + margin: 10px auto !important; + .MuiSelect-iconOutlined { + display: none; + } + .MuiSelect-outlined.MuiSelect-outlined { + padding-right: 15px; + } + color: #797979 !important; + } + .MuiOutlinedInput-notchedOutline { + top: 0px !important; + } + .MuiOutlinedInput-notchedOutline { + border-color: #666666 !important; + border-width: 1px !important; + color: green !important; + border-radius: 10px !important; + } + + .MuiOutlinedInput-input { + padding: 10px 14px !important; + font-family: numeralLight; + font-size: calc(100vw / 20); + background-color: #2A2A2A; + &:focus{ + border: 0.2px solid #84de56 !important; + border-radius: 10px; + transform : translateY(0px); + z-index: 100; + } + } + .MuiInputLabel-outlined { + font-family: numeralLight !important; + display: inline !important; + position: absolute; + text-align: right !important; + right: 15px; + top: calc(50%); + padding: 0px !important; + transform: translate(0px, -50%) scale(1) !important; + } + .MuiInputLabel-shrink { + text-align: center !important; + display: inline; + position: absolute; + right: 0px; + top: -8px; + transform: translate(0px, 0px) scale(0.85) !important; + padding: 0px 10px !important; + } + + label { + background-color: #2A2A2A; + width: fit-content; + text-align: center; + color: #B5B5B5 !important; + letter-spacing: -1px; + font-size: calc(100vw / 30); + z-index: 110; + border-radius: 50%; + } + .Mui-focused { + color: rgba(0, 0, 0, 1) !important; + border-color: #84de56 !important; + // background-color: white; + color: #84de56 !important; + } + + .MuiInputBase-input { + height: auto !important; + } + } +} diff --git a/src/views/Auth/Login/index.tsx b/src/views/Auth/Login/index.tsx index 41b1dd2..779e3e4 100644 --- a/src/views/Auth/Login/index.tsx +++ b/src/views/Auth/Login/index.tsx @@ -2,14 +2,15 @@ import React, { useState } from "react"; import Navbar from "../../../components/Navbar/index"; import Footer from "../../../views/Home/Footer/index"; import Input from "../../../components/Input/index"; -import CustomCheckbox from '../../../components/CustomCheckbox/index'; +import CustomCheckbox from "../../../components/CustomCheckbox/index"; import CheckBoxOutlineBlankTwoToneIcon from "@mui/icons-material/CheckBoxOutlineBlankTwoTone"; import CheckBoxRoundedIcon from "@mui/icons-material/CheckBoxRounded"; +import arrowLeft from "../../../assets/icons/arrow-left.png"; import { Link } from "react-router-dom"; import arrow from "../../../assets/icons/dropdown.png"; import onInput from "../../../util/onInput"; -import { connect, useSelector } from "react-redux"; +import { connect } from "react-redux"; import { user } from "../../../redux/actions"; import "./index.scss"; @@ -32,8 +33,14 @@ function Login(props: any) {
- بازگشت به صفحه قبل - + {window.innerWidth > 1007 ? ( + <> + بازگشت به صفحه قبل + + + ) : ( + + )}
diff --git a/src/views/Auth/SignUp/index.scss b/src/views/Auth/SignUp/index.scss index c61c2ff..9d55db7 100644 --- a/src/views/Auth/SignUp/index.scss +++ b/src/views/Auth/SignUp/index.scss @@ -4,7 +4,7 @@ position: relative; font-family: numeralLight; img { - transform: rotate(-90deg); + // transform: rotate(-90deg); } background: linear-gradient( 135deg, @@ -156,4 +156,156 @@ font-size: calc(100vw / 110); } } +} + +@media screen and (min-width: 641px) and (max-width: 1007px) { + .signup { + background: black; + .footer{ + display: none !important; + } + section { + width: 90%; + max-width: 700px; + height: calc(100% - 60px); + justify-content: center; + b { + color: white; + font-size: calc(100vw / 35); + margin-bottom: 70px; + font-weight: 500; + p{ + // font-size: calc(100vw / 30) !important; + } + } + input { + text-align: center; + background-color: #2a2a2a; + border: 1px solid #a2a2a2; + border-radius: 8px; + font-size: calc(100vw / 30); + padding: 10px 14px; + color: #84de56; + direction: ltr; + &:focus { + border: 1px solid #84de56; + &::placeholder { + color: #84de56; + opacity: 0.3; + } + } + } + button { + background-color: #84de56; + color: white; + font-size: calc(100vw / 30); + padding: 10px 0px; + border: 0px; + border-radius: 10px; + width: 100%; + max-width: 400px; + margin: 50px auto 0px; + } + } + &__info { + width: 400px; + margin: 20px auto 0px; + text-align: center; + color: white; + font-size: calc(100vw / 40); + a { + color: #84de56; + } + } + &__back { + position: fixed; + top: 100px; + left: 30px; + margin-bottom: 50px; + a { + color: white; + font-size: calc(100vw / 110); + } + img{ + width: 50px; + } + } + &__error{ + margin-top: 10px; + color: rgb(255, 115, 115); + font-size: calc(100vw / 110); + } + } +} + +@media screen and (max-width: 640px) { + .signup { + background: black; + section { + width: 90%; + max-width: 400px; + height: calc(100% - 60px); + justify-content: center; + b { + color: white; + font-size: calc(100vw / 20); + margin-bottom: 30px; + font-weight: 500; + p{ + // font-size: calc(100vw / 30) !important; + } + } + input { + text-align: center; + background-color: #2a2a2a; + border: 1px solid #a2a2a2; + border-radius: 8px; + font-size: calc(100vw / 20); + padding: 10px 14px; + color: white; + direction: ltr; + &:focus { + border: 1px solid #84de56; + &::placeholder { + color: #84de56; + opacity: 0.3; + } + } + } + button { + margin-top: 20px; + background-color: #84de56; + color: white; + font-size: calc(100vw / 20); + padding: 10px 0px; + border: 0px; + border-radius: 10px; + } + } + &__info { + width: 300px; + margin: 20px auto 0px; + text-align: center; + color: white; + font-size: calc(100vw / 30); + a { + color: #84de56; + } + } + &__back { + position: fixed; + top: 70px; + left: 20px; + margin-bottom: 50px; + a { + color: white; + font-size: calc(100vw / 110); + } + } + &__error{ + margin-top: 10px; + color: rgb(255, 115, 115); + font-size: calc(100vw / 110); + } + } } \ No newline at end of file diff --git a/src/views/Auth/SignUp/index.tsx b/src/views/Auth/SignUp/index.tsx index a979b11..c1c5759 100644 --- a/src/views/Auth/SignUp/index.tsx +++ b/src/views/Auth/SignUp/index.tsx @@ -4,19 +4,19 @@ import Footer from "../../../views/Home/Footer/index"; import onInput from "../../../util/onInput"; import { Link } from "react-router-dom"; import arrow from "../../../assets/icons/dropdown.png"; +import arrowLeft from "../../../assets/icons/arrow-left.png"; import "./index.scss"; import { connect, useSelector } from "react-redux"; import { user } from "../../../redux/actions"; - interface SignUpFields { cellphone?: String; otp?: String; } -function SignUp(props : any) { +function SignUp(props: any) { const [level, setLevel] = useState("phonenumber"); const [signUpFields, setSignUpFiels] = useState( undefined @@ -28,35 +28,32 @@ function SignUp(props : any) { }; const submitPhoneNumber = () => { - if(signUpFields?.cellphone?.slice(0,2) === '09' && signUpFields?.cellphone.length === 11){ + if ( + signUpFields?.cellphone?.slice(0, 2) === "09" && + signUpFields?.cellphone.length === 11 + ) { setLevel("otp"); - props.submitOtp({cellphone : signUpFields?.cellphone}); + props.submitOtp({ cellphone: signUpFields?.cellphone }); setError(undefined); - }else{ - setError('شماره موبایل خود را چک کنید.'); + } else { + setError("شماره موبایل خود را چک کنید."); } - } + }; const submitOTP = () => { - if( signUpFields?.otp?.length === 4){ - props.submitOtp({cellphone : signUpFields?.cellphone}); + if (signUpFields?.otp?.length === 4) { + props.submitOtp({ cellphone: signUpFields?.cellphone }); setError(undefined); - }else{ - setError('کد وارد شده را چک کنید.'); + } else { + setError("کد وارد شده را چک کنید."); } - } + }; return (
{level === "phonenumber" && (
- {/*
- - بازگشت به صفحه قبل - - -
*/} ثبت نام
@@ -76,7 +73,10 @@ function SignUp(props : any) { } /> {error} - +

با ثبت نام در سرویس ویدئویی دانوین قوانین شرایط استفاده و حریم خصوصی @@ -86,18 +86,25 @@ function SignUp(props : any) { )} {level === "otp" && (

-
setLevel('phonenumber')}> +
setLevel("phonenumber")} + > - بازگشت به صفحه قبل - + {window.innerWidth > 1007 ? ( + <> + بازگشت به صفحه قبل + + + ) : ( + + )}
تاییدیه شماره موبایل
-

- کد ارسال شده به شماره {signUpFields?.cellphone} را وارد کنید. -

+

کد ارسال شده به شماره {signUpFields?.cellphone} را وارد کنید.

 - {error} - + {error} +

)} @@ -120,5 +129,7 @@ function SignUp(props : any) { ); } -export default connect(() => ({ -}), {submitSignUp : user.otp_login, submitOtp : user.otp})(SignUp); \ No newline at end of file +export default connect(() => ({}), { + submitSignUp: user.otp_login, + submitOtp: user.otp, +})(SignUp); diff --git a/src/views/Contact/index.scss b/src/views/Contact/index.scss index db00a80..0691140 100644 --- a/src/views/Contact/index.scss +++ b/src/views/Contact/index.scss @@ -30,6 +30,23 @@ } } } + &__tab{ + margin-bottom: 30px; + border-radius: 10px !important; + border: 1px solid #4DD35B; + button{ + width: 50%; + padding: 10px 0px; + border: none; + background-color: inherit; + border-radius: 10px !important; + color: #4DD35B; + } + &--active{ + background-color: #4DD35B !important; + color: white !important; + } + } } @media screen and (min-width: 1441px) { @@ -138,11 +155,11 @@ .contact{ main{ max-width: 1250px; - padding: 60px 10px; + padding: 40px 10px; header{ padding-bottom: 20px; h1{ - font-size: calc(100vw / 35); + font-size: calc(100vw / 45); } } } @@ -155,10 +172,10 @@ margin-right: 20px; &--data{ h2{ - font-size: calc(100vw / 60); + font-size: calc(100vw / 70); } p{ - font-size: calc(100vw / 80); + font-size: calc(100vw / 90); } } @@ -187,8 +204,11 @@ .MuiOutlinedInput-input { padding: 15px 14px !important; font-family: numeralLight; - font-size: 20px; + font-size: calc(100vw / 80); background-color: #272727; + color: #84de56; + line-height: 1.5; + border-radius: 10px; &:focus{ border: 0.2px solid #84de56 !important; border-radius: 10px; @@ -201,7 +221,7 @@ position: absolute; text-align: right !important; right: 15px; - top: 22px; + top: 18px; padding: 0px !important; transform: translate(0px, 0px) scale(1) !important; } @@ -224,7 +244,255 @@ font-size: 16px; } .Mui-focused { - color: rgba(0, 0, 0, 1) !important; + // color: rgba(0, 0, 0, 1) !important; + border-color: #84de56 !important; + // background-color: white; + color: #84de56 !important; + } + + .MuiInputBase-input { + height: auto !important; + } + } +} + +@media screen and (min-width: 641px) and (max-width: 1007px) { + .contact{ + background : black; + main{ + max-width: 900px; + padding: 30px 20px; + header{ + padding-bottom: 20px; + h1{ + font-size: calc(100vw / 27); + } + } + } + &__tab{ + button{ + font-size: calc(100vw / 37); + } + } + &__form{ + &--name{ + width: 100%; + } + button{ + // width: 100%; + } + } + &__info{ + &--data{ + width : 100% !important; + background-color: #83de564b; + padding: 10px; + border-radius: 10px; + h2{ + font-size: calc(100vw / 35); + color: #4DD35B; + } + p{ + text-align: center; + margin-top: 10px; + font-size: calc(100vw / 40); + } + } + &--map{ + border : none; + padding-top: 0px; + height: 260px; + } + } + .MuiFormControl-root { + width: 100%; + margin: 10px auto !important; + .MuiSelect-iconOutlined { + display: none; + } + .MuiSelect-outlined.MuiSelect-outlined { + padding-right: 15px; + } + color: #797979 !important; + } + .MuiOutlinedInput-notchedOutline { + top: 0px !important; + } + .MuiOutlinedInput-notchedOutline { + border-color: #666666 !important; + border-width: 1px !important; + color: green !important; + border-radius: 10px !important; + } + + .MuiOutlinedInput-input { + padding: 15px 14px !important; + font-family: numeralLight; + font-size: calc(100vw / 40); + background-color: #272727; + color: #84de56; + line-height: 1.5; + border-radius: 10px; + &:focus{ + border: 0.2px solid #84de56 !important; + border-radius: 10px; + transform : translateY(0.5px); + } + } + .MuiInputLabel-outlined { + font-family: numeralLight !important; + display: inline !important; + position: absolute; + text-align: right !important; + right: 15px; + top: 15px; + padding: 0px !important; + transform: translate(0px, 0px) scale(1) !important; + } + .MuiInputLabel-shrink { + text-align: center !important; + display: inline; + position: absolute; + right: 0px; + top: -8px; + transform: translate(0px, 0px) scale(0.85) !important; + padding: 0px 10px !important; + } + + label { + background-color: #272727; + width: fit-content; + text-align: center; + color: #B5B5B5 !important; + letter-spacing: -1px; + font-size: calc(100vw / 40); + } + .Mui-focused { + // color: rgba(0, 0, 0, 1) !important; + border-color: #84de56 !important; + // background-color: white; + color: #84de56 !important; + } + + .MuiInputBase-input { + height: auto !important; + } + } +} + +@media screen and (max-width: 640px) { + .contact{ + background : black; + main{ + max-width: 500px; + padding: 40px 10px; + header{ + padding-bottom: 20px; + h1{ + font-size: calc(100vw / 18); + } + } + } + &__tab{ + button{ + font-size: calc(100vw / 30); + } + } + &__form{ + &--name{ + width: 100%; + } + button{ + // width: 100%; + } + } + &__info{ + &--data{ + width : 100% !important; + background-color: #83de564b; + padding: 10px; + border-radius: 10px; + h2{ + font-size: calc(100vw / 27); + color: #4DD35B; + } + p{ + text-align: center; + margin-top: 10px; + font-size: calc(100vw / 32); + } + } + &--map{ + border : none; + padding-top: 0px; + height: 260px; + } + } + .MuiFormControl-root { + width: 100%; + margin: 10px auto !important; + .MuiSelect-iconOutlined { + display: none; + } + .MuiSelect-outlined.MuiSelect-outlined { + padding-right: 15px; + } + color: #797979 !important; + } + .MuiOutlinedInput-notchedOutline { + top: 0px !important; + } + .MuiOutlinedInput-notchedOutline { + border-color: #666666 !important; + border-width: 1px !important; + color: green !important; + border-radius: 10px !important; + } + + .MuiOutlinedInput-input { + padding: 15px 14px !important; + font-family: numeralLight; + font-size: calc(100vw / 30); + background-color: #272727; + color: #84de56; + line-height: 1.5; + border-radius: 10px; + &:focus{ + border: 0.2px solid #84de56 !important; + border-radius: 10px; + transform : translateY(0.5px); + } + } + .MuiInputLabel-outlined { + font-family: numeralLight !important; + display: inline !important; + position: absolute; + text-align: right !important; + right: 15px; + top: 15px; + padding: 0px !important; + transform: translate(0px, 0px) scale(1) !important; + } + .MuiInputLabel-shrink { + text-align: center !important; + display: inline; + position: absolute; + right: 0px; + top: -8px; + transform: translate(0px, 0px) scale(0.85) !important; + padding: 0px 10px !important; + } + + label { + background-color: #272727; + width: fit-content; + text-align: center; + color: #B5B5B5 !important; + letter-spacing: -1px; + font-size: calc(100vw / 30); + } + .Mui-focused { + // color: rgba(0, 0, 0, 1) !important; border-color: #84de56 !important; // background-color: white; color: #84de56 !important; diff --git a/src/views/Contact/index.tsx b/src/views/Contact/index.tsx index c30ecd8..ebd883b 100644 --- a/src/views/Contact/index.tsx +++ b/src/views/Contact/index.tsx @@ -18,7 +18,7 @@ interface FormData { function Contact({ departmans, selectedDepartman, contactData }: any) { const [formData, setFormData] = useState(undefined); - + const [unit, setUnit] = useState("info"); const onChange = (e: any) => { setFormData({ ...formData, [e.target.name]: e.target.value }); }; @@ -30,9 +30,78 @@ function Contact({ departmans, selectedDepartman, contactData }: any) {

تماس با ما

-
+
+
+ + +
+ {unit === "info" && ( +
+
+ {contactData.map((item: any, i: any) => ( +
+

{item.name}

+

{item.value}

+
+ ))} +
+
+ +
+
+ )} + {unit === "form" && ( +
+
+
+ +
+
+ +
+