fix(ui): fix style for edit identifier

cardano-foundation · May 9, 2024 · 1a23141 · 1a23141
1 parent e3f4454
commit 1a23141
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 107 deletions.
diff --git a/src/ui/components/IdentifierOptions/IdentifierOptions.scss b/src/ui/components/IdentifierOptions/IdentifierOptions.scss
@@ -27,3 +27,53 @@
     margin-top: 1.5rem;
   }
 }
+
+.edit-identifier {
+  &.responsive-modal .responsive-modal-content {
+    & > * {
+      margin-bottom: 0;
+    }
+
+    .theme-input-title {
+      margin-bottom: 0.625rem;
+    }
+
+    .card-theme {
+      margin-bottom: 1.5rem;
+
+      & > .identifier-theme-selector {
+        padding: 0;
+      }
+    }
+
+    .indentifier-input {
+      margin-bottom: 2.375rem;
+      &.has-error {
+        margin-bottom: 0;
+      }
+
+      .label-stacked {
+        font-size: 1rem;
+      }
+    }
+
+    .confirm-edit-button {
+      width: 100%;
+      margin-bottom: 0.25rem;
+    }
+
+    @media screen and (min-width: 250px) and (max-width: 370px) {
+      .theme-input-title {
+        font-size: 0.875rem;
+      }
+
+      .indentifier-input {
+        margin-bottom: 1.725rem;
+
+        .label-stacked {
+          font-size: 0.875rem;
+        }
+      }
+    }
+  }
+}
diff --git a/src/ui/components/IdentifierOptions/IdentifierOptions.tsx b/src/ui/components/IdentifierOptions/IdentifierOptions.tsx
@@ -1,31 +1,16 @@
-import { useEffect, useState } from "react";
-import {
-  IonButton,
-  IonButtons,
-  IonCol,
-  IonContent,
-  IonGrid,
-  IonHeader,
-  IonIcon,
-  IonModal,
-  IonRow,
-  IonTitle,
-  IonToolbar,
-} from "@ionic/react";
+import { Capacitor } from "@capacitor/core";
+import { Keyboard } from "@capacitor/keyboard";
 import { Share } from "@capacitor/share";
+import { IonButton } from "@ionic/react";
 import {
   codeSlashOutline,
   pencilOutline,
   shareOutline,
   trashOutline,
 } from "ionicons/icons";
-import { Capacitor } from "@capacitor/core";
-import { Keyboard } from "@capacitor/keyboard";
+import { useEffect, useState } from "react";
+import { Agent } from "../../../core/agent/agent";
 import { i18n } from "../../../i18n";
