wip: add modal and handler to manual input

cardano-foundation · May 7, 2024 · a9ed264 · a9ed264
1 parent 105c864
commit a9ed264
Show file tree

Hide file tree

Showing 7 changed files with 184 additions and 144 deletions.
diff --git a/src/locales/en/en.json b/src/locales/en/en.json
@@ -1017,6 +1017,7 @@
       }
     },
     "scan": {
+      "cancel": "Cancel",
       "confirm": "Confirm",
       "pasteoobi": "Paste OOBI",
       "initiate": "Initiate multi-sig",

diff --git a/src/ui/App.scss b/src/ui/App.scss
@@ -21,7 +21,9 @@ body {
   }
 
   &.full-page-scanner {
-    #root ion-app > *:not(.qr-code-scanner-full-page) {
+    #root
+      ion-app
+      > *:not(.qr-code-scanner-full-page):not(.scanner-input-modal) {
       display: none;
     }
   }

diff --git a/src/ui/components/PageFooter/PageFooter.scss b/src/ui/components/PageFooter/PageFooter.scss
@@ -6,7 +6,7 @@
   --padding-end: 0px;
 
   ion-button {
-    margin: 0 auto 1rem;
+    margin-bottom: 1rem;
 
     &:last-of-type {
       margin-bottom: 0;
@@ -20,7 +20,7 @@
 
   @media screen and (min-width: 250px) and (max-width: 370px) {
     ion-button {
-      margin: 0 auto 0.8rem;
+      margin-bottom: 0.8rem;
     }
   }
 }
diff --git a/src/ui/components/PageFooter/PageFooter.tsx b/src/ui/components/PageFooter/PageFooter.tsx
@@ -29,106 +29,108 @@ const PageFooter = ({
     <IonToolbar
       className={`page-footer${customClass ? " " + customClass : ""}`}
     >
-      {primaryButtonText && primaryButtonAction && (
-        <IonButton
-          shape="round"
-          expand="block"
-          className="primary-button"
-          data-testid={`primary-button${pageId ? `-${pageId}` : ""}`}
-          onClick={primaryButtonAction}
-          disabled={primaryButtonDisabled}
-        >
-          {primaryButtonIcon && (
+      <div className="page-footer-content">
+        {primaryButtonText && primaryButtonAction && (
+          <IonButton
+            shape="round"
+            expand="block"
+            className="primary-button"
+            data-testid={`primary-button${pageId ? `-${pageId}` : ""}`}
+            onClick={primaryButtonAction}
+            disabled={primaryButtonDisabled}
+          >
+            {primaryButtonIcon && (
+              <IonIcon
+                slot="icon-only"
+                size="small"
+                icon={primaryButtonIcon}
+                color="primary"
+              />
+            )}
+            {primaryButtonText}
+          </IonButton>
+        )}
+        {secondaryButtonText && secondaryButtonAction && (
+          <IonButton
+            shape="round"
+            expand="block"
+            fill="outline"
+            className="secondary-button"
+            data-testid={`secondary-button${pageId ? `-${pageId}` : ""}`}
+            onClick={secondaryButtonAction}
+            disabled={secondaryButtonDisabled}
+          >
+            {secondaryButtonIcon && (
+              <IonIcon
+                slot="icon-only"
+                size="small"
+                icon={secondaryButtonIcon}
+                color="primary"
+              />
+            )}
+            {secondaryButtonText}
+          </IonButton>
+        )}
+        {tertiaryButtonText && tertiaryButtonAction && (
+          <IonButton
+            shape="round"
+            expand="block"
+            fill="clear"
+            className="tertiary-button"
+            data-testid={`tertiary-button${pageId ? `-${pageId}` : ""}`}
+            onClick={tertiaryButtonAction}
+            disabled={tertiaryButtonDisabled}
+          >
+            {tertiaryButtonIcon && (
+              <IonIcon
+                slot="icon-only"
+                size="small"
+                icon={tertiaryButtonIcon}
+                color="primary"
+              />
+            )}
+            {tertiaryButtonText}
+          </IonButton>
+        )}
+        {archiveButtonText && archiveButtonAction && (
+          <IonButton
+            shape="round"
+            expand="block"
+            fill="clear"
+            className="archive-button"
+            data-testid={`archive-button${pageId ? `-${pageId}` : ""}`}
+            onClick={archiveButtonAction}
+            disabled={archiveButtonDisabled}
+          >
             <IonIcon
               slot="icon-only"
               size="small"
-              icon={primaryButtonIcon}
+              icon={archiveOutline}
               color="primary"
             />
-          )}
-          {primaryButtonText}
-        </IonButton>
-      )}
-      {secondaryButtonText && secondaryButtonAction && (
-        <IonButton
-          shape="round"
-          expand="block"
-          fill="outline"
-          className="secondary-button"
-          data-testid={`secondary-button${pageId ? `-${pageId}` : ""}`}
-          onClick={secondaryButtonAction}
-          disabled={secondaryButtonDisabled}
-        >
-          {secondaryButtonIcon && (
+            {archiveButtonText}
+          </IonButton>
+        )}
+        {deleteButtonText && deleteButtonAction && (
+          <IonButton
+            shape="round"
+            expand="block"
+            fill="clear"
+            className="delete-button"
+            data-testid={`delete-button${pageId ? `-${pageId}` : ""}`}
+            onClick={deleteButtonAction}
+            disabled={deleteButtonDisabled}
+          >
             <IonIcon
               slot="icon-only"
               size="small"
-              icon={secondaryButtonIcon}
+              icon={trashOutline}
               color="primary"
             />
-          )}
-          {secondaryButtonText}
-        </IonButton>
-      )}
-      {tertiaryButtonText && tertiaryButtonAction && (
-        <IonButton
-          shape="round"
-          expand="block"
-          fill="clear"
-          className="tertiary-button"
-          data-testid={`tertiary-button${pageId ? `-${pageId}` : ""}`}
-          onClick={tertiaryButtonAction}
-          disabled={tertiaryButtonDisabled}
-        >
-          {tertiaryButtonIcon && (
-            <IonIcon
-              slot="icon-only"
-              size="small"
-              icon={tertiaryButtonIcon}
-              color="primary"
-            />
-          )}
-          {tertiaryButtonText}
-        </IonButton>
-      )}
-      {archiveButtonText && archiveButtonAction && (
-        <IonButton
-          shape="round"
-          expand="block"
-          fill="clear"
-          className="archive-button"
-          data-testid={`archive-button${pageId ? `-${pageId}` : ""}`}
-          onClick={archiveButtonAction}
-          disabled={archiveButtonDisabled}
-        >
-          <IonIcon
-            slot="icon-only"
-            size="small"
-            icon={archiveOutline}
-            color="primary"
-          />
-          {archiveButtonText}
-        </IonButton>
-      )}
-      {deleteButtonText && deleteButtonAction && (
-        <IonButton
-          shape="round"
-          expand="block"
-          fill="clear"
-          className="delete-button"
-          data-testid={`delete-button${pageId ? `-${pageId}` : ""}`}
-          onClick={deleteButtonAction}
-          disabled={deleteButtonDisabled}
-        >
-          <IonIcon
-            slot="icon-only"
-            size="small"
-            icon={trashOutline}
-            color="primary"
-          />
-          {deleteButtonText}
-        </IonButton>
-      )}
+            {deleteButtonText}
+          </IonButton>
+        )}
+      </div>
     </IonToolbar>
   );
 };

diff --git a/src/ui/components/PageHeader/PageHeader.tsx b/src/ui/components/PageHeader/PageHeader.tsx
@@ -17,7 +17,6 @@ import { getBackRoute } from "../../../routes/backRoute";
 import "./PageHeader.scss";
 
 const PageHeader = ({
-  translucent,
   backButton,
   beforeBack,
   onBack,