diff --git a/app/assets/stylesheets/tpi/_mq_beta_scores.scss b/app/assets/stylesheets/tpi/_mq_beta_scores.scss index 4fc6cb54e..247d19e08 100644 --- a/app/assets/stylesheets/tpi/_mq_beta_scores.scss +++ b/app/assets/stylesheets/tpi/_mq_beta_scores.scss @@ -7,6 +7,10 @@ flex-direction: column; } + &__container { + display: flex; + } + &__text { color: white; line-height: 40px; @@ -15,7 +19,7 @@ &__divider { margin: 0 15px 0 5px; - border-right: 1px solid rgba(255, 255, 255, 0.5); + border-right: 1px solid rgba(255, 255, 255, 0.2); @include until($desktop) { display: none; @@ -36,5 +40,9 @@ &__download-button { flex-grow: 4; text-align: right; + + @include until($desktop) { + margin-bottom: 10px; + } } } \ No newline at end of file diff --git a/app/assets/stylesheets/tpi/pages/sectors-index.scss b/app/assets/stylesheets/tpi/pages/sectors-index.scss index 5b1a93545..5fbb6a9d2 100644 --- a/app/assets/stylesheets/tpi/pages/sectors-index.scss +++ b/app/assets/stylesheets/tpi/pages/sectors-index.scss @@ -11,6 +11,14 @@ color: white; line-height: 40px; margin-right: 10px; + + &.no-margin { + margin-right: 0; + } + + &.weight-normal { + font-family: $family-sans-serif; + } } @include until($desktop) { diff --git a/app/javascript/components/tpi/MqBetaModal.jsx b/app/javascript/components/tpi/MqBetaModal.jsx index 8b9d943ff..a109d8687 100644 --- a/app/javascript/components/tpi/MqBetaModal.jsx +++ b/app/javascript/components/tpi/MqBetaModal.jsx @@ -1,5 +1,5 @@ /* eslint-disable operator-linebreak */ -import React, { useState } from 'react'; +import React, { useState, useRef, useEffect } from 'react'; import PropTypes from 'prop-types'; import CustomModal from './Modal'; import { OverlayProvider } from '@react-aria/overlays'; @@ -19,6 +19,15 @@ const MqBetaModal = ({ enabled, page }) => { JSON.parse(isDismissed) || false ); + const mainButtonRef = useRef(); + + // Put focus on the Proceed button on render + useEffect(() => { + if (mainButtonRef.current) { + mainButtonRef.current.focus(); + } + }, [mainButtonRef]); + if (popupDismissed || hasBeenShownInPage) { return null; } @@ -84,6 +93,7 @@ const MqBetaModal = ({ enabled, page }) => { type="button" className="button is-primary" onClick={handleOnRequestClose} + ref={mainButtonRef} > Proceed diff --git a/app/views/tpi/companies/show.html.erb b/app/views/tpi/companies/show.html.erb index 9e6ebe01d..1051be08a 100644 --- a/app/views/tpi/companies/show.html.erb +++ b/app/views/tpi/companies/show.html.erb @@ -32,7 +32,7 @@
<%= link_to user_download_all_tpi_sectors_path, class: 'button is-primary is-pulled-right with-icon with-border' do %> download icon - Download All sectors data + Download data <% end %>
diff --git a/app/views/tpi/sectors/index.html.erb b/app/views/tpi/sectors/index.html.erb index bac205cf2..af25e1374 100644 --- a/app/views/tpi/sectors/index.html.erb +++ b/app/views/tpi/sectors/index.html.erb @@ -43,7 +43,7 @@
<%= link_to user_download_all_tpi_sectors_path, class: 'button is-primary with-icon with-border' do %> download icon - Download All sectors data + Download data <% end %>
diff --git a/app/views/tpi/sectors/show.html.erb b/app/views/tpi/sectors/show.html.erb index ae675c307..8e3f00fee 100644 --- a/app/views/tpi/sectors/show.html.erb +++ b/app/views/tpi/sectors/show.html.erb @@ -35,7 +35,7 @@
<%= link_to user_download_tpi_sector_path(@sector), class: 'button is-primary is-pulled-right with-icon with-border' do %> download icon - Download sector data + Download data <% end %>
diff --git a/app/views/tpi/shared/_mq_beta_scores.html.erb b/app/views/tpi/shared/_mq_beta_scores.html.erb index 623b613f1..6ff18295a 100644 --- a/app/views/tpi/shared/_mq_beta_scores.html.erb +++ b/app/views/tpi/shared/_mq_beta_scores.html.erb @@ -1,7 +1,7 @@ -
+
MQ Methodology <%= link_to disable_beta_data_tpi_mq_assessments_path, - class: class_names('button', 'is-primary', 'with-border': !session[:enable_beta_mq_assessments]), + class: class_names('button', 'is-primary', 'no-margin', 'weight-normal': session[:enable_beta_mq_assessments], 'with-border': !session[:enable_beta_mq_assessments]), style: "min-width: 0;" do %> Current <% end %>