From 584d055decfb7920e5fd2ae100eb682f85bea5a6 Mon Sep 17 00:00:00 2001 From: Muktanshu Mishra Date: Mon, 3 Jun 2024 11:24:03 +0530 Subject: [PATCH] AR7881: Dashboard Branding Update (#390) * Manage Page Updated * Manage + ConfigureHome Implemented * Dashboard Design System Implemented * Dashboard Design Dev Changes * Dashboard Design Dev Changes * Dashboard Design Dev Changes * Reviewed Changes * Minor Changes * Minor Changes * QA Fix Push * App Login Updated * QA Fixes * QA Fixes * Create App Bug Fixes * QA Fixes * Notification QA Fixes * Fix login page issues * OTP and Login QA Fixes * OTP and Login QA Fixes * OTP and Login QA Fixes * Fix vue routing issue - Remove unused imports - Fix component naming - Avoid multiroot page components, so transition gets only 1 root to play with - fix get-mau * OTP and Login QA Fixes * Windows Flow Improved * Design Tweaks * Design Tweaks * Made Headings and Text Field Consistent * Social Auth Page Rebranded * Rebranded Create App Form * Fixed AR-8118 & 8119 (Create App Form and Add Chain Form Layout Rebranded --------- Co-authored-by: shrinathprabhu --- src/App.vue | 17 +- src/assets/arcana-logo.svg | 26 +- src/assets/biconomy-logo.png | Bin 3457 -> 80480 bytes src/assets/dapp-fallback.svg | 15 +- src/assets/fonts/nohemi/Nohemi-Bold.woff2 | Bin 0 -> 19316 bytes src/assets/fonts/nohemi/Nohemi-Medium.woff2 | Bin 0 -> 19944 bytes src/assets/fonts/nohemi/Nohemi-Regular.woff2 | Bin 0 -> 19636 bytes src/assets/fonts/nohemi/Nohemi-SemiBold.woff2 | Bin 0 -> 19544 bytes src/assets/iconography/arrow-right-white.svg | 3 + src/assets/iconography/arrow-right.svg | 4 +- src/assets/iconography/arrow.svg | 3 + src/assets/iconography/back.svg | 4 +- src/assets/iconography/bug.png | Bin 570 -> 784 bytes src/assets/iconography/close.svg | 5 +- src/assets/iconography/copy.svg | 2 +- src/assets/iconography/dashboard.svg | 2 +- src/assets/iconography/delete.svg | 4 +- src/assets/iconography/docs.svg | 2 +- src/assets/iconography/invoices.svg | 2 +- src/assets/iconography/manage.svg | 2 +- src/assets/iconography/notification.svg | 4 +- src/assets/iconography/passport.svg | 2 +- src/assets/iconography/pencil.svg | 4 +- src/assets/iconography/plus-circle.svg | 3 + src/assets/iconography/plus.svg | 5 +- src/assets/iconography/profile.svg | 2 +- src/assets/iconography/schedule.svg | 2 +- src/assets/iconography/settings.svg | 3 +- src/assets/iconography/upload.svg | 5 +- src/assets/iconography/user-group.svg | 3 + src/assets/landing.png | Bin 0 -> 6891 bytes src/assets/login-bg.png | Bin 224877 -> 224613 bytes src/components/AppBanner.vue | 5 +- src/components/AppFooter.vue | 24 +- src/components/AppHeader.vue | 54 +++- src/components/AppNotifications.vue | 3 +- src/components/AppNotificationsItem.vue | 17 +- src/components/AppStatusBanner.vue | 1 - src/components/FullScreenLoader.vue | 17 +- src/components/LandingDescriptor.vue | 34 --- src/components/LoginHeader.vue | 64 +++++ src/components/MainnetAppCreatedPopup.vue | 2 +- src/components/OTPInput.vue | 22 +- src/components/SearchBar.vue | 4 +- .../SwitchToMainnetConfirmation.vue | 4 +- src/components/app-configure/AppKeyspace.vue | 29 +- .../app-configure/ConfigureSidebar.vue | 93 +++---- src/components/app-configure/CreateApp.vue | 25 +- src/components/app-configure/SettingCard.vue | 4 +- .../app-configure/SwitchKeyspacePopup.vue | 2 +- .../app-configure/VerificationForm.vue | 12 +- .../app-configure/auth/AuthProviderInput.vue | 4 +- .../app-configure/auth/AuthProviderList.vue | 10 +- .../app-configure/auth/AuthSettings.vue | 4 +- .../app-configure/auth/CustomVerifier.vue | 57 ++-- .../app-configure/auth/IAMProviders.vue | 12 +- .../app-configure/auth/RedirectURI.vue | 6 +- .../app-configure/auth/SocialAuth.vue | 2 +- .../app-configure/auth/SocialAuthProvider.vue | 12 +- .../app-configure/auth/WebWallet.vue | 6 +- .../AppChainManagementForm.vue | 42 +-- .../AppChainManagementList.vue | 40 +-- .../chain-management/ChainTypeSelection.vue | 2 +- .../chain-management/DeleteChain.vue | 8 +- .../gasless/AddressSwitchConfirmation.vue | 8 +- .../gasless/AppGasTankDeposit.vue | 26 +- .../app-configure/gasless/AppGasTankForm.vue | 24 +- .../gasless/AppGaslessSmartContractForm.vue | 32 +-- .../gasless/AppGaslessTankList.vue | 22 +- .../gasless/AppGaslessWhitelist.vue | 26 +- .../app-configure/general/AppBranding.vue | 2 +- .../general/DeleteTimerPopup.vue | 19 +- src/components/icons/NotificationIcon.vue | 6 +- src/components/lib/VButton/VButton.vue | 30 +-- .../lib/VButtonSecondary/VButtonSecondary.vue | 4 +- src/components/lib/VCard/VCard.vue | 19 +- .../lib/VCardButton/VCardButton.vue | 6 +- .../VCircularProgress/VCircularProgress.vue | 3 +- src/components/lib/VDropdown/VDropdown.vue | 33 ++- .../VDropdownSecondary/VDropdownSecondary.vue | 253 ++++++++++++++++++ .../lib/VFileUpload/VFileUpload.vue | 4 +- src/components/lib/VRadio/VRadio.vue | 8 +- .../lib/VRadioSecondary/VRadioSecondary.vue | 74 +++++ src/components/lib/VSeperator/VSeperator.vue | 5 +- src/components/lib/VSwitch/VSwitch.vue | 16 +- src/components/lib/VTextField/VTextField.vue | 16 +- .../VTextFieldSecondary.vue | 17 +- src/components/lib/styles.css | 39 ++- src/pages/AppChainManagement.vue | 17 +- src/pages/AppDashboard.vue | 13 +- src/pages/AppDetails.vue | 168 +++--------- src/pages/AppDownNotification.vue | 2 +- src/pages/AppGasTanks.vue | 9 +- src/pages/AppGasless.vue | 4 +- src/pages/AppGaslessAddress.vue | 10 +- src/pages/AppInvoices.vue | 12 +- src/pages/AppLogin.vue | 189 ++++++------- src/pages/AppProfile.vue | 42 +-- src/pages/AppUsers.vue | 4 +- src/pages/ManageApps.vue | 61 +++-- src/services/gateway.service.ts | 2 +- src/utils/content.ts | 5 +- src/utils/signerUtils.ts | 20 +- tailwind.config.js | 25 +- 104 files changed, 1196 insertions(+), 824 deletions(-) create mode 100644 src/assets/fonts/nohemi/Nohemi-Bold.woff2 create mode 100644 src/assets/fonts/nohemi/Nohemi-Medium.woff2 create mode 100644 src/assets/fonts/nohemi/Nohemi-Regular.woff2 create mode 100644 src/assets/fonts/nohemi/Nohemi-SemiBold.woff2 create mode 100644 src/assets/iconography/arrow-right-white.svg create mode 100644 src/assets/iconography/arrow.svg create mode 100644 src/assets/iconography/plus-circle.svg create mode 100644 src/assets/iconography/user-group.svg create mode 100644 src/assets/landing.png delete mode 100644 src/components/LandingDescriptor.vue create mode 100644 src/components/LoginHeader.vue create mode 100644 src/components/lib/VDropdownSecondary/VDropdownSecondary.vue create mode 100644 src/components/lib/VRadioSecondary/VRadioSecondary.vue diff --git a/src/App.vue b/src/App.vue index 4068a39d..9d2ec250 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,6 +1,6 @@ diff --git a/src/components/AppStatusBanner.vue b/src/components/AppStatusBanner.vue index ad840c88..4d169dd2 100644 --- a/src/components/AppStatusBanner.vue +++ b/src/components/AppStatusBanner.vue @@ -56,7 +56,6 @@ function handleCta() { font-size: 0.625rem; font-weight: 600; color: var(--color-black); - text-transform: uppercase; cursor: pointer; background-color: var(--color-white); border: none; diff --git a/src/components/FullScreenLoader.vue b/src/components/FullScreenLoader.vue index 1af951cb..e542d7cb 100644 --- a/src/components/FullScreenLoader.vue +++ b/src/components/FullScreenLoader.vue @@ -12,18 +12,11 @@ defineProps({ diff --git a/src/components/LandingDescriptor.vue b/src/components/LandingDescriptor.vue deleted file mode 100644 index 08ec002c..00000000 --- a/src/components/LandingDescriptor.vue +++ /dev/null @@ -1,34 +0,0 @@ - - - diff --git a/src/components/LoginHeader.vue b/src/components/LoginHeader.vue new file mode 100644 index 00000000..7abf0145 --- /dev/null +++ b/src/components/LoginHeader.vue @@ -0,0 +1,64 @@ + + + + + diff --git a/src/components/MainnetAppCreatedPopup.vue b/src/components/MainnetAppCreatedPopup.vue index f4710c3f..4451af21 100644 --- a/src/components/MainnetAppCreatedPopup.vue +++ b/src/components/MainnetAppCreatedPopup.vue @@ -70,7 +70,7 @@ function handleMainnetKeySpace() { margin-bottom: 64px; font-size: 20px; line-height: 1.5; - color: var(--text-white); + color: var(--text-black); text-align: center; } diff --git a/src/components/OTPInput.vue b/src/components/OTPInput.vue index b9d6f0e8..ad825b09 100644 --- a/src/components/OTPInput.vue +++ b/src/components/OTPInput.vue @@ -1,6 +1,7 @@