From f52c36ef12e62e3afb1f243f4d44c8bb0b410970 Mon Sep 17 00:00:00 2001
From: Rachid Mrad <rachid.mrad@ecstech.com>
Date: Wed, 2 Oct 2024 12:34:57 -0400
Subject: [PATCH] layout revisions

---
 src/registrar/assets/js/get-gov.js            | 16 +++-----------
 .../includes/domain_requests_table.html       | 21 +++++++++----------
 2 files changed, 13 insertions(+), 24 deletions(-)

diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js
index 9d5432259..509d7632e 100644
--- a/src/registrar/assets/js/get-gov.js
+++ b/src/registrar/assets/js/get-gov.js
@@ -1498,16 +1498,6 @@ class DomainsTable extends LoadTableBase {
   }
 }
 
-function showExportElement(element) {
-  console.log(`Showing element: ${element.id}`);
-  element.style.display = 'block'; 
-}
-
-function hideExportElement(element) {
-  console.log(`Hiding element: ${element.id}`); 
-  element.style.display = 'none'; 
-}
-
 class DomainRequestsTable extends LoadTableBase {
 
   constructor() {
@@ -1516,13 +1506,13 @@ class DomainRequestsTable extends LoadTableBase {
   
   toggleExportButton(requests) {
     console.log("Toggling Export Button Visibility");
-    const exportButton = document.getElementById('export-csv-button'); 
+    const exportButton = document.getElementById('export-csv'); 
     if (exportButton) {
         console.log(`Current requests length: ${requests.length}`); 
         if (requests.length > 0) {
-            showExportElement(exportButton);
+            showElement(exportButton);
         } else {
-            hideExportElement(exportButton);
+            hideElement(exportButton);
         }
         console.log(exportButton);
     }
diff --git a/src/registrar/templates/includes/domain_requests_table.html b/src/registrar/templates/includes/domain_requests_table.html
index 2e0211811..9688aca46 100644
--- a/src/registrar/templates/includes/domain_requests_table.html
+++ b/src/registrar/templates/includes/domain_requests_table.html
@@ -5,21 +5,19 @@
 <span id="get_domain_requests_json_url" class="display-none">{{url}}</span>
 
 <section class="section-outlined domain-requests{% if portfolio %} section-outlined--border-base-light{% endif %}" id="domain-requests">
-    <div class="grid-row">
+    <div class="section-outlined__header margin-bottom-3 {% if not portfolio %} section-outlined__header--no-portfolio justify-content-space-between{% else %} grid-row{% endif %}">
         {% if not portfolio %}
-        <div class="mobile:grid-col-12 desktop:grid-col-6">
-            <h2 id="domain-requests-header" class="flex-6">Domain requests</h2>
-        </div>
+            <h2 id="domain-requests-header" class="display-inline-block">Domain requests</h2>
         {% else %}
         <!-- Embedding the portfolio value in a data attribute -->
         <span id="portfolio-js-value" data-portfolio="{{ portfolio.id }}"></span>
         {% endif %}
 
-        <div class="mobile:grid-col-12 desktop:grid-col-6 display-flex flex-align-end flex-justify-end">
-            <section aria-label="Domain requests search component" class="flex-6 margin-y-2">
+        <div class="section-outlined__search {% if portfolio %} mobile:grid-col-12 desktop:grid-col-6{% endif %} {% if is_widescreen_mode %} section-outlined__search--widescreen {% endif %}">
+            <section aria-label="Domain requests search component" class="margin-top-2">
                 <form class="usa-search usa-search--small" method="POST" role="search">
                     {% csrf_token %}
-                    <button class="usa-button usa-button--unstyled margin-right-2 domain-requests__reset-search display-none" type="button">
+                    <button class="usa-button usa-button--unstyled margin-right-3 domain-requests__reset-search display-none" type="button">
                         <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
                             <use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
                         </svg>
@@ -50,13 +48,14 @@
                     </button>
                 </form>
             </section>
+        </div>
+        <div class="section-outlined__utility-button mobile-lg:padding-right-105 {% if portfolio %} mobile:grid-col-12 desktop:grid-col-6 desktop:padding-left-3{% endif %}" id="export-csv">
 
-            <section aria-label="Domain Requests report component" class="margin-top-205 margin-left-2">
-              <a id="export-csv-button" href="{% url 'export_data_type_requests' %}" class="usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right" role="button">
+            <section aria-label="Domain Requests report component" class="margin-top-205">
+              <a href="{% url 'export_data_type_requests' %}" class="usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right" role="button">
                   <svg class="usa-icon usa-icon--big" aria-hidden="true" focusable="false" role="img" width="24" height="24">
                       <use xlink:href="{% static 'img/sprite.svg' %}#file_download"></use>
-                  </svg>
-                  Export as CSV
+                  </svg>Export as CSV
               </a>
           </section>
         </div>