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

Merge pull request #69 from kjannette/how

Browse Source 
How
This commit is contained in:
S Jannette
2024-01-31 22:51:50 -06:00
committed by GitHub
parent 5ccade3181 efdeab829a
commit e4a069a6bc
3 changed files with 134 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
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">
<div className="how-to-image-wrapper">
<HowToInfoSvg className="how-to-info-svg" />
</div>
</div>
<div className="how-to-steps-container">
<Steps /> <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>
*/

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

@@ -1,46 +1,63 @@
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">
<div className="steps-text-wrapper">
<h2 className="doc-header-text">Generate Discovery Responses</h2> <h2 className="doc-header-text">Generate Discovery Responses</h2>
<ol className="steps-list"> </div>
<li> <div className="fooze">
<strong>CREATE THE CASE: </strong> Click “Cases” in the top navigation <div className="steps-upper-left">
bar to go to the <strong>Case View</strong>. Click the “Create New Case” <div className="steps-text-wrapper">
button (lower right) to surface the Create Case Modal. Enter all <span className="bold-span">CREATE THE CASE: </span> Click “Cases” in
relevant information -- case name, case number, parties, etc. -- and the top navigation bar to go to the Case View. Click “Create New Case”
click “Save Case” to open the new case's (lower right button) to surface the Create Case Modal. Follow prompts
<strong> Details View.</strong> Click “Upload Document”. to enter relevant information. You will end with the Case's Details
</li> View. Click “Upload Document”.
<li> </div>
<strong>UPLOAD YOUR DOCUMENT: </strong>You will now see the Document <div className="steps-text-wrapper">
Upload Modal. Enter your discovery request's info: document title, i.e. <span className="bold-span">UPLOAD YOUR DOCUMENT: </span>You will now
“Defendant’s Interrogatories,” and (optionally) the date served. Drag see the Document Upload Modal. Enter the discovery request's title,
and drop the file, or click to select it from your computer's files,{" "} i.e. “Defendant’s Interrogatories,” and (optionally) the date served.
{" "} Drag and drop, or click and select the .pdf from your files. {" "}
then click <strong> “Upload”.</strong> <div className="mini-break">
<br /> The upload will begin. Parsing the document usually takes 1 to 2 Click <span className="bold-span"> “Upload”.</span>
minutes, but be patient - it may take up to 5. </div>
</li> <div className="mini-break">
<li> Parsing the document usually takes under 2 minutes, but be patient -
<strong>GENERATE THE RESPONSE: </strong>From the Document List View, it may take up to 5.
click the “Generate Responses'' button. Novdraft’s Intellidraft AI will </div>
generate the response and automatically navigate to the interactive </div>
Document Editor. You can edit the responses and save progress any time </div>
by clicking the “Save Changes” button. <div className="steps-upper-right">
</li> <div className="image-right-one">
<li> <div className="image-jhon"></div>
<strong>DOWNLOAD YOUR RESPONSE DOCUMENT: </strong>Click the “Create <div className="image-moun">
.Docx' button to download your fully-formatted, ready-to-serve response. <img src={howtohand} className="howto-hand-img"></img>
</li> </div>
</div>
</div>
</div>
<div className="barzee">
<div className="steps-text-wrapper">
<span className="bold-span">GENERATE THE RESPONSE: </span>From the
Document List View, click the “Generate Responses'' button. Novdraft’s
Intellidraft AI will generate the response and automatically navigate to
the interactive Document Editor. You can edit the responses and save
progress any time by clicking the “Save Changes” button.
</div>
<div className="steps-text-wrapper">
<span className="bold-span">DOWNLOAD YOUR RESPONSE DOCUMENT: </span>
Click the “Create .Docx' button to download your fully-formatted,
ready-to-serve response.
</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>
); );

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

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