fix(interview-scheduler): P3 & P4 issues

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,
 };

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;

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 {

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;
 }
 

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}

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 },
 ];
 

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

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>
     </>
   );
 }

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">

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} Attendees`}
     >
       <ul>

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

src/styles/main.module.scss

@@ -5,4 +5,7 @@
 .topcoder-micro-frontends-teams-app {
   @include font-roboto;
   color: #2a2a2a;
+  svg {
+    pointer-events: none;
+  }
 }

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.
  *