feat(ui): Sharing OOBI instead of identifier (#391)

* fix: layout & oobi * fix: broken tests & cleanup * fix: margin bottom on Android
cardano-foundation · Mar 28, 2024 · 101699b · 101699b
1 parent 735d3ac
commit 101699b
Show file tree

Hide file tree

Showing 7 changed files with 199 additions and 282 deletions.
diff --git a/src/locales/en/en.json b/src/locales/en/en.json
@@ -997,9 +997,11 @@
     }
   },
   "shareidentifier": {
-    "title": "Share identifier",
+    "title": "Share connection",
+    "subtitle": "To share, either scan the QR code or select from the provided options below",
+    "done": "Done",
     "divider": "or",
-    "copykey": "Copy Identifier",
+    "copykey": "Copy Out-of-Band Invitation (OOBI)",
     "more": "More share options"
   },
   "createidentifier": {

diff --git a/src/ui/components/ShareIdentifier/ShareIdentifier.scss b/src/ui/components/ShareIdentifier/ShareIdentifier.scss
@@ -1,68 +1,101 @@
-.share-identifier {
-  h2 {
-    text-align: left;
-  }
-
-  ion-col {
-    display: flex;
-    flex-direction: column;
+.share-identifier-modal {
+  &.md {
+    .share-identifier-body {
+      margin-bottom: 0;
+    }
   }
 
-  ion-button,
-  ion-button.md {
-    width: 2.8125rem;
-    height: 2.8125rem;
-    margin: 0;
-    --background: transparent;
-    --box-shadow: none;
-    --color: var(--ion-color-secondary);
-    --background-activated: var(--ion-color-light-grey);
+  .responsive-modal-content {
+    .page-header {
+      ion-toolbar {
+        --background: transparent;
+      }
+    }
 
-    &::part(native) {
-      padding: 0;
+    p.share-identifier-subtitle {
+      text-align: center;
+      margin: 0 0 0.5rem;
     }
-  }
 
-  ion-icon {
-    width: 1.475rem;
-    height: 1.475rem;
-    margin: 0;
-  }
+    .share-identifier-body-component {
+      display: flex;
+      flex-direction: column;
+    }
 
-  #react-qrcode-logo {
-    padding: 1.5rem;
-    margin: 1rem auto;
-    background-color: white;
-    box-shadow: 0px 2px 4px rgba(54, 60, 74, 0.2);
-    border-radius: 16px;
-  }
+    ion-button,
+    ion-button.md {
+      width: 2.8125rem;
+      height: 2.8125rem;
+      margin: 0;
+      --background: transparent;
+      --box-shadow: none;
+      --color: var(--ion-color-secondary);
+      --background-activated: var(--ion-color-light-grey);
 
-  .share-identifier-divider {
-    display: flex;
-    margin-bottom: 1rem;
+      &::part(native) {
+        padding: 0;
+      }
+    }
 
-    .share-identifier-divider-line {
-      border-bottom: 1px solid var(--ion-color-dark-grey);
-      display: flex;
-      flex-grow: 2;
-      margin-bottom: 0.5rem;
+    ion-icon {
+      width: 1.475rem;
+      height: 1.475rem;
+      margin: 0;
     }
-    .share-identifier-divider-text {
-      margin-inline: 0.5rem;
+
+    #react-qrcode-logo {
+      width: 70vw !important;
+      height: 70vw !important;
+      padding: 1.5rem;
+      margin: 1rem auto;
+      background-color: white;
+      box-shadow: 0px 2px 4px rgba(54, 60, 74, 0.2);
+      border-radius: 16px;
     }
-  }
 
-  .share-identifier-option {
-    display: flex;
+    .share-identifier-divider {
+      display: flex;
+      margin-bottom: 1rem;
+
+      .share-identifier-divider-line {
+        border-bottom: 1px solid var(--ion-color-dark-grey);
+        display: flex;
+        flex-grow: 2;
+        margin-bottom: 0.5rem;
+      }
+      .share-identifier-divider-text {
+        margin-inline: 0.5rem;
+      }
+    }
 
-    > * {
+    .share-identifier-option {
       display: flex;
-      flex-direction: column;
-      justify-content: center;
+      height: 2.875rem;
+
+      > * {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+
+      &:not(:last-child) {
+        margin-bottom: 0.25rem;
+      }
     }
 
-    &:not(:last-child) {
-      margin-bottom: 0.5rem;
+    @media screen and (min-width: 250px) and (max-width: 370px) {
+      #react-qrcode-logo {
+        padding: 1.2rem;
+      }
+
+      .share-identifier-body-component,
+      .share-identifier-divider-text {
+        font-size: 0.8rem;
+      }
+
+      .share-identifier-option {
+        height: 2.3rem;
+      }
     }
   }
 }
diff --git a/src/ui/components/ShareIdentifier/ShareIdentifier.test.tsx b/src/ui/components/ShareIdentifier/ShareIdentifier.test.tsx
@@ -8,15 +8,15 @@ import { ShareIdentifierProps } from "./ShareIdentifier.types";
 import { ShareIdentifier } from "./ShareIdentifier";
 import { setToastMsg } from "../../../store/reducers/stateCache";
 import { ToastMsgType } from "../../globals/types";
+import { keriFix } from "../../__fixtures__/identifierFix";
 
 const setIsOpen = jest.fn();
 const props: ShareIdentifierProps = {
   isOpen: true,
   setIsOpen,
-  id: "test-id",
-  name: "share-test-name",
+  signifyName: keriFix[0].signifyName,
 };
-describe("Share Indentifier", () => {
+describe("Share Indentifier (OOBI)", () => {
   test("Show toast when copy identifier", async () => {
     const mockStore = configureStore();
     const dispatchMock = jest.fn();
@@ -30,8 +30,7 @@ describe("Share Indentifier", () => {
         <ShareIdentifier
           isOpen={props.isOpen}
           setIsOpen={props.setIsOpen}
-          id={props.id}
-          name={props.name}
+          signifyName={props.signifyName}
         />
       </Provider>
     );