Merge pull request #7277 from PasinduYeshan/multi-emails-patch1

Improve multi emails and mobiles field UI
wso2 · Jan 10, 2025 · cd583c4 · cd583c4
2 parents c277696 + 2ac5589
commit cd583c4
Show file tree

Hide file tree

Showing 7 changed files with 396 additions and 528 deletions.
diff --git a/.changeset/long-rules-joke.md b/.changeset/long-rules-joke.md
@@ -0,0 +1,7 @@
+---
+"@wso2is/admin.users.v1": patch
+"@wso2is/myaccount": patch
+"@wso2is/console": patch
+---
+
+Improve multi email and mobile UI
diff --git a/apps/console/src/public/deployment.config.json b/apps/console/src/public/deployment.config.json
@@ -1282,7 +1282,7 @@
         "isHeaderAvatarLabelAllowed": false,
         "isLeftNavigationCategorized": true,
         "isMarketingConsentBannerEnabled": false,
-        "isMultipleEmailsAndMobileNumbersEnabled": false,
+        "isMultipleEmailsAndMobileNumbersEnabled": true,
         "isPasswordInputValidationEnabled": true,
         "isRequestPathAuthenticationEnabled": false,
         "isSAASDeployment": false,

diff --git a/apps/myaccount/src/components/profile/profile.scss b/apps/myaccount/src/components/profile/profile.scss
@@ -21,22 +21,18 @@
         width: 100%;
     }
 
-    .accordion-details {
-        border-radius: 8px;
-        padding: 2px;
-
-        .multi-value-table {
-            .multi-value-table-data-row {
-                &:last-child td, &:last-child th {
-                    border: none;
-                }
+    .multi-value-table {
+        .multi-value-table-data-row {
+            &:last-child td, &:last-child th {
+                border: none;
             }
 
             .table-c1 {
                 display: flex;
                 flex-wrap: nowrap;
                 align-items: center;
-
+                padding: 0.2em 0;
+
                 .c1-value{
                     margin-bottom: 0;
                     flex-shrink: 0;
@@ -59,6 +55,11 @@
                 align-items: center;
                 justify-content: flex-end;
                 gap: 4px;
+                padding: 0.2em 0;
+
+                .text-btn {
+                    padding: 0px;
+                }
             }
         }
     }

diff --git a/apps/myaccount/src/components/profile/profile.tsx b/apps/myaccount/src/components/profile/profile.tsx
diff --git a/apps/myaccount/src/public/deployment.config.json b/apps/myaccount/src/public/deployment.config.json
@@ -116,7 +116,7 @@
         },
         "isCookieConsentBannerEnabled": true,
         "isHeaderAvatarLabelAllowed": true,
-        "isMultipleEmailsAndMobileNumbersEnabled": false,
+        "isMultipleEmailsAndMobileNumbersEnabled": true,
         "isPasswordInputValidationEnabled": true,
         "isProfileUsernameReadonly": true,
         "privacyPolicyConfigs": {},

diff --git a/features/admin.users.v1/components/user-profile.scss b/features/admin.users.v1/components/user-profile.scss
@@ -16,75 +16,48 @@
  * under the License.
  */
 
-.multi-valued-accordion {
-    .accordion-summary {
-        display: flex;
-        padding: 0px 12px 0px 8px;
-        flex-wrap: nowrap;
-        align-items: center; 
-        gap: 4px;
-        border-radius: 8px;
-
-        .accordion-label {
-            margin: 0 0 0 8px;
-            flex-shrink: 0;
-            padding-right: 4px;
-            min-width: 250px; 
-
-            &.mobile-label {
-                min-width: 150px; 
-            }
+ .multi-value-table {
+    .multi-value-table-data-row {
+        &:last-child td, &:last-child th {
+            border: none;
         }
 
-        .verified-icon, .primary-icon {
+        .table-c1 {
+            display: flex;
+            flex-wrap: nowrap;
             align-items: center;
-            padding: 0 4px;
-        }
-    }
-
-    .accordion-details {
-        border-radius: 8px;
-        .multi-value-table {
-            .multi-value-table-data-row {
-                &:last-child td, &:last-child th {
-                    border: none;
+            font-size: 1rem;
+            padding: 0.2em 0;
+
+            .c1-value{
+                margin-bottom: 0;
+                flex-shrink: 0;
+                padding-right: 12px;
+                min-width: 250px; 
+
+                &.mobile-label {
+                    min-width: 150px; 
                 }
             }
-
-            .table-c1 {
-                display: flex;
-                flex-wrap: nowrap;
+
+            .verified-icon, .primary-icon {
                 align-items: center;
-                font-size: 1rem;
-
-                .c1-value{
-                    margin-bottom: 0;
-                    flex-shrink: 0;
-                    padding-right: 12px;
-                    min-width: 250px; 
-
-                    &.mobile-label {
-                        min-width: 150px; 
-                    }
-                }
-
-                .verified-icon, .primary-icon {
-                    align-items: center;
-                    padding: 0 4px;
-                }
+                padding: 0 4px;
             }
+        }
+
+        .table-c2 {
+            display: flex;
+            flex-wrap: nowrap;
+            align-items: center;
+            justify-content: flex-end;
+            gap: 4px;
+            padding: 0.2em 0;
 
-            .table-c2 {
-                display: flex;
-                flex-wrap: nowrap;
-                align-items: center;
-                justify-content: flex-end;
-                gap: 4px;
+            .text-btn {
+                padding: 0px;
+                white-space: nowrap;
             }
         }
     }
-
-    .MuiAccordionDetails-root {
-        padding: 0px;
-    }
 }