Merge pull request #14 from kjannette/walt

Walt

src/pageElements/Cards.js

@@ -2,6 +2,8 @@ import React from "react";
 import Button from "../pageElements/Button.js";
 import { FileEarmarkText } from "react-bootstrap-icons";
 import TextInput from "../pageElements/TextInput";
+import Tooltip from "../pageElements/Tooltip";
+import { InfoCircle } from "react-bootstrap-icons";
 
 export const InfoCard = (props) => {
   const { data, onEdit, onCancel, onSave, onChangeInput, isEditing, isBusy } =
@@ -277,6 +279,8 @@ export const DocCard = (props) => {
     responseGenerations,
     confirmDelete,
   } = props;
+  const tooltipText =
+    "Parsing is taking longer than usual. Reasons may include unusually high traffic, or a corrupted conversion file. Don’t worry - in most cases, this will resolve in 10 minutes. If not, click the “report” button to notify support.  It will be fixed in 24 hours.";
   const disabled = docType ? false : true;
   return (
     <div className="doc-card-container">
@@ -284,7 +288,9 @@ export const DocCard = (props) => {
         <div className="card-col-icon">
           <FileEarmarkText className="doc-file-icon" size="22px" />
         </div>
-        <div className="doc-col2">{title}</div>
+        <div className="doc-col2">
+          {title} {disabled ? <Tooltip text={tooltipText} /> : <></>}
+        </div>
         {dateServed ? (
           <div className="doc-col3">Served: {dateServed}</div>
         ) : (

src/pageElements/Tooltip.js

@@ -0,0 +1,20 @@
+import { useState } from "react";
+import "../styles/tooltip.scss";
+import { InfoCircle } from "react-bootstrap-icons";
+
+function Tooltip(props) {
+  const [show, setShow] = useState(false);
+  const { text } = props;
+  return (
+    <div
+      className="tooltip-container"
+      onMouseEnter={() => setShow(true)}
+      onMouseLeave={() => setShow(false)}
+    >
+      <InfoCircle className="infocircle-icon" size="16px" />
+      {show ? <span className="tooltip-text">{text}</span> : <></>}
+    </div>
+  );
+}
+
+export default Tooltip;

src/styles/tooltip.scss

@@ -0,0 +1,36 @@
+.tooltip-container {
+  display: inline;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
+  height: 30px;
+  width: 30px;
+  margin: 0px 6px;
+  padding: 0px 2px;
+}
+
+.tooltip-text {
+  font-size: 12px;
+  opacity: 0;
+}
+
+.infocircle-icon {
+  color: red;
+}
+
+.tooltip-text {
+  position: absolute;
+  //top: 10;
+  //left: 50;
+  //right: 5;
+  width: 300px;
+  margin-right: 12px;
+  padding: 6px 6px;
+  font-size: 0.8rem;
+  background-color: var(--barely-there-accent);
+  border: 1px solid var(--gattlin-grey);
+  border-radius: 10px;
+  color: #000;
+  opacity: 1;
+  z-index: 9;
+}