diff --git a/src/Components/HowTo/HowToPage.js b/src/Components/HowTo/HowToPage.js index 057515e..e87ac98 100644 --- a/src/Components/HowTo/HowToPage.js +++ b/src/Components/HowTo/HowToPage.js @@ -3,7 +3,7 @@ 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"; +import howto from "../../Assets/Images/howto.png"; const HowToPage = () => { const { appState } = useContext(AppContext); @@ -13,18 +13,21 @@ const HowToPage = () => { return ( <> -
-
-
- -
-
-
- -
+
+
); }; export default HowToPage; + +/* +
+ +
+
+ +
+ + */ diff --git a/src/Constants/Copy/howToSteps.js b/src/Constants/Copy/howToSteps.js index b6778b5..30324de 100644 --- a/src/Constants/Copy/howToSteps.js +++ b/src/Constants/Copy/howToSteps.js @@ -1,46 +1,63 @@ import { ExclamationTriangle } from "react-bootstrap-icons"; - +import howtohand from "../../Assets/Images/howtohand.png"; +import "../../styles/howTo-page.scss"; export const Steps = () => (
-

Generate Discovery Responses

-
    -
  1. - CREATE THE CASE: Click “Cases” in the top navigation - bar to go to the Case View. Click the “Create New Case” - button (lower right) to surface the Create Case Modal. Enter all - relevant information -- case name, case number, parties, etc. -- and - click “Save Case” to open the new case's - Details View. Click “Upload Document”. -
    2. -
  2. - UPLOAD YOUR DOCUMENT: You will now see the Document - Upload Modal. Enter your discovery request's info: document title, i.e. - “Defendant’s Interrogatories,” and (optionally) the date served. Drag - and drop the file, or click to select it from your computer's files,{" "} - {" "} - then click “Upload”. -
    The upload will begin. Parsing the document usually takes 1 to 2 - minutes, but be patient - it may take up to 5. -
    3. -
  3. - GENERATE THE RESPONSE: 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. -
    4. -
  4. - DOWNLOAD YOUR RESPONSE DOCUMENT: Click the “Create - .Docx' button to download your fully-formatted, ready-to-serve response. -
    5. +
    +

    Generate Discovery Responses

    +
    +
    +
    +
    + CREATE THE CASE: Click “Cases” in + the top navigation bar to go to the Case View. Click “Create New Case” + (lower right button) to surface the Create Case Modal. Follow prompts + to enter relevant information. You will end with the Case's Details + View. Click “Upload Document”. +
    +
    + UPLOAD YOUR DOCUMENT: You will now + see the Document Upload Modal. Enter the discovery request's title, + i.e. “Defendant’s Interrogatories,” and (optionally) the date served. + Drag and drop, or click and select the .pdf from your files. {" "} +
    + Click “Upload”. +
    +
    + Parsing the document usually takes under 2 minutes, but be patient - + it may take up to 5. +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    + GENERATE THE RESPONSE: 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. +
    +
    + DOWNLOAD YOUR RESPONSE DOCUMENT: + Click the “Create .Docx' button to download your fully-formatted, + ready-to-serve response. +
    - Pro tip: Once you've created the case, you can skip step - one. Simply search for the case by entering the case number in the search - bar on your Dashboard, click "Express Document Upload" and follow the - prompts. -
-

+ Pro tip: Once you've created the case, + you can skip step one. Simply search for the case by entering the case + number in the search bar on your Dashboard, click "Express Document + Upload" and follow the prompts. +
); diff --git a/src/styles/howTo-page.scss b/src/styles/howTo-page.scss index d211fe0..1afd226 100644 --- a/src/styles/howTo-page.scss +++ b/src/styles/howTo-page.scss @@ -23,67 +23,70 @@ font-weight: 500; } -.how-to-info-container { - .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; - 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; - } - } +.steps-wrapper { + display: flex; + flex-direction: column; + width: 100%; + padding: 0px 10px; + background-color: #e6e6e653; + border-radius: 10px; +} + +.steps-text-wrapper { + margin-bottom: 14px; + padding: 6px; + text-align: justify; +} + +.fooze { + display: flex; + flex-direction: row; +} + +.steps-upper-right { + display: flex; + flex-direction: column; + + width: 50%; +} + +.steps-upper-left { + display: flex; + flex-direction: column; + width: 50%; +} + +.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; }