feat(ui): Standardise pages layout: Set Passcode (#254)

* fix: temporary disable core agent * fix: padding responsiveness on slides p * fix: refactor PageHeader * wip: adding comments to unused legacy style * wip: refactor PasscodeModule * wip: refactor PasscodeModule * wip: refactor buttons mapping * wip: keypad buttons responsiveness * wip: passcode circles & error message * wip: progress bar * fix: tests and remove comment * fix: unit tests * fix: rm safe area & adj media query & rm height * fix: restore PageLayout style
cardano-foundation · Nov 16, 2023 · 713586e · 713586e
1 parent 6b85a94
commit 713586e
Show file tree

Hide file tree

Showing 30 changed files with 728 additions and 598 deletions.
diff --git a/src/ui/components/ErrorMessage/ErrorMessage.scss b/src/ui/components/ErrorMessage/ErrorMessage.scss
@@ -1,12 +1,23 @@
 .error-message {
-  font-style: normal;
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 22px;
+  text-align: center;
   opacity: 0;
-  transition: opacity 0.5s ease-in-out;
+  transition: opacity 2s ease-in-out;
+
+  &.visible {
+    opacity: 1;
+  }
+
+  p {
+    color: var(--ion-color-danger);
+  }
+}
+
+.error-message-placeholder {
+  height: 2.375rem;
 }
 
-.error-message.visible {
-  opacity: 1;
+@media screen and (min-height: 300px) and (max-height: 600px) {
+  .error-message-placeholder {
+    height: 1.7rem;
+  }
 }
diff --git a/src/ui/components/ErrorMessage/ErrorMessage.tsx b/src/ui/components/ErrorMessage/ErrorMessage.tsx
@@ -1,9 +1,8 @@
 import { useEffect, useState } from "react";
-import { IonLabel } from "@ionic/react";
 import "./ErrorMessage.scss";
 import { ErrorMessageProps } from "./ErrorMessage.types";
 
-const MESSAGE_MILLISECONDS = 2000;
+const MESSAGE_MILLISECONDS = 2500;
 
 const ErrorMessage = ({ message, timeout }: ErrorMessageProps) => {
   const [visible, setVisible] = useState(true);
@@ -27,14 +26,16 @@ const ErrorMessage = ({ message, timeout }: ErrorMessageProps) => {
           data-testid="error-message"
           className={`error-message ${visible ? "visible" : ""}`}
         >
-          <IonLabel
+          <p
             className="text-fadein"
-            color="danger"
+            data-testid="error-message-text"
           >
             {message}
-          </IonLabel>
+          </p>
         </div>
-      ) : null}
+      ) : (
+        <div className="error-message-placeholder" />
+      )}
     </>
   );
 };

diff --git a/src/ui/components/IdentityCardTemplate/IdentityCardTemplate.tsx b/src/ui/components/IdentityCardTemplate/IdentityCardTemplate.tsx
@@ -1,7 +1,7 @@
 import { IdentifierType } from "../../../core/agent/agent.types";
 import { i18n } from "../../../i18n";
 import { formatShortDate } from "../../../utils";
-import { MAPPING_THEME_BACKGROUND } from "../../constants/dictionary";
+import { themeBackgroundMapping } from "../../constants/dictionary";
 import { IdentityCardTemplateProps } from "./IdentityCardTemplate.types";
 import W3CLogo from "../../../ui/assets/images/w3c-logo.svg";
 import KERILogo from "../../../ui/assets/images/keri-logo.svg";
