From 3c4ec9ab1ff58b209aa00e0b1bffcbf44a0407e7 Mon Sep 17 00:00:00 2001
From: Rachid Mrad <rachid.mrad@ecstech.com>
Date: Wed, 10 Jan 2024 18:39:01 -0500
Subject: [PATCH] CSS cleanup

---
 src/registrar/assets/sass/_theme/_tables.scss | 25 +++++++++++--------
 .../assets/sass/_theme/_usa-modal.scss        |  7 ------
 src/registrar/assets/sass/_theme/styles.scss  |  1 -
 src/registrar/templates/home.html             | 20 ++++++++-------
 4 files changed, 26 insertions(+), 27 deletions(-)
 delete mode 100644 src/registrar/assets/sass/_theme/_usa-modal.scss

diff --git a/src/registrar/assets/sass/_theme/_tables.scss b/src/registrar/assets/sass/_theme/_tables.scss
index ec4ae3cd1..84c4791e5 100644
--- a/src/registrar/assets/sass/_theme/_tables.scss
+++ b/src/registrar/assets/sass/_theme/_tables.scss
@@ -26,16 +26,21 @@
     padding-bottom: units(2px);
   }
 
-  th.action-col-custom-width {
-    width: 24.25%;
-  }
-
-  // Fix margins in mobile view
-  @include at-media('tablet') {
-    td.tablet-margin-top-2 {
-        margin-top: 16px;
-    }
-  }
+  // Ticket #1510
+  // @include at-media('desktop') {
+  //   th:first-child {
+  //     width: 220px;
+  //   }
+  //   th:nth-child(2) {
+  //     width: 175px;
+  //   }
+  //   th:nth-child(3) {
+  //     width: 130px;
+  //   }
+  //   th:nth-child(5) {
+  //     width: 130px;
+  //   }
+  // }
 }
 
 .dotgov-table {
diff --git a/src/registrar/assets/sass/_theme/_usa-modal.scss b/src/registrar/assets/sass/_theme/_usa-modal.scss
deleted file mode 100644
index 68a46a303..000000000
--- a/src/registrar/assets/sass/_theme/_usa-modal.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@use "cisa_colors" as *;
-@use "uswds-core" as *;
-
-.usa-modal.wider-modal {
-    width: 40% !important;
-    max-width: 40% !important;
-}
diff --git a/src/registrar/assets/sass/_theme/styles.scss b/src/registrar/assets/sass/_theme/styles.scss
index 499f9a806..8a2e1d2d3 100644
--- a/src/registrar/assets/sass/_theme/styles.scss
+++ b/src/registrar/assets/sass/_theme/styles.scss
@@ -17,7 +17,6 @@
 @forward "tables";
 @forward "sidenav";
 @forward "register-form";
-@forward "usa-modal";
 
 /*--------------------------------------------------
 --- Admin ---------------------------------*/
diff --git a/src/registrar/templates/home.html b/src/registrar/templates/home.html
index d65ffa152..9067c7927 100644
--- a/src/registrar/templates/home.html
+++ b/src/registrar/templates/home.html
@@ -9,7 +9,7 @@
 {% if user.is_authenticated %}
 {# the entire logged in page goes here #}
 
-<div class="tablet:grid-offset-1 desktop:grid-offset-1">
+<div class="tablet:grid-col-11 desktop:grid-col-10 tablet:grid-offset-1">
   <h1>Manage your domains</h2>
 
   <p class="margin-top-4">
@@ -31,7 +31,7 @@
     {% endif %}
   </p>
 
-  <section class="section--outlined tablet:grid-col-11 desktop:grid-col-10">
+  <section class="section--outlined">
     <h2>Domains</h2>
     {% if domains %}
     <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked">
@@ -44,13 +44,14 @@
           <th 
             scope="col" 
             role="columnheader" 
-            {% if has_deletable_applications %} class="action-col-custom-width" {% else %} class="width-15" {% endif %}
           >
             <span class="usa-sr-only">Action</span>
           </th>
+          {% comment %} 
+          #1510
           {% if has_deletable_applications %}
           <th></th>
-          {% endif %}
+          {% endif %} {% endcomment %}
         </tr>
       </thead>
       <tbody>
@@ -105,7 +106,7 @@
     {% endif %}
   </section>
 
-  <section class="section--outlined tablet:grid-col-11 desktop:grid-col-10">
+  <section class="section--outlined">
     <h2>Domain requests</h2>
     {% if domain_applications %}
     <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked">
@@ -137,7 +138,7 @@
           <td data-label="Status">{{ application.get_status_display }}</td>
           <td>
             {% if application.status == "started" or application.status == "action needed" or application.status == "withdrawn"  %}
-              <a href="{% url 'edit-application' application.pk %}">
+              <a href="{% url 'edit-application' application.pk %}" role="button">
               <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
                 <use xlink:href="{%static 'img/sprite.svg'%}#edit"></use>
               </svg>
@@ -152,12 +153,13 @@
             </a>
           </td>
           {% if has_deletable_applications %}
-          <td class="tablet-margin-top-2">
+          <td>
             {% if application.status == "started" or application.status == "withdrawn"  %}
               <a
+                role="button"
                 id="button-toggle-delete-domain-alert-{{ forloop.counter }}"
                 href="#toggle-delete-domain-alert-{{ forloop.counter }}"
-                class="usa-button--unstyled remove-text-no-underline"
+                class="usa-button--unstyled text-no-underline"
                 aria-controls="toggle-delete-domain-alert-{{ forloop.counter }}"
                 data-open-modal
               >
@@ -168,7 +170,7 @@
               </a>
 
               <div
-                class="usa-modal wider-modal"
+                class="usa-modal"
                 id="toggle-delete-domain-alert-{{ forloop.counter }}"
                 aria-labelledby="Are you sure you want to continue?"
                 aria-describedby="User will be removed"