diff --git a/package.json b/package.json
index 81130c019..caed45b6f 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
},
"dependencies": {
"@astar-network/astar-sdk-core": "^0.2.8",
- "@astar-network/astar-ui": "^0.0.138",
+ "@astar-network/astar-ui": "^0.0.140",
"@astar-network/metamask-astar-adapter": "^0.5.4",
"@astar-network/metamask-astar-types": "^0.6.1",
"@ethersproject/bignumber": "^5.5.0",
diff --git a/src/assets/img/chain/astar-logo-white.svg b/src/assets/img/chain/astar-logo-white.svg
new file mode 100644
index 000000000..a3ed47fd4
--- /dev/null
+++ b/src/assets/img/chain/astar-logo-white.svg
@@ -0,0 +1,134 @@
+
diff --git a/src/assets/img/chain/astar-zkevm-logo-white.svg b/src/assets/img/chain/astar-zkevm-logo-white.svg
new file mode 100644
index 000000000..65b14c1b0
--- /dev/null
+++ b/src/assets/img/chain/astar-zkevm-logo-white.svg
@@ -0,0 +1,137 @@
+
diff --git a/src/components/assets/Assets.vue b/src/components/assets/Assets.vue
index d896c9ea6..34f9e2e1e 100644
--- a/src/components/assets/Assets.vue
+++ b/src/components/assets/Assets.vue
@@ -10,8 +10,8 @@
:is-loading-xcm-assets-amount="isLoadingXcmAssetsAmount"
/>
-
-
+
+
@@ -199,6 +199,7 @@ export default defineComponent({
isLoading,
bg,
isDappStakingV3,
+ isZkEvm,
};
},
});
diff --git a/src/components/assets/NativeAssetList.vue b/src/components/assets/NativeAssetList.vue
index 2fc803d56..ffd7f6b8d 100644
--- a/src/components/assets/NativeAssetList.vue
+++ b/src/components/assets/NativeAssetList.vue
@@ -264,28 +264,27 @@
diff --git a/src/components/header/modals/Ads.vue b/src/components/header/modals/Ads.vue
new file mode 100644
index 000000000..5904d69cf
--- /dev/null
+++ b/src/components/header/modals/Ads.vue
@@ -0,0 +1,32 @@
+
+
+
+
+ {{ $t('drawer.welcomeCard.title', { network: currentNetworkName }) }}
+
+
+ {{ $t('drawer.welcomeCard.text') }}
+
+
+
+
+
+
+
diff --git a/src/components/header/modals/ModalAccountUnification.vue b/src/components/header/modals/ModalAccountUnification.vue
index c649331e8..877c78ad7 100644
--- a/src/components/header/modals/ModalAccountUnification.vue
+++ b/src/components/header/modals/ModalAccountUnification.vue
@@ -316,5 +316,5 @@ export default defineComponent({
diff --git a/src/components/header/modals/ModalNetwork.vue b/src/components/header/modals/ModalNetwork.vue
deleted file mode 100644
index a7bb0d329..000000000
--- a/src/components/header/modals/ModalNetwork.vue
+++ /dev/null
@@ -1,488 +0,0 @@
-
-
-
-
-
-
-
-
- {{ $t('drawer.lightClientWarning') }}
-
-
- -
-
- {{ $t('drawer.takeLongerTimeToConnect') }}
-
-
- -
- {{ $t('drawer.takeLongerTimeToSend') }}
-
- -
-
- {{ $t('drawer.shibuyaTakes20mins') }}
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/components/header/modals/ModalNetworkWallet.vue b/src/components/header/modals/ModalNetworkWallet.vue
new file mode 100644
index 000000000..59d0733ad
--- /dev/null
+++ b/src/components/header/modals/ModalNetworkWallet.vue
@@ -0,0 +1,456 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/header/modals/NetworkWalletTab.vue b/src/components/header/modals/NetworkWalletTab.vue
new file mode 100644
index 000000000..3d2c3db9c
--- /dev/null
+++ b/src/components/header/modals/NetworkWalletTab.vue
@@ -0,0 +1,50 @@
+
+
+
+
+
+ {{ $t('drawer.network') }}
+
+
+
+
+
+ {{ $t('drawer.wallet') }}
+
+
+
+
+
+
+
+
+
diff --git a/src/components/header/modals/ModalAccount.vue b/src/components/header/modals/SelectAccount.vue
similarity index 64%
rename from src/components/header/modals/ModalAccount.vue
rename to src/components/header/modals/SelectAccount.vue
index e13918391..b3513c2ca 100644
--- a/src/components/header/modals/ModalAccount.vue
+++ b/src/components/header/modals/SelectAccount.vue
@@ -1,183 +1,166 @@
-
-
-
-
-
-
-
-
-
-
- {{ $t('wallet.showBalance', { token: nativeTokenSymbol }) }}
-
-
-
-
-
-
-
-
-
-
@@ -173,6 +168,9 @@ export default defineComponent({
}
.body--dark {
+ .box__row--wallet {
+ border: 1px solid $navy-3;
+ }
.box--wallet-option {
background: $gray-6;
box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.5);
diff --git a/src/components/header/modals/ModalConnectWallet.vue b/src/components/header/modals/SelectWallet.vue
similarity index 80%
rename from src/components/header/modals/ModalConnectWallet.vue
rename to src/components/header/modals/SelectWallet.vue
index f65941756..c52084e8c 100644
--- a/src/components/header/modals/ModalConnectWallet.vue
+++ b/src/components/header/modals/SelectWallet.vue
@@ -1,15 +1,15 @@
-
- {{ $t('wallet.evmAccount') }}
+ {{ $t('wallet.evmWallets') }}
@@ -35,13 +35,14 @@
- {{ $t('wallet.nativeAccount') }}
+ {{ $t('wallet.nativeWallets') }}
+
-
-
-
- {{ $t('wallet.multisigAccount') }}
-
-
-
-
-
-
-
-
+
-
+
diff --git a/src/components/header/modals/SelectedWallet.vue b/src/components/header/modals/SelectedWallet.vue
index 0734ea410..69c58737f 100644
--- a/src/components/header/modals/SelectedWallet.vue
+++ b/src/components/header/modals/SelectedWallet.vue
@@ -69,7 +69,7 @@ export default defineComponent({
.body--dark {
.box__row--wallet {
- border: 1px solid $gray-3;
+ border: 1px solid $navy-1;
color: $gray-1;
}
}
diff --git a/src/components/header/modals/UnifiedAccount.vue b/src/components/header/modals/UnifiedAccount.vue
index fe694fff9..303695469 100644
--- a/src/components/header/modals/UnifiedAccount.vue
+++ b/src/components/header/modals/UnifiedAccount.vue
@@ -27,6 +27,7 @@
:show-balance-value="false"
:show-balance="false"
:get-balance="getBalance"
+ :is-unified-account="true"
/>
@@ -38,13 +39,14 @@
:show-balance-value="false"
:show-balance="false"
:get-balance="getBalance"
+ :is-unified-account="true"
/>
diff --git a/src/components/header/styles/ads.scss b/src/components/header/styles/ads.scss
new file mode 100644
index 000000000..fd6e36fc5
--- /dev/null
+++ b/src/components/header/styles/ads.scss
@@ -0,0 +1,42 @@
+@import 'src/css/quasar.variables.scss';
+
+.wrapper--ads {
+ margin-top: 32px;
+ @media (min-width: $lg) {
+ margin-top: 0px;
+ }
+}
+
+.card--welcome {
+ height: 130px;
+ padding-top: 24px;
+ padding-left: 24px;
+ border-radius: 16px;
+ gap: 10px;
+ background: $navy-2;
+ display: flex;
+ flex-direction: column;
+ row-gap: 14px;
+ background-repeat: no-repeat;
+ background-size: 180px;
+ font-size: 14px;
+ font-weight: 600;
+ color: $gray-0;
+ background-position: top -10px right -32px;
+}
+
+.card--welcome-bg-astar {
+ background-image: url('assets/img/chain/astar.png');
+}
+
+.card--welcome-bg-shiden {
+ background-image: url('assets/img/chain/shiden.png');
+}
+
+.row--card-text {
+ max-width: 200px;
+ text-align: left;
+}
+
+.body--dark {
+}
diff --git a/src/components/header/styles/modal-network-wallet.scss b/src/components/header/styles/modal-network-wallet.scss
new file mode 100644
index 000000000..3cf126680
--- /dev/null
+++ b/src/components/header/styles/modal-network-wallet.scss
@@ -0,0 +1,363 @@
+@import 'src/css/quasar.variables.scss';
+@import 'src/css/utils.scss';
+
+.wrapper--modal-network-tab {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ padding-top: 24px;
+}
+
+.row--tab {
+ margin-top: -30px;
+ margin-bottom: 24px;
+}
+
+.button--action {
+ width: 100%;
+ height: 48px;
+ border: 1px solid rgba(31, 47, 95, 1);
+ font-weight: 600;
+ margin-top: 32px;
+ cursor: pointer;
+}
+
+.button--action-disabled {
+ background: linear-gradient(0deg, #081029, #081029), linear-gradient(0deg, #1f2f5f, #1f2f5f);
+ cursor: not-allowed;
+}
+
+.container--network-ads {
+ display: flex;
+ flex-direction: column;
+ @media (min-width: $lg) {
+ display: grid;
+ grid-template-columns: 440px auto;
+ column-gap: 40px;
+ }
+}
+
+.row--action-buttons {
+ display: flex;
+ justify-content: space-between;
+ column-gap: 16px;
+}
+
+.card--astar {
+ width: 212px;
+ height: 140px;
+ border-radius: 16px;
+ box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
+ border: 1px solid $gray-0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ column-gap: 8px;
+ row-gap: 8px;
+ position: relative;
+ @media (min-width: $lg) {
+ flex-direction: row;
+ }
+}
+
+.line--bottom-bg {
+ position: absolute;
+ width: 95%;
+ height: 5px;
+ border-radius: 0 0 16px 16px / 0 0 6px 6px;
+ bottom: 0;
+}
+
+.bottom--l1 {
+ background: linear-gradient(270deg, #ff94cd 26.04%, #e6007a 100%);
+}
+
+.bottom--zkevm {
+ background: linear-gradient(270deg, #703ac2 26.04%, #226dff 100%);
+}
+
+.container--other-networks {
+ border-radius: 16px;
+ box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
+ border: 1px solid $gray-0;
+ padding: 12px 16px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+}
+
+.img--astar {
+ width: 32px;
+ height: 32px;
+}
+
+.img--network-logo {
+ width: 24px;
+ height: 24px;
+}
+
+.row--astars {
+ display: flex;
+ column-gap: 8px;
+ width: 100%;
+ margin-bottom: 24px;
+ justify-content: space-around;
+ @media (min-width: $sm) {
+ column-gap: 0px;
+ }
+ @media (min-width: $lg) {
+ justify-content: space-between;
+ }
+}
+
+.row--title-other {
+ margin-bottom: 20px;
+}
+
+.row--testnets {
+ display: flex;
+ column-gap: 8px;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ width: 100%;
+ margin-bottom: 20px;
+}
+
+.row--shiden {
+ width: 100%;
+ margin-bottom: 8px;
+}
+
+.row--network {
+ background: $gray-0;
+ display: flex;
+ column-gap: 14px;
+ align-items: center;
+ padding: 10px 16px;
+ border-radius: 8px;
+ width: 100%;
+}
+
+.text--network {
+ font-weight: 600;
+ font-size: 12px;
+ color: $navy-1;
+ @media (min-width: $sm) {
+ font-size: 14px;
+ }
+}
+
+.text--endpoint {
+ font-weight: 600;
+ font-size: 12px;
+ color: $navy-1;
+}
+
+.container--advanced {
+ margin-bottom: 12px;
+ width: 100%;
+}
+
+.row--title-advanced {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+}
+
+.container--endpoints {
+ margin-top: 20px;
+}
+
+.title--endpoint {
+ margin-bottom: 10px;
+}
+
+.row--custom-endpoints {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ column-gap: 8px;
+ margin-top: 8px;
+}
+
+.box--endpoints {
+ background: $gray-0;
+ border-radius: 8px;
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+}
+
+.radio--endpoint {
+}
+
+.border--active {
+ border: 1px solid $astar-blue !important;
+}
+
+.box--light-client-warning {
+ display: none;
+ @media (min-width: $sm) {
+ display: flex;
+ flex-direction: column;
+ row-gap: 8px;
+ margin-top: 24px;
+ }
+}
+
+.ul--warnings {
+ list-style: disc;
+ text-align: left;
+ padding-left: 24px;
+}
+
+.text--download {
+ display: block;
+ text-decoration: underline;
+ color: $astar-blue;
+}
+
+.column--network-option {
+ display: flex;
+ align-items: center;
+ column-gap: 8px;
+ cursor: pointer;
+}
+
+.input--endpoint[type='radio'] {
+ width: 16px;
+ height: 16px;
+ margin-right: 4px;
+ box-shadow: 0 0 0 1.5px white;
+ &:checked {
+ border: 3px solid $gray-5;
+ background-color: white;
+ }
+}
+
+.box-input--endpoint {
+ border: 0px solid transparent;
+}
+
+.input--endpoint[type='radio'] {
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+ box-shadow: 0 0 0 2px white;
+ -webkit-appearance: none;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ &:checked {
+ border: 1px solid white;
+ background-color: $gray-4;
+ }
+}
+
+.class-radio--custom-network {
+ height: 120px;
+}
+
+.column--options {
+ display: flex;
+ flex-direction: column;
+ row-gap: 9.6px;
+}
+
+.ip-input {
+ width: 100%;
+ height: 48px;
+ text-align: center;
+ margin-top: 10px;
+ border-radius: 6px;
+ border: 1px solid $navy-1;
+ padding: 0 16px;
+ text-align: left;
+ font-weight: 400;
+ font-size: 14px;
+ color: $navy-1;
+}
+
+.ip-input:focus {
+ outline: none;
+}
+
+.icon--expand {
+ color: $astar-blue;
+ width: 24px;
+ height: 24px;
+ cursor: pointer;
+ transition: all 0.4s ease 0s;
+ border-radius: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ svg {
+ width: 18px;
+ height: 18px;
+ }
+ &:hover {
+ color: white;
+ background-color: $astar-blue;
+ }
+}
+
+.expand-container {
+ overflow: hidden;
+ width: 100%;
+}
+
+#network-expand {
+ overflow: hidden;
+ margin-top: -100%;
+ transition: all 0.3s;
+}
+
+#network-expand-close {
+ overflow: hidden;
+ margin-top: -200%;
+ transition: all 1s;
+}
+
+#network-expand.network-expanded {
+ margin-top: 0;
+}
+
+#network-expand-close.network-expanded {
+ margin-top: 0;
+}
+
+.body--dark {
+ .text--network,
+ .text--endpoint {
+ color: $gray-1;
+ }
+ .icon--expand {
+ color: $gray-1;
+ }
+ .input--endpoint[type='radio'] {
+ box-shadow: 0 0 0 1.5px white;
+ &:checked {
+ border: 3px solid $gray-5;
+ background-color: white;
+ }
+ }
+ .ip-input {
+ background: $body-bg-dark;
+ border: 1px solid $gray-3;
+ color: $gray-1;
+ }
+ .row--network {
+ background: rgba(31, 47, 95, 1);
+ }
+ .box--endpoints {
+ background: $navy-3;
+ }
+ .card--astar,
+ .container--other-networks {
+ box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.8);
+ border: 1px solid $navy-3;
+ }
+}
diff --git a/src/components/header/styles/modal-network.scss b/src/components/header/styles/modal-network.scss
deleted file mode 100644
index b8950cab6..000000000
--- a/src/components/header/styles/modal-network.scss
+++ /dev/null
@@ -1,181 +0,0 @@
-@import 'src/css/quasar.variables.scss';
-@import 'src/css/utils.scss';
-
-.wrapper--modal-network {
- display: flex;
- flex-direction: column;
- justify-content: center;
- padding-top: 24px;
- padding-bottom: 100px;
-}
-
-.list--network {
- overflow-y: auto;
-}
-
-.class-radio {
- display: flex;
- align-items: center;
- border-radius: 6px;
- min-height: rem(56);
- font-weight: 700;
- font-size: 16px;
- line-height: 18px;
- color: $navy-1;
- margin: 0 auto;
- padding: 16px;
-}
-.class-radio-off {
- cursor: pointer;
- border: 1px solid transparent;
- transition: all 0.3s ease 0s;
- border: 1px solid $navy-1;
-}
-
-.class-radio-off:hover {
- border: 1px solid $astar-blue;
-}
-
-.class-radio-on {
- border: 2px solid $astar-blue;
-}
-
-.box-input--endpoint {
- border-radius: 50%;
- border: 4px solid $gray-4;
-}
-
-.input--endpoint[type='radio'] {
- width: rem(10);
- height: rem(10);
- border-radius: 50%;
- box-shadow: 0 0 0 2px white;
- -webkit-appearance: none;
- cursor: pointer;
- display: flex;
- align-items: center;
- &:checked {
- border: 1px solid white;
- background-color: $gray-4;
- }
-}
-
-.wrapper--select-network {
- position: relative;
- flex-grow: 1;
-}
-
-.wrapper--network-detail {
- flex: 1 1 0%;
- text-align: left;
-
- .box--radio-network {
- display: flex;
- padding-left: rem(8);
- align-items: center;
- }
- .box--display-name {
- margin-left: rem(8);
- }
-}
-
-.class-radio--custom-network {
- height: 120px;
-}
-
-.ip-input {
- width: 98%;
- height: 48px;
- text-align: center;
- margin-top: 16px;
- margin-left: 8px;
- border-radius: 6px;
- border: 1px solid $navy-1;
- padding: 0 16px;
- text-align: left;
- font-weight: 400;
- font-size: 14px;
- color: $navy-1;
-}
-
-.ip-input:focus {
- outline: none;
-}
-
-.wrapper__row--button {
- display: flex;
- justify-content: center;
- margin-bottom: 16px;
-}
-
-.btn--connect {
- width: 100%;
- font-size: 20px;
- font-weight: 600;
- border-radius: 30px;
- height: 52px;
- margin-top: 24px;
-}
-
-.box--endpoints {
- padding-left: 8px;
- margin-top: 16px;
- display: flex;
- column-gap: 24px;
-}
-
-.column--options {
- display: flex;
- flex-direction: column;
- row-gap: 9.6px;
-}
-
-.column--network-option {
- display: flex;
- align-items: center;
- column-gap: 8px;
- cursor: pointer;
-}
-
-.button--network-column {
- width: 100%;
- margin-top: 16px;
-}
-
-.body--dark {
- .class-radio {
- color: #fff;
- }
-
- .class-radio-off {
- border: 1px solid $gray-3;
- }
-
- .ip--network {
- box-shadow: 0 0 0 0.5px white;
-
- &:checked {
- border: 3px solid $gray-5;
- }
- }
-
- .ip-input {
- background: $body-bg-dark;
- border: 1px solid $gray-3;
- color: $gray-1;
- }
-
- .box-input--endpoint {
- border: 0px solid transparent;
- }
-
- .input--endpoint[type='radio'] {
- width: rem(16);
- height: rem(16);
- box-shadow: 0 0 0 1.5px white;
- &:checked {
- border: 3px solid $gray-5;
- background-color: white;
- }
- }
-}
diff --git a/src/components/header/styles/network-wallet-tab.scss b/src/components/header/styles/network-wallet-tab.scss
new file mode 100644
index 000000000..a1f872dd9
--- /dev/null
+++ b/src/components/header/styles/network-wallet-tab.scss
@@ -0,0 +1,55 @@
+@import 'src/css/quasar.variables.scss';
+
+.box--tab {
+ display: flex;
+ justify-content: center;
+ height: 38px;
+ width: 240px;
+}
+
+.selected-tab {
+ color: $navy-1;
+ border-bottom: 3px solid $blue;
+ transition: all 0.3s ease 0s;
+ width: 100px;
+ font-weight: 700;
+}
+
+.unselected-tab {
+ cursor: pointer;
+ border-bottom: 1px solid transparent;
+ transition: all 0.3s ease 0s;
+ width: 100px;
+}
+
+.text--title-tab {
+ font-size: 20px;
+ font-weight: 800px;
+ color: rgba(89, 99, 129, 1);
+}
+
+.text--title-tab-selected {
+ font-size: 20px;
+ font-weight: 800px;
+}
+
+.row--tab {
+ display: flex;
+ width: 260px;
+ @media (min-width: $md) {
+ width: 300px;
+ justify-content: center;
+ justify-content: flex-start;
+ }
+}
+
+.row--mode-tab {
+ display: flex;
+ column-gap: 16px;
+}
+
+.body--dark {
+ .text--title-tab-selected {
+ color: $gray-1;
+ }
+}
diff --git a/src/components/header/styles/modal-account.scss b/src/components/header/styles/select-account.scss
similarity index 85%
rename from src/components/header/styles/modal-account.scss
rename to src/components/header/styles/select-account.scss
index dbb4cd797..d8f03b584 100644
--- a/src/components/header/styles/modal-account.scss
+++ b/src/components/header/styles/select-account.scss
@@ -1,9 +1,26 @@
@import 'src/css/quasar.variables.scss';
@import 'src/css/utils.scss';
-.wrapper--select-network {
- position: relative;
- flex-grow: 1;
+.row--back {
+ text-align: left;
+ color: $gray-4;
+ font-weight: 500;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 24px;
+ @media (min-width: $lg) {
+ margin-top: -10px;
+ }
+}
+.button--back {
+ border: 1px solid $gray-4;
+ border-radius: 100%;
+ &:hover {
+ transition: all 0.3s ease 0s;
+ color: $astar-blue;
+ border: 1px solid $astar-blue;
+ }
}
.list--account {
@@ -20,6 +37,7 @@
.text--is-ledger {
font-weight: 600;
+ font-size: 13px;
color: $gray-5;
}
@@ -60,7 +78,6 @@
display: flex;
flex-direction: column;
justify-content: center;
- padding-top: 24px;
}
.class-radio {
@@ -72,7 +89,7 @@
line-height: 18px;
color: $gray-5;
margin: 0 auto;
- padding: 24px 16px;
+ padding: 24px;
cursor: pointer;
}
@@ -95,8 +112,8 @@
}
.radio-btn {
- width: 18px !important;
- margin-right: 18px !important;
+ width: 16px !important;
+ margin-right: 16px !important;
}
.icons {
@@ -110,7 +127,7 @@
column-gap: 24px;
@media (min-width: $sm) {
display: grid;
- grid-template-columns: 220px auto;
+ grid-template-columns: 170px auto;
}
}
@@ -247,12 +264,21 @@
margin-top: 24px;
}
+.wrapper--select-signatory {
+ margin-bottom: 24px;
+ width: 100%;
+}
+
.body--dark {
.class-radio {
color: #fff;
}
.class-radio-off {
- border: 1px solid $gray-3;
+ border: 1px solid $navy-3;
+ }
+
+ .row--back {
+ color: $gray-3;
}
.text--is-ledger {
diff --git a/src/components/header/styles/modal-connect-wallet.scss b/src/components/header/styles/select-wallet.scss
similarity index 79%
rename from src/components/header/styles/modal-connect-wallet.scss
rename to src/components/header/styles/select-wallet.scss
index 6e1d7204b..a0d5c89b8 100644
--- a/src/components/header/styles/modal-connect-wallet.scss
+++ b/src/components/header/styles/select-wallet.scss
@@ -4,15 +4,12 @@
display: flex;
flex-direction: column;
justify-content: center;
- padding-top: 38px;
- padding-bottom: 20px;
row-gap: 32px;
}
.title--account-type {
- font-weight: 800;
- font-size: 16px;
- line-height: 16px;
+ font-weight: 600;
+ font-size: 14px;
color: $gray-5;
text-align: left;
margin-bottom: 16px;
@@ -22,31 +19,34 @@
}
.wrapper--wallets {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 10px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ padding: 8px;
+ @media (min-width: $sm) {
+ padding: 0px;
+ }
}
.box__row--wallet {
- width: 100%;
+ width: 78px;
+ height: 88px;
+ font-weight: 600;
+ font-size: 12px;
display: flex;
flex-direction: column;
- row-gap: 12px;
align-items: center;
- border-radius: 6px;
- font-weight: 600;
- font-size: 14px;
+ justify-content: center;
+ row-gap: 8px;
+ border-radius: 16px;
color: $gray-5;
cursor: pointer;
- padding: 16px;
- padding-left: 24px;
- margin: 0 auto;
- border: 1px solid $navy-1;
+ box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
+ border: 1px solid rgba(230, 233, 238, 1);
- @media (min-width: 500px) {
- flex-direction: row;
- font-size: 16px;
- column-gap: 8px;
+ @media (min-width: $sm) {
+ width: 104px;
+ height: 104px;
}
&:hover {
@@ -150,6 +150,7 @@
}
.box__row--wallet {
color: $gray-1;
- border: 1px solid $gray-3;
+ border: 1px solid $navy-3;
+ box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.8);
}
}
diff --git a/src/components/sidenav/SidebarDesktop.vue b/src/components/sidenav/SidebarDesktop.vue
index f379ff317..6792e9158 100644
--- a/src/components/sidenav/SidebarDesktop.vue
+++ b/src/components/sidenav/SidebarDesktop.vue
@@ -60,6 +60,7 @@