@@ -15,7 +15,7 @@ const IdentityCardTemplate = ({
   onHandleShowCardDetails,
 }: IdentityCardTemplateProps) => {
   const divStyle = {
-    backgroundImage: `url(${MAPPING_THEME_BACKGROUND[cardData.theme]})`,
+    backgroundImage: `url(${themeBackgroundMapping[cardData.theme]})`,
     backgroundSize: "cover",
     zIndex: index,
   };

diff --git a/src/ui/components/IdentityThemeSelector/IdentityThemeSelector.tsx b/src/ui/components/IdentityThemeSelector/IdentityThemeSelector.tsx
@@ -5,7 +5,7 @@ import {
   ThemeItemProps,
 } from "./IdentityThemeSelector.types";
 import "./IdentityThemeSelector.scss";
-import { MAPPING_THEME_BACKGROUND } from "../../constants/dictionary";
+import { themeBackgroundMapping } from "../../constants/dictionary";
 
 const IdentityThemeSelector = ({
   identityType,
@@ -36,7 +36,7 @@ const IdentityThemeSelector = ({
           data-testid={`identity-theme-selector-item-${index}`}
           className="theme-input"
           style={{
-            backgroundImage: `url(${MAPPING_THEME_BACKGROUND[index]})`,
+            backgroundImage: `url(${themeBackgroundMapping[index]})`,
             backgroundSize: "cover",
           }}
         >

diff --git a/src/ui/components/PageFooter/PageFooter.scss b/src/ui/components/PageFooter/PageFooter.scss
@@ -1,7 +1,11 @@
 .page-footer {
-  padding-top: 0.5rem;
+  padding: 0.5rem 0;
 
   ion-button {
     margin: 0 auto 1rem;
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
   }
 }
diff --git a/src/ui/components/PageFooter/PageFooter.tsx b/src/ui/components/PageFooter/PageFooter.tsx
@@ -1,8 +1,10 @@
 import { IonButton, IonToolbar } from "@ionic/react";
 import { PageFooterProps } from "./PageFooter.types";
+import "./PageFooter.scss";
 
 const PageFooter = ({
   pageId,
+  dataTestId,
   primaryButtonText,
   primaryButtonAction,
   primaryButtonDisabled,
@@ -17,6 +19,7 @@ const PageFooter = ({
     <IonToolbar
       color="light"
       className="page-footer"
+      data-testid={dataTestId}
     >
       {primaryButtonText && primaryButtonAction && (
         <IonButton

diff --git a/src/ui/components/PageFooter/PageFooter.types.ts b/src/ui/components/PageFooter/PageFooter.types.ts
@@ -1,5 +1,6 @@
 interface PageFooterProps {
   pageId?: string;
+  dataTestId?: string;
   primaryButtonText?: string;
   primaryButtonAction?: () => void;
   primaryButtonDisabled?: boolean;

diff --git a/src/ui/components/PageHeader/PageHeader.scss b/src/ui/components/PageHeader/PageHeader.scss
@@ -0,0 +1,89 @@
+.page-header {
+  ion-toolbar,
+  ion-grid,
+  ion-col {
+    padding-inline: 0;
+    --padding-start: 0;
+    --padding-end: 0;
+  }
+
+  ion-toolbar {
+    ion-icon {
+      font-size: 1.85em !important;
+    }
+
+    .progress-bar-container {
+      margin-left: 1.25rem;
+
+      ion-progress-bar,
+      ion-progress-bar::part(progress) {
+        height: 0.5rem;
+        border-radius: 0.5rem;
+      }
+    }
+
+    .back-button,
+    .close-button,
+    .action-button {
+      width: 2.81rem;
+      height: 2.81rem;
+      border-radius: 1.5rem;
+      background: var(--ion-color-light-grey);
+    }
+
+    ion-button[disabled="true"] {
+      color: var(--ion-color-dark-grey);
+    }
+
+    .close-button-label,
+    .action-button-label {
+      font-size: 1rem;
+      font-weight: 700;
+
+      &.md {
+        font-size: 0.8rem;
+      }
+    }
+
+    .close-button-label {
+      --padding-start: 0px;
+    }
+
+    .action-button-label {
+      --padding-end: 0px;
+      &[disabled="false"] {
+        color: var(--ion-color-blue);
+      }
+    }
+  }
+
+  ion-title {
+    padding: 0;
+    text-align: center;
+  }
+
+  @media screen and (min-height: 300px) and (max-height: 600px) {
+    ion-toolbar {
+      .back-button,
+      .close-button,
+      .action-button {
+        width: 2rem;
+        height: 2rem;
+
+        &::part(native) {
+          padding: 0.35rem;
+        }
+      }
+
+      .progress-bar-container {
+        margin-left: 0.75rem;
+
+        ion-progress-bar,
+        ion-progress-bar::part(progress) {
+          height: 0.35rem;
+          border-radius: 0.35rem;
+        }
+      }
+    }
+  }
+}