feat: schedule interview updates

config/dev.js

@@ -13,4 +13,10 @@ module.exports = {
     V5: "https://api.topcoder-dev.com/v5", //"http://localhost:3030/api/v5"
     V3: "https://api.topcoder-dev.com/v3",
   },
+
+  /**
+   * The interview api url is the mock server url.
+   * This has to be replaced with the real url once the API is implemented.
+   */
+  INTERVIEW_API_URL: "http://localhost:5555/",
 };

src/components/BaseModal/index.jsx

@@ -10,14 +10,15 @@
 
 import React from "react";
 import PT from "prop-types";
+import cn from "classnames";
 import { Modal } from "react-responsive-modal";
 import Button from "../Button";
 import IconCross from "../../assets/images/icon-cross-light.svg";
 import "./styles.module.scss";
 
 const modalStyle = {
   borderRadius: "8px",
-  padding: "32px 32px 22px 32px",
+  padding: "20px 24px",
   maxWidth: "640px",
   width: "100%",
   margin: 0,
@@ -28,6 +29,11 @@ const containerStyle = {
   padding: "10px",
 };
 
+const closeButton = {
+  right: "24px",
+  top: "24px",
+};
+
 function BaseModal({
   open,
   onClose,
@@ -37,31 +43,47 @@ function BaseModal({
   closeButtonText,
   disabled,
   extraModalStyle,
+  alignTitleCenter = false,
+  showButton = true,
+  closeIcon: CloseIcon,
 }) {
   return (
     <Modal
       open={open}
       onClose={onClose}
-      closeIcon={<IconCross width="15px" height="15px" />}
+      closeIcon={
+        CloseIcon ? CloseIcon : <IconCross width="15px" height="15px" />
+      }
       styles={{
         modal: { ...modalStyle, ...extraModalStyle },
         modalContainer: containerStyle,
+        closeButton,
       }}
       center={true}
     >
-      {title && <h2 styleName="title">{title}</h2>}
-      <div styleName="content">{children}</div>
-      <div styleName="button-group">
-        {button && button}
-        <Button
-          type="secondary"
-          size="medium"
-          onClick={onClose}
-          disabled={disabled}
+      {title && (
+        <h2
+          styleName={cn("title", {
+            "center-title": alignTitleCenter,
+          })}
         >
-          {closeButtonText ? closeButtonText : "Cancel"}
-        </Button>
-      </div>
+          {title}
+        </h2>
+      )}
+      <div styleName="content">{children}</div>
+      {showButton && (
+        <div styleName="button-group">
+          {button && button}
+          <Button
+            type="secondary"
+            size="medium"
+            onClick={onClose}
+            disabled={disabled}
+          >
+            {closeButtonText ? closeButtonText : "Cancel"}
+          </Button>
+        </div>
+      )}
     </Modal>
   );
 }
@@ -75,6 +97,9 @@ BaseModal.propTypes = {
   closeButtonText: PT.string,
   disabled: PT.bool,
   extraModalStyle: PT.object,
+  showButton: PT.bool,
+  alignTitleCenter: PT.bool,
+  closeIcon: PT.node,
 };
 
 export default BaseModal;

src/components/BaseModal/styles.module.scss

@@ -5,14 +5,24 @@ svg {
 }
 
 .title {
-  @include font-barlow-condensed;
+  @include font-barlow;
   font-weight: normal;
-  font-size: 34px;
-  line-height: 40px;
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 24px;
   margin: 0 0 24px 0;
   overflow-wrap: anywhere;
   padding: 0;
   text-transform: uppercase;
+  border-bottom: 2px solid #e9e9e9;
+  padding-bottom: 20px;
+  color: #2a2a2a;
+}
+
+.center-title {
+  text-align: center;
+  border-bottom-color: transparent;
+  margin-bottom: 0;
 }
 
 .content {

src/components/Button/styles.module.scss

@@ -52,6 +52,17 @@
   text-transform: uppercase;
 }
 
+.size-xSmall {
+  border-radius: 15px;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 24px;
+  letter-spacing: 0.8px;
+  height: 24px;
+  padding: 0 11px;
+  text-transform: uppercase;
+}
+
 .type-primary {
   border: 1px solid #137d60;
   background-color: #137d60;

src/components/Select/index.jsx

@@ -1,4 +1,5 @@
 import React, { useCallback } from "react";
+import cn from "classnames";
 import PT from "prop-types";
 import "./styles.module.scss";
 
@@ -13,9 +14,19 @@ const Select = ({ options, value, onChange, label, className }) => {
   return (
     <div styleName="select-wrapper" className={className}>
       {!!label && <label styleName="select-label">{label}</label>}
-      <select value={value} onChange={onChangeHandler} styleName="select">
+      <select
+        value={value}
+        onChange={onChangeHandler}
+        styleName={cn("select", {
+          "empty-value": value === "",
+        })}
+      >
         {options.map((option) => (
-          <option key={option.value} value={option.value}>
+          <option
+            key={option.value}
+            value={option.value}
+            disabled={option.disabled}
+          >
             {option.label}
           </option>
         ))}
@@ -29,6 +40,7 @@ Select.propTypes = {
     PT.shape({
       label: PT.string.isRequired,
       value: PT.oneOfType([PT.string, PT.number]),
+      disabled: PT.bool,
     })
   ),
   value: PT.oneOfType([PT.string, PT.number]),

src/components/Select/styles.module.scss

@@ -9,13 +9,19 @@
   border: 0;
   color: #2a2a2a;
   outline: none;
-  font-size: 14px;
+  font-size: 16px;
   height: 100%;
   line-height: 22px;
   padding-left: 15px;
   width: 100%;
 }
 
+.empty-value {
+  color: #aaaaaa;
+  font-weight: 400;
+  font-size: 16px;
+}
+
 .select-wrapper {
   align-items: center;
   border: 1px solid #aaaaaa;

src/components/TimezoneSelector/index.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import PT from "prop-types";
+import { TIME_ZONES } from "constants";
+import moment from "moment";
+import "./styles.module.scss";
+
+const TimezoneSelector = ({ value, onChange }) => {
+  return (
+    <div styleName="timezone-selector">
+      <div styleName="label">Interview Timezone</div>
+      <select styleName="select" onChange={onChange}>
+        {TIME_ZONES.map((zone) => (
+          <option
+            value={zone}
+            selected={zone === value}
+          >{`${zone} - UTC${moment().tz(zone).format("Z")}`}</option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+TimezoneSelector.propTypes = {
+  value: PT.string,
+  onChange: PT.func,
+};
+
+export default TimezoneSelector;

src/components/TimezoneSelector/styles.module.scss

@@ -0,0 +1,71 @@
+@import "styles/include";
+
+.select {
+  /* Reset Select */
+  appearance: none;
+  outline: 0;
+  border: 0;
+  box-shadow: none;
+  /* Personalize */
+  @include font-roboto;
+  flex: 1;
+  color: #2a2a2a;
+  margin-left: 10px;
+  font-size: 16px;
+  font-weight: 400;
+  background-image: none;
+  cursor: pointer;
+  margin-bottom: 7px;
+}
+
+/* Remove IE arrow */
+.select::-ms-expand {
+  display: none;
+}
+
+/* Custom Select wrapper */
+.timezone-selector {
+  position: relative;
+  display: flex;
+  width: 384px;
+  height: 48px;
+  overflow: hidden;
+  margin-top: 59px;
+  flex-direction: column;
+  border: 1px solid #aaaaaa;
+  border-radius: 4px;
+}
+
+.label {
+  @include font-roboto;
+  color: #137d60;
+  font-weight: 500;
+  font-size: 11px;
+  margin-left: 10px;
+}
+
+/* Arrow */
+.timezone-selector::after {
+  content: "";
+  position: absolute;
+  background-image: url(../../assets/images/icon-down-arrow-black.svg);
+  background-size: 16px;
+  background-repeat: no-repeat;
+  bottom: 10px;
+  right: 10px;
+  width: 16px;
+  height: 16px;
+  transition: 0.25s all ease;
+  pointer-events: none;
+}
+
+/* Transition */
+.timezone-selector:hover::after {
+  color: #f39c12;
+}
+
+@media (max-width: 420px) {
+  .timezone-selector {
+    width: 100%;
+  }
+}