diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss index 4a1e82318..46f0aaab7 100644 --- a/app/assets/stylesheets/dashboard.scss +++ b/app/assets/stylesheets/dashboard.scss @@ -279,33 +279,8 @@ } } -.toggles { - text-align: center; -} - -.toggles button { - display: inline-block; - padding: 2px 8px; - margin: 8px; - font-size: 1.3em; - border-radius: 2px; - border: 1px solid transparent; - font-family: $helvetica-condensed; - font-stretch: condensed; - top: 18px; - font-weight: 600; - background-color: transparent; - - &:focus { - outline: 0; - } - - &.selected { - background: #cfd7ff; - color: #0a0a0a !important; - border: 1px solid #4e57ef; - box-shadow: 3px 4px 0px #4e57ef; - } +.crayons-tabs--analytics { + justify-content: flex-end; } .graphs { diff --git a/app/javascript/analytics/dashboard.js b/app/javascript/analytics/dashboard.js index 3a6a16a7c..52faf5e11 100644 --- a/app/javascript/analytics/dashboard.js +++ b/app/javascript/analytics/dashboard.js @@ -1,13 +1,13 @@ import { callHistoricalAPI, callReferrersAPI } from './client'; function resetActive(activeButton) { - const buttons = document.getElementsByClassName('timerange-button'); + const buttons = document.querySelectorAll('.crayons-tabs--analytics .crayons-tabs__item'); for (let i = 0; i < buttons.length; i += 1) { const button = buttons[i]; - button.classList.remove('selected'); + button.classList.remove('crayons-tabs__item--current'); } - activeButton.classList.add('selected'); + activeButton.classList.add('crayons-tabs__item--current'); } function sumAnalytics(data, key) { diff --git a/app/views/shared/_stats.html.erb b/app/views/shared/_stats.html.erb index c1d2b7744..91e925590 100644 --- a/app/views/shared/_stats.html.erb +++ b/app/views/shared/_stats.html.erb @@ -1,7 +1,7 @@ -
- - - +
+ + +