more

src/Constants/Copy/howToSteps.js

@@ -3,45 +3,50 @@ import howtohand from "../../Assets/Images/howtohand.png";
 import "../../styles/howTo-page.scss";
 export const Steps = () => (
   <div className="steps-wrapper">
-    <div>
+    <div className="steps-text-wrapper">
       <h2 className="doc-header-text">Generate Discovery Responses</h2>
     </div>
     <div className="fooze">
       <div className="steps-upper-left">
-        <div>
-          <strong>CREATE THE CASE: </strong> Click “Cases” in the top navigation
-          bar to go to the <strong>Case View</strong>. 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
-          <strong> Details View.</strong> Click “Upload Document”.
+        <div className="steps-text-wrapper">
+          <span className="bold-span">CREATE THE CASE: </span> 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. Follow
+          prompts to relevant information. You will end with the Case Details
+          View. Click “Upload Document”.
         </div>
-        <div>
-          <strong>UPLOAD YOUR DOCUMENT: </strong>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 <strong> “Upload”.</strong>
+        <div className="steps-text-wrapper">
+          <span className="bold-span">UPLOAD YOUR DOCUMENT: </span>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 <span className="bold-span"> “Upload”.</span>
           <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">
+        <div className="image-right-one">
+          <div className="image-jhon"></div>
+          <div className="image-moun">
             <img src={howtohand} className="howto-hand-img"></img>
           </div>
         </div>
+      </div>
+    </div>
     <div className="barzee">
       <div>
-        <strong>GENERATE THE RESPONSE: </strong>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.
+        <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>
-        <strong>DOWNLOAD YOUR RESPONSE DOCUMENT: </strong>Click the “Create
-        .Docx' button to download your fully-formatted, ready-to-serve response.
+        <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
         style={{ color: "red", marginRight: "6px", marginBottom: "2px" }}

src/styles/howTo-page.scss

@@ -29,6 +29,12 @@
   width: 100%;
 }
 
+.steps-text-wrapper {
+  margin-bottom: 14px;
+  padding: 6px;
+  text-align: justify;
+}
+
 .fooze {
   display: flex;
   flex-direction: row;
@@ -44,12 +50,29 @@
 .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%;
+}
+
+.image-moun {
+  display: flex;
+  flex-direction: column;
+  width: 80%;
+}
+
 .howto-hand-img {
-  width: 420px;
+  border-radius: 10px;
+  width: 424px;
 }
 
 .bold-span {