-import { IdentifierOptionsProps } from "./IdentifierOptions.types";
-import "./IdentifierOptions.scss";
-import { CustomInput } from "../CustomInput";
-import { ErrorMessage } from "../ErrorMessage";
 import { useAppDispatch, useAppSelector } from "../../../store/hooks";
 import {
   getIdentifiersCache,
@@ -37,9 +22,12 @@ import {
 } from "../../../store/reducers/stateCache";
 import { DISPLAY_NAME_LENGTH } from "../../globals/constants";
 import { OperationType, ToastMsgType } from "../../globals/types";
-import { Agent } from "../../../core/agent/agent";
 import { IdentifierThemeSelector } from "../CreateIdentifier/components/IdentifierThemeSelector";
+import { CustomInput } from "../CustomInput";
+import { ErrorMessage } from "../ErrorMessage";
 import { OptionItem, OptionModal } from "../OptionsModal";
+import "./IdentifierOptions.scss";
+import { IdentifierOptionsProps } from "./IdentifierOptions.types";
 import { IdentifierJsonModal } from "./components";
 
 const IdentifierOptions = ({
@@ -170,93 +158,65 @@ const IdentifierOptions = ({
         }}
         items={options}
       />
-      <IonModal
-        isOpen={editorOptionsIsOpen}
-        initialBreakpoint={0.65}
-        breakpoints={[0, 0.65]}
-        className={`page-layout ${keyboardIsOpen ? "extended-modal" : ""}`}
-        data-testid="edit-identifier-modal"
-        onDidDismiss={() => {
+      <OptionModal
+        modalIsOpen={editorOptionsIsOpen}
+        customClasses="edit-identifier"
+        onDismiss={() => {
           setEditorIsOpen(false);
           setNewDisplayName(cardData.displayName);
           setNewSelectedTheme(cardData.theme);
         }}
+        componentId="edit-identifier-modal"
+        header={{
+          closeButton: true,
+          closeButtonLabel: `${i18n.t("identifiers.details.options.cancel")}`,
+          closeButtonAction: () => {
+            handleClose();
+            dispatch(setCurrentOperation(OperationType.IDLE));
+          },
+          title: `${i18n.t("identifiers.details.options.edit")}`,
+        }}
       >
-        <div className="identifier-options modal editor">
-          <IonHeader
-            translucent={true}
-            className="ion-no-border"
-          >
-            <IonToolbar color="light">
-              <IonButtons slot="start">
-                <IonButton
-                  className="close-button-label"
-                  onClick={() => {
-                    handleClose();
-                    dispatch(setCurrentOperation(OperationType.IDLE));
-                  }}
-                  data-testid="close-button"
-                >
-                  {i18n.t("identifiers.details.options.cancel")}
-                </IonButton>
-              </IonButtons>
-              <IonTitle data-testid="edit-identifier-title">
-                <h2>{i18n.t("identifiers.details.options.edit")}</h2>
-              </IonTitle>
-            </IonToolbar>
-          </IonHeader>
-          <IonContent
-            className="identifier-options-body"
-            color="light"
-          >
-            <IonGrid className="identifier-options-inner">
-              <IonRow>
-                <IonCol size="12">
-                  <CustomInput
-                    dataTestId="edit-name-input"
-                    title={`${i18n.t(
-                      "identifiers.details.options.inner.label"
-                    )}`}
-                    hiddenInput={false}
-                    autofocus={true}
-                    onChangeInput={setNewDisplayName}
-                    value={newDisplayName}
-                  />
-                </IonCol>
-              </IonRow>
-              <IonRow className="error-message-container">
-                {newDisplayName.length > DISPLAY_NAME_LENGTH ? (
-                  <ErrorMessage
-                    message={`${i18n.t(
-                      "identifiers.details.options.inner.error"
-                    )}`}
-                    timeout={false}
-                  />
-                ) : null}
-              </IonRow>
-              <IonRow>
-                <span className="theme-input-title">{`${i18n.t(
-                  "identifiers.details.options.inner.theme"
-                )}`}</span>
-              </IonRow>
-              <IdentifierThemeSelector
-                selectedTheme={newSelectedTheme}
-                setSelectedTheme={setNewSelectedTheme}
-              />
-              <IonButton
-                shape="round"
-                expand="block"
-                className="primary-button confirm-edit-button"
-                data-testid="continue-button"
-                onClick={handleSubmit}
-                disabled={!verifyDisplayName}
-              >
-                {i18n.t("identifiers.details.options.inner.confirm")}
-              </IonButton>
-            </IonGrid>
-          </IonContent>
+        <div
+          className={`indentifier-input${
+            newDisplayName.length > DISPLAY_NAME_LENGTH ? " has-error" : ""
+          }`}
+        >
+          <CustomInput
+            dataTestId="edit-name-input"
+            title={`${i18n.t("identifiers.details.options.inner.label")}`}
+            hiddenInput={false}
+            autofocus={true}
+            onChangeInput={setNewDisplayName}
+            value={newDisplayName}
+          />
+          {newDisplayName.length > DISPLAY_NAME_LENGTH ? (
+            <ErrorMessage
+              message={`${i18n.t("identifiers.details.options.inner.error")}`}
+              timeout={false}
+            />
+          ) : null}
+        </div>
+        <span className="theme-input-title">{`${i18n.t(
+          "identifiers.details.options.inner.theme"
+        )}`}</span>
+        <div className="card-theme">
+          <IdentifierThemeSelector
+            selectedTheme={newSelectedTheme}
+            setSelectedTheme={setNewSelectedTheme}
+          />
         </div>
-      </IonModal>
+        <IonButton
+          shape="round"
+          expand="block"
+          className="primary-button confirm-edit-button"
+          data-testid="continue-button"
+          onClick={handleSubmit}
+          disabled={!verifyDisplayName}
+        >
+          {i18n.t("identifiers.details.options.inner.confirm")}
+        </IonButton>
+      </OptionModal>
       <IdentifierJsonModal
         cardData={cardData}
         isOpen={viewIsOpen}

diff --git a/src/ui/components/PageFooter/PageFooter.scss b/src/ui/components/PageFooter/PageFooter.scss
@@ -4,6 +4,8 @@
   --padding-bottom: 0px;
   --padding-start: 0px;
   --padding-end: 0px;
+  --ion-color-light: #f6f6f6;
+  --ion-color-primary: #030321;
 
   ion-button {
     margin: 0 auto 1rem;
@@ -15,6 +17,11 @@
     &.secondary-button.ion-activated {
       --ion-toolbar-color: var(--ion-color-light);
       --ion-toolbar-background: var(--ion-color-primary);
+
+      &.md {
+        --ion-toolbar-color: var(--ion-color-primary);
+        --ion-toolbar-background: var(--ion-color-light);
+      }
     }
   }
 

diff --git a/src/ui/pages/IncomingRequest/components/WalletConnectRequest/WalletConnectRequest.scss b/src/ui/pages/IncomingRequest/components/WalletConnectRequest/WalletConnectRequest.scss
@@ -53,11 +53,6 @@
       flex-direction: column;
       justify-content: space-between;
 
-      .primary-button {
-        margin: 0;
-        margin-top: 1rem;
-      }
-
       .title {
         font-size: 1rem;
         line-height: 1.115rem;

diff --git a/...ui/pages/IncomingRequest/components/WalletConnectRequest/WalletConnectRequestStageTwo.tsx b/...ui/pages/IncomingRequest/components/WalletConnectRequest/WalletConnectRequestStageTwo.tsx
@@ -72,6 +72,7 @@ const WalletConnectRequestStageTwo = ({
       // TODO: implement connect wallet logic
       dispatch(setToastMsg(ToastMsgType.CONNECT_WALLET_SUCCESS));
       handleCancel();
+      setRequestStage?.(0);
     } catch (e) {
       dispatch(setToastMsg(ToastMsgType.UNABLE_CONNECT_WALLET));
     }