From b82537a7610c7449010f81f2c96c27aba991fa91 Mon Sep 17 00:00:00 2001 From: ifirmawan Date: Fri, 15 Sep 2023 14:27:29 +0700 Subject: [PATCH] [#1584] Refactoring invite export modal styles with newer uikit --- .../modules/experts/invite-expert-modal.jsx | 165 +++++++++--------- .../experts/invite-expert-modal.module.scss | 139 ++------------- 2 files changed, 97 insertions(+), 207 deletions(-) diff --git a/frontend/src/modules/experts/invite-expert-modal.jsx b/frontend/src/modules/experts/invite-expert-modal.jsx index f9c6a7046..51b7203dc 100644 --- a/frontend/src/modules/experts/invite-expert-modal.jsx +++ b/frontend/src/modules/experts/invite-expert-modal.jsx @@ -1,12 +1,14 @@ import React, { useState, useRef } from "react"; import styles from "./invite-expert-modal.module.scss"; -import { Modal, Button, Input, Select, notification } from "antd"; +import { Modal, Input, Select, notification } from "antd"; import { Form, Field } from "react-final-form"; import arrayMutators from "final-form-arrays"; import { FieldArray } from "react-final-form-arrays"; import CatTagSelect from "../../components/cat-tag-select/cat-tag-select"; import api from "../../utils/api"; import { UIStore } from "../../store"; +import Button from '../../components/button' +import FormLabel from '../../components/form-label' const InviteExpertModal = ({ setIsShownModal, isShownModal }) => { const storeData = UIStore.useState((s) => ({ @@ -33,14 +35,11 @@ const InviteExpertModal = ({ setIsShownModal, isShownModal }) => { const onSubmit = async (values) => { setLoading(true); - + const [firstName, lastName] = values.name.split(" ") const data = { - ...(values.name.split(" ").length > 1 && { - firstName: values?.name?.split(" ")[0], - lastName: values?.name?.split(" ")[1], - }), - email: values?.email, - expertise: values?.expertise, + ...values, + firstName, + lastName: lastName || ' ', suggestedExpertise: values?.suggestedCategory?.map((item) => item.value), }; @@ -78,6 +77,27 @@ const InviteExpertModal = ({ setIsShownModal, isShownModal }) => { title="Suggest an expert" visible={isShownModal} onCancel={() => setIsShownModal(false)} + footer={( + <> + + + + )} >

Thank you for suggesting an expert! @@ -91,68 +111,67 @@ const InviteExpertModal = ({ setIsShownModal, isShownModal }) => { ...arrayMutators, }} initialValues={initialValues} - render={({ handleSubmit, form, submitting }) => { + render={({ handleSubmit, form }) => { formRef.current = form; return (

{({ fields }) => (
-
-
- -
- - {({ input, meta }) => { - return ( - <> - - input.onChange(e.target.value) - } - value={input.value ? input.value : ""} - placeholder="Enter expert full name" - className={`${ - meta.touched && meta.error - ? "ant-input-status-error" - : "" - }`} - /> - - ); - }} - -
+ + {({ input, meta }) => { + const validVal = + input?.value && meta.valid ? 'success' : null + const validateStatus = !meta.valid && meta?.touched + ? 'error' + : validVal + return ( + + input.onChange(e.target.value)} + value={input.value ? input.value : ''} + placeholder="Enter expert full name" + className={`${ + meta.touched && meta.error + ? 'ant-input-status-error' + : '' + }`} + /> + + ) + }} + -
-
- -
- - {({ input, meta }) => { - return ( - <> - - input.onChange(e.target.value) - } - value={input.value ? input.value : ""} - placeholder="Enter expert email" - className={`${ - meta.touched && meta.error - ? "ant-input-status-error" - : "" - }`} - /> - - ); - }} - -
+ + {({ input, meta }) => { + const validVal = + input?.value && meta.valid ? 'success' : null + const validateStatus = + !meta.valid && meta?.touched ? 'error' : validVal + return ( + + input.onChange(e.target.value)} + value={input.value ? input.value : ''} + placeholder="Enter expert email" + className={`${ + meta.touched && meta.error + ? 'ant-input-status-error' + : '' + }`} + /> + + ) + }} +
@@ -261,26 +280,6 @@ const InviteExpertModal = ({ setIsShownModal, isShownModal }) => {
)} -
- - -
); }} diff --git a/frontend/src/modules/experts/invite-expert-modal.module.scss b/frontend/src/modules/experts/invite-expert-modal.module.scss index 96dbc2b76..82b35d7f9 100644 --- a/frontend/src/modules/experts/invite-expert-modal.module.scss +++ b/frontend/src/modules/experts/invite-expert-modal.module.scss @@ -1,143 +1,34 @@ -@import "../../vars.scss"; +@import '../../vars.scss'; +@import '../../styles/vars.scss'; + .inviteExpertModal { width: 100% !important; - + color: $primaryDarkBlue; @media screen and (min-width: 840px) { max-width: 823px; } :global { - .ant-modal-header { - .ant-modal-title { - font-weight: 600; - font-size: 18px; - line-height: 26px; - color: #a5b0c9; - text-transform: uppercase; - } - } - .ant-modal-body { - padding: 17px 40px 50px 40px; - } .paragraph { - font-size: 14px; - line-height: 20px; + font-size: $fzXXS; + line-height: $lhXXS; margin-bottom: 31px; } - .invite-expert-form { + & > div { + display: flex; + flex-direction: column; + gap: 16px; + } .invite-expert-input { .invite-label-wrapper { - label { - font-size: 16px; - line-height: 23px; - color: #18162f; - } - } - .ant-input::placeholder, - .ant-select-selection-placeholder { - font-weight: 500; - font-size: 16px; - line-height: 23px; - color: #a5b0c9; - } - .ant-input, - .ant-select, - .ant-select-selector { - width: 100%; - height: 40px; - border: unset; - } - .ant-input.ant-input-status-error, - .ant-input-status-error .ant-select-selector { - border: 1px solid #ff4d4f; - background-color: #fff !important; - } - - &:not(:last-of-type) { - margin-bottom: 23px; - } - - .cat-tag-select .ant-select-selector { - background-image: url("/stakeholder-overview/search-icon.svg"), - url("/knowledge-library/chevron-down-grey.svg"); - background-repeat: no-repeat; - background-position: 14px center, calc(100% - 17px) center; - padding-left: 45px; - .ant-select-selection-search { - margin-left: 0; - } - .ant-select-selection-placeholder { - padding-left: calc(13.88px + 17.77px); - } - } - - .modal-suggest-category { - .ant-select-selector { - background-image: url("/knowledge-library/chevron-down-grey.svg"); - background-repeat: no-repeat; - background-position: calc(100% - 17px) center; - } + margin-bottom: 8px; } } } - - .invite-expert-buttons { + .ant-form-item { display: flex; - justify-content: center; - margin-top: 65px; - button { - font-weight: 700; - font-size: 16px; - line-height: 22px; - display: flex; - align-items: center; - text-align: center; - color: #18162f; - transition: all 0.15s ease-out; - // &:hover { - // background-color: $yellow-highlight; - // transition: all 0.15s ease-out; - // } - } - .invite-submit-button { - margin-right: 16px; - border: 2px solid #18162f; - &:hover { - background-color: #18162f; - color: #fff; - } - } - .invite-cancel-button { - border: unset; - } - } - .ant-modal-footer { - display: none; - } - .ant-select-multiple { - .ant-select-selection-item { - background-color: #3276ae; - color: white; - border-radius: 3px; - font-weight: 500; - } - .ant-select-selection-item-remove svg { - fill: white; - opacity: 0.5; - } - } - - @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { - .ant-modal-body { - padding: 17px 20px 30px 20px; - } - - .invite-expert-buttons { - margin-top: 30px; - } - .ant-modal-header { - padding: 10px 20px; - } + flex-direction: column; + margin-bottom: 0; } } }