wip: add buttons - refactor and unify scan and style

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

Hide file tree

Showing 5 changed files with 85 additions and 71 deletions.
diff --git a/src/ui/components/Scanner/Scanner.scss b/src/ui/components/Scanner/Scanner.scss
@@ -1,27 +1,10 @@
-.qr-code-scanner-full-page {
-  ion-header ion-toolbar {
-    margin-top: 0.625rem;
-
-    .back-button {
-      width: 2.5rem;
-      height: 2.5rem;
-      border-radius: 1.5rem;
-      background: var(--ion-color-light-grey);
-      margin-left: 1.25rem;
-    }
-
-    ion-icon {
-      font-size: 1.85em !important;
-    }
-  }
-}
-
-.qr-code-scanner {
+ion-grid.qr-code-scanner {
   --scale-scan: 1;
   height: calc(var(--scale-h) * 100);
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: space-around;
+  padding-inline: 1.25rem;
 
   ion-row {
     display: flex;
@@ -44,7 +27,13 @@
     }
   }
 
+  .page-footer .secondary-button {
+    opacity: 0.5;
+    backdrop-filter: blur(0.33rem);
+  }
+
   @media screen and (min-width: 250px) and (max-width: 370px) {
     --scale-scan: 0.7;
+    padding-inline: 0.9rem;
   }
 }
diff --git a/src/ui/components/Scanner/Scanner.tsx b/src/ui/components/Scanner/Scanner.tsx
@@ -22,9 +22,11 @@ import { KeriConnectionType } from "../../../core/agent/agent.types";
 import { CreateIdentifier } from "../CreateIdentifier";
 import { setMultiSigGroupCache } from "../../../store/reducers/identifiersCache";
 import { MultiSigGroup } from "../../../store/reducers/identifiersCache/identifiersCache.types";
+import { PageFooter } from "../PageFooter";
 
 const Scanner = forwardRef(
   ({ setIsValueCaptured, handleReset }: ScannerProps, ref) => {
+    const componentId = "scanner";
     const dispatch = useAppDispatch();
     const currentOperation = useAppSelector(getCurrentOperation);
     const currentToastMsg = useAppSelector(getToastMsg);
@@ -140,6 +142,55 @@ const Scanner = forwardRef(
       }
     }, [currentOperation, currentRoute]);
 
