From af0d4f6b719efa06253ac3a9f9c4b9cf230681c9 Mon Sep 17 00:00:00 2001 From: gabaldon Date: Wed, 17 Jan 2024 18:45:51 +0100 Subject: [PATCH 01/34] fix: update internationalization --- src/App.vue | 131 +++++++++++--------------- src/components/AddressInformation.vue | 8 +- src/components/Addresses.vue | 2 +- src/components/LogoutModal.vue | 2 +- src/components/SettingsLanguage.vue | 62 +++++------- src/components/TransactionList.vue | 2 +- src/components/card/TemplateCard.vue | 2 +- src/main.ts | 3 +- src/plugins/i18n.js | 2 + src/radExamples/bitcoinPrice.js | 86 ++++++++--------- src/radExamples/ethPrice.js | 106 ++++++++++----------- src/store/wallet.js | 65 ++++++------- src/types.ts | 16 ++++ 13 files changed, 235 insertions(+), 252 deletions(-) create mode 100644 src/types.ts diff --git a/src/App.vue b/src/App.vue index 3c464836a..ff8dae518 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,5 +1,8 @@ - diff --git a/src/store/uiInteractions.js b/src/store/uiInteractions.js index 5663ef224..862cf9e94 100644 --- a/src/store/uiInteractions.js +++ b/src/store/uiInteractions.js @@ -46,6 +46,9 @@ export default { }, receiveTransactionClicked(state) { state.receiveTransactionClicked = true + console.log( + `receive transaction clicked ${state.receiveTransactionClicked}`, + ) }, clearTransactionClicked(state) { state.receiveTransactionClicked = false diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss index 4b1e09bfd..4bf1993e4 100644 --- a/src/styles/_colors.scss +++ b/src/styles/_colors.scss @@ -14,6 +14,7 @@ $alt-grey-1: #c6c5d3; $alt-grey-2: #aaa8bd; $alt-grey-3: #716d92; $alt-grey-4: #5a5775; +$alt-grey-4-alt: rgb(80, 77, 106); $alt-grey-5: #444258; $alt-grey-6: #2d2c3a; $black: #1a1a1a; diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss index f5d1426f7..77d182ca0 100644 --- a/src/styles/element-variables.scss +++ b/src/styles/element-variables.scss @@ -4,6 +4,7 @@ $--color-success: #52c41a; $--color-primary: $purple-4; $--color-danger: #f08484; $--color-warning: $yellow-3; +$--el-input-border-color: red; .ep-button { &.dark { @@ -32,26 +33,9 @@ $--color-warning: $yellow-3; } } -.el-button--primary { - &.dark { - background-color: var(--button-dark-background); - border-color: var(--button-dark-border); - color: var(--button-dark-text); - - &:hover, - &:focus { - border-color: var(--button-dark-border-hover); - color: var(--button-dark-text-hover); - background-color: $alpha-purple; - } - - &:active { - background-color: var(--button-dark-background-active); - border-color: var(--button-dark-border-active); - color: var(--button-dark-text-active); - outline: none; - } - } +.el-button { + padding: 12px; + height: max-content; } /* icon font path, required */ @@ -61,6 +45,7 @@ $--color-warning: $yellow-3; .el-input { .el-input__wrapper { + padding: 4px 16px; background-color: var(--input-background); } @@ -75,7 +60,7 @@ $--color-warning: $yellow-3; } &.big .el-input__inner { - height: 60px; + height: 54px; } &.key .el-input__inner { @@ -83,6 +68,20 @@ $--color-warning: $yellow-3; padding-left: 24px; } } +.el-textarea { + .el-textarea__inner { + background-color: var(--input-background); + } +} + +.el-form-item { + margin-bottom: 0px; + .el-form-item { + .el-form-item__content { + width: 100%; + } + } +} .el-dialog__wrapper { .el-dialog { @@ -106,11 +105,48 @@ $--color-warning: $yellow-3; } .el-button { + background-color: var(--button-default-background); + border-color: var(--button-default-border); + color: var(--button-default-text); + + &:hover, + &:focus { + border-color: var(--button-default-border-hover); + color: var(--button-default-text-hover); + background-color: var(--button-default-background-hover); + } + + &:active { + background-color: var(--button-default-background-active); + border-color: var(--button-default-border-active); + color: var(--button-default-text-active); + outline: none; + } &.big { height: 60px; width: 100%; } + &.dark { + background-color: var(--button-dark-background); + border-color: var(--button-dark-border); + color: var(--button-dark-text); + + &:hover, + &:focus { + background-color: var(--button-dark-background-hover); + border-color: var(--button-dark-border-hover); + color: var(--button-dark-text-hover); + } + + &:active { + background: var(--button-dark-background-active); + border-color: var(--button-dark-border-active); + color: var(--button-default-dark-text-active); + outline: none; + } + } + &.el-button--primary { font-size: 15px; font-weight: bold; @@ -120,6 +156,13 @@ $--color-warning: $yellow-3; font-size: 15px; font-weight: bold; + &:hover, + &:focus { + background-color: var(--button-primary-background-hover); + border-color: var(--button-primary-border-hover); + color: var(--button-primary-text-hover); + } + &.is-disabled { background-color: var(--button-primary-background-disabled); border-color: var(--button-primary-border-disabled); @@ -136,6 +179,43 @@ $--color-warning: $yellow-3; &:active { outline: none; } + &.dark { + background-color: var(--button-primary-dark-background); + border-color: var(--button-primary-dark-border); + color: var(--button-primary-dark-text); + + &:hover, + &:focus { + opacity: 0.8; + } + + &:active { + background-color: var(--button-primary-dark-background-active); + border-color: var(--button-primary-dark-border-active); + color: var(--button-primary-dark-text-active); + outline: none; + } + } + } + + &.el-button--secondary { + background-color: var(--button-default-background); + border-color: var(--button-default-border); + color: var(--button-default-text); + + &:hover, + &:focus { + border-color: var(--button-default-border-hover); + color: var(--button-default-text-hover); + background-color: var(--button-default-background-hover); + } + + &:active { + background-color: var(--button-default-background-active); + border-color: var(--button-default-border-active); + color: var(--button-default-text-active); + outline: none; + } } &.el-button--danger { @@ -193,6 +273,30 @@ $--color-warning: $yellow-3; .el-switch__label { font-weight: 400; } + .el-switch__core { + background: var(--switch-background); + border: 1px solid var(--switch-border); + } + &.dark { + .el-switch__core { + background: var(--switch-background); + border: 1px solid var(--switch-border); + } + .el-switch__label { + color: $white; + font-weight: 700; + } + } + &.is-checked { + .el-switch__core { + background: var(--switch-background-active); + border: 1px solid var(--switch-background-active); + } + } +} + +.el-link { + --el-link-text-color: var(--link-text-color); } .el-date-editor.el-input, @@ -224,6 +328,10 @@ $--color-warning: $yellow-3; .popper__arrow { display: none; } + &.is-light { + background-color: var(--dropdown-background); + color: var(--text-high-emphasis); + } } .el-time-panel__content::after, @@ -239,6 +347,9 @@ $--color-warning: $yellow-3; } .el-pagination { + display: flex; + justify-content: center; + button:disabled { background-color: inherit; } @@ -273,13 +384,11 @@ $--color-warning: $yellow-3; .el-dropdown-menu { display: block; font-weight: bold; + background-color: var(--dropdown-background); + border: none; padding: 8px 0; - .el-dropdown-menu__item:not(.is-disabled):hover { - display: block; - } - - &.marketplace .el-dropdown-menu__item:not(.is-disabled):hover { - display: block; + .dropdown__icon { + display: none; } } diff --git a/src/styles/element/index.scss b/src/styles/element/index.scss index cb5ce3da3..00623f00b 100644 --- a/src/styles/element/index.scss +++ b/src/styles/element/index.scss @@ -1,3 +1,5 @@ +@use 'sass:map'; + $--colors: ( 'primary': ( 'base': #9b51e0, @@ -97,11 +99,34 @@ $--mask-color: ( // You should use them in scss, because we calculate it by sass. // comment next lines to use default color +$key: ( + 'bg-color': red, + 'shadow': none, + 'empty-color': pink, + 'max-height': 274px, + 'padding': 6px 0, + 'empty-padding': 10px 0, + 'header-padding': 10px, + 'footer-padding': 10px, + 'border': 1px solid red, +); +// $select-dropdown: () !default; +// $dropdown: () !default; @forward 'element-plus/theme-chalk/src/common/var.scss' with ( // do not use same name, it will override. $colors: $--colors, // $button-padding-horizontal: ("default": 50px) - $border-color: $--border-color + $border-color: $--border-color, + // $select-dropdown: map.merge($key, $select-dropdown), + // $dropdown: map.merge( + // ( + // 'menu-box-shadow': pink, + // 'menuItem-hover-fill': red, + // 'menuItem-hover-color': red, + // 'menu-index': 10, + // ), + // $dropdown + // ), ); // if you want to import all diff --git a/src/styles/theme.scss b/src/styles/theme.scss index ee18335bb..478e6f78f 100644 --- a/src/styles/theme.scss +++ b/src/styles/theme.scss @@ -1,6 +1,15 @@ @import './colors'; [theme='dark'] { + --el-color-primary: #{$purple-dark}; + --el-border-color: #{$grey-dark-10}; + --el-text-color-regular: #{$white}; + --link-text-color: #{$purple-dark}; + --el-bg-color: #{$grey-dark-10}; + --el-border-color-light: #{--dropdown-background}; + --el-bg-color-overlay: #{--dropdown-background}; + --el-fill-color-blank: #{--app-background-color}; + // tag --tag-background: #{$green-dark}; // community card @@ -86,6 +95,7 @@ --address-card-button-border-hover: 1px dashed #{$grey-dark-0}; --address-card-button-border-active: 1px dashed #{$grey-dark-2}; --address-card-selected-border-active: 1px solid #{$grey-dark-1}; + --address-card-button-border-focus: 2px solid #{$orange-2}; --address-card-button-color: #{$grey-dark-1}; --address-card-button-color-hover: #{$grey-dark-0}; --address-card-button-color-active: #{$grey-dark-2}; @@ -112,6 +122,7 @@ --primary-color: #{$purple-dark}; --color-success: #{$green-dark-1}; --switch-background: #{$grey-dark-8}; + --switch-border: #{$white}; --switch-background-active: #{$purple-dark}; --switch-label-color: #{$grey-dark-1}; --switch-notification-label: #{$white}; @@ -126,15 +137,6 @@ --alert-color-text: #{$alt-grey-5}; --alert-colot-link-text: #{$grey-dark-1}; // button dark - // --button-dark-background: #{$grey-dark-10}; - // --button-dark-text: #{$purple-dark}; - // --button-dark-border: #{$grey-dark-10}; - // --button-dark-border-hover: #{$grey-dark-10}; - // --button-dark-background-hover: #{$grey-dark-6}; - // --button-dark-text-hover: #{$purple-dark}; - // --button-dark-background-active: #{$grey-dark-10}; - // --button-dark-border-active: #{$grey-dark-10}; - // --button-dark-text-active: #{$purple-dark}; --button-dark-background: #{$white}; --button-dark-text: #{$purple-dark}; --button-dark-border: #{$white}; @@ -159,29 +161,35 @@ // button default --button-default-text: #{$grey-dark-2}; --button-default-border: #{$purple-dark}; + --button-default-background: #{$grey-dark-8}; --button-default-background-hover: #{$grey-dark-6}; --button-default-border-hover: #{$purple-dark-1}; --button-default-text-hover: #{$grey-dark-1}; + --button-default-text-hover: #{$grey-dark-2}; + --button-default-text-hover: #{$grey-dark-1}; + --button-default-text-active: #{$white}; + --button-default-border-active: #{$white}; + --button-default-background-active: #{$grey-dark-6}; // button default dark - // --button-default-dark-background: #{$purple-dark}; - // --button-default-dark-border: #{$grey-dark-10}; - // --button-default-dark-text: #{$grey-dark-10}; - // --button-default-dark-background-hover: #{$purple-dark-1}; - // --button-default-dark-border-hover: #{$grey-dark-10}; - // --button-default-dark-text-hover: #{$grey-dark-10}; - // --button-default-dark-background-active: #{$grey-dark-10}; - // --button-default-dark-border-active: #{$purple-dark-2}; - // --button-default-dark-text-active: #{$purple-dark-2}; - - --button-default-dark-background: #{$purple-dark}; - --button-default-dark-border: #{$white}; - --button-default-dark-text: #{$white}; - --button-default-dark-background-hover: #{$purple-dark-1}; - --button-default-dark-border-hover: #{$white}; - --button-default-dark-text-hover: #{$white}; - --button-default-dark-background-active: #{$white}; - --button-default-dark-border-active: #{$purple-dark}; - --button-default-dark-text-active: #{$purple-dark}; + --button-dark-background: #{$purple-dark}; + --button-dark-border: #{$white}; + --button-dark-text: #{$white}; + --button-dark-background-hover: #{$purple-dark-1}; + --button-dark-border-hover: #{$white}; + --button-dark-text-hover: #{$white}; + --button-dark-background-active: #{$white}; + --button-dark-border-active: #{$purple-dark}; + --button-dark-text-active: #{$purple-dark}; + // button default dark primary + --button-primary-dark-background: #{$white}; + --button-primary-dark-border: #{$purple-dark-1}; + --button-primary-dark-text: #{$purple-dark-1}; + --button-primary-dark-background-hover: #{$purple-dark-1}; + --button-primary-dark-border-hover: #{$white}; + --button-primary-dark-text-hover: #{$white}; + --button-primary-dark-background-active: #{$white}; + --button-primary-dark-border-active: #{$purple-dark}; + --button-primary-dark-text-active: #{$purple-dark}; // button text --button-text-color: #{$purple-dark}; --button-text-hover: #{$purple-dark-1}; @@ -241,6 +249,15 @@ } [theme='light'] { + --el-color-primary: #{$purple-3}; + --el-border-color: #{$grey-4}; + --el-text-color-regular: #{$alt-grey-5}; + --link-text-color: #{$purple-3}; + --el-bg-color: #{$white}; + --el-border-color-light: #{--dropdown-background}; + --el-bg-color-overlay: #{--dropdown-background}; + --el-fill-color-blank: #{--app-background-color}; + // tag --tag-background: #{$green-3}; // community card @@ -301,7 +318,7 @@ // texts --text-dark-background: #{$white}; --text-high-emphasis: #{$alt-grey-5}; - --text-medium-emphasis: #{$alt-grey-4}; + --text-medium-emphasis: #{$alt-grey-4-alt}; --text-low-emphasis: #{$alt-grey-3}; --text-disabled: #{$alt-grey-2}; // select @@ -328,6 +345,7 @@ --addresses-list-background: #{$orange-1}; --address-card-button-border: 1px dashed #{#66648c80}; --address-card-button-border-hover: 1px dashed #{#aaa8bd80}; + --address-card-button-border-focus: 2px solid #{$orange-2}; --address-card-button-border-active: 1px dashed #{#66648c80}; --address-card-selected-border-active: 1px solid #{#44424080}; --address-card-button-color: #{#44424080}; @@ -356,6 +374,7 @@ --primary-color: #{$purple-4}; --color-success: #52c41a; --switch-label-color: #{$alt-grey-4}; + --switch-border: #{$grey-dark-0}; --switch-notification-label: #{$alt-grey-5}; --switch-background: #{$grey-dark-0}; --switch-background-active: #{$purple-2}; From 8ac6e67fd1296146ffc03d3303c136fdd484aebe Mon Sep 17 00:00:00 2001 From: gabaldon Date: Tue, 23 Jan 2024 17:05:53 +0100 Subject: [PATCH 06/34] fix: update custom icon component --- src/components/CustomIcon.vue | 161 ++++-------------- src/components/EditorSource.vue | 3 +- src/components/NetworkStatus.vue | 4 +- src/components/RadonAggregateTallyScript.vue | 6 +- src/components/RadonOperator.vue | 8 +- src/components/RadonScript.vue | 6 +- src/components/Select.vue | 4 +- .../SendTransaction/GeneratedTransaction.vue | 11 +- .../SendTransaction/SendValueTransferForm.vue | 6 +- src/components/Sidebar.vue | 6 +- src/components/Subscript.vue | 4 +- src/components/Variables.vue | 2 +- src/components/WalletNotFound.vue | 2 +- src/components/card/TemplateCard.vue | 2 +- src/components/steps/WelcomeForm.vue | 2 +- src/constants.ts | 89 ++++++---- src/resources/svg/add-dark.svg | 4 + src/views/Settings.vue | 2 +- src/views/WelcomeBack.vue | 2 +- 19 files changed, 132 insertions(+), 192 deletions(-) create mode 100644 src/resources/svg/add-dark.svg diff --git a/src/components/CustomIcon.vue b/src/components/CustomIcon.vue index 20af9965a..6b26d10f9 100644 --- a/src/components/CustomIcon.vue +++ b/src/components/CustomIcon.vue @@ -1,137 +1,40 @@ - diff --git a/src/components/EditorSource.vue b/src/components/EditorSource.vue index 64baf4cac..27c0a57a1 100644 --- a/src/components/EditorSource.vue +++ b/src/components/EditorSource.vue @@ -55,7 +55,7 @@ data-test="delete-btn" @click="deleteSource({ index })" > - + @@ -221,7 +221,6 @@ export default { column-gap: 10px; display: grid; grid-template: repeat(3, auto) / 130px 1fr; - row-gap: 22px; .label { color: var(--text-medium-emphasis); diff --git a/src/components/NetworkStatus.vue b/src/components/NetworkStatus.vue index dfbb643d8..e57c01166 100644 --- a/src/components/NetworkStatus.vue +++ b/src/components/NetworkStatus.vue @@ -39,13 +39,13 @@ v-if="showAll" data-test="shortUp" class-name="sort" - name="Up" + name="up" /> diff --git a/src/components/RadonAggregateTallyScript.vue b/src/components/RadonAggregateTallyScript.vue index 62a253633..13749992a 100644 --- a/src/components/RadonAggregateTallyScript.vue +++ b/src/components/RadonAggregateTallyScript.vue @@ -8,14 +8,14 @@
- - + +
- +

{{ $t('add_operator') }}

diff --git a/src/components/RadonOperator.vue b/src/components/RadonOperator.vue index cba9f1aca..c8f8bf68f 100644 --- a/src/components/RadonOperator.vue +++ b/src/components/RadonOperator.vue @@ -12,7 +12,7 @@ effect="light" >

- +

{{ $t('operator') }}

@@ -42,10 +42,10 @@
- +
- +

{{ $t('add_operator') }}

diff --git a/src/components/RadonScript.vue b/src/components/RadonScript.vue index dd0ff1d7f..4f47836c4 100644 --- a/src/components/RadonScript.vue +++ b/src/components/RadonScript.vue @@ -11,12 +11,12 @@

{{ $t('add_operator') }}

diff --git a/src/components/Select.vue b/src/components/Select.vue index 68618daed..1d3689088 100644 --- a/src/components/Select.vue +++ b/src/components/Select.vue @@ -41,9 +41,9 @@ - +
diff --git a/src/components/SendTransaction/GeneratedTransaction.vue b/src/components/SendTransaction/GeneratedTransaction.vue index 9e81988d3..11721e3cd 100644 --- a/src/components/SendTransaction/GeneratedTransaction.vue +++ b/src/components/SendTransaction/GeneratedTransaction.vue @@ -74,7 +74,7 @@ @click="toggleAdvanceOptions" > {{ $t('show_less') }} - + {{ $t('show_less') }} - + {{ $t('show_advance') }} - + - +
- + {{ version }}
@@ -49,7 +49,7 @@ placement="right" effect="light" > - +
diff --git a/src/components/Subscript.vue b/src/components/Subscript.vue index 7454be942..0cbaccf38 100644 --- a/src/components/Subscript.vue +++ b/src/components/Subscript.vue @@ -2,12 +2,12 @@
- +

{{ $t('add_operator') }}

diff --git a/src/components/Variables.vue b/src/components/Variables.vue index 33873b0b6..2383e20f8 100644 --- a/src/components/Variables.vue +++ b/src/components/Variables.vue @@ -103,7 +103,7 @@
- +

{{ $t('add_variable') }}

diff --git a/src/components/WalletNotFound.vue b/src/components/WalletNotFound.vue index 79c914387..6f87446f6 100644 --- a/src/components/WalletNotFound.vue +++ b/src/components/WalletNotFound.vue @@ -4,7 +4,7 @@

{{ $t('wallet_disconnected') }}

- +

{{ $t('connection_problem') }}

diff --git a/src/components/card/TemplateCard.vue b/src/components/card/TemplateCard.vue index f4e9b0ba6..15653b540 100644 --- a/src/components/card/TemplateCard.vue +++ b/src/components/card/TemplateCard.vue @@ -32,7 +32,7 @@ src="@/resources/svg/options-marketplace.svg" alt="" /> - +