Merge pull request #12 from kjannette/fun2

Fun2

src/Components/Case/CaseListPage.js

@@ -28,6 +28,9 @@ const CaseListPage = ({ perPage }) => {
     if (count.current == null) {
       setIsMobile(window.innerWidth < 440);
     }
+    if (count.current < 3) {
+      setIsMobile(window.innerWidth < 440);
+    }
     return () => {
       count.current = 1;
     };
@@ -98,7 +101,7 @@ const CaseListPage = ({ perPage }) => {
   if (!group) {
     return null;
   }
-  console.log("window.innerWidth < 440", window.innerWidth < 440);
+
   const DesktopContent = () => {
     return (
       <>

src/Components/Document/DocumentListPage.js

@@ -1,9 +1,10 @@
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useState, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import { AppContext } from "../../Hooks/useContext/appContext";
 import SelectDropdown from "../../pageElements/SelectDropdown";
 import { DocCard } from "../../pageElements/Cards";
 import { db } from "../../firebase";
+import MobileContent from "../MobileContent";
 import {
   collection,
   deleteDoc,
@@ -18,6 +19,9 @@ import ConfirmModal from "../Modals/ConfirmModal";
 import "../../styles/doclist-page.scss";
 
 const DocumentListPage = ({ perPage }) => {
+  const size = window.innerWidth < 440;
+  const [isMobile, setIsMobile] = useState(size);
+  const count = useRef(null);
   const navigate = useNavigate();
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [selectedDocumentId, setSelectedDocumentId] = useState(null);
@@ -33,6 +37,18 @@ const DocumentListPage = ({ perPage }) => {
   const [selectedDocumentType, setSelectedDocumentType] = useState();
   const [showModal, setShowModal] = useState(false);
 
+  useEffect(() => {
+    if (count.current == null) {
+      setIsMobile(window.innerWidth < 440);
+    }
+    if (count.current < 3) {
+      setIsMobile(window.innerWidth < 440);
+    }
+    return () => {
+      count.current = 1;
+    };
+  }, []);
+
   function getDocuments() {
     if (!appUserId) {
       setAllDocs([]);
@@ -118,17 +134,6 @@ const DocumentListPage = ({ perPage }) => {
     { label: "Associated case name z - a", value: "parentCaseName2" },
   ];
 
-  async function openDoc(docId) {
-    /*
-    may deprecate this functionality
-    try {
-      window.open(`${baseUrl}/Backend/Documents/Uploads/${docId}`, "_blank");
-    } catch (err) {
-      console.log("Error occurred fetching document:", err);
-    }
-    */
-  }
-
   function handleNavigate(
     documentId,
     responseGenerations,
@@ -164,7 +169,8 @@ const DocumentListPage = ({ perPage }) => {
   if (!group) {
     return null;
   }
-  console.log("allDocs", allDocs);
+
+  const DesktopContent = () => {
     return (
       <>
         <div className="doc-list-header">
@@ -199,7 +205,6 @@ const DocumentListPage = ({ perPage }) => {
                       docType={doc.docType}
                       documentId={doc.documentId}
                       dateServed={doc.dateServed}
-                    openDocument={openDoc}
                       confirmDelete={confirmDelete}
                       handleNavigate={handleNavigate}
                       displayDeleteButton={true}
@@ -220,8 +225,8 @@ const DocumentListPage = ({ perPage }) => {
                     <li>
                       {" "}
                       Click "View Case" to select the case with which your
-                    document will be associated. This will open the Case Detail
+                      document will be associated. This will open the Case
-                    view.{" "}
+                      Detail view.{" "}
                     </li>
                     <li className="nodocs-list-item">
                       Note: If you have not yet created any cases, you will need
@@ -261,6 +266,8 @@ const DocumentListPage = ({ perPage }) => {
         ) : null}
       </>
     );
+  };
+  return isMobile ? <MobileContent /> : <DesktopContent />;
 };
 
 export default DocumentListPage;

src/Components/Home/HomePage.js

@@ -3,9 +3,8 @@ import suitAI from "../../Assets/Images/suitAI.png";
 import laptop from "../../Assets/Images/laptop.png";
 import arrow from "../../Assets/Images/Arrow.png";
 import scales_centered from "../../Assets/Images/scales_centered.png";
-import hand_clear from "../../Assets/Images/hand_clear.png";
+import hand_rework7 from "../../Assets/Images/hand_rework7.png";
-import hand_rework6 from "../../Assets/Images/hand_rework6.png";
+import gavel_clear1 from "../../Assets/Images/gavel_clear1.png";
-import gavel_clear from "../../Assets/Images/gavel_clear.png";
 import Group80 from "../../Assets/Images/Group80.png";
 import { useNavigate } from "react-router-dom";
 import "../../styles/homepage.scss";
@@ -16,12 +15,15 @@ const HomePage = () => {
   const handleNavigate = () => {
     navigate("/signup");
   };
+
   const handleLogin = () => {
     navigate("/login");
   };
+
   const handleDemo = () => {
     navigate("/demorequestpage");
   };
+
   return (
     <>
       <div className="homepage-container">
@@ -57,7 +59,6 @@ const HomePage = () => {
           </div>
         </section>
         {/* Section 2 */}
-
         <section className="section-2">
           <div className="home-row">
             <div className="home-col-50">
@@ -125,31 +126,33 @@ const HomePage = () => {
           </div>
           <div className="card-section-container">
             {/***********  CARD ONE *********** */}
-
             <div className="home-card">
               <div className="card-image-container">
-                <img src={gavel_clear} alt="" className="card-image" />
+                <img
+                  src={hand_rework7}
+                  alt=""
+                  width="100%"
+                  className="card-image"
+                />
               </div>
               <div className="card-body">
                 <div className="card-upper-box">
                   <div className="home-card-title">
-                    <h3 className="foo-card-title">Proactive Alerts</h3>
+                    <h3 className="foo-card-title">Discovery Requests</h3>
                     <div className="home-card-divider"></div>
                   </div>
                 </div>
 
                 <div className="home-card-text-box">
                   <p className="card-texts">
-                    Your NovoDash displays important deadlines, sends email/SMS
+                    Generate discovery requests with a few clicks, or select
-                    alerts, and will auto-draft responses and remind you to
+                    manually from a comprehensive request library. Done in a
-                    serve them.
+                    heartbeat, with a .docx for review and service.
                   </p>
                 </div>
               </div>
             </div>
-
             {/***********  CARD TWO *********** */}
-
             <div className="home-card">
               <div className="card-image-container">
                 <img
@@ -176,31 +179,24 @@ const HomePage = () => {
                 </div>
               </div>
             </div>
-
             {/***********  CARD THREE *********** */}
-
             <div className="home-card">
               <div className="card-image-container">
-                <img
+                <img src={gavel_clear1} alt="" className="card-image" />
-                  src={hand_rework6}
-                  alt=""
-                  width="100%"
-                  className="card-image"
-                />
               </div>
               <div className="card-body">
                 <div className="card-upper-box">
                   <div className="home-card-title">
-                    <h3 className="foo-card-title">Discovery Requests</h3>
+                    <h3 className="foo-card-title">Proactive Alerts</h3>
                     <div className="home-card-divider"></div>
                   </div>
                 </div>
 
                 <div className="home-card-text-box">
                   <p className="card-texts">
-                    Generate discovery requests with a few clicks, or select
+                    Your Novodash displays important deadlines, sends email/SMS
-                    manually from a comprehensive request library. Done in a
+                    alerts, can auto-draft documents and remind you to serve
-                    heartbeat, with a .docx for review and service.
+                    them.
                   </p>
                 </div>
               </div>

src/Components/HowTo/HowToPage.js

@@ -1,6 +1,7 @@
 import { useContext } from "react";
 import { AppContext } from "../../Hooks/useContext/appContext";
 import { Steps } from "../../Constants/Copy/howToSteps.js";
+
 import "../../styles/howTo-page.scss";
 import { ReactComponent as HowToInfoSvg } from "../../Assets/svg/howToInfo.svg";
 

src/Components/Navigation/Navpanel.js

@@ -65,24 +65,27 @@ export default function Navpanel(props) {
                   Dashboard
                 </a>
               </div>
-              <div className="contact-detail-two">
+              <div className="contact-detail-twotwo">
                 <a
-                  className="contact-link-two"
+                  className="contact-link-twotwo"
                   onClick={() => packUpAndLeave("cases")}
                 >
                   Cases
                 </a>
               </div>
-              <div className="contact-detail-three">
+              <div className="contact-detail-threethree">
                 <a
-                  className="nav-link-three"
+                  className="nav-link-threthree"
                   onClick={() => packUpAndLeave("documents")}
                 >
                   Documents
                 </a>
               </div>
               <div className="contact-detail-one">
-                <a className="contact-link" onClick={() => packUpAndLeave("")}>
+                <a
+                  className="contact-linklink"
+                  onClick={() => packUpAndLeave("")}
+                >
                   Blog
                 </a>
               </div>

src/Constants/Copy/howToSteps.js

@@ -1,3 +1,5 @@
+import { ExclamationTriangle } from "react-bootstrap-icons";
+
 export const Steps = () => (
   <div className="steps-wrapper">
     <h2 className="doc-header-text">Generate Discovery Responses</h2>
@@ -31,10 +33,13 @@ export const Steps = () => (
         satisfied, you can download a .docx file by clicking the “Create .docx
         File” button.
       </li>
+      <ExclamationTriangle
+        style={{ color: "red", marginRight: "6px", marginBottom: "2px" }}
+      />
       <strong>Pro tip:</strong> once you've created a case, you can skip most of
       these steps. Simply search for the case by entering the case number in the
-      search bar on your Dashboard, and click "Express Document Upload" and
+      search bar on your <strong>Dashboard</strong>, click "Express Document
-      follow the prompts.
+      Upload" and follow the prompts.
     </ol>
     <p className="steps-p"></p>
   </div>

src/pageElements/Cards.js

@@ -271,7 +271,6 @@ export const DocCard = (props) => {
     parentCaseId,
     documentId,
     dateServed,
-    openDocument,
     docType,
     displayDeleteButton,
     handleNavigate,
@@ -283,11 +282,7 @@ export const DocCard = (props) => {
     <div className="doc-card-container">
       <div className="doc-card-input">
         <div className="card-col-icon">
-          <FileEarmarkText
+          <FileEarmarkText className="doc-file-icon" size="22px" />
-            className="doc-file-icon"
-            onClick={() => openDocument(documentId)}
-            size="22px"
-          />
         </div>
         <div className="doc-col2">{title}</div>
         {dateServed ? (

src/styles/contact.scss

@@ -54,6 +54,14 @@
   padding-right: 25px;
 }
 
+.contact-link-twotwo {
+  font-size: 0.95rem;
+  letter-spacing: 0.92rem;
+  color: #fff;
+  text-decoration: none;
+  padding-right: 25px;
+}
+
 .contactLinkThree {
   letter-spacing: 1rem;
   text-decoration: none;
@@ -106,6 +114,15 @@
   letter-spacing: 0.2rem;
 }
 
+.contact-detail-twotwo {
+  display: flex;
+  flex-direction: row-reverse;
+  height: 38px;
+  margin: 12px 0px;
+  padding-right: 18px;
+  background-color: hsl(17, 100%, 61%);
+}
+
 .contact-detail-three {
   display: flex;
   flex-direction: row-reverse;
@@ -115,6 +132,15 @@
   letter-spacing: 0.5rem;
 }
 
+.contact-detail-threethree {
+  display: flex;
+  flex-direction: row-reverse;
+  height: 40px;
+  margin: 12px 0px;
+  background-color: rgb(93, 206, 255);
+  letter-spacing: 0.5rem;
+}
+
 .contactDetailFour {
   width: 40%;
   background-color: orange;
@@ -206,20 +232,18 @@
     padding-right: 20px;
   }
 
-  .contactLink {
+  .nav-link-threthree {
-    letter-spacing: 0.2rem;
+    color: black;
+    letter-spacing: 1rem;
+    text-decoration: none;
+    padding-right: 24px;
+  }
+
+  .contact-linklink {
+    font-size: 1rem;
+    letter-spacing: 0.6rem;
+    color: #fff;
+    text-decoration: none;
+    padding-right: 16px;
   }
 }
-
-/*
-.threeInner {
-  display: flex;
-  margin-left: 5px;
-  height: 300px;
-  width: 130px;
-  border-radius: 0px;
-  overflow: hidden;
-  opacity: 0.4;
-  background: linear-gradient(to left, rgba(245, 246, 252, 0.52), red);
-}
-*/