From b92aa90c4f6dc49af47ab6d5a1b9ba69a340d5da Mon Sep 17 00:00:00 2001 From: RezaAshrafi77 Date: Sat, 9 Oct 2021 10:49:51 +0330 Subject: [PATCH] reza added basic2 profile --- src/components/PrivateRouter/index.js | 2 +- src/components/Select/index.tsx | 3 +- src/custom.scss | 166 +++++++-- src/views/Auth/Login/index.scss | 332 ++---------------- src/views/Auth/Profile/Birthdate/index.js | 11 +- src/views/Auth/Profile/Birthdate/index.scss | 59 +++- src/views/Auth/Profile/Document/index.js | 111 ------ src/views/Auth/Profile/Document/index.tsx | 38 ++ src/views/Auth/Profile/Upload/index.scss | 1 + src/views/Auth/Profile/index.scss | 302 +--------------- src/views/Auth/Profile/index.tsx | 30 +- src/views/Contact/index.scss | 290 +-------------- .../Subscription/SubscribeRadio/index.scss | 1 - .../Subscription/SubscribeRadio/index.tsx | 2 +- 14 files changed, 275 insertions(+), 1073 deletions(-) delete mode 100644 src/views/Auth/Profile/Document/index.js create mode 100644 src/views/Auth/Profile/Document/index.tsx diff --git a/src/components/PrivateRouter/index.js b/src/components/PrivateRouter/index.js index e9b84d1..7765f86 100644 --- a/src/components/PrivateRouter/index.js +++ b/src/components/PrivateRouter/index.js @@ -24,7 +24,7 @@ const PrivateRouter = ({ export default connect( (state) => ({ - status: state.publicApi.status, + status: state.user.status, }), {} )(PrivateRouter); diff --git a/src/components/Select/index.tsx b/src/components/Select/index.tsx index 1b893d1..937494a 100644 --- a/src/components/Select/index.tsx +++ b/src/components/Select/index.tsx @@ -46,7 +46,8 @@ export default function CustomizedSelects({ style={{ position: "absolute", left: 5, - top: 19, + top: '50%', + transform: "translateY(-50%)", fontSize: 30, color: "#a5a5a5", }} diff --git a/src/custom.scss b/src/custom.scss index 882c0ba..b623071 100644 --- a/src/custom.scss +++ b/src/custom.scss @@ -1,24 +1,25 @@ -.submit{ - background-color: #4DD35B; +.submit { + background-color: #4dd35b; color: white; border-radius: 10px; border: 0px; } -.mobile, .desktop{ +.mobile, +.desktop { display: flex; } -.submit-large{ +.submit-large { padding: 12px 24px; } -.submit-medium{ - padding : 10px 20px; +.submit-medium { + padding: 10px 20px; } -.submit-small{ - padding : 8px 16px; +.submit-small { + padding: 8px 16px; } .rec-arrow-left { @@ -122,10 +123,83 @@ } .MuiMenu-list { - } -.MuiMenuItem-root{ +//INPUT +.MuiFormControl-root { + width: 100%; + margin: 10px auto !important; + .MuiSelect-iconOutlined { + display: none; + } + .MuiSelect-outlined.MuiSelect-outlined { + padding-right: 15px; + } + color: #797979 !important; + label { + background: black !important; + width: fit-content; + text-align: center; + color: #b5b5b5; + } +} +.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; + color: #84de56 !important; + &:focus { + border: 1px solid #84de56 !important; + border-radius: 10px; + transform: translateY(0px); + border-radius: 10px !important; + z-index: 120; + } +} +.MuiInputLabel-outlined { + font-family: numeralLight !important; + display: inline !important; + position: absolute; + text-align: right !important; + right: 15px !important; + top: 50% !important; + padding: 0px !important; + transform: translate(0px, -50%) scale(1) !important; +} +.MuiInputLabel-shrink { + text-align: center !important; + display: inline; + position: absolute; + right: 0px !important; + top: -8px !important; + transform: translate(0px, 0px) scale(0.85) !important; + padding: 0px 10px !important; + z-index: 130 !important; + background-color: black !important; + color: #84de56 !important; +} + +.Mui-focused { + color: rgba(0, 0, 0, 1) !important; + border-color: #84de56 !important; + color: #84de56 !important; +} + +.MuiInputBase-input { + height: auto !important; +} + +//SELECT +.MuiMenuItem-root { background: #272727 !important; border-bottom: 1px solid #707070 !important; color: white !important; @@ -139,62 +213,98 @@ color: white !important; } -.MuiOutlinedInput-notchedOutline legend{ +.MuiOutlinedInput-notchedOutline legend { display: none !important; } @media screen and (min-width: 1441px) { - .submit{ + .submit { font-size: 20px; } - .main{ + .main { main { max-width: 1350px; } } - .mobile{ + .mobile { display: none !important; } + .MuiFormControl-root { + label { + font-size: 14px; + } + } + .MuiOutlinedInput-input { + font-size: 20px; + } } -@media screen and (min-width: 1008px) and (max-width: 1440px){ - .submit{ - font-size : calc(100vw / 80); +@media screen and (min-width: 1008px) and (max-width: 1440px) { + .submit { + font-size: calc(100vw / 80); } - .main{ + .main { main { max-width: 1250px; } } - .mobile{ + .mobile { display: none !important; } + .MuiFormControl-root { + label { + font-size: calc(100vw / 110) !important; + } + } + + .MuiOutlinedInput-input { + font-size: calc(100vw / 80) !important; + } } @media screen and (min-width: 641px) and (max-width: 1007px) { - .main{ + .main { main { max-width: 900px; } } - .desktop{ + .desktop { display: none !important; } - .submit-large{ - font-size: calc(100vw / 38); + .submit-large { + font-size: calc(100vw / 38) !important; + } + .MuiFormControl-root { + label { + font-size: calc(100vw / 40) !important; + } + } + .MuiOutlinedInput-input { + font-size: calc(100vw / 45) !important; } } @media screen and (max-width: 640px) { - .main{ + .main { main { max-width: 500px; } } - .desktop{ + .desktop { display: none !important; } - .submit{ - font-size: calc(100vw / 25); + .submit { + font-size: calc(100vw / 25) !important; } -} \ No newline at end of file + .MuiFormControl-root { + label { + font-size: calc(100vw / 30) !important; + } + } + .MuiOutlinedInput-input { + font-size: calc(100vw / 30) !important; + } + .MuiSelect-select { + line-height: 1.5 !important; + } +} diff --git a/src/views/Auth/Login/index.scss b/src/views/Auth/Login/index.scss index ec1eceb..9096c34 100644 --- a/src/views/Auth/Login/index.scss +++ b/src/views/Auth/Login/index.scss @@ -3,8 +3,8 @@ height: 100vh; position: relative; font-family: numeralLight; - &__options{ - color: #B5B5B5; + &__options { + color: #b5b5b5; a { color: #84de56; } @@ -12,7 +12,7 @@ img { // transform: rotate(-90deg); } - .MuiButtonBase-root{ + .MuiButtonBase-root { padding: 0px !important; } background: linear-gradient( @@ -73,7 +73,7 @@ } &__back { margin-bottom: 60px; - img{ + img { transform: rotate(-90deg); } a { @@ -81,83 +81,14 @@ font-size: 13px; } } - &__options{ - div{ + &__options { + div { font-size: 13px; } - a{ + a { font-size: 15px; } } - .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: 20px; - &: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: 22px; - 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: #2F2F2F; - width: fit-content; - text-align: center; - color: #B5B5B5 !important; - letter-spacing: -1px; - font-size: 16px; - } - .Mui-focused { - color: rgba(0, 0, 0, 1) !important; - border-color: #84de56 !important; - // background-color: white; - color: #84de56 !important; - } - - .MuiInputBase-input { - height: auto !important; - } } } @@ -195,7 +126,7 @@ } &__back { margin-bottom: 40px; - img{ + img { transform: rotate(-90deg); } a { @@ -203,92 +134,21 @@ font-size: calc(100vw / 110); } } - &__options{ - div{ + &__options { + div { font-size: calc(100vw / 110); } - a{ + a { font-size: calc(100vw / 110); } } - .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 / 80); - &: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: #2F2F2F; - width: fit-content; - text-align: center; - color: #B5B5B5 !important; - letter-spacing: -1px; - font-size: calc(100vw / 100); - 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 (min-width: 641px) and (max-width: 1007px) { .login { background: black; - .footer{ + .footer { display: none !important; } section { @@ -308,7 +168,7 @@ background-color: #84de56; color: white; font-size: calc(100vw / 30); - width : 100%; + width: 100%; max-width: 400px; margin: 50px auto 0px; padding: 10px 0px; @@ -335,95 +195,22 @@ color: white; font-size: calc(100vw / 110); } - img{ - width : 50px; + img { + width: 50px; } } - &__options{ + &__options { padding-top: 20px; - div{ + div { font-size: calc(100vw / 40); } - a{ + 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; @@ -468,96 +255,23 @@ &__back { position: fixed; top: 70px; - left : 20px; + left: 20px; margin-bottom: 40px; a { color: white; font-size: calc(100vw / 110); } - img{ + img { // transform: scale() } } - &__options{ - div{ + &__options { + div { font-size: calc(100vw / 30); } - a{ + 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; - border-radius: 10px; - &: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; - } - .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/Profile/Birthdate/index.js b/src/views/Auth/Profile/Birthdate/index.js index 8fbc0dd..a1fd287 100644 --- a/src/views/Auth/Profile/Birthdate/index.js +++ b/src/views/Auth/Profile/Birthdate/index.js @@ -3,8 +3,7 @@ import onInput from "~/util/onInput"; import Input from "../../../../components/Input/index"; import "./index.scss"; import moment from "jalali-moment"; -export default function Birthdate(props) { - const { defaultValue, parent, name } = props; +export default function Birthdate({ defaultValue, name, ...props }) { let momentDate = moment(defaultValue[name]); let isvalid = momentDate.isValid(); const day = isvalid ? momentDate.format("jDD") : null, @@ -15,7 +14,7 @@ export default function Birthdate(props) { let _state = { ...state, [_name]: value }; setState(_state); - parent.onChange( + props.onChange( name, moment .from(`${_state.year}/${_state.month}/${_state.day}`, "fa", "YYYY/M/D") @@ -32,7 +31,7 @@ export default function Birthdate(props) { placeholder="روز" maxLength={2} onInput={onInput.dayHandler} - parent={{ onChange }} + onChange={onChange} defaultValue={state} /> / @@ -42,7 +41,7 @@ export default function Birthdate(props) { placeholder="ماه" maxLength={2} onInput={onInput.monthHandler} - parent={{ onChange }} + onChange={onChange} defaultValue={state} /> / @@ -52,7 +51,7 @@ export default function Birthdate(props) { placeholder="سال" maxLength={4} onInput={onInput.yearHandler} - parent={{ onChange }} + onChange={onChange} defaultValue={state} /> diff --git a/src/views/Auth/Profile/Birthdate/index.scss b/src/views/Auth/Profile/Birthdate/index.scss index 2ceef16..742adc0 100644 --- a/src/views/Auth/Profile/Birthdate/index.scss +++ b/src/views/Auth/Profile/Birthdate/index.scss @@ -11,44 +11,77 @@ } span { color: #bfbfbf; + margin: 0px 5px; } input { - border: 0px; + border: none !important; background-color: rgba(204, 204, 204, 0.098); - font-family: numeralLight; color: #84de56; max-width: 40px; text-align: center !important; direction: ltr; - margin: 0px 5px; + margin: 0px 5px !important; border: none; &:focus { outline: 0px; border: 0px; } &::placeholder { - color: #bfbfbf; + color: #383737; } } + //INPUT + .MuiOutlinedInput-notchedOutline { + border : none !important; + } + + .MuiOutlinedInput-input { + padding: 5px !important; + &:focus { + border: none !important; + border-radius: 0px !important; + } + } } -@media screen and (max-width: 1000px) { - span { - font-size: 14px; +@media screen and (min-width: 1441px) { + .birthdate { + label { + font-size: 14px !important; + } + span { + font-size: 16px; + } + input { + font-size: 16px; + &::placeholder { + font-size: 16px; + } + } } - input { - font-size: 14px; +} - &::placeholder { - font-size: 15px; +@media screen and (min-width: 1008px) and (max-width: 1440px) { + .birthdate { + label { + font-size: calc(100vw / 120) !important; + } + span { + font-size: calc(100vw / 90); + } + input { + font-size: calc(100vw / 90); + &::placeholder { + font-size: calc(100vw / 90); + } } } } -@media screen and (min-width: 6401px) and (max-width: 1007px) { +@media screen and (min-width: 640px) and (max-width: 1007px) { .birthdate { label { font-size: calc(100vw / 40) !important; @@ -82,4 +115,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/views/Auth/Profile/Document/index.js b/src/views/Auth/Profile/Document/index.js deleted file mode 100644 index 92fd674..0000000 --- a/src/views/Auth/Profile/Document/index.js +++ /dev/null @@ -1,111 +0,0 @@ -import React from "react"; -import "./index.scss"; - -const maxDesktopSize = 1250; -const maxMobileSize = 550; - -const fontSize = { - desktop: { - span: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80, - }, - mobile: { - span: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 30, - }, -}; - -export default function Document(props) { - const { parent, name } = props; - return ( - <> - {window.innerWidth < 1000 ? ( -
- {parent.state[name] === "" ? ( - <> - - parent.onChange(e.target.name, e.target.files[0]) - } - /> - - گواهی تدریس خود را آپلود کنید. - - - ) : ( - <> - - parent.onChange(e.target.name, e.target.files[0]) - } - /> - - {parent.state[name].name || - "گواهی تدریس ثبت شده و درحال بررسی می باشد"} - - - )} -
- ) : null} - {window.innerWidth > 1000 ? ( -
- {parent.state[name] === "" ? ( - <> - - parent.onChange(e.target.name, e.target.files[0]) - } - /> - - گواهی تدریس خود را آپلود کنید. - - - ) : ( - <> - - parent.onChange(e.target.name, e.target.files[0]) - } - name={props.name} - defaultValue="" - type="file" - /> - - {parent.state[name].name || - "گواهی تدریس ثبت شده و درحال بررسی می باشد"} - - - )} -
- ) : null} - - ); -} diff --git a/src/views/Auth/Profile/Document/index.tsx b/src/views/Auth/Profile/Document/index.tsx new file mode 100644 index 0000000..583a27b --- /dev/null +++ b/src/views/Auth/Profile/Document/index.tsx @@ -0,0 +1,38 @@ +import React from "react"; +import "./index.scss"; + +export default function Document({ defaultValue, name, onChange } : any) { + return ( +
+ {defaultValue?.docFileIds === "" ? ( + <> + onChange(e.target.name, e.target.files[0])} + /> + گواهی تدریس خود را آپلود کنید. + + ) : ( + <> + onChange(e.target.name, e.target.files[0])} + /> + + {defaultValue?.docFileIds.name || + "گواهی تدریس ثبت شده و درحال بررسی می باشد"} + + + )} +
+ ); +} diff --git a/src/views/Auth/Profile/Upload/index.scss b/src/views/Auth/Profile/Upload/index.scss index eb41ed6..7be20b5 100644 --- a/src/views/Auth/Profile/Upload/index.scss +++ b/src/views/Auth/Profile/Upload/index.scss @@ -5,6 +5,7 @@ margin-top: 15px auto 0px; // border: 2px dotted #ccc; position: relative; + cursor: pointer; background-color: #272727; input { width: 100%; diff --git a/src/views/Auth/Profile/index.scss b/src/views/Auth/Profile/index.scss index 61be694..683f679 100644 --- a/src/views/Auth/Profile/index.scss +++ b/src/views/Auth/Profile/index.scss @@ -76,79 +76,9 @@ flex-direction: row; justify-content: space-around; padding: 30px 10px; + margin-bottom: 50px; } } - .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: 20px; - color: #84de56 !important; - &:focus { - border: 0.2px solid #84de56 !important; - border-radius: 10px; - transform: translateY(0.5px); - border-radius: 10px !important; - } - } - .MuiInputLabel-outlined { - font-family: numeralLight !important; - display: inline !important; - position: absolute; - text-align: right !important; - right: 15px !important; - top: 50% !important; - padding: 0px !important; - transform: translate(0px, -50%) scale(1) !important; - } - .MuiInputLabel-shrink { - text-align: center !important; - display: inline; - position: absolute; - right: 0px !important; - top: -8px !important; - transform: translate(0px, 0px) scale(0.85) !important; - padding: 0px 10px !important; - } - - label { - background-color: black; - width: fit-content; - text-align: center; - color: #b5b5b5 !important; - letter-spacing: -1px; - font-size: 14px !important; - } - .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 (min-width: 1008px) and (max-width: 1440px) { @@ -160,87 +90,17 @@ padding: 30px 10px; flex-direction: row; justify-content: space-around; + margin-bottom: 50px; } } - .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 / 80) !important; - color: #84de56 !important; - &:focus { - border: 0.2px solid #84de56 !important; - border-radius: 10px; - transform: translateY(0px); - z-index: 100; - border-radius: 10px !important; - } - } - .MuiInputLabel-outlined { - font-family: numeralLight !important; - display: inline !important; - position: absolute; - text-align: right !important; - right: 10px !important; - top: 50% !important; - padding: 0px !important; - transform: translate(0px, -50%) scale(1) !important; - } - .MuiInputLabel-shrink { - text-align: center !important; - display: inline; - position: absolute; - right: 0px !important; - top: -5px !important; - transform: translate(0px, 0px) scale(0.85) !important; - padding: 0px 10px !important; - z-index: 120 !important; - } - - label { - background-color: black; - width: fit-content; - text-align: center; - color: #b5b5b5 !important; - letter-spacing: -1px; - font-size: calc(100vw / 110) !important; - z-index: 120; - } - .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 (min-width: 641px) and (max-width: 1007px) { .profile { padding: 50px 100px 10px; + button { + font-size: calc(100vw / 40); + } header { margin: 0px; margin-top: 30px; @@ -252,86 +112,15 @@ width: 100%; } } - .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: inherit; - color: #84de56; - &:focus { - border: 0.2px solid #84de56 !important; - border-radius: 10px; - transform: translateY(0px); - z-index: 100; - border-radius: 10px !important; - } - } - .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: -10px; - transform: translate(0px, 0px) scale(0.85) !important; - padding: 0px 10px !important; - } - - label { - background-color: black; - 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) { .profile { padding: 0px 10px; + button { + font-size: calc(100vw / 30); + } header { margin: 0px; margin-top: 70px; @@ -343,80 +132,5 @@ width: 100%; } } - .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: inherit; - border-radius: 10px; - color: #84de56 !important; - - &: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: -10px; - transform: translate(0px, 0px) scale(0.7) !important; - padding: 0px 10px !important; - } - - label { - background-color: black; - width: fit-content; - text-align: center; - color: #b5b5b5 !important; - letter-spacing: -1px; - font-size: calc(100vw / 25); - 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; - } } } diff --git a/src/views/Auth/Profile/index.tsx b/src/views/Auth/Profile/index.tsx index 2377cec..6e042b1 100644 --- a/src/views/Auth/Profile/index.tsx +++ b/src/views/Auth/Profile/index.tsx @@ -20,20 +20,6 @@ function Navigate({ path }: any) { return <>{history.push(path)}; } -const maxDesktopSize = 1250; -const maxMobileSize = 550; - -const fontSize = { - desktop: { - h1: window.innerWidth > maxDesktopSize ? 25 : window.innerWidth / 55, - p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 90, - }, - mobile: { - h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 18, - p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 28, - }, -}; - function Profile({ profile, uploads, @@ -76,10 +62,10 @@ function Profile({ getCity({ provinceId: profile.provinceId }); }, []); - const grades= [ + const grades = [ { - name : 'پیش دبستانی', - value : 0, + name: "پیش دبستانی", + value: 0, }, { name: "اول", @@ -138,7 +124,7 @@ function Profile({ } else if (name === "status") { setFormData({ ...formData, - gradeIds: formData.gradeIds.slice(0, 1) || [], + gradeIds: formData.gradeIds?.slice(0, 1) || [], [name]: value, }); } else if (name === "docFileIds") { @@ -399,7 +385,13 @@ function Profile({ /> ) : null} - {formData.status == 2 ? : null} + {formData.status == 2 ? ( + + ) : null}
} checked={selectedVOD?.id === data.id}