Merge pull request #83 from kleros/feat/add-link-escrow-tutorial

Feat: add link to escrow tutorial
kleros · Nov 3, 2021 · 8a157c4 · 8a157c4
2 parents 7eb104d + 400b04f
commit 8a157c4
Show file tree

Hide file tree

Showing 26 changed files with 53 additions and 40 deletions.
diff --git a/src/bootstrap/app.css b/src/bootstrap/app.css
@@ -182,8 +182,8 @@ input[type="file"]:active {
   .menu-wrapper {
     margin-top: -54px; } }
 
-/* 48em = 768px */
-@media (min-width: 48em) {
+/* 56em = 896px */
+@media (min-width: 56em) {
   .App main {
     padding: 100px 2em 120px 2em; }
   .header {

diff --git a/src/bootstrap/app.js b/src/bootstrap/app.js
@@ -17,6 +17,7 @@ import AccountInfo from "../containers/account-info";
 import { ReactComponent as Kleros } from "../assets/kleros.svg";
 import { ReactComponent as Transaction } from "../assets/transaction.svg";
 import { ReactComponent as Invoice } from "../assets/invoice.svg";
+import { ReactComponent as QuestionIcon } from "../assets/question-circle.svg";
 
 import "./app.css";
 
@@ -94,6 +95,21 @@ function Main({ children }) {
                 New Payment
               </Link>
             </li>
+            <li className="menu-transaction">
+              <a
+                href={
+                  "https://kleros.gitbook.io/docs/products/escrow/" +
+                  "new-in-progress-kleros-escrow-tutorial"
+                }
+                rel="noopener noreferrer"
+                target="blank"
+                className='btn-new btn-new-invoice'
+                style={{border: "none"}}
+              >
+                <QuestionIcon className="btn-icon" />
+                Tutorial
+              </a>
+            </li>
           </ul>
         </div>
       </header>

diff --git a/src/bootstrap/app.scss b/src/bootstrap/app.scss
@@ -234,9 +234,8 @@ input[type="file"]:active {
   }
 }
 
-/* 48em = 768px */
-
-@media (min-width: 48em) {
+/* 56em = 896px */
+@media (min-width: 56em) {
   .App {
     main {
       padding: 100px 2em 120px 2em;

diff --git a/src/components/agreement_fully/agreement-fully.css b/src/components/agreement_fully/agreement-fully.css
@@ -54,7 +54,7 @@
     font-size: 14px;
     line-height: 18px; }
 
-@media (max-width: 48em) {
+@media (max-width: 56em) {
   .AgreementFully {
     margin: 0 4px; }
     .AgreementFully-modal-buttons {

diff --git a/src/components/agreement_fully/agreement-fully.scss b/src/components/agreement_fully/agreement-fully.scss
@@ -73,7 +73,7 @@
   }
 }
 
-@media (max-width: 48em) {
+@media (max-width: 56em) {
   .AgreementFully {
     margin: 0 4px;
     &-modal {

diff --git a/src/components/arbitrable-tx-cards/arbitrable-tx-cards.css b/src/components/arbitrable-tx-cards/arbitrable-tx-cards.css
@@ -152,8 +152,8 @@
   line-height: 60vh;
   cursor: pointer; }
 
-/* 48em = 768px */
-@media (max-width: 48em) {
+/* 56em = 896px */
+@media (max-width: 56em) {
   .ArbitrableTxCards-h1 {
     text-align: center;
     font-size: 1.1em;

diff --git a/src/components/arbitrable-tx-cards/arbitrable-tx-cards.scss b/src/components/arbitrable-tx-cards/arbitrable-tx-cards.scss
@@ -197,9 +197,8 @@
   }
 }
 
-/* 48em = 768px */
-
-@media (max-width: 48em) {
+/* 56em = 896px */
+@media (max-width: 56em) {
   .ArbitrableTxCards {
     &-h1 {
       text-align: center;

diff --git a/src/components/dispute-arbitrable-tx/dispute-arbitrable-tx.css b/src/components/dispute-arbitrable-tx/dispute-arbitrable-tx.css
@@ -16,7 +16,7 @@
     background: #1e075f;
     min-height: 70px; }
 
-@media (max-width: 48em) {
+@media (max-width: 56em) {
   .DisputeArbitrableTx {
     margin: 0 4px; }
     .DisputeArbitrableTx-message {

diff --git a/src/components/dispute-arbitrable-tx/dispute-arbitrable-tx.scss b/src/components/dispute-arbitrable-tx/dispute-arbitrable-tx.scss
@@ -22,11 +22,11 @@
   }
 }
 
-@media (max-width: 48em) {
+@media (max-width: 56em) {
   .DisputeArbitrableTx {
     margin: 0 4px;
     &-message {
       padding: 0 1em;
     }
   }
-}
+}
diff --git a/src/components/email-form/email-form.css b/src/components/email-form/email-form.css
@@ -39,8 +39,8 @@
 .Checkbox {
   margin: 1em 1em 2em 0; }
 
-/* 48em = 768px */
-@media (max-width: 48em) {
+/* 56em = 896px */
+@media (max-width: 56em) {
   .EmailForm {
     padding: 0 15px 10px 15px;
     margin: 0 4px; }

diff --git a/src/components/email-form/email-form.scss b/src/components/email-form/email-form.scss
@@ -53,9 +53,8 @@
   margin: 1em 1em 2em 0;
 }
 
-/* 48em = 768px */
-
-@media (max-width: 48em) {
+/* 56em = 896px */
+@media (max-width: 56em) {
   .EmailForm {
     padding: 0 15px 10px 15px;
     margin: 0 4px;

diff --git a/src/components/footer/footer.css b/src/components/footer/footer.css
@@ -6,7 +6,7 @@
   padding: 18px 25px;
   width: 100%;
   margin-top: -60px; }
-  @media (max-width: 768px) {
+  @media (max-width: 896px) {
     .footer {
       display: none; } }
   .footer a {
@@ -34,7 +34,7 @@
         width: 18px;
         position: relative;
         top: 4px; }
-      @media (max-width: 1130px) {
+      @media (max-width: 1600px) {
         .footer-right-help {
           width: 100%; } }
     .footer-right-icons {
@@ -44,6 +44,6 @@
       top: 3px; }
       .footer-right-icons a {
         padding-right: 10px; }
-      @media (max-width: 1130px) {
+      @media (max-width: 1600px) {
         .footer-right-icons {
           display: none; } }
diff --git a/src/components/footer/footer.scss b/src/components/footer/footer.scss
@@ -7,7 +7,7 @@
   width: 100%;
   margin-top: -60px;
 
-  @media (max-width: 768px) {
+  @media (max-width: 896px) {
     display: none;
   }
 
@@ -46,7 +46,7 @@
         top: 4px;
       }
 
-      @media (max-width: 1130px) {
+      @media (max-width: 1600px) {
         width: 100%;
       }
     }
@@ -60,7 +60,7 @@
         padding-right: 10px;
       }
 
-      @media (max-width: 1130px) {
+      @media (max-width: 1600px) {
         display: none;
       }
     }

diff --git a/src/components/footer/index.js b/src/components/footer/index.js
@@ -21,7 +21,7 @@ const Footer = () => (
         <div className='footer-right-help'>
           <a href="https://t.me/kleros">
             <div className="footer-right-help-text">
-              I need help
+              I need human help
             </div>
             <Question className="footer-right-help-icon"/>
           </a>

diff --git a/src/components/new-arbitrable-tx/new-arbitrable-tx.css b/src/components/new-arbitrable-tx/new-arbitrable-tx.css
@@ -212,7 +212,7 @@
 span.error {
   display: none; }
 
-@media (max-width: 48em) {
+@media (max-width: 56em) {
   .NewArbitrableTx {
     border: none;
     box-shadow: none;

diff --git a/src/components/new-arbitrable-tx/new-arbitrable-tx.scss b/src/components/new-arbitrable-tx/new-arbitrable-tx.scss
@@ -355,7 +355,7 @@ span.error {
   display: none;
 }
 
-@media (max-width: 48em) {
+@media (max-width: 56em) {
   .NewArbitrableTx {
     border: none;
     box-shadow: none;

diff --git a/src/components/new-evidence-arbitrable-tx/new-evidence-arbitrable-tx.css b/src/components/new-evidence-arbitrable-tx/new-evidence-arbitrable-tx.css
@@ -50,7 +50,7 @@
     padding-top: 2em;
     padding-right: 15%; }
 
-@media (max-width: 48em) {
+@media (max-width: 56em) {
   .NewEvidenceArbitrableTx {
     margin: 0 4px; }
     .NewEvidenceArbitrableTx-footer {

diff --git a/src/components/new-evidence-arbitrable-tx/new-evidence-arbitrable-tx.scss b/src/components/new-evidence-arbitrable-tx/new-evidence-arbitrable-tx.scss
@@ -70,7 +70,7 @@
   }
 }
 
-@media (max-width: 48em) {
+@media (max-width: 56em) {
   .NewEvidenceArbitrableTx {
     margin: 0 4px;
     &-footer {

diff --git a/src/components/new-invoice-arbitrable-tx/new-invoice-arbitrable-tx.css b/src/components/new-invoice-arbitrable-tx/new-invoice-arbitrable-tx.css
@@ -135,7 +135,7 @@
 span.error {
   display: none; }
 
-@media (max-width: 48em) {
+@media (max-width: 56em) {
   .NewInvoiceArbitrableTx {
     border: none;
     box-shadow: none;

diff --git a/src/components/new-invoice-arbitrable-tx/new-invoice-arbitrable-tx.scss b/src/components/new-invoice-arbitrable-tx/new-invoice-arbitrable-tx.scss
@@ -245,7 +245,7 @@ span.error {
   display: none;
 }
 
-@media (max-width: 48em) {
+@media (max-width: 56em) {
   .NewInvoiceArbitrableTx {
     border: none;
     box-shadow: none;

diff --git a/src/components/pay-or-reimburse-arbitrable-tx/pay-or-reimburse-arbitrable-tx.css b/src/components/pay-or-reimburse-arbitrable-tx/pay-or-reimburse-arbitrable-tx.css
@@ -32,7 +32,7 @@
   .rangeslider-horizontal .rangeslider__fill {
     background-color: #009AFF !important; }
 
-@media (max-width: 48em) {
+@media (max-width: 56em) {
   .PayOrReimburseArbitrableTx {
     width: 100%; }
     .PayOrReimburseArbitrableTx-yes {

diff --git a/src/components/pay-or-reimburse-arbitrable-tx/pay-or-reimburse-arbitrable-tx.scss b/src/components/pay-or-reimburse-arbitrable-tx/pay-or-reimburse-arbitrable-tx.scss
@@ -38,7 +38,7 @@
 }
 
 
-@media (max-width: 48em) {
+@media (max-width: 56em) {
   .PayOrReimburseArbitrableTx {
     width: 100%;
     &-yes {

diff --git a/src/components/resume-arbitrable-tx/resume-arbitrable-tx.css b/src/components/resume-arbitrable-tx/resume-arbitrable-tx.css
@@ -92,7 +92,7 @@
       color: #4a4a4a;
       font-size: 18px; }
 
-@media (max-width: 48em) {
+@media (max-width: 56em) {
   .ResumeArbitrableTx {
     border: none;
     box-shadow: none;

diff --git a/src/components/resume-arbitrable-tx/resume-arbitrable-tx.scss b/src/components/resume-arbitrable-tx/resume-arbitrable-tx.scss
@@ -169,7 +169,7 @@
   }
 }
 
-@media (max-width: 48em) {
+@media (max-width: 56em) {
   .ResumeArbitrableTx {
     border: none;
     box-shadow: none;

diff --git a/src/components/success-arbitrable-tx/success-arbitrable-tx.css b/src/components/success-arbitrable-tx/success-arbitrable-tx.css
@@ -19,6 +19,6 @@
     background: #1e075f;
     font-size: 14px; }
 
-@media (max-width: 48em) {
+@media (max-width: 56em) {
   .SuccessArbitrableTx {
     margin: 0 4px; } }
diff --git a/src/components/success-arbitrable-tx/success-arbitrable-tx.scss b/src/components/success-arbitrable-tx/success-arbitrable-tx.scss
@@ -25,8 +25,8 @@
   }
 }
 
-@media (max-width: 48em) {
+@media (max-width: 56em) {
   .SuccessArbitrableTx {
     margin: 0 4px;
   }
-}
+}