Deploy to Production for Interview Scheduler

docker/Dockerfile

@@ -1,5 +1,5 @@
 # Use the base image with Node.js
-FROM node:latest
+FROM node:10
 
 ARG APPMODE
 ARG APPENV

docker/mockDockerfile

@@ -1,5 +1,5 @@
 # Use the base image with Node.js
-FROM node:latest
+FROM node:10
 
 # Copy the current directory into the Docker image
 COPY . /taas-app

package.json

@@ -60,7 +60,9 @@
     "axios": "^0.21.0",
     "classnames": "^2.2.6",
     "express": "^4.17.1",
+    "faker": "^5.5.3",
     "final-form": "^4.20.1",
+    "final-form-arrays": "^3.0.2",
     "immutability-helper": "^3.1.1",
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
@@ -71,6 +73,7 @@
     "react-datepicker": "^3.4.1",
     "react-dom": "^16.12.0",
     "react-final-form": "^6.5.2",
+    "react-final-form-arrays": "^3.1.3",
     "react-loader-spinner": "^4.0.0",
     "react-outside-click-handler": "^1.3.0",
     "react-popper": "^2.2.3",

src/components/Accordion/index.jsx

@@ -0,0 +1,44 @@
+/**
+ * Accordion
+ *
+ * An expandable item which can be used
+ * repeatadly to form an accordion style display
+ */
+
+import React, { useState } from "react";
+import PT from "prop-types";
+import "./styles.module.scss";
+
+function Accordion(props) {
+  const { title, sidebar, subhead, children } = props;
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div styleName="accordion">
+      <button onClick={() => setIsOpen(!isOpen)} styleName="button">
+        {isOpen ? (
+          <div styleName="down-arrow" />
+        ) : (
+          <div styleName="right-arrow" />
+        )}
+        <div styleName="heading">
+          <div>
+            <h4 styleName="title">{title}</h4>
+            <p>{subhead}</p>
+          </div>
+          <p>{sidebar}</p>
+        </div>
+      </button>
+      {isOpen && <div styleName="panel">{children}</div>}
+    </div>
+  );
+}
+
+Accordion.propTypes = {
+  title: PT.string,
+  sidebar: PT.string,
+  subhead: PT.string,
+  children: PT.node,
+};
+
+export default Accordion;

src/components/Accordion/styles.module.scss

@@ -0,0 +1,70 @@
+@import "styles/include";
+
+.accordion {
+  padding-bottom: 10px;
+  border-bottom: 1px solid #e9e9e9;
+}
+
+.button {
+  cursor: pointer;
+  width: 100%;
+  border: none;
+  outline: none;
+  background-color: #fff;
+  color: #2a2a2a;
+  display: flex;
+  text-align: left;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 15px 0 10px 0;
+
+  p {
+    @include font-roboto;
+    font-size: 14px;
+  }
+}
+
+.down-arrow {
+  display: inline-block;
+  content: '';
+  height: 13px;
+  width: 13px;
+  margin-right: 16px;
+  border-bottom: 3px solid #137D60;
+  border-right: 3px solid #137D60;
+  transform: rotate(45deg);
+}
+
+.right-arrow {
+  display: inline-block;
+  content: '';
+  height: 13px;
+  width: 13px;
+  margin-right: 16px;
+  border-bottom: 3px solid #137D60;
+  border-right: 3px solid #137D60;
+  transform: rotate(-45deg);
+}
+
+.heading {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.title {
+  @include font-barlow;
+  font-weight: 600;
+  font-size: 20px;
+  margin: 0;
+  padding: 0;
+  text-transform: uppercase;
+}
+
+.panel {
+  padding-left: 28px;
+  font-size: 14px;
+}

src/components/ActionsMenu/index.jsx

@@ -100,7 +100,11 @@ const ActionsMenu = ({ options = [] }) => {
                     onClick={closeOnAction(option.action)}
                     role="button"
                     tabIndex={0}
-                    styleName="option"
+                    styleName={
+                      "option" +
+                      (option.style ? " " + option.style : "") +
+                      (option.disabled ? " disabled" : "")
+                    }
                   >
                     {option.label}
                   </div>

src/components/ActionsMenu/styles.module.scss

@@ -39,10 +39,23 @@
 }
 
 .option {
-  color: #0d61bf;
+  color: #219174;
   cursor: pointer;
-  font-size: 14px;
-  line-height: 20px;
+  font-size: 12px;
+  font-weight: bold;
+  letter-spacing: 0.8px;
+  line-height: 30px;
+  text-transform: uppercase;
   outline: none;
   padding: 5px 0;
 }
+
+.danger {
+  color: #EF476F;
+}
+
+.disabled {
+  color: gray;
+  opacity: 0.6;
+  pointer-events: none;
+}

src/components/BaseModal/index.jsx

@@ -21,6 +21,7 @@ const modalStyle = {
   maxWidth: "640px",
   width: "100%",
   margin: 0,
+  "overflow-x": "hidden",
 };
 
 const containerStyle = {

src/components/Radio/index.jsx

@@ -0,0 +1,45 @@
+/**
+ * Radio
+ *
+ * A styled radio button
+ * Used in RadioFieldGroup component
+ */
+
+import React from "react";
+import PT from "prop-types";
+import cn from "classnames";
+import "./styles.module.scss";
+
+function Radio(props) {
+  return (
+    <label styleName={cn("container", { horizontal: props.horizontal })}>
+      <input
+        styleName="radio-input"
+        type={props.type}
+        name={props.name}
+        value={props.value}
+        checked={props.checked}
+        disabled={props.disabled}
+        onBlur={props.onBlur}
+        onFocus={props.onFocus}
+        onChange={props.onChange}
+      />
+      <span styleName="custom" />
+      {props.label}
+    </label>
+  );
+}
+
+Radio.propTypes = {
+  onChange: PT.func,
+  onBlur: PT.func,
+  onFocus: PT.func,
+  value: PT.string.isRequired,
+  disabled: PT.bool,
+  type: PT.string.isRequired,
+  label: PT.string,
+  checked: PT.bool,
+  horizontal: PT.bool,
+};
+
+export default Radio;

src/components/Radio/styles.module.scss

@@ -0,0 +1,59 @@
+.radio-input {
+  width: auto;
+  height: auto;
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.container {
+  display: block;
+  position: relative;
+  padding-left: 35px;
+  margin-bottom: 24px;
+  cursor: pointer;
+  font-size: 14px;
+  user-select: none;
+
+  &.horizontal {
+    margin-bottom: 0;
+    display: inline-block;
+    margin-left: 24px;
+  }
+}
+
+.custom {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 24px;
+  width: 24px;
+  background-color: #fff;
+  border-radius: 50%;
+  border: 1px solid #AAA;
+}
+
+.radio-input:checked ~ .custom {
+  background-color: #0AB88A;
+  box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.29);
+}
+
+.custom:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+
+.radio-input:checked ~ .custom:after {
+  display: block;
+}
+
+.container .custom:after {
+  top: 5px;
+  left: 5px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.35);
+  background: white;
+}