diff --git a/services/web/app/views/subscriptions/_plans_page_mixins.pug b/services/web/app/views/subscriptions/_plans_page_mixins.pug index ff89f50853..1750a4e983 100644 --- a/services/web/app/views/subscriptions/_plans_page_mixins.pug +++ b/services/web/app/views/subscriptions/_plans_page_mixins.pug @@ -167,17 +167,16 @@ mixin currency_dropdown mixin plan_switch(location) ul.nav.nav-pills li(ng-class="{'active': ui.view == 'monthly'}") - a.btn.btn-default-outline( - href="#" + button.btn-default-outline( ng-click="switchToMonthly($event,'" + location + "')" ) #{translate("monthly")} li(ng-class="{'active': ui.view == 'annual'}") - a.btn.btn-default-outline( + button.btn-default-outline( href="#" ng-click="switchToAnnual($event,'" + location + "')" ) #{translate("annual")} li(ng-class="{'active': ui.view == 'student'}") - a.btn.btn-default-outline( + button.btn-default-outline( href="#" ng-click="switchToStudent($event,'" + location + "')" ) #{translate("special_price_student")} diff --git a/services/web/app/views/subscriptions/plans-marketing/_mixins.pug b/services/web/app/views/subscriptions/plans-marketing/_mixins.pug index 1b857ce391..e49787b814 100644 --- a/services/web/app/views/subscriptions/plans-marketing/_mixins.pug +++ b/services/web/app/views/subscriptions/plans-marketing/_mixins.pug @@ -201,13 +201,9 @@ mixin currency_dropdown mixin plan_switch(location) ul.nav.nav-pills(class=(location === 'card' ? "above-cards" : "")) li.active(data-ol-view-tab='monthly') - a.btn.btn-default-outline( - href="#" - ) #{translate("monthly")} + button.btn-default-outline #{translate("monthly")} li(data-ol-view-tab='annual' class=(location === 'card' ? "annual-saving-tooltip-container" : "")) - a.btn.btn-default-outline( - href="#" - ) #{translate("annual")} + button.btn-default-outline #{translate("annual")} if (location === 'card') .tooltip.in.bottom.annual-saving-tooltip( role="tooltip" @@ -219,9 +215,7 @@ mixin plan_switch(location) span(hidden data-ol-view="annual") #{translate("saving_20_percent")} span(hidden data-ol-view="student") #{translate("save_20_percent_by_paying_annually")} li(data-ol-view-tab='student') - a.btn.btn-default-outline( - href="#" - ) #{translate("special_price_student")} + button.btn-default-outline #{translate("special_price_student")} mixin allCardsAndControls(controlsRowSpaced, listLocation) - var location = listLocation ? 'card_' + listLocation : 'card' diff --git a/services/web/app/views/subscriptions/plans-marketing/v2/_cards_controls_tables.pug b/services/web/app/views/subscriptions/plans-marketing/v2/_cards_controls_tables.pug index 71d5a12cfe..4134552be2 100644 --- a/services/web/app/views/subscriptions/plans-marketing/v2/_cards_controls_tables.pug +++ b/services/web/app/views/subscriptions/plans-marketing/v2/_cards_controls_tables.pug @@ -10,9 +10,7 @@ include ./_mixins event-tracking-trigger="click" event-segmentation='{"button": "individual", "plans-page-layout-v2-annual": "new-plans-page"}' ) - a.btn.btn-default-outline( - href="#" - ) #{translate("indvidual_plans")} + button.btn.btn-default-outline #{translate("indvidual_plans")} li.plans-v2-top-switch-group( data-ol-plans-v2-view-tab='group' event-tracking="plans-page-toggle-plan" @@ -20,7 +18,7 @@ include ./_mixins event-tracking-trigger="click" event-segmentation='{"button": "group", "plans-page-layout-v2-annual": "new-plans-page"}' ) - a.btn.btn-default-outline( + button.btn.btn-default-outline( href="#" ) span #{translate("group_plans")} @@ -32,7 +30,7 @@ include ./_mixins event-tracking-trigger="click" event-segmentation='{"button": "student", "plans-page-layout-v2-annual": "new-plans-page"}' ) - a.btn.btn-default-outline( + button.btn.btn-default-outline( href="#" ) #{translate("student_plans")} diff --git a/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-main.js b/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-main.js index f072babc1b..cc38653226 100644 --- a/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-main.js +++ b/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-main.js @@ -58,7 +58,7 @@ function setUpTabSwitching() { document.querySelectorAll('[data-ol-plans-v2-view-tab]').forEach(el => { const viewTab = el.getAttribute('data-ol-plans-v2-view-tab') - el.querySelector('a').addEventListener('click', function (e) { + el.querySelector('button').addEventListener('click', function (e) { e.preventDefault() eventTracking.send( 'subscription-funnel', diff --git a/services/web/frontend/js/pages/user/subscription/plans.js b/services/web/frontend/js/pages/user/subscription/plans.js index da78d7088a..9bc4a3ae8d 100644 --- a/services/web/frontend/js/pages/user/subscription/plans.js +++ b/services/web/frontend/js/pages/user/subscription/plans.js @@ -28,7 +28,7 @@ function setUpViewSwitching(liEl) { const plansPageV2SplitTestVariant = getMeta('ol-splitTestVariants')?.[PLANS_PAGE_LAYOUT_V2_ANNUAL] ?? 'default' const view = liEl.getAttribute('data-ol-view-tab') - liEl.querySelector('a').addEventListener('click', function (e) { + liEl.querySelector('button').addEventListener('click', function (e) { e.preventDefault() eventTracking.send('subscription-funnel', 'plans-page', `${view}-prices`) eventTracking.sendMB('plans-page-toggle', { diff --git a/services/web/frontend/stylesheets/app/plans-v2.less b/services/web/frontend/stylesheets/app/plans-v2.less index 51530e8aef..f1c6952778 100644 --- a/services/web/frontend/stylesheets/app/plans-v2.less +++ b/services/web/frontend/stylesheets/app/plans-v2.less @@ -48,7 +48,7 @@ border-bottom-right-radius: @plans-v2-top-switch-item-border-radius; } - a { + button { padding: 4px 16px; height: 100%; @@ -69,7 +69,7 @@ &.active { background-color: @ol-blue-gray-4; - a.btn-default-outline { + button.btn-default-outline { color: @white; } } @@ -106,7 +106,7 @@ &.plans-v2-top-switch-individual, &.plans-v2-top-switch-student { - a { + button { display: flex; align-items: center; justify-content: center; @@ -114,7 +114,7 @@ } } - a { + button { white-space: unset; padding: 4px 8px; font-size: 14px; diff --git a/services/web/frontend/stylesheets/app/plans.less b/services/web/frontend/stylesheets/app/plans.less index f9a2729861..ce4beb5815 100644 --- a/services/web/frontend/stylesheets/app/plans.less +++ b/services/web/frontend/stylesheets/app/plans.less @@ -237,7 +237,7 @@ @media (max-width: @screen-xs-max) { .plans ul.nav-pills { li { - a { + button { font-size: @font-size-small; padding: 8px 10px; } diff --git a/services/web/frontend/stylesheets/components/navs-ol.less b/services/web/frontend/stylesheets/components/navs-ol.less index 7062ff6b99..2312d5b5e7 100644 --- a/services/web/frontend/stylesheets/components/navs-ol.less +++ b/services/web/frontend/stylesheets/components/navs-ol.less @@ -1,6 +1,6 @@ .nav-pills { > li { - > a { + > button { border-radius: @btn-border-radius-base; } } diff --git a/services/web/frontend/stylesheets/components/navs.less b/services/web/frontend/stylesheets/components/navs.less index 3758a746b8..9d0e408502 100755 --- a/services/web/frontend/stylesheets/components/navs.less +++ b/services/web/frontend/stylesheets/components/navs.less @@ -119,7 +119,7 @@ float: left; // Links rendered as pills - > a { + > button { border-radius: @nav-pills-border-radius; border: 2px solid @nav-pills-link-color; color: @nav-pills-link-color; @@ -135,7 +135,7 @@ } // Active state - &.active > a { + &.active > button { &, &:hover, &:focus {