Merge pull request #432 from Vizzuality:fix/beta-level-style-feedback

Add focus on the Proceed button on render
Vizzuality · Aug 18, 2023 · ea19057 · ea19057
2 parents 820b591 + e0fc0a7
commit ea19057
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 7 deletions.
diff --git 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;
+    }
   }
 }
diff --git 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
@@ -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
             </button>

diff --git a/app/views/tpi/companies/show.html.erb b/app/views/tpi/companies/show.html.erb
@@ -32,7 +32,7 @@
         <div class="mq-beta-scores__download-button">
           <%= link_to user_download_all_tpi_sectors_path, class: 'button is-primary is-pulled-right with-icon with-border' do %>
             <img src="<%= asset_path 'icons/download.svg'%>" alt="download icon" />
-            Download All sectors data
+            Download data
           <% end %>
         </div>
       </div>

diff --git a/app/views/tpi/sectors/index.html.erb b/app/views/tpi/sectors/index.html.erb
@@ -43,7 +43,7 @@
         <div class="mq-beta-scores__download-button">
           <%= link_to user_download_all_tpi_sectors_path, class: 'button is-primary with-icon with-border' do %>
             <img src="<%= asset_path 'icons/download.svg'%>" alt="download icon" />
-            Download All sectors data
+            Download data
           <% end %>
         </div>
       </div>

diff --git a/app/views/tpi/sectors/show.html.erb b/app/views/tpi/sectors/show.html.erb
@@ -35,7 +35,7 @@
         <div class="mq-beta-scores__download-button">
           <%= link_to user_download_tpi_sector_path(@sector), class: 'button is-primary is-pulled-right with-icon with-border' do %>
             <img src="<%= asset_path 'icons/download.svg'%>" alt="download icon" />
-            Download sector data
+            Download data
           <% end %>
         </div>
       </div>

diff --git a/app/views/tpi/shared/_mq_beta_scores.html.erb b/app/views/tpi/shared/_mq_beta_scores.html.erb
@@ -1,7 +1,7 @@
-<div>
+<div class="mq-beta-scores__container">
   <span class="mq-beta-scores__text">MQ Methodology</span>
   <%= 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 %>