Restyle org request page (#18776)

Author: nlhkabu

warehouse/admin/templates/admin/organization_applications/detail.html

@@ -336,7 +336,7 @@ <h4 class="modal-title" id="declineModalLabel">
       </div>
     </div>
 
-    {% set information_requests = organization_application.information_requests %}
+    {% set information_requests = organization_application.information_requests|reverse %}
     {% set outstanding_information_requests = organization_application.information_requests|selectattr("additional", "defined")|map(attribute="additional")|selectattr("response", "undefined")|list %}
     <div class="col-md-7 col-lg-6">
       <div class="card">
@@ -490,7 +490,7 @@ <h3 class="card-title">Information Requests</h3>
         </div>
         <div class="card-body">
         {% for information_request in information_requests %}
-        <div class="card {% if information_request.additional.response %}card-neutral{% else %}card-warning{% endif %} card-outline direct-chat direct-chat-primary"</div>
+        <div class="card {% if information_request.additional.response %}card-neutral{% else %}card-warning{% endif %} direct-chat direct-chat-primary"</div>
           <div class="card-body">
             <div class="direct-chat-messages unset-height">
               <div class="direct-chat-msg">

warehouse/locale/messages.pot

@@ -2280,6 +2280,7 @@ msgid ""
 msgstr ""
 
 #: warehouse/templates/email/new-organization-requested/body.html:7
+#: warehouse/templates/manage/organization/application.html:30
 #: warehouse/templates/manage/organizations.html:168
 msgid "You will receive an email when the organization has been approved"
 msgstr ""
@@ -4481,6 +4482,7 @@ msgstr ""
 msgid "This Organization request has been declined"
 msgstr ""
 
+#: warehouse/templates/manage/organization/application.html:20
 #: warehouse/templates/manage/organizations.html:162
 msgid "Declined"
 msgstr ""
@@ -4545,7 +4547,7 @@ msgstr ""
 msgid "Name of your business, product, or project"
 msgstr ""
 
-#: warehouse/templates/manage/organization/application.html:20
+#: warehouse/templates/manage/organization/application.html:43
 #: warehouse/templates/manage/organization/settings.html:62
 #: warehouse/templates/manage/organizations.html:257
 msgid "️Organization URL"
@@ -5391,46 +5393,72 @@ msgstr ""
 msgid "Manage '%(organization_application_name)s' Organization Request"
 msgstr ""
 
-#: warehouse/templates/manage/organization/application.html:9
-msgid "Organization request"
+#: warehouse/templates/manage/organization/application.html:10
+#, python-format
+msgid "Organization request for %(org_name)s"
+msgstr ""
+
+#: warehouse/templates/manage/organization/application.html:17
+msgid "Request status"
+msgstr ""
+
+#: warehouse/templates/manage/organization/application.html:22
+msgid "This organization request has been declined"
+msgstr ""
+
+#: warehouse/templates/manage/organization/application.html:24
+msgid "More information needed"
 msgstr ""
 
-#: warehouse/templates/manage/organization/application.html:12
+#: warehouse/templates/manage/organization/application.html:26
+msgid "Please provide more information below"
+msgstr ""
+
+#: warehouse/templates/manage/organization/application.html:28
+msgid "Request submitted"
+msgstr ""
+
+#: warehouse/templates/manage/organization/application.html:35
 #: warehouse/templates/manage/organization/settings.html:14
 msgid "Organization account name"
 msgstr ""
 
-#: warehouse/templates/manage/organization/application.html:16
+#: warehouse/templates/manage/organization/application.html:39
 #: warehouse/templates/manage/organization/settings.html:33
 msgid "Organization display name"
 msgstr ""
 
-#: warehouse/templates/manage/organization/application.html:24
+#: warehouse/templates/manage/organization/application.html:47
 msgid "️Organization description"
 msgstr ""
 
-#: warehouse/templates/manage/organization/application.html:28
+#: warehouse/templates/manage/organization/application.html:51
 #: warehouse/templates/manage/organization/settings.html:111
 msgid "️Organization type"
 msgstr ""
 
-#: warehouse/templates/manage/organization/application.html:32
+#: warehouse/templates/manage/organization/application.html:55
 msgid "️Organization membership size"
 msgstr ""
 
-#: warehouse/templates/manage/organization/application.html:38
+#: warehouse/templates/manage/organization/application.html:59
 msgid "️Anticipated usage"
 msgstr ""
 
-#: warehouse/templates/manage/organization/application.html:42
+#: warehouse/templates/manage/organization/application.html:63
 msgid "Date submitted"
 msgstr ""
 
-#: warehouse/templates/manage/organization/application.html:67
-msgid "️Your Response"
+#: warehouse/templates/manage/organization/application.html:76
+msgid "️PyPI Staff"
+msgstr ""
+
+#: warehouse/templates/manage/organization/application.html:84
+#: warehouse/templates/manage/organization/application.html:96
+msgid "️Your response"
 msgstr ""
 
-#: warehouse/templates/manage/organization/application.html:78
+#: warehouse/templates/manage/organization/application.html:108
 msgid "Submit"
 msgstr ""
 

warehouse/static/sass/blocks/_callout-block.scss

@@ -22,9 +22,11 @@
   </div>
 
   Modifiers:
+    - neutral: Makes border grey
     - danger: Makes border red
     - warning: Makes border brown
     - success: Makes border green
+    - message: Custom styles for messaging UI
     - bottom-margin: Adds extra margin below the callout
 
   // Collapsible
@@ -48,7 +50,6 @@
   margin: 15px 0;
   position: relative;
   border-radius: 4px;
-  display: inline-block;
 
   &__dismiss {
     @include dismiss-button;
@@ -98,18 +99,6 @@
     }
   }
 