+    const handlePrimaryButtonAction = () => {
+      // TODO: Add content to initiate Multi Sig
+      console.log("click primary");
+    };
+
+    const handleSecondaryButtonAction = () => {
+      // TODO: Add content to open modal to paste OOBI / other content
+      console.log("click secondary");
+    };
+
+    const RenderPageFooter = () => {
+      switch (currentOperation) {
+        case OperationType.IDLE:
+          return (
+            <PageFooter
+              pageId={componentId}
+              secondaryButtonText={`${i18n.t(
+                "createidentifier.scan.pastecontents"
+              )}`}
+              secondaryButtonAction={handleSecondaryButtonAction}
+            />
+          );
+        case OperationType.MULTI_SIG_INITIATOR_SCAN:
+          return (
+            <PageFooter
+              pageId={componentId}
+              primaryButtonText={`${i18n.t("createidentifier.scan.initiate")}`}
+              primaryButtonAction={handlePrimaryButtonAction}
+              secondaryButtonText={`${i18n.t(
+                "createidentifier.scan.pasteoobi"
+              )}`}
+              secondaryButtonAction={handleSecondaryButtonAction}
+            />
+          );
+        case OperationType.MULTI_SIG_RECEIVER_SCAN:
+          return (
+            <PageFooter
+              pageId={componentId}
+              secondaryButtonText={`${i18n.t(
+                "createidentifier.scan.pasteoobi"
+              )}`}
+              secondaryButtonAction={handleSecondaryButtonAction}
+            />
+          );
+        default:
+          return null;
+      }
+    };
+
     return (
       <>
         <IonGrid
@@ -160,6 +211,7 @@ const Scanner = forwardRef(
               className="qr-code-scanner-icon"
             />
           </IonRow>
+          <RenderPageFooter />
         </IonGrid>
         <CreateIdentifier
           modalIsOpen={createIdentifierModalIsOpen}

diff --git a/src/ui/pages/FullPageScanner/FullPageScanner.scss b/src/ui/pages/FullPageScanner/FullPageScanner.scss
@@ -1,10 +1,20 @@
 .qr-code-scanner-full-page {
-  &.responsive-page-layout {
-    background: transparent;
+  background: transparent;
 
-    ion-toolbar {
-      margin-top: 0;
-      --background: transparent;
+  ion-header ion-toolbar {
+    margin-top: 0.625rem;
+    --background: transparent;
+
+    .back-button {
+      width: 2.5rem;
+      height: 2.5rem;
+      border-radius: 1.5rem;
+      background: var(--ion-color-light-grey);
+      margin-left: 1.25rem;
+    }
+
+    ion-icon {
+      font-size: 1.85em !important;
     }
   }
 
@@ -18,7 +28,6 @@
     }
 
     .qr-code-scanner-icon {
-      padding-bottom: 4rem;
       margin: 0;
     }
 

diff --git a/src/ui/pages/FullPageScanner/FullPageScanner.tsx b/src/ui/pages/FullPageScanner/FullPageScanner.tsx
@@ -1,19 +1,8 @@
 import { arrowBackOutline } from "ionicons/icons";
-import {
-  IonPage,
-  IonToolbar,
-  IonButtons,
-  IonButton,
-  IonIcon,
-  IonHeader,
-} from "@ionic/react";
 import { useEffect, useRef } from "react";
 import { Scanner } from "../../components/Scanner";
-import {
-  getCurrentOperation,
-  setCurrentOperation,
-} from "../../../store/reducers/stateCache";
-import { useAppDispatch, useAppSelector } from "../../../store/hooks";
+import { setCurrentOperation } from "../../../store/reducers/stateCache";
+import { useAppDispatch } from "../../../store/hooks";
 import {
   FullPageScannerProps,
   ScannerRefComponent,
@@ -22,13 +11,10 @@ import { OperationType } from "../../globals/types";
 import "./FullPageScanner.scss";
 import { ResponsivePageLayout } from "../../components/layout/ResponsivePageLayout";
 import { PageHeader } from "../../components/PageHeader";
-import { PageFooter } from "../../components/PageFooter";
-import { i18n } from "../../../i18n";
 
 const FullPageScanner = ({ showScan, setShowScan }: FullPageScannerProps) => {
   const pageId = "qr-code-scanner-full-page";
   const dispatch = useAppDispatch();
-  const currentOperation = useAppSelector(getCurrentOperation);
   const scannerRef = useRef<ScannerRefComponent>(null);
 
   useEffect(() => {
@@ -45,14 +31,6 @@ const FullPageScanner = ({ showScan, setShowScan }: FullPageScannerProps) => {
       ?.classList.add("hide");
   };
 
-  const handlePrimaryButtonAction = () => {
-    //
-  };
-
-  const handleSecondaryButtonAction = () => {
-    //
-  };
-
   return (
     <ResponsivePageLayout
       pageId={pageId}
@@ -69,24 +47,6 @@ const FullPageScanner = ({ showScan, setShowScan }: FullPageScannerProps) => {
         ref={scannerRef}
         handleReset={handleReset}
       />
-      {currentOperation === OperationType.MULTI_SIG_INITIATOR_SCAN && (
-        <PageFooter
-          pageId={pageId}
-          primaryButtonText={`${i18n.t("createidentifier.scan.initiate")}`}
-          primaryButtonAction={() => handlePrimaryButtonAction()}
-          secondaryButtonText={`${i18n.t("createidentifier.scan.pasteoobi")}`}
-          secondaryButtonAction={() => handleSecondaryButtonAction()}
-        />
-      )}
-      {currentOperation === OperationType.MULTI_SIG_RECEIVER_SCAN && (
-        <PageFooter
-          pageId={pageId}
-          secondaryButtonText={`${i18n.t(
-            "createidentifier.scan.pastecontents"
-          )}`}
-          secondaryButtonAction={() => handleSecondaryButtonAction()}
-        />
-      )}
     </ResponsivePageLayout>
   );
 };

diff --git a/src/ui/pages/Scan/Scan.scss b/src/ui/pages/Scan/Scan.scss
@@ -1,8 +1,12 @@
 .scan-tab {
   padding: 0;
 
-  .qr-code-scanner-icon {
-    padding-bottom: 6.7rem;
-    margin: 0;
+  ion-grid {
+    padding-top: 10vh;
+    padding-bottom: 10vh;
+
+    .qr-code-scanner-icon {
+      margin: 0;
+    }
   }
 }