kjannette/ax3Client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more

Browse Source
This commit is contained in:
Kenneth Jannette
2024-01-31 22:11:16 -06:00
parent 5ccade3181
commit 110dfae131
3 changed files with 84 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/Components/HowTo/HowToPage.js
View File

@@ -3,7 +3,7 @@ import { AppContext } from "../../Hooks/useContext/appContext";
import { Steps } from "../../Constants/Copy/howToSteps.js"; import { Steps } from "../../Constants/Copy/howToSteps.js";
import "../../styles/howTo-page.scss"; import "../../styles/howTo-page.scss";
import { ReactComponent as HowToInfoSvg } from "../../Assets/svg/howToInfo.svg"; import howto from "../../Assets/Images/howto.png";
const HowToPage = () => { const HowToPage = () => {
const { appState } = useContext(AppContext); const { appState } = useContext(AppContext);
@@ -13,18 +13,21 @@ const HowToPage = () => {
return ( return (
<> <>
<div className="how-to-info-container"> <div>
<div className="how-to-info-wrapper"> <Steps />
<div className="how-to-image-wrapper">
<HowToInfoSvg className="how-to-info-svg" />
</div>
</div>
<div className="how-to-steps-container">
<Steps />
</div>
</div> </div>
</> </>
); );
}; };
export default HowToPage; export default HowToPage;
/*
<div className="how-to-image-wrapper">
<img className="how-to-image" src={howto}></img>
</div>
<div className="how-to-image-wrapper">
<img className="footer-logo" src={logoWhite}></img>
</div>
*/

71
src/Constants/Copy/howToSteps.js
View File

@@ -1,46 +1,55 @@
import { ExclamationTriangle } from "react-bootstrap-icons"; import { ExclamationTriangle } from "react-bootstrap-icons";
import howtohand from "../../Assets/Images/howtohand.png";
import "../../styles/howTo-page.scss";
export const Steps = () => ( export const Steps = () => (
<div className="steps-wrapper"> <div className="steps-wrapper">
<h2 className="doc-header-text">Generate Discovery Responses</h2> <div>
<ol className="steps-list"> <h2 className="doc-header-text">Generate Discovery Responses</h2>
<li> </div>
<strong>CREATE THE CASE: </strong> Click “Cases” in the top navigation <div className="fooze">
bar to go to the <strong>Case View</strong>. Click the “Create New Case” <div className="steps-upper-left">
button (lower right) to surface the Create Case Modal. Enter all <div>
relevant information -- case name, case number, parties, etc. -- and <strong>CREATE THE CASE: </strong> Click “Cases” in the top navigation
click “Save Case” to open the new case's bar to go to the <strong>Case View</strong>. Click the “Create New
<strong> Details View.</strong> Click “Upload Document”. Case” button (lower right) to surface the Create Case Modal. Enter all
</li> relevant information -- case name, case number, parties, etc. -- and
<li> click “Save Case” to open the new case's
<strong>UPLOAD YOUR DOCUMENT: </strong>You will now see the Document <strong> Details View.</strong> Click “Upload Document”.
Upload Modal. Enter your discovery request's info: document title, i.e. </div>
“Defendant’s Interrogatories,” and (optionally) the date served. Drag <div>
and drop the file, or click to select it from your computer's files,{" "} <strong>UPLOAD YOUR DOCUMENT: </strong>You will now see the Document
{" "} Upload Modal. Enter your discovery request's info: document title,
then click <strong> “Upload”.</strong> i.e. “Defendant’s Interrogatories,” and (optionally) the date served.
<br /> The upload will begin. Parsing the document usually takes 1 to 2 Drag and drop the file, or click to select it from your computer's
minutes, but be patient - it may take up to 5. files, {" "}
</li> then click <strong> “Upload”.</strong>
<li> <br /> The upload will begin. Parsing the document usually takes under
2 minutes, but be patient - it may take up to 5.
</div>
</div>
<div className="steps-upper-right">
<img src={howtohand} className="howto-hand-img"></img>
</div>
</div>
<div className="barzee">
<div>
<strong>GENERATE THE RESPONSE: </strong>From the Document List View, <strong>GENERATE THE RESPONSE: </strong>From the Document List View,
click the “Generate Responses'' button. Novdraft’s Intellidraft AI will click the “Generate Responses'' button. Novdraft’s Intellidraft AI will
generate the response and automatically navigate to the interactive generate the response and automatically navigate to the interactive
Document Editor. You can edit the responses and save progress any time Document Editor. You can edit the responses and save progress any time
by clicking the “Save Changes” button. by clicking the “Save Changes” button.
</li> </div>
<li> <div>
<strong>DOWNLOAD YOUR RESPONSE DOCUMENT: </strong>Click the “Create <strong>DOWNLOAD YOUR RESPONSE DOCUMENT: </strong>Click the “Create
.Docx' button to download your fully-formatted, ready-to-serve response. .Docx' button to download your fully-formatted, ready-to-serve response.
</li> </div>
<ExclamationTriangle <ExclamationTriangle
style={{ color: "red", marginRight: "6px", marginBottom: "2px" }} style={{ color: "red", marginRight: "6px", marginBottom: "2px" }}
/> />
<strong>Pro tip:</strong> Once you've created the case, you can skip step <span className="bold-span">Pro tip:</span> Once you've created the case,
one. Simply search for the case by entering the case number in the search you can skip step one. Simply search for the case by entering the case
bar on your Dashboard, click "Express Document Upload" and follow the number in the search bar on your Dashboard, click "Express Document
prompts. Upload" and follow the prompts.
</ol> </div>
<p className="steps-p"></p>
</div> </div>
); );

94
src/styles/howTo-page.scss
View File

@@ -23,67 +23,35 @@
font-weight: 500; font-weight: 500;
} }
.how-to-info-container { .steps-wrapper {
.how-to-info-wrapper { display: flex;
margin-top: 20px; flex-direction: column;
display: flex; width: 100%;
align-items: center; }
justify-content: center;
} .fooze {
display: flex;
.how-to-image-wrapper { flex-direction: row;
display: flex; }
max-width: 1100px;
height: 100%; .steps-upper-right {
background-color: var(--haq-blue); //#e6e6e653; display: flex;
border-radius: 10px; flex-direction: column;
align-items: center;
justify-content: center; width: 50%;
border-radius: 20px; }
}
.steps-upper-left {
.how-to-info-svg { display: flex;
padding: 30px 30px; flex-direction: column;
width: 80%;
height: 0%; width: 50%;
border-radius: 40px; }
}
.howto-hand-img {
.how-to-steps-container { width: 420px;
margin: 5px 20px; }
}
.steps-wrapper { .bold-span {
display: flex; font-weight: 500;
flex-direction: column;
margin: 25px 0px;
background-color: #e6e6e653;
border-radius: 10px;
padding: 16px 38px 16px 25px;
text-align: justify;
strong {
font-weight: 500;
}
ol {
li {
margin-bottom: 14px;
}
}
.doc-header-text {
margin-bottom: 16px !important;
margin-left: 0px;
letter-spacing: -0.6px;
font-weight: 400;
}
.steps-p {
margin-bottom: 14px;
padding: 0px 14px;
}
.howto-special-para {
margin-top: 6px;
}
}
} }