-  &--full-width {
-    width: 100%;
-  }
-
-  &--bottom-margin {
-    margin-bottom: $half-spacing-unit;
-  }
-
-  &--dismissed {
-    display: none;
-  }
-
   &--neutral {
     border-color: $border-color;
 
@@ -181,4 +170,22 @@
       @include link-focus-state($success-color);
     }
   }
+
+  &--message {
+    display: inline-block;
+    max-width: 75%;
+    margin: 10px 0;
+
+    @media only screen and (max-width: $mobile) {
+     max-width: 85%;
+    }
+  }
+
+  &--bottom-margin {
+    margin-bottom: $half-spacing-unit;
+  }
+
+  &--dismissed {
+    display: none;
+  }
 }

warehouse/static/sass/blocks/_form-group.scss

@@ -15,12 +15,12 @@
 */
 
 .form-group {
-  margin-bottom: $half-spacing-unit;
+  margin-bottom: $spacing-unit;
   max-width: 350px;
 
   &__label {
     display: block;
-    font-weight: bold;
+    font-weight: $bold-font-weight;
   }
 
   &__label:not(:first-child) {
@@ -32,9 +32,10 @@
     font-weight: normal;
   }
 
-  &__wide {
+  &--wide {
     margin-bottom: $half-spacing-unit;
     max-width: unset;
+    width: 100%;
   }
 
 :where(
@@ -62,6 +63,10 @@
     width: 350px;
     margin-top: 4px;
     max-width: 100%;
+
+    &--full-width {
+      width: 100%;
+    }
   }
 
   &__text {

warehouse/static/sass/blocks/_table.scss

@@ -29,6 +29,7 @@
     - Use a th and add 'scope="row"' for row headings
 
    Modifiers:
+     - information: table for displaying table data - ideally with row level headings
      - downloads: specific styles for downloads table on project detail page
      - releases: specific styles for releases table on manage project page
      - files: specific styles for files table on releases tab
@@ -122,6 +123,10 @@
     padding: 10px;
   }
 
+  tbody tr th {
+    font-weight: $bold-font-weight;
+  }
+
   th,
   td {
     border-bottom: 1px solid $base-grey;
@@ -154,13 +159,30 @@
     text-align: right;
   }
 
+
   &__mobile-label {
     display: none;
     font-weight: $bold-font-weight;
   }
 
   // Custom table styles
 
+  &--information {
+    th {
+      width: 1%; 
+      white-space: nowrap; 
+    }
+
+    td,
+    th {
+      vertical-align: baseline;
+    }
+
+    @media only screen and (max-width: $mobile) {
+      @include mobile-friendly-table;
+    }
+  }
+
   &--downloads {
     word-wrap: break-word;
     margin-top: $half-spacing-unit;

warehouse/static/sass/layout-helpers/_containers.scss

@@ -34,3 +34,12 @@
     padding: 0 $half-spacing-unit;
   }
 }
+
+/*
+  Reduce the size of the content to a single column:
+  <div class="single-column"></div>
+*/
+
+.single-column {
+  max-width: $site-container / 2;
+}

warehouse/static/sass/layout-helpers/_floats.scss

@@ -0,0 +1,13 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+
+.float-left {
+  float: left;
+}
+
+.float-right {
+  float: right;
+}
+
+.clearfix {
+  @include clearfix;
+}

warehouse/static/sass/warehouse.scss

@@ -42,6 +42,7 @@
 @import "layout-helpers/banner";
 @import "layout-helpers/columns";
 @import "layout-helpers/containers";
+@import "layout-helpers/floats";
 @import "layout-helpers/left-layout";
 @import "layout-helpers/split-layout";
 @import "layout-helpers/stick-to-top";

warehouse/templates/manage/organization/activate_subscription.html

@@ -7,7 +7,7 @@
   <h2>{% trans %}Activate Subscription{% endtrans %}</h2>
   <form method="post"
         data-controller="organization-terms-of-service-accepted">
-    <div class="form-group__wide">
+    <div class="form-group form-group--wide">
       <p class="form-group__text">
         {% trans %}Company accounts require an active subscription. Please enter up-to-date billing information to enable the account.{% endtrans %}
       </p>
@@ -16,7 +16,7 @@ <h2>{% trans %}Activate Subscription{% endtrans %}</h2>
            type="hidden"
            value="{{ request.session.get_csrf_token() }}">
     {{ form_errors(form) }}
-    <div class="form-group__wide">
+    <div class="form-group form-group--wide">
       <label for="terms_of_service_agreement" class="form-group__label">
         {% trans %}Terms of Service{% endtrans %}
         <span class="form-group__required">{% trans %}(required){% endtrans %}</span>
@@ -36,7 +36,7 @@ <h2>{% trans %}Activate Subscription{% endtrans %}</h2>
       {% endif %}
     </div>
   </div>
-  <div class="form-group__wide">
+  <div class="form-group form-group--wide">
     <a href="{{ request.route_path('manage.organizations') }}"
        class="button">{% trans %}Cancel{% endtrans %}</a>
     <input value="{% trans %}Activate Subscription{% endtrans %}"