Skip to content

Commit

Permalink
[#1584] Refactoring invite export modal styles with newer uikit
Browse files Browse the repository at this point in the history
  • Loading branch information
@ifirmawan
ifirmawan committed Sep 15, 2023
1 parent a6286b5 commit b82537a
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 207 deletions.
165 changes: 82 additions & 83 deletions frontend/src/modules/experts/invite-expert-modal.jsx
View file
Original file line number Diff line number Diff line change
@@ -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) => ({
Expand All @@ -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),
};

Expand Down Expand Up @@ -78,6 +77,27 @@ const InviteExpertModal = ({ setIsShownModal, isShownModal }) => {
title="Suggest an expert"
visible={isShownModal}
onCancel={() => setIsShownModal(false)}
footer={(
<>
<Button
type="link"
size="small"
onClick={() => setIsShownModal(false)}
>
Cancel
</Button>
<Button
loading={loading}
onClick={() => {
formRef.current.submit()
}}
size="small"
withArrow="link"
>
Submit
</Button>
</>
)}
>
<p className="paragraph">
Thank you for suggesting an expert!
Expand All @@ -91,68 +111,67 @@ const InviteExpertModal = ({ setIsShownModal, isShownModal }) => {
...arrayMutators,
}}
initialValues={initialValues}
render={({ handleSubmit, form, submitting }) => {
render={({ handleSubmit, form }) => {
formRef.current = form;
return (
<form className="invite-expert-form" onSubmit={handleSubmit}>
<FieldArray name="invites">
{({ fields }) => (
<div>
<div className="invite-expert-input" key="name">
<div className="invite-label-wrapper">
<label htmlFor="name" className="" title="">
Full Name
</label>
</div>
<Field name={`name`} validate={required}>
{({ input, meta }) => {
return (
<>
<Input
onChange={(e) =>
input.onChange(e.target.value)
}
value={input.value ? input.value : ""}
placeholder="Enter expert full name"
className={`${
meta.touched && meta.error
? "ant-input-status-error"
: ""
}`}
/>
</>
);
}}
</Field>
</div>
<Field name={`name`} validate={required}>
{({ input, meta }) => {
const validVal =
input?.value && meta.valid ? 'success' : null
const validateStatus = !meta.valid && meta?.touched
? 'error'
: validVal
return (
<FormLabel
for="name"
label="Fullname"
validateStatus={validateStatus}
>
<Input
onChange={(e) => input.onChange(e.target.value)}
value={input.value ? input.value : ''}
placeholder="Enter expert full name"
className={`${
meta.touched && meta.error
? 'ant-input-status-error'
: ''
}`}
/>
</FormLabel>
)
}}
</Field>

<div className="invite-expert-input" key="email">
<div className="invite-label-wrapper">
<label htmlFor="email" className="" title="">
Email
</label>
</div>
<Field name={`email`} validate={required}>
{({ input, meta }) => {
return (
<>
<Input
onChange={(e) =>
input.onChange(e.target.value)
}
value={input.value ? input.value : ""}
placeholder="Enter expert email"
className={`${
meta.touched && meta.error
? "ant-input-status-error"
: ""
}`}
/>
</>
);
}}
</Field>
</div>
<Field name={`email`} validate={required}>
{({ input, meta }) => {
const validVal =
input?.value && meta.valid ? 'success' : null
const validateStatus =
!meta.valid && meta?.touched ? 'error' : validVal
return (
<FormLabel
for="email"
label="Email"
validateStatus={validateStatus}
>
<Input
onChange={(e) => input.onChange(e.target.value)}
value={input.value ? input.value : ''}
placeholder="Enter expert email"
className={`${
meta.touched && meta.error
? 'ant-input-status-error'
: ''
}`}
/>
</FormLabel>
)
}}
</Field>

<div className="invite-expert-input" key="expertise">
<div className="invite-label-wrapper">
Expand Down Expand Up @@ -261,26 +280,6 @@ const InviteExpertModal = ({ setIsShownModal, isShownModal }) => {
</div>
)}
</FieldArray>
<div className="invite-expert-buttons">
<Button
loading={loading}
disabled={submitting}
onClick={handleSubmit}
className="invite-submit-button"
size="large"
shape="round"
>
Submit &gt;
</Button>
<Button
className="invite-cancel-button"
size="large"
shape="round"
onClick={() => setIsShownModal(false)}
>
Cancel
</Button>
</div>
</form>
);
}}
Expand Down
139 changes: 15 additions & 124 deletions frontend/src/modules/experts/invite-expert-modal.module.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
}

0 comments on commit b82537a

Please sign in to comment.