Merge pull request #583 from Concordium/ui-update/id-proof

UI update/id proof
Concordium · Dec 17, 2024 · 5ebf60a · 5ebf60a
2 parents a19fdb1 + f137c58
commit 5ebf60a
Show file tree

Hide file tree

Showing 19 changed files with 338 additions and 448 deletions.
diff --git a/packages/browser-wallet/src/popup/popupX/constants/routes.ts b/packages/browser-wallet/src/popup/popupX/constants/routes.ts
@@ -316,9 +316,15 @@ export const relativeRoutes = {
         addWeb3IdCredential: {
             path: 'add-web3id-credential',
         },
+        idProof: {
+            path: 'id-proof',
+        },
         web3IdProof: {
             path: 'web3Id-proof',
         },
+        ageProof: {
+            path: 'age-proof',
+        },
     },
 };
 

diff --git a/...llet/src/popup/popupX/pages/prompts/IdProofRequest/DisplayStatement/DisplayStatement.scss b/...llet/src/popup/popupX/pages/prompts/IdProofRequest/DisplayStatement/DisplayStatement.scss
@@ -1,76 +1,64 @@
-$display-statement-color-success: $color-cta;
-$display-statement-color-invalid: $color-grey;
-
-.display-statement {
-    display: block;
-    border: 1px solid $display-statement-color-success;
-    border-radius: rem(5px);
-    background-color: $color-bg;
-
-    &--invalid {
-        border-color: $display-statement-color-invalid;
-    }
+.display-statement-x {
+    border: rem(1px) solid $color-input-border;
+    padding: rem(8px) rem(16px);
+    margin-bottom: rem(8px);
 
     &__header {
-        padding: rem(5px);
-        border-radius: rem(4px) rem(4px) 0 0;
-        background-color: $display-statement-color-success;
-        color: $color-off-white;
-        display: flex;
+        margin-left: rem(-16px);
+        margin-right: rem(-16px);
+        padding-left: rem(16px);
+        padding-right: rem(16px);
         justify-content: space-between;
-        font-size: rem(8px);
+        align-items: center;
 
-        .display-statement--invalid & {
-            background-color: $display-statement-color-invalid;
+        .capture__additional_small {
+            color: $color-white;
+        }
+
+        button {
+            background: unset;
+            border: unset;
+            padding: 0;
+            display: flex;
         }
     }
 
-    &__header-icon {
-        height: rem(15px);
-        flex: 0 0 auto;
+    &__row {
+        display: block !important;
     }
 
     &__line {
         display: flex;
-        width: 100%;
-        align-items: flex-end;
         justify-content: space-between;
-    }
+        color: $color-red-attention;
 
-    &__line-value {
-        display: flex;
-        align-items: center;
-        text-align: right;
-    }
-
-    &__line-check,
-    &__line-cross,
-    &__requirements-icon {
-        height: rem(7px);
-        margin-left: rem(5px);
-    }
+        &--valid {
+            color: $color-green-success;
+        }
 
-    &__line-cross path {
-        fill: $color-error;
+        *:last-child {
+            text-align: right;
+        }
     }
 
-    &__line-check path {
-        .display-statement--invalid & {
-            fill: $color-grey;
+    .external-link {
+        &:hover {
+            color: inherit !important;
         }
     }
+}
 
-    &__description {
-        font-size: rem(8px);
-        padding: 0 rem(5px) rem(5px);
-        white-space: break-spaces;
-    }
+.display-statements-tooltip {
+    background-color: $color-white;
+    border-radius: rem(8px);
+    width: calc(100% - 20px);
+    padding: rem(12px);
 
-    &__tooltip-icon {
-        height: rem(10px);
+    .text__main_medium, .capture__main_small {
+        color: $color-black;
     }
 
-    &__requirements-icon path {
-        fill: $color-off-white;
+    &__trigger {
+        cursor: pointer;
     }
 }
diff --git a/...c/popup/popupX/pages/prompts/IdProofRequest/DisplayStatement/DisplayStatement.stories.tsx b/...c/popup/popupX/pages/prompts/IdProofRequest/DisplayStatement/DisplayStatement.stories.tsx
@@ -3,13 +3,6 @@ import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { DisplayStatementView } from './DisplayStatement';
 
-export default {
-    title: 'Pages/IdProofRequest/DisplayStatement',
-    component: DisplayStatementView,
-} as Meta<typeof DisplayStatementView>;
-
-type Story = StoryObj<typeof DisplayStatementView>;
-
 const render: Story['render'] = (args) => {
     return (
         <div style={{ width: 330 }}>
@@ -18,6 +11,22 @@ const render: Story['render'] = (args) => {
     );
 };
 
+export default {
+    title: 'X/Pages/IdProofRequest/DisplayStatement',
+    component: DisplayStatementView,
+    render,
+    beforeEach: () => {
+        const body = document.getElementsByTagName('body').item(0);
+        body?.classList.add('popup-x');
+
+        return () => {
+            body?.classList.remove('popup-x');
+        };
+    },
+} as Meta<typeof DisplayStatementView>;
+
+type Story = StoryObj<typeof DisplayStatementView>;
+
 export const ValidRevealAttributes: Story = {
     args: {
         dappName: 'Test dApp',
@@ -28,7 +37,6 @@ export const ValidRevealAttributes: Story = {
             { attribute: 'Last name', value: 'Johnson', isRequirementMet: true },
         ],
     },
-    render,
 };
 export const InvalidRevealAttributes: Story = {
     args: {
@@ -41,7 +49,6 @@ export const InvalidRevealAttributes: Story = {
             { attribute: 'ID document type', value: 'Passport', isRequirementMet: false },
         ],
     },
-    render,
 };
 export const ValidSecretProof: Story = {
     args: {
@@ -62,5 +69,4 @@ export const InvalidSecretProof: Story = {
             'Your identity document issuer is one of the following:\nAndorra, United Arab Emirates, Afghanistan, Antigua and Barbuda, Anguilla, Albania, Benin, Brazil, Bahamas, Bhutan, Belize, Canada, Chile, Spain, Finland, Fiji, Ghana, Hong Kong, Indonesia, Korea, Mali, Malta, Malawi, Mexico, Mozambique, Namibia, Nigeria, Nicaragua, Panama, Peru',
         lines: [{ attribute: 'Document issuer', value: '1 of 30 issuers', isRequirementMet: false }],
     },
-    render,
 };