diff --git a/src/assets/images/icon-check.svg b/src/assets/images/icon-check.svg
index 0c319764..395ff485 100644
--- a/src/assets/images/icon-check.svg
+++ b/src/assets/images/icon-check.svg
@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="11px" height="9px" viewBox="0 0 11 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <title>7D2319F6-3344-4A11-B8BD-A4BA891B5123</title>
+ <title>check icon</title>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
<g id="02C-Candidate-Selection" transform="translate(-924.000000, -676.000000)" stroke="#0AB88A" stroke-width="2">
<g id="flyout" transform="translate(901.000000, 616.000000)">
diff --git a/src/assets/images/icon-cross-light.svg b/src/assets/images/icon-cross-light.svg
index 8f9ee96f..dba2714a 100644
--- a/src/assets/images/icon-cross-light.svg
+++ b/src/assets/images/icon-cross-light.svg
@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="8px" height="8px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <title>D450CF0B-B6EF-4991-8E48-E34846C2F842</title>
+ <title>cross icon</title>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
<g id="02C-Candidate-Selection" transform="translate(-925.000000, -796.000000)" stroke="#7F7F7F" stroke-width="1">
<g id="flyout" transform="translate(901.000000, 616.000000)">
diff --git a/src/assets/images/icon-cross.svg b/src/assets/images/icon-cross.svg
index 1cbe9802..75f24b3b 100644
--- a/src/assets/images/icon-cross.svg
+++ b/src/assets/images/icon-cross.svg
@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="8px" height="8px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <title>D450CF0B-B6EF-4991-8E48-E34846C2F842</title>
+ <title>cross icon</title>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
<g id="02C-Candidate-Selection" transform="translate(-925.000000, -796.000000)" stroke="#555555" stroke-width="2">
<g id="flyout" transform="translate(901.000000, 616.000000)">
diff --git a/src/assets/images/icon-moon.svg b/src/assets/images/icon-moon.svg
index 12cc3e46..39d03240 100644
--- a/src/assets/images/icon-moon.svg
+++ b/src/assets/images/icon-moon.svg
@@ -1,7 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="10px" height="11px" viewBox="0 0 10 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 60.1 (88133) - https://sketch.com -->
- <title>moon</title>
+ <title>moon icon</title>
<desc>Created with Sketch.</desc>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="team-list-sidebar-night" transform="translate(-54.000000, -36.000000)" fill="#8231A9" fill-rule="nonzero">
diff --git a/src/assets/images/icon-resume.svg b/src/assets/images/icon-resume.svg
index 16465a52..e0f1eaa5 100644
--- a/src/assets/images/icon-resume.svg
+++ b/src/assets/images/icon-resume.svg
@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <title>D2E2FC7A-435A-4F30-905C-B828DBC261C6</title>
+ <title>resume icon</title>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="02B-Candidate-Selection" transform="translate(-567.000000, -319.000000)" fill="#555555" fill-rule="nonzero">
<g id="Group-3" transform="translate(305.000000, 182.000000)">
diff --git a/src/assets/images/icon-sun.svg b/src/assets/images/icon-sun.svg
index f2f3a517..fe74554a 100644
--- a/src/assets/images/icon-sun.svg
+++ b/src/assets/images/icon-sun.svg
@@ -1,7 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 60.1 (88133) - https://sketch.com -->
- <title>daylight</title>
+ <title>daylight icon</title>
<desc>Created with Sketch.</desc>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="team-list-sidebar-day" transform="translate(-54.000000, -36.000000)" fill="#FD7D01" fill-rule="nonzero">
diff --git a/src/components/BaseModal/index.jsx b/src/components/BaseModal/index.jsx
index 91950b2f..88f31ce5 100644
--- a/src/components/BaseModal/index.jsx
+++ b/src/components/BaseModal/index.jsx
@@ -34,6 +34,7 @@ function BaseModal({
children,
title,
button,
+ closeButtonText,
disabled,
extraModalStyle,
}) {
@@ -58,7 +59,7 @@ function BaseModal({
onClick={onClose}
disabled={disabled}
>
- Cancel
+ {closeButtonText ? closeButtonText : "Cancel"}
</Button>
</div>
</Modal>
@@ -71,6 +72,7 @@ BaseModal.propTypes = {
children: PT.node,
title: PT.string,
button: PT.element,
+ closeButtonText: PT.string,
disabled: PT.bool,
extraModalStyle: PT.object,
};
diff --git a/src/components/BaseModal/styles.module.scss b/src/components/BaseModal/styles.module.scss
index e1c1d36c..418bd607 100644
--- a/src/components/BaseModal/styles.module.scss
+++ b/src/components/BaseModal/styles.module.scss
@@ -1,5 +1,9 @@
@import "styles/include";
+svg {
+ pointer-events: none;
+}
+
.title {
@include font-barlow-condensed;
font-weight: normal;
diff --git a/src/components/MarkdownEditor/styles.module.scss b/src/components/MarkdownEditor/styles.module.scss
index a901cd13..d444b248 100644
--- a/src/components/MarkdownEditor/styles.module.scss
+++ b/src/components/MarkdownEditor/styles.module.scss
@@ -43,6 +43,10 @@
border: 1px solid #aaaaab;
border-radius: 4px;
overflow: hidden;
+ &:focus-within:not(.error) {
+ border-color: #55a5ff;
+ box-shadow: 0 0 2px 1px #cee6ff;
+ }
}
.te-toolbar-section {
diff --git a/src/components/Select/styles.module.scss b/src/components/Select/styles.module.scss
index 597fce9a..5a1e0c5e 100644
--- a/src/components/Select/styles.module.scss
+++ b/src/components/Select/styles.module.scss
@@ -5,7 +5,7 @@
cursor: pointer;
appearance: none;
background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTVweCIgaGVpZ2h0PSI5cHgiIHZpZXdCb3g9IjAgMCAxNSA5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IjAyQi1DYW5kaWRhdGUtU2VsZWN0aW9uIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTI3Ny4wMDAwMDAsIC0yMTYuMDAwMDAwKSIgZmlsbD0iIzEzN0Q2MCI+CiAgICAgICAgICAgIDxnIGlkPSJHcm91cC0zIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMDUuMDAwMDAwLCAxODIuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iVUktS2l0L0Zvcm1zL3RleHRib3gvZW1wdHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYyMi4wMDAwMDAsIDQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IlBhZGRpbmctR3JvdXAtMyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzUwLjAwMDAwMCwgMzAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik02Ljc5MTM2MTAzLDguMjg4Mjc5OTkgTDAuNzA2Njk0MTE3LDIuMTc3MTU4IEMwLjMxMjA0MDA1NywxLjc4MDc4ODA2IDAuMzAxMDU2MTE0LDEuMTQzNDI4NzUgMC42ODE4MTgxODIsMC43MzM2OTU2NTIgQzEuMDQ0MDQxMDgsMC4zNDM5MTIzMTggMS42NTM2NjI1OCwwLjMyMTU3MDE2OSAyLjA0MzQ0NTkxLDAuNjgzNzkzMDY1IEMyLjA1MjU3NDU3LDAuNjkyMjc2MjYxIDIuMDYxNTM3NzgsMC43MDA5MzU3NjggMi4wNzAzMzA0OCwwLjcwOTc2NjcgTDcuNSw2LjE2MzA0MzQ4IEw3LjUsNi4xNjMwNDM0OCBMMTIuOTI5NjY5NSwwLjcwOTc2NjcgQzEzLjMwNTEwOCwwLjMzMjY5NTg2NyAxMy45MTUxMzc0LDAuMzMxMzcyNTkzIDE0LjI5MjIwODIsMC43MDY4MTEwODUgQzE0LjMwMTAzOTEsMC43MTU2MDM3ODcgMTQuMzA5Njk4NiwwLjcyNDU2Njk5NiAxNC4zMTgxODE4LDAuNzMzNjk1NjUyIEMxNC42OTg5NDM5LDEuMTQzNDI4NzUgMTQuNjg3OTU5OSwxLjc4MDc4ODA2IDE0LjI5MzMwNTksMi4xNzcxNTggTDguMjA4NjM4OTcsOC4yODgyNzk5OSBDNy44MTg5NjI3Miw4LjY3OTY1MDQ5IDcuMTg1Nzk5MjMsOC42ODEwMjM5NCA2Ljc5NDQyODczLDguMjkxMzQ3NjkgQzYuNzkzNDAzOTUsOC4yOTAzMjczNSA2Ljc5MjM4MTM4LDguMjg5MzA0NzggNi43OTEzNjEwMyw4LjI4ODI3OTk5IFoiIGlkPSJhcnJvdyI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==")
- no-repeat center right;
+ no-repeat 96% center;
border: 0;
color: #2a2a2a;
outline: none;
@@ -23,7 +23,6 @@
border-radius: 6px;
display: flex;
height: 40px;
- padding-right: 15px;
position: relative;
}
diff --git a/src/components/SkillsSummary/index.jsx b/src/components/SkillsSummary/index.jsx
index ceccbb62..b892e153 100644
--- a/src/components/SkillsSummary/index.jsx
+++ b/src/components/SkillsSummary/index.jsx
@@ -21,7 +21,7 @@ const SkillsSummary = ({ skills, requiredSkills = [], limit }) => {
<div>
<div styleName="percentage">
<PercentageBar ratio={skillsMatchedRatio} styleName="percentage-bar" />
- {Math.round(skillsMatchedRatio * 100)}% skill matched
+ {Math.round(skillsMatchedRatio * 100)}% skills matched
</div>
<SkillsList
skills={skills}
diff --git a/src/constants/index.js b/src/constants/index.js
index fa899de3..19a875c5 100644
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -7,6 +7,11 @@
*/
export const DAY_FORMAT = "MM/DD/YYYY";
+/**
+ * Date with time format
+ */
+export const DATE_WITH_TIME_FORMAT = "MM/DD/YYYY HH:mm";
+
/**
* How many team member show per page by default
*/
@@ -123,24 +128,28 @@ export const CANDIDATE_STATUS_FILTERS = [
key: CANDIDATE_STATUS_FILTER_KEY.TO_REVIEW,
buttonText: "To Review",
title: "Candidates to Review",
+ noCandidateMessage: "No Candidates To Review",
statuses: [CANDIDATE_STATUS.OPEN],
},
{
key: CANDIDATE_STATUS_FILTER_KEY.INTERESTED,
buttonText: "Interviews",
title: "Interviews",
+ noCandidateMessage: "No Interviews",
statuses: [CANDIDATE_STATUS.INTERVIEW],
},
{
key: CANDIDATE_STATUS_FILTER_KEY.SELECTED,
buttonText: "Selected",
title: "Selected",
+ noCandidateMessage: "No Selected Candidates",
statuses: [CANDIDATE_STATUS.SELECTED],
},
{
key: CANDIDATE_STATUS_FILTER_KEY.NOT_INTERESTED,
buttonText: "Declined",
title: "Declined",
+ noCandidateMessage: "No Declined Candidates",
statuses: [
CANDIDATE_STATUS.CLIENT_REJECTED_SCREENING,
CANDIDATE_STATUS.CLIENT_REJECTED_INTERVIEW,
@@ -162,7 +171,7 @@ export const CANDIDATES_SORT_BY = {
* Candidates "sort by" select options
*/
export const CANDIDATES_SORT_OPTIONS = [
- { label: "Skill Matched", value: CANDIDATES_SORT_BY.SKILL_MATCHED },
+ { label: "Skills Matched", value: CANDIDATES_SORT_BY.SKILL_MATCHED },
{ label: "Handle", value: CANDIDATES_SORT_BY.HANDLE },
];
diff --git a/src/routes/PositionDetails/components/InterviewDetailsPopup/index.jsx b/src/routes/PositionDetails/components/InterviewDetailsPopup/index.jsx
index 91794973..63afb146 100644
--- a/src/routes/PositionDetails/components/InterviewDetailsPopup/index.jsx
+++ b/src/routes/PositionDetails/components/InterviewDetailsPopup/index.jsx
@@ -86,7 +86,12 @@ function InterviewDetailsPopup({ open, onClose, candidate, openNext }) {
candidate.interviews.length >= MAX_ALLOWED_INTERVIEWS
) {
return (
- <BaseModal open={open} onClose={onClose} title="Schedule an Interview">
+ <BaseModal
+ open={open}
+ onClose={onClose}
+ closeButtonText="Close"
+ title="Schedule an Interview"
+ >
<p styleName="exceeds-max-number-txt">
You've reached the cap of {MAX_ALLOWED_INTERVIEWS} interviews with
this candidate. Now please make your decision to Select and Decline
diff --git a/src/routes/PositionDetails/components/LatestInterview/index.jsx b/src/routes/PositionDetails/components/LatestInterview/index.jsx
index de78b88b..de1fb2d9 100644
--- a/src/routes/PositionDetails/components/LatestInterview/index.jsx
+++ b/src/routes/PositionDetails/components/LatestInterview/index.jsx
@@ -6,7 +6,7 @@
import React from "react";
import PT from "prop-types";
import "./styles.module.scss";
-import { formatDate } from "utils/format";
+import { formatInterviewDate } from "utils/format";
function LatestInterview({ interviews }) {
if (!interviews || !interviews.length) {
@@ -19,7 +19,7 @@ function LatestInterview({ interviews }) {
<>
<p styleName="small">Interview Round {latestInterview.round}</p>
<p styleName="strong">{latestInterview.status}</p>
- <p>{formatDate(latestInterview.startTimestamp)}</p>
+ <p>{formatInterviewDate(latestInterview.startTimestamp)}</p>
</>
);
}
diff --git a/src/routes/PositionDetails/components/PositionCandidates/index.jsx b/src/routes/PositionDetails/components/PositionCandidates/index.jsx
index 8901a9f9..cf56f90e 100644
--- a/src/routes/PositionDetails/components/PositionCandidates/index.jsx
+++ b/src/routes/PositionDetails/components/PositionCandidates/index.jsx
@@ -200,7 +200,7 @@ const PositionCandidates = ({ position, statusFilterKey, updateCandidate }) => {
/>
{filteredCandidates.length === 0 && (
- <div styleName="no-candidates">No {statusFilter.title}</div>
+ <div styleName="no-candidates">{statusFilter.noCandidateMessage}</div>
)}
{filteredCandidates.length > 0 && (
<div styleName="table">
diff --git a/src/routes/PositionDetails/components/PrevInterviewItem/index.jsx b/src/routes/PositionDetails/components/PrevInterviewItem/index.jsx
index 3decfc70..95b7b147 100644
--- a/src/routes/PositionDetails/components/PrevInterviewItem/index.jsx
+++ b/src/routes/PositionDetails/components/PrevInterviewItem/index.jsx
@@ -5,7 +5,7 @@
*/
import React from "react";
import PT from "prop-types";
-import { formatDate } from "utils/format";
+import { formatInterviewDate } from "utils/format";
import Accordion from "components/Accordion";
import "./styles.module.scss";
@@ -15,7 +15,7 @@ function PrevInterviewItem(props) {
return (
<Accordion
title={`Interview Round ${round}`}
- subhead={formatDate(date)}
+ subhead={formatInterviewDate(date)}
sidebar={`${guestEmails.length + 1} Attendee(s)`}
>
<ul>
diff --git a/src/routes/PositionDetails/components/SelectCandidatePopup/index.jsx b/src/routes/PositionDetails/components/SelectCandidatePopup/index.jsx
index c2bf6c14..1000066a 100644
--- a/src/routes/PositionDetails/components/SelectCandidatePopup/index.jsx
+++ b/src/routes/PositionDetails/components/SelectCandidatePopup/index.jsx
@@ -70,13 +70,13 @@ const SelectCandidatePopup = ({
) : (
<>
<p>
- You have selected this applicant - you want this member on your
+ You have selected this candidate - you want this member on your
team! What happens next:
</p>
<ol>
<li>
Upon confirmation, Topcoder will confirm the arrangement with
- the selected member
+ the selected candidate
</li>
<li>
A Topcoder Rep will contact you with details on the work
diff --git a/src/styles/main.module.scss b/src/styles/main.module.scss
index 84a0cbc3..d5fa41ba 100644
--- a/src/styles/main.module.scss
+++ b/src/styles/main.module.scss
@@ -5,4 +5,7 @@
.topcoder-micro-frontends-teams-app {
@include font-roboto;
color: #2a2a2a;
+ svg {
+ pointer-events: none;
+ }
}
diff --git a/src/utils/format.js b/src/utils/format.js
index 0e1801b7..e2eb8991 100644
--- a/src/utils/format.js
+++ b/src/utils/format.js
@@ -5,7 +5,7 @@ import _ from "lodash";
import { RATE_TYPE } from "constants";
import { EMAIL_REQUEST_EXTENSION, CONNECT_WEBSITE_URL } from "../../config";
import moment from "moment";
-import { DAY_FORMAT } from "constants/";
+import { DAY_FORMAT, DATE_WITH_TIME_FORMAT } from "constants/";
/**
* Format URL to the project (team) in Connect App.
@@ -233,11 +233,11 @@ export const formatDateRange = (startDate, endDate) => {
* Format date
*
* @param {string|Date|moment.Moment} date date
- *
+ * @param {string} format date/time format
* @returns {string} formatted date range
*/
-export const formatDate = (date) => {
- const dateStr = date ? moment(date).format(DAY_FORMAT) : "";
+export const formatDate = (date, format = DAY_FORMAT) => {
+ const dateStr = date ? moment(date).format(format) : "";
if (!dateStr) {
return "TBD";
@@ -246,6 +246,16 @@ export const formatDate = (date) => {
return `${dateStr}`;
};
+/**
+ * Format interview date/time.
+ *
+ * @param {string|Date|moment.Moment} date date
+ * @returns {string} formatted date
+ */
+export const formatInterviewDate = (date) => {
+ return formatDate(date, DATE_WITH_TIME_FORMAT);
+};
+
/**
* Format page title to show in the browser header.
*