From cbdf7636379d0cabf77c0f147f9cdccc0610677b Mon Sep 17 00:00:00 2001
From: Rachid Mrad <rachid.mrad@ecstech.com>
Date: Fri, 6 Sep 2024 12:54:36 -0400
Subject: [PATCH] CSS done

---
 src/registrar/assets/js/get-gov.js            | 17 ++++++++--
 .../assets/sass/_theme/_accordions.scss       | 12 +++++--
 src/registrar/assets/sass/_theme/_base.scss   | 17 ++++++++++
 .../assets/sass/_theme/_buttons.scss          | 13 +++-----
 src/registrar/assets/sass/_theme/_header.scss |  6 ++++
 src/registrar/context_processors.py           | 31 ++++++++---------
 src/registrar/templates/domain_dsdata.html    |  2 +-
 .../templates/domain_nameservers.html         |  2 +-
 .../domain_request_other_contacts.html        |  2 +-
 .../templates/includes/header_extended.html   | 10 +++++-
 ...quests.html => portfolio_no_requests.html} |  0
 .../templates/portfolio_requests.html         | 33 ++++++++++++-------
 src/registrar/views/portfolios.py             |  2 +-
 13 files changed, 100 insertions(+), 47 deletions(-)
 rename src/registrar/templates/{portfolio_no_domain_requests.html => portfolio_no_requests.html} (100%)

diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js
index 734e7918d..d216de49a 100644
--- a/src/registrar/assets/js/get-gov.js
+++ b/src/registrar/assets/js/get-gov.js
@@ -1713,7 +1713,20 @@ document.addEventListener('DOMContentLoaded', function() {
               // Request is deletable, modal and modalTrigger are built. Now test is portfolio requests page and enhace the modalTrigger markup
               if (portfolioValue) {
                 modalTrigger = `
-                <div class="usa-accordion usa-accordion--more-actions margin-right-2">
+                <a 
+                  role="button" 
+                  id="button-toggle-delete-domain-alert-${request.id}"
+                  href="#toggle-delete-domain-alert-${request.id}"
+                  class="usa-button text-secondary usa-button--unstyled text-no-underline late-loading-modal-trigger margin-top-2 visible-mobile"
+                  aria-controls="toggle-delete-domain-alert-${request.id}"
+                  data-open-modal
+                >
+                  <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
+                    <use xlink:href="/public/img/sprite.svg#delete"></use>
+                  </svg> Delete <span class="usa-sr-only">${domainName}</span>
+                </a>
+
+                <div class="usa-accordion usa-accordion--more-actions margin-right-2 hidden-mobile">
                   <div class="usa-accordion__heading">
                     <button
                       type="button"
@@ -1732,7 +1745,7 @@ document.addEventListener('DOMContentLoaded', function() {
                       role="button" 
                       id="button-toggle-delete-domain-alert-${request.id}"
                       href="#toggle-delete-domain-alert-${request.id}"
-                      class="usa-button text-secondary usa-button--unstyled text-no-underline late-loading-modal-trigger"
+                      class="usa-button text-secondary usa-button--unstyled text-no-underline late-loading-modal-trigger margin-top-2"
                       aria-controls="toggle-delete-domain-alert-${request.id}"
                       data-open-modal
                     >
diff --git a/src/registrar/assets/sass/_theme/_accordions.scss b/src/registrar/assets/sass/_theme/_accordions.scss
index 93cd405dd..df4f686d8 100644
--- a/src/registrar/assets/sass/_theme/_accordions.scss
+++ b/src/registrar/assets/sass/_theme/_accordions.scss
@@ -15,7 +15,6 @@
         // Note, width is determined by a custom width class on one of the children
         position: absolute;
         z-index: 1;
-        top: 33.88px;
         left: 0;
         border-radius: 4px;
         border: solid 1px color('base-lighter');
@@ -33,7 +32,16 @@
     }
 }
 
+.usa-accordion--select .usa-accordion__content {
+    top: 33.88px;
+}
+
+.usa-accordion--more-actions .usa-accordion__content {
+    top: 30px;
+}
+
 tr:last-child .usa-accordion--more-actions .usa-accordion__content {
     top: auto;
-    bottom: 20px;
+    bottom: -10px;
+    right: 30px;
 }
diff --git a/src/registrar/assets/sass/_theme/_base.scss b/src/registrar/assets/sass/_theme/_base.scss
index 4ea9d2054..af73372b2 100644
--- a/src/registrar/assets/sass/_theme/_base.scss
+++ b/src/registrar/assets/sass/_theme/_base.scss
@@ -159,6 +159,23 @@ abbr[title] {
   }
 }
 
+.hidden-mobile {
+  display: none!important;
+}
+.visible-mobile {
+  display: block!important;
+}
+
+@include at-media(tablet) {
+  .hidden-mobile {
+    display: block!important;
+  }
+  .visible-mobile {
+    display: none!important;
+  }
+}
+
+
 .flex-end {
   align-items: flex-end;
 }
diff --git a/src/registrar/assets/sass/_theme/_buttons.scss b/src/registrar/assets/sass/_theme/_buttons.scss
index 12eee9926..60e25e10b 100644
--- a/src/registrar/assets/sass/_theme/_buttons.scss
+++ b/src/registrar/assets/sass/_theme/_buttons.scss
@@ -211,14 +211,6 @@ a.usa-button--unstyled:visited {
     align-items: center;
 }
 
-
-.dotgov-table a,
-.usa-link--icon {
-    &:visited {
-        color: color('primary');   
-    }
-}
-
 a .usa-icon,
 .usa-button--with-icon .usa-icon {
   height: 1.3em;
@@ -230,3 +222,8 @@ a .usa-icon,
   height: 1.5em;
   width: 1.5em;
 }
+
+button.text-secondary,
+.dotgov-table a.text-secondary {
+  color: $theme-color-error;
+}
diff --git a/src/registrar/assets/sass/_theme/_header.scss b/src/registrar/assets/sass/_theme/_header.scss
index 726460c6f..d79774d98 100644
--- a/src/registrar/assets/sass/_theme/_header.scss
+++ b/src/registrar/assets/sass/_theme/_header.scss
@@ -101,6 +101,12 @@
             button.usa-current {
                 font-weight: font-weight('bold');
             }
+            button[aria-expanded="true"] {
+                color: color('white');
+            }
+            button:not(.usa-current):hover::after  {
+                display: none!important;
+            }
         }
         .usa-nav__secondary {
             // I don't know why USWDS has this at 2 rem, which puts it out of alignment
diff --git a/src/registrar/context_processors.py b/src/registrar/context_processors.py
index 41dfb9cad..5d04d5b70 100644
--- a/src/registrar/context_processors.py
+++ b/src/registrar/context_processors.py
@@ -60,6 +60,16 @@ def add_has_profile_feature_flag_to_context(request):
 
 def portfolio_permissions(request):
     """Make portfolio permissions for the request user available in global context"""
+    default_context = {
+            "has_base_portfolio_permission": False,
+            "has_domains_portfolio_permission": False,
+            "has_requests_portfolio_permission": False,
+            "has_edit_request_portfolio_permission": False,
+            "has_view_suborganization_portfolio_permission": False,
+            "has_edit_suborganization_portfolio_permission": False,
+            "portfolio": None,
+            "has_organization_feature_flag": False,
+        }
     try:
         portfolio = request.session.get("portfolio")
         if portfolio:
@@ -69,29 +79,14 @@ def portfolio_permissions(request):
                 "has_requests_portfolio_permission": request.user.has_requests_portfolio_permission(
                     portfolio
                 ),
+                "has_edit_request_portfolio_permission": request.user.has_edit_request_portfolio_permission(portfolio),
                 "has_view_suborganization_portfolio_permission": request.user.has_view_suborganization_portfolio_permission(portfolio),
                 "has_edit_suborganization_portfolio_permission": request.user.has_edit_suborganization_portfolio_permission(portfolio),
                 "portfolio": portfolio,
                 "has_organization_feature_flag": True,
             }
-        return {
-            "has_base_portfolio_permission": False,
-            "has_domains_portfolio_permission": False,
-            "has_requests_portfolio_permission": False,
-            "has_view_suborganization_portfolio_permission": False,
-            "has_edit_suborganization_portfolio_permission": False,
-            "portfolio": None,
-            "has_organization_feature_flag": False,
-        }
+        return default_context
 
     except AttributeError:
         # Handles cases where request.user might not exist
-        return {
-            "has_base_portfolio_permission": False,
-            "has_domains_portfolio_permission": False,
-            "has_requests_portfolio_permission": False,
-            "has_view_suborganization_portfolio_permission": False,
-            "has_edit_suborganization_portfolio_permission": False,
-            "portfolio": None,
-            "has_organization_feature_flag": False,
-        }
+        return default_context
diff --git a/src/registrar/templates/domain_dsdata.html b/src/registrar/templates/domain_dsdata.html
index 1dd1e1abe..bc3cbc008 100644
--- a/src/registrar/templates/domain_dsdata.html
+++ b/src/registrar/templates/domain_dsdata.html
@@ -63,7 +63,7 @@
 
       <div class="grid-row margin-top-1">
         <div class="grid-col">
-          <button type="button" class="usa-button usa-button--unstyled usa-button--with-icon float-right-tablet delete-record">
+          <button type="button" class="usa-button usa-button--unstyled usa-button--with-icon float-right-tablet delete-record text-secondary">
             <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
               <use xlink:href="{%static 'img/sprite.svg'%}#delete"></use>
             </svg>Delete
diff --git a/src/registrar/templates/domain_nameservers.html b/src/registrar/templates/domain_nameservers.html
index 70eba6bc0..3be010b39 100644
--- a/src/registrar/templates/domain_nameservers.html
+++ b/src/registrar/templates/domain_nameservers.html
@@ -52,7 +52,7 @@
           {% endwith %}
         </div>
         <div class="tablet:grid-col-2">
-          <button type="button" class="usa-button usa-button--unstyled usa-button--with-icon delete-record margin-bottom-075">
+          <button type="button" class="usa-button usa-button--unstyled usa-button--with-icon delete-record margin-bottom-075 text-secondary">
             <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
               <use xlink:href="{%static 'img/sprite.svg'%}#delete"></use>
             </svg>Delete
diff --git a/src/registrar/templates/domain_request_other_contacts.html b/src/registrar/templates/domain_request_other_contacts.html
index 4189e8c73..4b466b9a9 100644
--- a/src/registrar/templates/domain_request_other_contacts.html
+++ b/src/registrar/templates/domain_request_other_contacts.html
@@ -40,7 +40,7 @@
                   <h2 class="margin-top-1">Organization contact {{ forloop.counter }}</h2>
               </legend>
 
-              <button type="button" class="usa-button usa-button--unstyled display-block float-right-tablet delete-record margin-bottom-2">
+              <button type="button" class="usa-button usa-button--unstyled display-block float-right-tablet delete-record margin-bottom-2 text-secondary">
                   <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
                   <use xlink:href="{%static 'img/sprite.svg'%}#delete"></use>
                   </svg><span class="margin-left-05">Delete</span>
diff --git a/src/registrar/templates/includes/header_extended.html b/src/registrar/templates/includes/header_extended.html
index fd6617b18..853da64da 100644
--- a/src/registrar/templates/includes/header_extended.html
+++ b/src/registrar/templates/includes/header_extended.html
@@ -53,7 +53,8 @@
             </li>
 
             <li class="usa-nav__primary-item">
-                {% if has_requests_portfolio_permission %}
+                <!-- user hasone of the view permissions plus the edit permission, show the dropdown -->
+                {% if has_edit_request_portfolio_permission %}
                     {% url 'domain-requests' as url %}
                     <button
                         type="button"
@@ -75,6 +76,13 @@
                             >
                         </li>
                     </ul>
+                <!-- user has view but no edit permissions -->
+                {% elif has_requests_portfolio_permission %}
+                    {% url 'domain-requests' as url %}
+                    <a href="{{ url }}" class="usa-nav-link{% if 'request'|in_path:request.path %} usa-current{% endif %}"> 
+                        Domain requests
+                    </a>
+                <!-- user does not have permissions -->
                 {% else %}
                     {% url 'no-portfolio-requests' as url %}
                     <a href="{{ url }}" class="usa-nav-link{% if 'request'|in_path:request.path %} usa-current{% endif %}"> 
diff --git a/src/registrar/templates/portfolio_no_domain_requests.html b/src/registrar/templates/portfolio_no_requests.html
similarity index 100%
rename from src/registrar/templates/portfolio_no_domain_requests.html
rename to src/registrar/templates/portfolio_no_requests.html
diff --git a/src/registrar/templates/portfolio_requests.html b/src/registrar/templates/portfolio_requests.html
index 9f97a25aa..868c9bd2a 100644
--- a/src/registrar/templates/portfolio_requests.html
+++ b/src/registrar/templates/portfolio_requests.html
@@ -11,18 +11,27 @@
 {% block portfolio_content %}
 <div id="main-content">
     <h1 id="domain-requests-header">Domain requests</h1>
-
-    {% comment %}
-    IMPORTANT:
-    If this button is added on any other page, make sure to update the
-    relevant view to reset request.session["new_request"] = True
-    {% endcomment %}
-    <p class="margin-top-4">
-        <a href="{% url 'domain-request:' %}" class="usa-button"
-        >
-            Start a new domain request
-        </a>
-    </p>
+    <div class="grid-row grid-gap">
+        <div class="mobile:grid-col-12 tablet:grid-col-6">
+            <p class="margin-y-0">Domain requests can only be modified by the person who created the request.</p>
+        </div>
+        {% if has_edit_request_portfolio_permission %}
+            <div class="mobile:grid-col-12 tablet:grid-col-6">
+                {% comment %}
+                IMPORTANT:
+                If this button is added on any other page, make sure to update the
+                relevant view to reset request.session["new_request"] = True
+                {% endcomment %}
+                <p class="float-right-tablet tablet:margin-y-0">
+                    <a href="{% url 'domain-request:' %}" class="usa-button"
+                    >
+                        Start a new domain request
+                    </a>
+                </p>
+            </div>
+        {% endif %}
+    </div>
+    
     
     {% include "includes/domain_requests_table.html" with portfolio=portfolio %}
 </div>
diff --git a/src/registrar/views/portfolios.py b/src/registrar/views/portfolios.py
index e4b91d4bf..885dca636 100644
--- a/src/registrar/views/portfolios.py
+++ b/src/registrar/views/portfolios.py
@@ -76,7 +76,7 @@ class PortfolioNoDomainRequestsView(NoPortfolioDomainsPermissionView, View):
     """
 
     model = Portfolio
-    template_name = "portfolio_no_domain_requests.html"
+    template_name = "portfolio_no_requests.html"
 
     def get(self, request):
         return render(request, self.template_name, context=self.get_context_data())