diff --git a/frontend/.eslintrc b/frontend/.eslintrc deleted file mode 100644 index daecf0806..000000000 --- a/frontend/.eslintrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "extends": ["@nuxtjs/eslint-config-typescript"] -} diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs deleted file mode 100644 index 873f80fe6..000000000 --- a/frontend/.eslintrc.cjs +++ /dev/null @@ -1,4 +0,0 @@ -module.exports = { - root: true, - extends: ['@nuxtjs/eslint-config-typescript'] -} diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json deleted file mode 100644 index 0320026ae..000000000 --- a/frontend/.eslintrc.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "env": { - "browser": true, - "es2021": true - }, - "extends": [ - "standard-with-typescript", - "plugin:vue/vue3-essential" - ], - "parserOptions": { - "ecmaVersion": "latest", - "sourceType": "module" - }, - "plugins": [ - "vue" - ], - "rules": { - } -} diff --git a/frontend/assets/css/colors.scss b/frontend/assets/css/colors.scss index 71e6b1c8d..1ad281aba 100644 --- a/frontend/assets/css/colors.scss +++ b/frontend/assets/css/colors.scss @@ -61,6 +61,7 @@ --text-color-inverted: var(--light-grey); --text-color-disabled: var(--grey); --text-color-discreet: var(--dark-grey); + --text-color--error: var(--flashy-red); --button-color-active: var(--primary-orange); --button-color-hover: var(--primary-orange-hover); @@ -73,6 +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: var(--grey-4); --button-secondary-border-color: var(--light-grey-7); @@ -176,10 +178,12 @@ --button-secondary-color: var(--light-grey); --button-secondary-hover-color: var(--light-black); + --button-secondary-background-color--hover: var(--light-black); --button-secondary-background-color: var(--very-dark-grey); --button-secondary-border-color: var(--dark-grey); --checkbox-background-color: var(--light-grey); + --checkbox-border-color: var(--dark-grey); --container-background: var(--light-black); --container-color: var(--grey-4); diff --git a/frontend/assets/css/prime.scss b/frontend/assets/css/prime.scss index df68a3d0d..261fd64a5 100644 --- a/frontend/assets/css/prime.scss +++ b/frontend/assets/css/prime.scss @@ -18,6 +18,13 @@ border: 1px solid var(--button-color-active); border-radius: var(--border-radius); + display: inline-flex; + flex-grow: 0; + justify-content: center; + align-items: center; + + transition: background-color 0.2s, color 0.2s, border-color 0.2s; + &:not([data-secondary]) { color: var(--primary-contrast-color); background: var(--button-color-active); @@ -29,12 +36,6 @@ border-color: var(--button-secondary-border-color); } - display: inline-flex; - flex-grow: 0; - justify-content: center; - align-items: center; - - transition: background-color 0.2s, color 0.2s, border-color 0.2s; &.p-disabled { color: var(--button-text-color-disabled); @@ -172,6 +173,7 @@ width: 20px; height: 20px; border-radius: var(--border-radius); + border: 1px solid var(--checkbox-border-color); background: var(--checkbox-background-color); &.p-highlight:not(:hover) { background: var(--primary-color); @@ -487,10 +489,10 @@ border: 1px solid var(--input-border-color); color: var(--input-active-text-color); border-radius: 0 0 var(--border-radius) var(--border-radius); + transform: translateY(-1px); &.header { border-radius: var(--border-radius); } - transform: translateY(-1px); &.table { background: var(--background-color); } diff --git a/frontend/components/bc/BcButton.vue b/frontend/components/bc/BcButton.vue new file mode 100644 index 000000000..bb5a711d2 --- /dev/null +++ b/frontend/components/bc/BcButton.vue @@ -0,0 +1,68 @@ + + + + + \ No newline at end of file diff --git a/frontend/components/bc/BcFaq.vue b/frontend/components/bc/BcFaq.vue index 0378bb1ad..f62236f01 100644 --- a/frontend/components/bc/BcFaq.vue +++ b/frontend/components/bc/BcFaq.vue @@ -11,6 +11,7 @@ const { t: $t } = useI18n() const questions = computed(() => { const list = [] + // eslint-disable-next-line no-constant-condition while (true) { const path: string = `${props.translationPath}.${(list.length)}` const question = tD($t, `${path}.question`) diff --git a/frontend/components/bc/BcTooltip.vue b/frontend/components/bc/BcTooltip.vue index c8685baac..4c2a65bd3 100644 --- a/frontend/components/bc/BcTooltip.vue +++ b/frontend/components/bc/BcTooltip.vue @@ -13,8 +13,12 @@ interface Props { scrollContainer?: string // query selector for scrollable parent container dontOpenPermanently?: boolean hoverDelay?: number + tooltipWidth?: `${number}px` | `${number}%` + tooltipTextAlign?: 'left' | 'center' | 'right' } +const toolTipTextAlignWithDefault = computed(() => props.tooltipTextAlign || 'center') + const props = defineProps() const bcTooltipOwner = ref(null) const bcTooltip = ref(null) @@ -222,14 +226,14 @@ onUnmounted(() => { > -
+
@@ -296,7 +300,7 @@ onUnmounted(() => { flex-wrap: wrap; opacity: 0; transition: opacity 1s; - text-align: center; + text-align: v-bind(toolTipTextAlignWithDefault); padding: 9px 12px; border-radius: var(--border-radius); background: var(--tt-bg-color); diff --git a/frontend/components/bc/BcTranslation.vue b/frontend/components/bc/BcTranslation.vue new file mode 100644 index 000000000..a0d47ef38 --- /dev/null +++ b/frontend/components/bc/BcTranslation.vue @@ -0,0 +1,55 @@ + + + + + \ No newline at end of file diff --git a/frontend/components/bc/NetworkSelector.vue b/frontend/components/bc/NetworkSelector.vue index 00f4de475..bc09ee497 100644 --- a/frontend/components/bc/NetworkSelector.vue +++ b/frontend/components/bc/NetworkSelector.vue @@ -1,7 +1,7 @@ + + + + \ No newline at end of file diff --git a/frontend/components/bc/form/BcFormRow.vue b/frontend/components/bc/form/BcFormRow.vue new file mode 100644 index 000000000..3fcd8f386 --- /dev/null +++ b/frontend/components/bc/form/BcFormRow.vue @@ -0,0 +1,23 @@ + + + + + \ No newline at end of file diff --git a/frontend/components/bc/header/MainHeader.vue b/frontend/components/bc/header/MainHeader.vue index fca572083..d540a4cd9 100644 --- a/frontend/components/bc/header/MainHeader.vue +++ b/frontend/components/bc/header/MainHeader.vue @@ -40,6 +40,7 @@ const rate = computed(() => { if (fiat && rates.value?.[fiat]) { return rates.value[fiat] } + return undefined }) const currentEpoch = computed(() => latestState.value?.current_slot !== undefined ? slotToEpoch(latestState.value.current_slot) : undefined) @@ -169,8 +170,8 @@ $smallHeaderThreshold: 1024px; } .minimalist { - @include common(); color: var(--header-top-font-color); + @include common(); @media (max-width: $mobileHeaderThreshold) { .top-background { height: 36px; @@ -179,33 +180,35 @@ $smallHeaderThreshold: 1024px; } .complete { - @include common(); top: -1px; // needed for some reason to perfectly match Figma border-bottom: 1px solid var(--container-border-color); + background-color: var(--container-background); + @include common(); &.hide-because-it-is-unfinished { // TODO: once the searchbar is enabled in production, delete this block (because border-bottom is always needed, due to the fact that the lower header is always visible (it contains the search bar when the screeen is narrow, otherwise the logo and mega menu)) @media (max-width: $smallHeaderThreshold) { border-bottom: none; } } - background-color: var(--container-background); .rows { position: relative; display: grid; grid-template-columns: 0px min-content min-content auto min-content 0px; // the 0px are paddings, useless now but they exist in the structure of the grid so ready to be set if they are wanted one day grid-template-rows: var(--navbar-height) minmax(var(--navbar2-height), min-content); + width: var(--content-width); + color: var(--header-top-font-color); + font-family: var(--main_header_font_family); + font-size: var(--main_header_font_size); + font-weight: var(--main_header_font_weight); + color: var(--header-top-font-color); @media (max-width: $smallHeaderThreshold) { grid-template-columns: 0px min-content auto min-content 0px; // same remark about the 0px grid-template-rows: var(--navbar-height) min-content; } - color: var(--header-top-font-color); @mixin bottom-cell($row) { color: var(--container-color); grid-row: $row; } - font-family: var(--main_header_font_family); - font-size: var(--main_header_font_size); - font-weight: var(--main_header_font_weight); .bold { font-weight: var(--main_header_bold_font_weight); } @@ -223,6 +226,7 @@ $smallHeaderThreshold: 1024px; } .blockchain-info { + margin-right: var(--padding-large); @media (min-width: $smallHeaderThreshold) { grid-row: 1; grid-column: 2; @@ -231,7 +235,6 @@ $smallHeaderThreshold: 1024px; @media (max-width: $smallHeaderThreshold) { display: none; } - margin-right: var(--padding-large); .network-icon { vertical-align: middle; height: 18px; @@ -251,11 +254,11 @@ $smallHeaderThreshold: 1024px; .bar { position: relative; width: 100%; + margin-top: var(--content-margin); + margin-bottom: var(--content-margin); @media (min-width: $smallHeaderThreshold) { max-width: 460px; } - margin-top: var(--content-margin); - margin-bottom: var(--content-margin); } } @@ -263,10 +266,10 @@ $smallHeaderThreshold: 1024px; user-select: none; grid-row: 1; grid-column: 5; + justify-content: right; @media (max-width: $smallHeaderThreshold) { grid-column: 4; } - justify-content: right; .currency { color: var(--header-top-font-color); @@ -295,11 +298,11 @@ $smallHeaderThreshold: 1024px; } } .burger { + height: 24px; + cursor: pointer; @media (min-width: $smallHeaderThreshold) { display: none; } - height: 24px; - cursor: pointer; } } diff --git a/frontend/components/bc/input/BcInputCheckbox.vue b/frontend/components/bc/input/BcInputCheckbox.vue new file mode 100644 index 000000000..d422901ae --- /dev/null +++ b/frontend/components/bc/input/BcInputCheckbox.vue @@ -0,0 +1,58 @@ + + + + + \ No newline at end of file diff --git a/frontend/components/bc/input/BcInputError.vue b/frontend/components/bc/input/BcInputError.vue new file mode 100644 index 000000000..0cd4ddd92 --- /dev/null +++ b/frontend/components/bc/input/BcInputError.vue @@ -0,0 +1,34 @@ + + + + + \ No newline at end of file diff --git a/frontend/components/bc/input/BcInputText.vue b/frontend/components/bc/input/BcInputText.vue new file mode 100644 index 000000000..a41eb0f2b --- /dev/null +++ b/frontend/components/bc/input/BcInputText.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/frontend/components/bc/searchbar/CategorySelectors.vue b/frontend/components/bc/searchbar/CategorySelectors.vue index 6b17b3adb..013b4a3d6 100644 --- a/frontend/components/bc/searchbar/CategorySelectors.vue +++ b/frontend/components/bc/searchbar/CategorySelectors.vue @@ -1,12 +1,12 @@