From 28ab0888e8ac63e39197cb47b6c269a3ebf9b09a Mon Sep 17 00:00:00 2001 From: MarcelBitfly Date: Thu, 8 Aug 2024 10:22:22 +0200 Subject: [PATCH] style(eslint): apply `max-len` rule :warning: the files where autofixed by `prettier` formatting. In order to get rid of most of the `max-len` errors. That is why there are changes included that have nothing todo with `max-len`, but also do not collide with the current `eslint stylisit set`. See: BIDS-128 --- frontend/README.md | 15 +- frontend/app.vue | 24 +- frontend/app/router.options.ts | 6 +- frontend/assets/css/colors.scss | 17 +- frontend/assets/css/fonts.scss | 87 +- frontend/assets/css/main.scss | 12 +- frontend/assets/css/pricing.scss | 2 +- frontend/assets/css/prime.scss | 42 +- frontend/assets/css/prime_datatable.scss | 6 +- frontend/assets/css/utils.scss | 20 +- frontend/assets/css/variables.scss | 2 +- frontend/components/bc/BcButton.vue | 48 +- .../components/bc/BcCurrencySelection.vue | 5 +- frontend/components/bc/BcDialog.vue | 6 +- frontend/components/bc/BcFaq.vue | 6 +- frontend/components/bc/BcIconToggle.vue | 2 +- frontend/components/bc/BcLink.vue | 3 +- .../components/bc/BcMaintenanceBanner.vue | 19 +- frontend/components/bc/BcToggle.vue | 2 +- frontend/components/bc/BcTooltip.vue | 69 +- frontend/components/bc/BcTranslation.vue | 3 +- frontend/components/bc/CookieModal.vue | 15 +- frontend/components/bc/CopyToClipboard.vue | 15 +- frontend/components/bc/DataWrapper.vue | 4 +- frontend/components/bc/InputNumber.vue | 34 +- frontend/components/bc/LoadingSpinner.vue | 4 +- frontend/components/bc/NetworkSelector.vue | 8 +- frontend/components/bc/PageWrapper.vue | 3 +- frontend/components/bc/SearchbarGeneral.vue | 55 +- frontend/components/bc/ad/AdComponent.vue | 11 +- frontend/components/bc/ad/AdControl.vue | 7 +- .../components/bc/dialog/BcDialogConfirm.vue | 4 +- .../components/bc/footer/ColorThemeToggle.vue | 8 +- frontend/components/bc/footer/LinkList.vue | 71 +- frontend/components/bc/footer/MainFooter.vue | 22 +- frontend/components/bc/form/BcForm.vue | 4 +- frontend/components/bc/form/BcFormRow.vue | 4 +- .../components/bc/format/FormatGraffiti.vue | 3 +- frontend/components/bc/format/FormatHash.vue | 41 +- .../components/bc/format/FormatNumber.vue | 4 +- .../components/bc/format/FormatPercent.vue | 14 +- .../components/bc/format/FormatTimePassed.vue | 31 +- frontend/components/bc/format/FormatValue.vue | 10 +- frontend/components/bc/header/MainHeader.vue | 63 +- frontend/components/bc/header/MegaMenu.vue | 31 +- .../components/bc/input/BcInputCheckbox.vue | 6 +- frontend/components/bc/input/BcInputError.vue | 6 +- frontend/components/bc/input/BcInputLabel.vue | 25 +- .../components/bc/premium/BcPremiumGem.vue | 4 +- .../components/bc/premium/BcPremiumModal.vue | 10 +- .../bc/searchbar/CategorySelectors.vue | 6 +- .../components/bc/searchbar/FilterButton.vue | 6 +- .../bc/searchbar/MiddleEllipsis.vue | 485 +- .../bc/searchbar/NetworkSelector.vue | 66 +- .../bc/searchbar/SearchbarButton.vue | 2 +- .../components/bc/searchbar/SearchbarMain.vue | 283 +- .../components/bc/searchbar/SuggestionRow.vue | 57 +- .../components/bc/searchbar/TypeIcons.vue | 12 +- frontend/components/bc/searchbar/readme.md | 78 +- frontend/components/bc/table/AgeHeader.vue | 4 +- frontend/components/bc/table/BcTable.vue | 36 +- .../components/bc/table/BcTableControl.vue | 12 +- .../components/bc/table/BcTablePopoutEdit.vue | 4 +- frontend/components/bc/table/TablePager.vue | 62 +- frontend/components/bc/toggle/MultiBar.vue | 21 +- .../components/bc/toggle/MultiBarButton.vue | 8 +- frontend/components/bc/toggle/SingleBar.vue | 16 +- .../components/bc/toggle/SingleBarButton.vue | 18 +- .../block/table/BlockTableRewardItem.vue | 11 +- .../block/table/BlockTableStatus.vue | 14 +- .../dashboard/DashboardControls.vue | 135 +- .../components/dashboard/DashboardHeader.vue | 17 +- .../dashboard/DashboardRenameModal.vue | 21 +- .../dashboard/DashboardShareCodeModal.vue | 38 +- .../dashboard/DashboardShareModal.vue | 80 +- .../dashboard/GroupManagementModal.vue | 116 +- frontend/components/dashboard/OverviewBox.vue | 13 +- .../dashboard/SharedDashboardModal.vue | 23 +- .../dashboard/ValidatorEpochDutiesModal.vue | 59 +- .../dashboard/ValidatorManagementModal.vue | 182 +- .../dashboard/ValidatorOverview.vue | 38 +- .../components/dashboard/ValidatorSlotViz.vue | 63 +- .../DashboardChartSummaryChartFilter.vue | 94 +- .../dashboard/chart/RewardsChart.vue | 77 +- .../dashboard/chart/RewardsChartTooltip.vue | 18 +- .../dashboard/chart/SummaryChart.vue | 128 +- .../dashboard/chart/SummaryChartTooltip.vue | 9 +- .../dashboard/chart/TooltipHeader.vue | 35 +- .../creation/DashboardCreationController.vue | 75 +- .../creation/DashboardCreationNetworkMask.vue | 101 +- .../creation/DashboardCreationTypeMask.vue | 53 +- .../components/dashboard/group/GroupLabel.vue | 4 +- .../dashboard/group/GroupSelection.vue | 4 +- .../dashboard/group/GroupSelectionDialog.vue | 28 +- .../table/DashboardTableAddValidator.vue | 8 +- .../dashboard/table/DashboardTableBlocks.vue | 74 +- .../table/DashboardTableClDeposits.vue | 60 +- .../table/DashboardTableElDeposits.vue | 64 +- .../dashboard/table/DashboardTableRewards.vue | 82 +- .../table/DashboardTableRewardsDetails.vue | 58 +- .../dashboard/table/DashboardTableSummary.vue | 104 +- .../table/DashboardTableValidators.vue | 20 +- .../table/DashboardTableValueDuty.vue | 10 +- .../table/DashboardTableWithdrawals.vue | 119 +- .../dashboard/table/SummaryDetails.vue | 77 +- .../dashboard/table/SummaryMissedRewards.vue | 31 +- .../dashboard/table/SummaryReward.vue | 14 +- .../dashboard/table/SummaryStatus.vue | 24 +- .../dashboard/table/SummaryValidators.vue | 16 +- .../table/SummaryValidatorsIconRow.vue | 12 +- .../dashboard/table/SummaryValue.vue | 114 +- .../validator/subset/ValidatorSubsetList.vue | 55 +- .../subset/ValidatorSubsetListHeader.vue | 8 +- .../validator/subset/ValidatorSubsetModal.vue | 172 +- .../subset/ValidatorSubsetSubHeader.vue | 67 +- frontend/components/icon/ErrorFace.vue | 6 +- frontend/components/icon/IconCrypto.vue | 6 +- frontend/components/icon/IconCurrency.vue | 6 +- frontend/components/icon/IconNetwork.vue | 34 +- frontend/components/icon/datatype/EnsIcon.vue | 4 +- frontend/components/icon/datatype/NftIcon.vue | 84 +- .../icon/network/NetworkArbitrum.vue | 10 +- .../components/icon/network/NetworkBase.vue | 4 +- .../icon/network/NetworkEthereum.vue | 16 +- .../components/icon/network/NetworkGnosis.vue | 4 +- .../icon/network/NetworkOptimism.vue | 2 +- .../notifications/DashboardsTable.vue | 85 +- .../notifications/DashboardsTableEmpty.vue | 10 +- .../NotificationsManagementDashboards.vue | 155 +- .../NotificationsManagementGeneralTab.vue | 138 +- .../NotificationsManagementModal.vue | 5 +- ...ionsManagementPairedDeviceModalContent.vue | 20 +- ...ificationsManagementPairedDevicesModal.vue | 4 +- .../management/SubscriptionDialog.vue | 259 +- .../management/SubscriptionRow.vue | 39 +- .../NotificationsManagementModalWebhook.vue | 47 +- .../DashboardValidatorManageValidators.vue | 20 +- .../playground/MiddleEllipsisTests.vue | 88 +- .../playground/PlaygroundAccordeon.vue | 4 +- .../components/playground/PlaygroundAds.vue | 4 +- .../playground/PlaygroundComposable.vue | 24 +- .../playground/PlaygroundConversion.vue | 56 +- .../playground/PlaygroundDialog.vue | 49 +- .../playground/PlaygroundDutyStatus.vue | 21 +- .../playground/PlaygroundEncryption.vue | 24 +- .../components/playground/PlaygroundIcons.vue | 12 +- .../components/playground/PlaygroundInput.vue | 8 +- .../playground/PlaygroundStyling.vue | 55 +- .../playground/PlaygroundSubsetList.vue | 32 +- .../components/playground/PlaygroundTable.vue | 10 +- .../components/playground/PlaygroundTags.vue | 16 +- .../playground/PlaygroundToasts.vue | 51 +- frontend/components/pricing/HeaderLine.vue | 10 +- frontend/components/pricing/PeriodToggle.vue | 8 +- .../components/pricing/PremiumAddonBox.vue | 115 +- frontend/components/pricing/PremiumAddons.vue | 8 +- .../components/pricing/PremiumCompare.vue | 89 +- .../components/pricing/PremiumProductBox.vue | 134 +- .../components/pricing/PremiumProducts.vue | 4 +- .../pricing/PremiumViaAppBanner.vue | 2 +- frontend/components/pricing/TypeToggle.vue | 12 +- frontend/components/slot/viz/SlotVizTile.vue | 41 +- .../components/slot/viz/SlotVizTooltip.vue | 186 +- .../components/slot/viz/SlotVizViewer.vue | 106 +- .../settings/UserSettingsDeleteAccount.vue | 12 +- .../user/settings/UserSettingsEmail.vue | 44 +- .../user/settings/UserSettingsPassword.vue | 44 +- .../settings/UserSettingsSubscriptions.vue | 14 +- .../table/ValidatorTableDutyRewards.vue | 14 +- .../table/ValidatorTableDutyStatus.vue | 38 +- .../validator/table/ValidatorTableStatus.vue | 12 +- .../useNotificationsManagementDashboards.ts | 45 +- .../useNotificationsManagementSettings.ts | 21 +- ...NotificationsManagementSettingsProvider.ts | 61 +- frontend/composables/useBcDialog.ts | 28 +- frontend/composables/useBcSeo.ts | 29 +- frontend/composables/useBcToastProvider.ts | 28 +- frontend/composables/useCurrency.ts | 69 +- frontend/composables/useCurrentAds.ts | 26 +- frontend/composables/useCustomFetch.ts | 48 +- frontend/composables/useDashboardKey.ts | 15 +- .../composables/useDashboardKeyProvider.ts | 47 +- frontend/composables/useDateProvider.ts | 3 +- frontend/composables/useDebounceValue.ts | 7 +- frontend/composables/useFormat.ts | 43 +- frontend/composables/useGlobalSetting.ts | 4 +- frontend/composables/useHashTabs.ts | 21 +- frontend/composables/useInterval.ts | 6 +- frontend/composables/useRefBridge.ts | 139 +- frontend/composables/useStripeProvider.ts | 42 +- frontend/composables/useSwipe.ts | 36 +- frontend/composables/useTableQuery.ts | 24 +- .../useValidatorDashboardGroups.ts | 12 +- frontend/composables/useValue.ts | 71 +- frontend/composables/useWindowSizeProvider.ts | 4 +- frontend/decision-record.md | 12 +- frontend/i18n/en.json | 60 +- frontend/i18n/fr.json | 116 +- frontend/middleware/redirect.global.ts | 16 +- frontend/nuxt.config.ts | 37 +- .../pages/account-dashboard/[[id]]/index.vue | 5 +- frontend/pages/dashboard/[[id]]/index.vue | 120 +- frontend/pages/index.vue | 6 +- frontend/pages/login.vue | 23 +- frontend/pages/notifications.vue | 16 +- frontend/pages/playground.vue | 17 +- frontend/pages/pricing.vue | 20 +- frontend/pages/register.vue | 52 +- frontend/pages/user/settings.vue | 14 +- frontend/pages/validator/[[id]]/index.vue | 4 +- frontend/plugins/bcLogger.ts | 9 +- frontend/plugins/fontawesome.js | 7 +- frontend/public/mock/dashboard/overview.json | 10 +- .../mock/dashboard/validatorRewardsChart.json | 5386 +++++++++-------- .../mock/dashboard/validatorSummary.json | 2 +- .../mock/dashboard/validatorSummaryChart.json | 163 +- .../dashboard/validatorSummaryDetails.json | 8 +- frontend/public/mock/latestState.json | 24 +- frontend/public/mock/login.json | 6 +- .../public/mock/notifications/dashboards.json | 18 +- .../notifications/managementDashboard.json | 2 +- .../public/mock/notifications/testEmail.json | 2 +- .../public/mock/notifications/testPush.json | 2 +- frontend/public/mock/refreshToken.json | 4 +- .../public/mock/stripe/checkout-session.json | 2 +- .../public/mock/stripe/customer-portal.json | 2 +- frontend/public/mock/user/dashboards.json | 4 +- frontend/public/mock/user/me.json | 2 +- frontend/public/mock/user/me/email.json | 2 +- frontend/public/mock/user/me/password.json | 2 +- .../stores/dashboard/useUserDashboardStore.ts | 83 +- .../useValidatorDashboardBlocksStore.ts | 29 +- .../useValidatorDashboardClDepositsStore.ts | 3 +- .../useValidatorDashboardElDepositsStore.ts | 3 +- .../useValidatorDashboardOverviewStore.ts | 30 +- ...seValidatorDashboardRewardsDetailsStore.ts | 33 +- .../useValidatorDashboardRewardsStore.ts | 39 +- ...seValidatorDashboardSummaryDetailsStore.ts | 33 +- .../useValidatorDashboardSummaryStore.ts | 30 +- .../useValidatorDashboardWithdrawalsStore.ts | 55 +- .../dashboard/useValidatorSlotVizStore.ts | 14 +- .../useNotificationsDashboardStore.ts | 45 +- frontend/stores/useAdConfigurationStore.ts | 8 +- frontend/stores/useLatestStateStore.ts | 9 +- frontend/stores/useNetworkStore.ts | 23 +- frontend/stores/useProductsStore.ts | 40 +- frontend/stores/useUserStore.ts | 8 +- frontend/types/currencies.ts | 25 +- frontend/types/customFetch.ts | 66 +- frontend/types/dashboard/slotViz.ts | 14 +- frontend/types/dashboard/summary.ts | 84 +- frontend/types/helper.ts | 2 +- frontend/types/network.ts | 36 +- frontend/types/notifications/dashboards.ts | 3 +- frontend/types/notifications/settings.ts | 20 +- frontend/types/searchbar.ts | 278 +- frontend/types/swipe.ts | 7 +- frontend/types/tag.ts | 11 +- frontend/types/validator/index.ts | 14 +- frontend/types/value.ts | 16 +- frontend/utils/bigMath.ts | 9 +- frontend/utils/colors.ts | 66 +- frontend/utils/currency.ts | 14 +- frontend/utils/dashboard/group.ts | 12 +- frontend/utils/dashboard/table.ts | 5 +- frontend/utils/dashboard/validator.ts | 35 +- frontend/utils/format.ts | 184 +- frontend/utils/html.ts | 20 +- frontend/utils/misc.ts | 19 +- frontend/utils/mock.ts | 90 +- frontend/utils/regexp.ts | 1 + frontend/utils/table.ts | 31 +- frontend/utils/translation.ts | 65 +- frontend/utils/userValidation.ts | 39 +- 274 files changed, 9991 insertions(+), 5683 deletions(-) diff --git a/frontend/README.md b/frontend/README.md index d86a3591e..669bc409c 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -1,6 +1,7 @@ # Beaconch.in Good to know ## Usefull VSC Plugins + - Nuxtr - EsLint - Prettier -COde Formatter @@ -20,6 +21,7 @@ Clone the `beaconchain` repository from git. On your console, navigate to folder `beaconchain/frontend`. Type + ```bash cp .npmrc-example .npmrc ``` @@ -27,24 +29,30 @@ cp .npmrc-example .npmrc In your `.npmrc` file, replace `FA_TOKEN` with an actual key for Font Awesome. Then type: + ```bash cp .env-example .env ``` + In file `.env`, write the URLs of the API servers and the secret key to access to them. The variable evoking the development is used to show/hide features and components that are not ready for production. Set the following mapping in your `/etc/hosts` file: + ``` 127.0.0.1 local.beaconcha.in ``` Create server certificates for locally running on https, by runing these comands in the console (the last two with `sudo`) + ```bash openssl genrsa 2048 > server.key chmod 400 server.key openssl req -new -x509 -nodes -sha256 -days 365 -key server.key -out server.crt ``` + Add the following env variable (on Ubuntu: in your `~/.profile`) needed to load local mock data: + ```bash export NODE_TLS_REJECT_UNAUTHORIZED=0 ``` @@ -52,17 +60,21 @@ export NODE_TLS_REJECT_UNAUTHORIZED=0 Restart. Navigate to folder `beaconchain/frontend` and run + ```bash npm install ``` If you prefer to use _pnpm_, _yarn_ or _bun_ instead of _npm_: + ```bash sudo npm install -g pnpm sudo npm install -g yarn sudo npm install -g bun ``` + then + ```bash pnpm install yarn install @@ -79,6 +91,7 @@ pnpm run dev yarn dev bun run dev ``` + Now you can browse the front-end at https://local.beaconcha.in:3000/ ## Production @@ -121,5 +134,3 @@ Check out the [deployment documentation](https://nuxt.com/docs/getting-started/d We documented our decisions in the [decisions](decisions.md) file. The documentation should be inspired by Architecture Decision Records ([ADR](https://adr.github.io/)). - - diff --git a/frontend/app.vue b/frontend/app.vue index 0d41bc123..a4891b68f 100644 --- a/frontend/app.vue +++ b/frontend/app.vue @@ -3,15 +3,18 @@ import { generateUUID } from '~/utils/misc' // Used for debugging purposes, might be removed or moved later provide('app-uuid', { value: generateUUID() }) -useHead({ - script: [ - { - key: 'revive', - src: '../js/revive.min.js', - async: false, - }, - ], -}, { mode: 'client' }) +useHead( + { + script: [ + { + key: 'revive', + src: '../js/revive.min.js', + async: false, + }, + ], + }, + { mode: 'client' }, +) useWindowSizeProvider() useBcToastProvider() useDateProvider() @@ -27,5 +30,4 @@ useDateProvider() - + diff --git a/frontend/app/router.options.ts b/frontend/app/router.options.ts index 51caf3ee7..5947aab56 100644 --- a/frontend/app/router.options.ts +++ b/frontend/app/router.options.ts @@ -1,5 +1,9 @@ export default { - scrollBehavior(_to: any, _from: any, savedPosition: { left: number, top: number } | null) { + scrollBehavior( + _to: any, + _from: any, + savedPosition: { left: number, top: number } | null, + ) { return { _to, ...savedPosition } }, } diff --git a/frontend/assets/css/colors.scss b/frontend/assets/css/colors.scss index 1ad281aba..68d69fecb 100644 --- a/frontend/assets/css/colors.scss +++ b/frontend/assets/css/colors.scss @@ -22,13 +22,13 @@ --light-black: #2a262c; --dark-blue: #2f2e42; --purple-blue: #3e4461; - --light-purple-blue: #545C7E; - --sky-blue:#cde3ee; + --light-purple-blue: #545c7e; + --sky-blue: #cde3ee; --light-blue: #66bce9; - --melllow-blue: #7db5eC; + --melllow-blue: #7db5ec; --blue: #2e82ae; --teal-blue: #116897; - --mint-green: #D3E4D4; + --mint-green: #d3e4d4; --flashy-green: #90ed7d; --light-green: #4e7451; --green: #7dc382; @@ -37,7 +37,7 @@ --light-red: #d42127; --dark-red: #ce3438; --bold-red: #b10b11; - --pastel-red: #F1C5C6; + --pastel-red: #f1c5c6; --yellow: #ffd600; --light-yellow: #969100; --purple: #9747ff; @@ -74,7 +74,7 @@ --button-secondary-color: var(--light-black); --button-secondary-hover-color: var(--light-grey-6); - --button-secondary-background-color--hover: var(--light-grey-4 ); + --button-secondary-background-color--hover: var(--light-grey-4); --button-secondary-background-color: var(--grey-4); --button-secondary-border-color: var(--light-grey-7); @@ -84,7 +84,7 @@ --container-color: var(--light-black); --container-border-color: var(--light-grey-3); --container-border: 1px solid var(--container-border-color); - + --subcontainer-background: var(--light-grey-2); --input-background: var(--grey-4); @@ -153,7 +153,6 @@ --toast-background-error-color: var(--pastel-red); --toast-border-error-color: var(--bold-red); - &.dark-mode { --primary-color: var(--primary-orange); --primary-contrast-color: var(--light-black); @@ -222,4 +221,4 @@ --list-hover-background: var(--dark-grey); --list-hover-descrete-color: var(--grey); } -} \ No newline at end of file +} diff --git a/frontend/assets/css/fonts.scss b/frontend/assets/css/fonts.scss index 92458a110..cf44872fc 100644 --- a/frontend/assets/css/fonts.scss +++ b/frontend/assets/css/fonts.scss @@ -111,13 +111,11 @@ --standard_text_medium_font_weight: var(--roboto-medium); --standard_text_bold_font_weight: var(--roboto-bold); - --main_header_font_family:var(--roboto-family); + --main_header_font_family: var(--roboto-family); --main_header_font_size: 16px; --main_header_font_weight: var(--roboto-regular); --main_header_bold_font_weight: var(--roboto-bold); - - --small_text_font_family: var(--roboto-family); --small_text_font_size: 14px; --small_text_font_weight: var(--roboto-light); @@ -171,14 +169,14 @@ h1 { @include subtitle_text; } -@mixin big_text(){ +@mixin big_text() { font-family: var(--big_text_font_family); font-size: var(--big_text_font_size); font-weight: var(--big_text_font_weight); } -.big_text{ - @include big_text +.big_text { + @include big_text; } @mixin big_text_label() { @@ -188,116 +186,115 @@ h1 { } .big_text_label { - @include big_text_label + @include big_text_label; } -@mixin standard_text(){ +@mixin standard_text() { font-family: var(--standard_text_font_family); font-size: var(--standard_text_font_size); font-weight: var(--standard_text_font_weight); } -.standard_text{ - @include standard_text +.standard_text { + @include standard_text; } -@mixin standard_text_bold(){ +@mixin standard_text_bold() { font-family: var(--standard_text_font_family); font-size: var(--standard_text_font_size); font-weight: var(--standard_text_bold_font_weight); } -.standard_text_bold{ - @include standard_text_bold +.standard_text_bold { + @include standard_text_bold; } -@mixin small_text(){ +@mixin small_text() { font-family: var(--small_text_font_family); font-size: var(--small_text_font_size); font-weight: var(--small_text_font_weight); } -.small_text{ - @include small_text +.small_text { + @include small_text; } -@mixin small_text_bold(){ +@mixin small_text_bold() { font-family: var(--small_text_font_family); font-size: var(--small_text_font_size); font-weight: var(--small_text_bold_font_weight); } -.small_text_bold{ - @include small_text_bold +.small_text_bold { + @include small_text_bold; } -@mixin tiny_text(){ +@mixin tiny_text() { font-family: var(--tiny_text_font_family); font-size: var(--tiny_text_font_size); font-weight: var(--tiny_text_font_weight); } -.tiny_text{ - @include tiny_text +.tiny_text { + @include tiny_text; } -@mixin tiny_text_bold(){ +@mixin tiny_text_bold() { font-family: var(--tiny_text_font_family); font-size: var(--tiny_text_font_size); font-weight: var(--tiny_text_bold_font_weight); } -.tiny_text_bold{ - @include tiny_text_bold +.tiny_text_bold { + @include tiny_text_bold; } -@mixin tooltip_text(){ +@mixin tooltip_text() { font-family: var(--tooltip_text_font_family); font-size: var(--tooltip_text_font_size); font-weight: var(--tooltip_text_font_weight); } -.tooltip_text{ - @include tooltip_text +.tooltip_text { + @include tooltip_text; } -@mixin tooltip_text_bold(){ +@mixin tooltip_text_bold() { font-family: var(--tooltip_text_font_family); font-size: var(--tooltip_text_font_size); font-weight: var(--tooltip_text_bold_font_weight); } -.tooltip_text_bold{ - @include tooltip_text_bold +.tooltip_text_bold { + @include tooltip_text_bold; } -@mixin button_text(){ +@mixin button_text() { font-family: var(--button_font_family); font-size: var(--button_font_size); font-weight: var(--button_font_weight); } - -.button_text{ - @include button_text +.button_text { + @include button_text; } -@mixin text-toast(){ - font-family:var(--roboto-family); - font-size:var(--standard_text_font_size); +@mixin text-toast() { + font-family: var(--roboto-family); + font-size: var(--standard_text_font_size); font-weight: var(--roboto-bold); } -.text-toast{ - @include text-toast +.text-toast { + @include text-toast; } -@mixin text-toast-sm(){ - font-family:var(--roboto-family); +@mixin text-toast-sm() { + font-family: var(--roboto-family); font-size: var(--small_text_font_size); font-weight: var(--roboto-regular); } -.text-toast-sm{ - @include text-toast-sm -} \ No newline at end of file +.text-toast-sm { + @include text-toast-sm; +} diff --git a/frontend/assets/css/main.scss b/frontend/assets/css/main.scss index ab4335179..e551aa1fd 100644 --- a/frontend/assets/css/main.scss +++ b/frontend/assets/css/main.scss @@ -18,12 +18,12 @@ body { a { color: inherit; text-decoration: none; - &:hover:not([disabled]) { + &:hover:not([disabled]) { opacity: 0.8; } - &[disabled]{ - cursor: unset; + &[disabled] { + cursor: unset; pointer-events: none; } } @@ -34,7 +34,7 @@ a { &:hover:not([disabled]) { opacity: 0.8; } - &[disabled]{ + &[disabled] { color: var(--disabled-color); } } @@ -60,7 +60,7 @@ a { scrollbar-width: thin; /* Chrome: we must remove the styles above otherwise the styles below will not work correctly */ - @supports (-webkit-appearance:none){ + @supports (-webkit-appearance: none) { scrollbar-color: unset; scrollbar-width: unset; } @@ -86,7 +86,7 @@ a { /** To make a SVG monochromatic, assign it to the class `monochromatic`. * It will work if you replace every `fill="#..."` in the SVG with `class="colorX shape"` or `class="colorX background"` (with X depending on the color and as high as the number of colors) * and, in the diff --git a/frontend/components/bc/BcCurrencySelection.vue b/frontend/components/bc/BcCurrencySelection.vue index 57940f67e..4db775158 100644 --- a/frontend/components/bc/BcCurrencySelection.vue +++ b/frontend/components/bc/BcCurrencySelection.vue @@ -18,7 +18,7 @@ const { currency, withLabel, setCurrency } = useCurrency() @update:model-value="(currency: Currency) => setCurrency(currency)" >