feat(ui): standardise edit connection modal (#437)

* feat(ui): standardise edit connection modal * feat(ui): fix add note button not display and change behavior when open edit note modal by note button * feature(ui): update unit test --------- Co-authored-by: Vu Van Duc <vuvanduc@Vus-MacBook-Pro.local>
cardano-foundation · Apr 25, 2024 · b2329c1 · b2329c1
1 parent e63bcac
commit b2329c1
Show file tree

Hide file tree

Showing 5 changed files with 206 additions and 179 deletions.
diff --git a/src/ui/pages/ConnectionDetails/ConnectionDetails.tsx b/src/ui/pages/ConnectionDetails/ConnectionDetails.tsx
@@ -197,6 +197,10 @@ const ConnectionDetails = () => {
     }
   };
 
+  const handleOpenNoteManageModal = () => {
+    setModalIsOpen(true);
+  };
+
   return (
     <>
       <ScrollablePageLayout
@@ -321,7 +325,7 @@ const ConnectionDetails = () => {
               <ConnectionNotes
                 notes={notes}
                 pageId={pageId}
-                onOptionButtonClick={() => setOptionsIsOpen(true)}
+                onOptionButtonClick={handleOpenNoteManageModal}
               />
             </div>
           )}

diff --git a/src/ui/pages/ConnectionDetails/components/ConnectionNotes/ConnectionNotes.tsx b/src/ui/pages/ConnectionDetails/components/ConnectionNotes/ConnectionNotes.tsx
@@ -11,28 +11,28 @@ const ConnectionNotes = ({
   onOptionButtonClick,
   pageId,
 }: ConnectionNotesProps) => {
-  if (notes.length === 0) {
-    return (
-      <p className="connection-notes-empty">
-        {i18n.t("connections.details.nocurrentnotesext")}
-      </p>
-    );
-  }
-
   return (
     <>
-      {notes.map((note, index) => (
-        <CardDetailsBlock
-          key={index}
-          className="connection-details-notes"
-          title={index === 0 ? i18n.t("connections.details.notes") : undefined}
-        >
-          <h4 className="connection-details-note-title">{note.title}</h4>
-          <IonText className="connection-details-note-text">
-            {note.message}
-          </IonText>
-        </CardDetailsBlock>
-      ))}
+      {notes.length > 0 ? (
+        notes.map((note, index) => (
+          <CardDetailsBlock
+            key={index}
+            className="connection-details-notes"
+            title={
+              index === 0 ? i18n.t("connections.details.notes") : undefined
+            }
+          >
+            <h4 className="connection-details-note-title">{note.title}</h4>
+            <IonText className="connection-details-note-text">
+              {note.message}
+            </IonText>
+          </CardDetailsBlock>
+        ))
+      ) : (
+        <p className="connection-notes-empty">
+          {i18n.t("connections.details.nocurrentnotesext")}
+        </p>
+      )}
       <PageFooter
         pageId={pageId}
         primaryButtonIcon={notes.length > 0 ? "" : addOutline}

diff --git a/src/ui/pages/ConnectionDetails/components/EditConnectionsModal.scss b/src/ui/pages/ConnectionDetails/components/EditConnectionsModal.scss
@@ -3,135 +3,145 @@
   margin-top: env(safe-area-inset-top);
   --safe-area-inset-top: env(safe-area-inset-top);
 
-  .modal {
-    border-radius: 0;
-
-    .page-header {
-      ion-toolbar {
-        --background: transparent;
-      }
+  .page-header {
+    ion-toolbar {
+      --background: transparent;
     }
+  }
 
-    .close-button-label,
-    .action-button-label {
-      margin: 0;
-      font-size: 1rem;
-      font-weight: 700;
-      --opacity: 1;
+  .close-button-label,
+  .action-button-label {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 700;
+    --opacity: 1;
 
-      &::part(native) {
-        padding: 0;
-      }
+    &::part(native) {
+      padding: 0;
     }
+  }
 
-    .close-button-label {
-      color: var(--ion-color-secondary) !important;
-    }
+  .close-button-label {
+    color: var(--ion-color-secondary) !important;
+  }
 
-    .action-button-label {
-      & > p {
-        color: var(--ion-color-action-blue) !important;
-      }
+  .action-button-label {
+    & > p {
+      color: var(--ion-color-action-blue) !important;
     }
+  }
+
+  .connection-details-info-block {
+    margin-top: 1.5rem;
+    padding-bottom: 10rem;
+    color: var(--ion-color-secondary);
 
-    .connection-details-info-block {
-      margin-top: 1.5rem;
-      padding-bottom: 10rem;
+    h3 {
+      margin-bottom: 2.94rem;
+      margin-left: 1.25rem;
+      font-weight: 500;
       color: var(--ion-color-secondary);
+    }
 
-      h3 {
-        margin-bottom: 2.94rem;
-        margin-left: 1.25rem;
-        font-weight: 500;
-        color: var(--ion-color-secondary);
-      }
+    .connection-details-info-block-nonotes {
+      text-align: center;
+      margin: 0 0 1.5rem;
+      font-style: italic;
     }
+  }
 
-    .connection-details-info-block-inner {
-      position: relative;
-      margin-bottom: 2.94rem;
-      padding: 1.25rem;
-      border-radius: 1rem;
-      background-color: white;
-
-      .connection-details-delete-note {
-        position: absolute;
-        top: -1.75rem;
-        left: calc(50% - 1.5rem);
-
-        ion-button {
-          width: 3rem;
-          height: 3rem;
-          border-radius: 1.875rem;
-
-          &::part(native) {
-            padding: 0;
-          }
-
-          ion-icon {
-            width: 1.5rem;
-            height: 1.5rem;
-          }
+  .connection-details-info-block-inner {
+    position: relative;
+    margin-bottom: 2.94rem;
+    padding: 1.25rem;
+    border-radius: 1rem;
+    background-color: white;
+
+    .connection-details-delete-note {
+      position: absolute;
+      top: -1.75rem;
+      left: calc(50% - 1.5rem);
+
+      ion-button {
+        width: 3rem;
+        height: 3rem;
+        border-radius: 1.875rem;
+
+        &::part(native) {
+          padding: 0;
+        }
+
+        ion-icon {
+          width: 1.5rem;
+          height: 1.5rem;
         }
       }
     }
+  }
 
-    .connection-details-info-block-title {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      width: 100%;
+  .connection-details-info-block-title {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
 
-      span:last-child {
-        font-size: 0.875rem;
-        font-weight: 400;
-      }
+    span:last-child {
+      font-size: 0.875rem;
+      font-weight: 400;
     }
+  }
 
-    .connection-details-info-block-data {
-      ion-input,
-      ion-textarea {
-        border-radius: 0.5rem;
-        border: 1px solid var(--ion-color-dark-grey);
-        margin-top: 0.5rem;
-        min-height: 1.25rem;
-
-        input,
-        textarea,
-        .textarea-wrapper::after {
-          overflow: hidden;
-          padding: 0.875rem 1.25rem;
-        }
-
-        &.has-focus {
-          border-color: var(--ion-color-secondary);
-        }
+  .connection-details-info-block-data {
+    ion-input,
+    ion-textarea {
+      border-radius: 0.5rem;
+      border: 1px solid var(--ion-color-dark-grey);
+      margin-top: 0.5rem;
+      min-height: 1.25rem;
+
+      input,
+      textarea,
+      .textarea-wrapper::after {
+        overflow: hidden;
+        padding: 0.875rem 1.25rem !important;
       }
 
-      ion-input {
-        margin-bottom: 1.5rem;
+      &.has-focus {
+        border-color: var(--ion-color-secondary);
       }
     }
 
-    .connection-details-add-note {
-      position: fixed;
-      bottom: 2.19rem;
-      right: 1.25rem;
-      z-index: 10;
+    ion-input {
+      margin-bottom: 1.5rem;
+    }
 
-      ion-button {
-        width: 3.375rem;
-        height: 3.375rem;
-        border-radius: 1.875rem;
+    .input-highlight.sc-ion-input-md {
+      display: none;
+    }
 
-        &::part(native) {
-          padding: 0.875rem 0.84375rem 1rem 1.03125rem;
-        }
+    .textarea-highlight.sc-ion-textarea-md {
+      display: none;
+    }
+  }
 
-        ion-icon {
-          width: 1.5rem;
-          height: 1.5rem;
-        }
+  .connection-details-add-note {
+    position: fixed;
+    bottom: 2.19rem;
+    right: 1.25rem;
+    z-index: 10;
+
+    ion-button {
+      width: 3.375rem;
+      height: 3.375rem;
+      border-radius: 1.875rem;
+
+      &::part(native) {
+        padding: 0.875rem 0.84375rem 1rem 1.03125rem;
+      }
+
+      ion-icon {
+        width: 1.5rem;
+        height: 1.5rem;
       }
     }
   }

diff --git a/src/ui/pages/ConnectionDetails/components/EditConnectionsModal.test.tsx b/src/ui/pages/ConnectionDetails/components/EditConnectionsModal.test.tsx
@@ -92,7 +92,7 @@ describe("Edit Connection Modal", () => {
     expect(getByTestId("close-button")).toBeVisible();
     expect(getByTestId("add-note-button")).toBeVisible();
     expect(
-      getByText(EN_TRANSLATIONS.connections.details.nocurrentnotes)
+      getByText(EN_TRANSLATIONS.connections.details.nocurrentnotesext)
     ).toBeVisible();
   });