Merge pull request #49 from nexB/25-dark-mode

Signed-off-by: tdruez <[email protected]>
aboutcode-org · Feb 14, 2024 · 13542f5 · 13542f5
2 parents 13617d7 + 0405cbb
commit 13542f5
Show file tree

Hide file tree

Showing 75 changed files with 409 additions and 245 deletions.
diff --git a/CHANGELOG.rst b/CHANGELOG.rst
@@ -9,6 +9,9 @@ Release notes
   data is fetched from the PurlDB to initialize the form.
   https://github.com/nexB/dejacode/issues/47
 
+- Add dark theme support in UI.
+  https://github.com/nexB/dejacode/issues/25
+
 ### Version 5.0.1
 
 - Improve the stability of the "Check for new Package versions" feature.

diff --git a/component_catalog/templates/component_catalog/includes/add_package_modal.html b/component_catalog/templates/component_catalog/includes/add_package_modal.html
@@ -8,7 +8,7 @@ <h5 class="modal-title">Add Package</h5>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <form id="package-add-form" method="post" data-add-url="{% url "component_catalog:package_add_urls" %}">{% csrf_token %}
-        <div class="modal-body bg-light">
+        <div class="modal-body bg-body-tertiary">
           <div>
             <label for="download-urls" class="form-label">Download URL(s)</label>
             <textarea class="form-control" id="download-urls" aria-describedby="download-urls-help" placeholder="https://..."></textarea>

diff --git a/component_catalog/templates/component_catalog/includes/add_to_modal.html b/component_catalog/templates/component_catalog/includes/add_to_modal.html
@@ -7,11 +7,11 @@ <h5 class="modal-title">{{ form.helper.modal_title }}</h5>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <form autocomplete="off" method="{{ form.helper.form_method }}" action="{{ form.helper.form_action }}" id="{{ form.helper.form_id }}" class="{{ form.helper.form_class }}">
-        <div class="modal-body bg-light">
+        <div class="modal-body bg-body-tertiary">
           {# Only displayed on list views #}
           {% if request.resolver_match.url_name|default:""|slice:"-4:" == "list" %}
             <h6>Selected objects:</h6>
-            <ul id="object-repe-list"></ul>
+            <ul id="object-repe-list" style="word-break: break-word;"></ul>
             <hr>
           {% endif %}
           {% crispy form %}

diff --git a/component_catalog/templates/component_catalog/includes/hierarchy_instance_box.html b/component_catalog/templates/component_catalog/includes/hierarchy_instance_box.html
@@ -1,5 +1,5 @@
 {% load i18n %}
-<div id="{% if is_product %}product_{{ instance.pk }}{% elif relation.package_id %}package_{{ relation.pk }}{% elif relation %}component_{{ relation.pk }}{% else %}component_{{ instance.pk }}{% endif %}" class="card bg-light mb-2">
+<div id="{% if is_product %}product_{{ instance.pk }}{% elif relation.package_id %}package_{{ relation.pk }}{% elif relation %}component_{{ relation.pk }}{% else %}component_{{ instance.pk }}{% endif %}" class="card bg-body-tertiary mb-2">
   <div class="card-body py-1 ps-2 pe-1">
     <ul class="list-inline float-end mb-0">
       {% if request.user.is_authenticated and is_user_dataspace and instance.request_count %}

diff --git a/component_catalog/templates/component_catalog/includes/scan_delete_modal.html b/component_catalog/templates/component_catalog/includes/scan_delete_modal.html
@@ -6,7 +6,7 @@
         <h5 class="modal-title">Delete {% trans 'Scan' %}</h5>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
-      <div class="modal-body bg-light">
+      <div class="modal-body bg-body-tertiary">
         <p><strong>Are you sure you want to delete this Scan?</strong></p>
         <p>
           All data and results related to the Scan will be deleted.<br>

diff --git a/component_catalog/templates/component_catalog/includes/scan_list_table.html b/component_catalog/templates/component_catalog/includes/scan_list_table.html
@@ -3,7 +3,7 @@
 <table class="table table-bordered table-hover text-break">
   <thead>
     <tr>
-      <th style="background-color: #f9f9f9; padding: .75rem 1.25rem;">
+      <th style="background-color: var(--bs-tertiary-bg); padding: .75rem 1.25rem;">
         <div style="font-size: 120%;">
           {% trans "Scans" %}: {{ paginator.count|intcomma }} results
         </div>

diff --git a/component_catalog/templates/component_catalog/includes/scan_matches_modal.html b/component_catalog/templates/component_catalog/includes/scan_matches_modal.html
@@ -1,7 +1,7 @@
 <div class="modal" id="scan-matches-modal" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
     <div class="modal-content">
-      <div class="modal-header bg-light">
+      <div class="modal-header bg-body-tertiary">
         <h5 class="modal-title">
           Matched texts for <strong id="detected-license-key"></strong>
         </h5>

diff --git a/component_catalog/templates/component_catalog/includes/scan_package_modal.html b/component_catalog/templates/component_catalog/includes/scan_package_modal.html
@@ -5,7 +5,7 @@
         <h5 class="modal-title">Scan Package</h5>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
-      <div class="modal-body bg-light">
+      <div class="modal-body bg-body-tertiary">
         You are about to initiate a scan on the ScanCode.io server for this
         Package, based on the URL defined for this Package.<br><br>
         <strong>Note that this may take some time to complete.</strong><br><br>

diff --git a/component_catalog/templates/component_catalog/includes/scan_summary_to_package_modal.html b/component_catalog/templates/component_catalog/includes/scan_summary_to_package_modal.html
@@ -7,7 +7,7 @@ <h5 class="modal-title">Set values from Scan Summary to Package</h5>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <form autocomplete="off" method="{{ scan_summary_to_package_form.helper.form_method }}" action="{{ scan_summary_to_package_form.helper.form_action }}" id="{{ scan_summary_to_package_form.helper.form_id }}" class="{{ scan_summary_to_package_form.helper.form_class }}">
-        <div class="modal-body bg-light">
+        <div class="modal-body bg-body-tertiary">
           {% crispy scan_summary_to_package_form %}
         </div>
         <div class="modal-footer">

diff --git a/component_catalog/templates/component_catalog/includes/scan_to_package_modal.html b/component_catalog/templates/component_catalog/includes/scan_to_package_modal.html
@@ -7,7 +7,7 @@ <h5 class="modal-title">Set values from Scan to Package</h5>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <form autocomplete="off" method="{{ scan_to_package_form.helper.form_method }}" action="{{ scan_to_package_form.helper.form_action }}" id="{{ scan_to_package_form.helper.form_id }}" class="{{ scan_to_package_form.helper.form_class }}">
-        <div class="modal-body bg-light">
+        <div class="modal-body bg-body-tertiary">
           {% crispy scan_to_package_form %}
         </div>
         <div class="modal-footer">

diff --git a/component_catalog/templates/component_catalog/tabs/field_key_files_table.html b/component_catalog/templates/component_catalog/tabs/field_key_files_table.html
@@ -40,7 +40,7 @@
   <div class="modal" id="key-files-modal" tabindex="-1" role="dialog" aria-hidden="true">
     <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
       <div class="modal-content">
-        <div class="modal-header bg-light">
+        <div class="modal-header bg-body-tertiary">
           <h5 class="modal-title"></h5>
           <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>

diff --git a/component_catalog/tests/test_views.py b/component_catalog/tests/test_views.py
@@ -442,8 +442,8 @@ def test_component_catalog_hierarchy_tab(self):
         self.assertEqual(["ArchLinux", "Component2"], [x.parent.name for x in parents])
         self.assertEqual(["Apache", "Component3"], [x.child.name for x in children])
 
-        expected1 = f'<div id="component_{self.component1.id}" class="card bg-light mb-2">'
-        expected2 = f'<div id="component_{self.component2.id}" class="card bg-light mb-2">'
+        expected1 = f'<div id="component_{self.component1.id}" class="card bg-body-tertiary mb-2">'
+        expected2 = f'<div id="component_{self.component2.id}" class="card bg-body-tertiary mb-2">'
         expected3 = f"source: 'component_{self.component1.id}'"
         expected4 = f"target: 'component_{self.component2.id}'"
 
@@ -476,7 +476,7 @@ def test_component_catalog_hierarchy_tab(self):
         )
         self.assertEqual(1, product1.productcomponents.count())
         response = self.client.get(url)
-        expected = f'<div id="product_{product1.id}" class="card bg-light mb-2">'
+        expected = f'<div id="product_{product1.id}" class="card bg-body-tertiary mb-2">'
         self.assertContains(response, expected)
         self.assertContains(response, f"target: 'product_{product1.id}'")
 
@@ -614,10 +614,12 @@ def test_component_catalog_detail_view_owner_tab_hierarchy_availability(self):
         self.assertContains(response, child_owner.name)
 
         self.assertContains(
-            response, '<div id="owner_{}" class="card bg-light mb-2">'.format(self.owner1.id)
+            response,
+            '<div id="owner_{}" class="card bg-body-tertiary mb-2">'.format(self.owner1.id),
         )
         self.assertContains(
-            response, '<div id="owner_{}" class="card bg-light mb-2">'.format(child_owner.id)
+            response,
+            '<div id="owner_{}" class="card bg-body-tertiary mb-2">'.format(child_owner.id),
         )
         self.assertContains(
             response, f"{{source: 'owner_{child_owner.id}', target: 'owner_{self.owner1.id}'}}"
@@ -711,27 +713,27 @@ def test_component_catalog_list_view_filters_breadcrumbs(self):
         expected = f"""
         <div class="my-1">
             <a href="{href1}" class="text-decoration-none">
-              <span class="badge text-bg-dark rounded-pill">
+              <span class="badge text-bg-secondary rounded-pill">
                 Type: "not_a_valid_entry" <i class="fas fa-times-circle"></i>
                 </span>
             </a>
             <a href="{href2}" class="text-decoration-none">
-              <span class="badge text-bg-dark rounded-pill">
+              <span class="badge text-bg-secondary rounded-pill">
                 License: "license1" <i class="fas fa-times-circle"></i>
                 </span>
             </a>
             <a href="{href3}" class="text-decoration-none">
-              <span class="badge text-bg-dark rounded-pill">
+              <span class="badge text-bg-secondary rounded-pill">
                 License: "license2" <i class="fas fa-times-circle"></i>
                 </span>
             </a>
             <a href="{href4}" class="text-decoration-none">
-              <span class="badge text-bg-dark rounded-pill">
+              <span class="badge text-bg-secondary rounded-pill">
                 Search: "a" <i class="fas fa-times-circle"></i>
                 </span>
             </a>
             <a href="{href5}" class="text-decoration-none">
-              <span class="badge text-bg-dark rounded-pill">
+              <span class="badge text-bg-secondary rounded-pill">
                 Sort: "name" <i class="fas fa-times-circle"></i>
                 </span>
             </a>
@@ -1006,7 +1008,7 @@ def test_component_catalog_details_view_package_tab_fields_visibility(self):
     def test_component_catalog_details_view_hide_empty_fields(self):
         self.client.login(username="nexb_user", password="t3st")
         details_url = self.component1.get_absolute_url()
-        expected = '<pre class="pre-bg-light mb-1 field-description">&nbsp;</pre>'
+        expected = '<pre class="pre-bg-body-tertiary mb-1 field-description">&nbsp;</pre>'
 
         self.assertFalse(self.nexb_dataspace.hide_empty_fields_in_component_details_view)
         response = self.client.get(details_url)
@@ -1025,7 +1027,9 @@ def test_component_catalog_details_view_acceptable_linkages_in_policy_tab(self):
 
         response = self.client.get(details_url)
         expected = (
-            '<pre class="pre-bg-light mb-1 field-acceptable-linkages">linkage1 linkage2</pre>'
+            '<pre class="pre-bg-body-tertiary mb-1 field-acceptable-linkages">'
+            "  linkage1 linkage2"
+            "</pre>"
         )
         self.assertContains(response, expected, html=True)
 
@@ -2035,29 +2039,31 @@ def test_package_details_view_scan_tab_scan_in_progress(
         <dd class="col-sm-10 clipboard">
           <button class="btn-clipboard" data-bs-toggle="tooltip" title="Copy to clipboard">
           <i class="fas fa-clipboard"></i></button>
-          <pre class="pre-bg-light mb-1 field-status">Scan running</pre>
+          <pre class="pre-bg-body-tertiary mb-1 field-status">Scan running</pre>
         </dd>
         <dt class="col-sm-2 text-end pt-2 pe-0">Created date</dt>
         <dd class="col-sm-10 clipboard">
           <button class="btn-clipboard" data-bs-toggle="tooltip" title="Copy to clipboard">
           <i class="fas fa-clipboard"></i></button>
-          <pre class="pre-bg-light mb-1 field-created-date">June 21, 2018, 12:32 PM UTC</pre>
+          <pre class="pre-bg-body-tertiary mb-1 field-created-date">
+            June 21, 2018, 12:32 PM UTC
+          </pre>
         </dd>
         <dt class="col-sm-2 text-end pt-2 pe-0">Start date</dt>
         <dd class="col-sm-10 clipboard">
           <button class="btn-clipboard" data-bs-toggle="tooltip" title="Copy to clipboard">
           <i class="fas fa-clipboard"></i></button>
-          <pre class="pre-bg-light mb-1 field-start-date">June 21, 2018, 12:32 PM UTC</pre>
+          <pre class="pre-bg-body-tertiary mb-1 field-start-date">June 21, 2018, 12:32 PM UTC</pre>
         </dd>
         <dt class="col-sm-2 text-end pt-2 pe-0">End date</dt>
         <dd class="col-sm-10 clipboard">
-          <pre class="pre-bg-light mb-1 field-end-date">&nbsp;</pre>
+          <pre class="pre-bg-body-tertiary mb-1 field-end-date">&nbsp;</pre>
         </dd>
         <dt class="col-sm-2 text-end pt-2 pe-0">ScanCode.io version</dt>
         <dd class="col-sm-10 clipboard">
           <button class="btn-clipboard" data-bs-toggle="tooltip" title="Copy to clipboard">
           <i class="fas fa-clipboard"></i></button>
-          <pre class="pre-bg-light mb-1 field-scancodeio-version">31.0.0</pre>
+          <pre class="pre-bg-body-tertiary mb-1 field-scancodeio-version">31.0.0</pre>
         </dd>
         </dl>
         """
@@ -2305,7 +2311,7 @@ def test_package_details_view_scan_tab_license_clarity(
           <td class="text-center"><span class="badge text-bg-success fs-85pct">+10</span></td>
           <td class="text-center"><span class="badge text-bg-danger fs-85pct">-10</span></td>
           <td class="text-center"></td>
-          <td class="text-center bg-light">
+          <td class="text-center bg-body-tertiary">
             <span class="badge text-bg-primary fs-85pct">90</span>
           </td>
         </tr>
@@ -3576,22 +3582,22 @@ def test_package_details_view_purldb_tab(self, mock_is_configured, mock_request_
         self.assertTrue(self.super_user.dataspace.enable_purldb_access)
         response = self.client.get(self.package1.get_absolute_url())
         self.assertContains(response, expected)
-        self.assertContains(response, '<pre class="pre-bg-light mb-1 field-download-url">')
+        self.assertContains(response, '<pre class="pre-bg-body-tertiary mb-1 field-download-url">')
 
         response = self.client.get(self.package1.get_url("tab_purldb"))
         self.assertContains(
             response,
-            '<pre class="pre-bg-light mb-1 field-sha1">'
+            '<pre class="pre-bg-body-tertiary mb-1 field-sha1">'
             "a2363646a9dd05955633b450010b59a21af8a423"
             "</pre>",
         )
         self.assertContains(
-            response, '<pre class="pre-bg-light mb-1 field-release-date">2015-09-22</pre>'
+            response, '<pre class="pre-bg-body-tertiary mb-1 field-release-date">2015-09-22</pre>'
         )
         self.assertContains(
-            response, '<pre class="pre-bg-light mb-1 field-primary-language">Java</pre>'
+            response, '<pre class="pre-bg-body-tertiary mb-1 field-primary-language">Java</pre>'
         )
-        self.assertContains(response, '<pre class="pre-bg-light mb-1 field-homepage-url">')
+        self.assertContains(response, '<pre class="pre-bg-body-tertiary mb-1 field-homepage-url">')
 
     def test_component_catalog_package_add_view_permission_access(self):
         add_url = reverse("component_catalog:package_add")

diff --git a/component_catalog/views.py b/component_catalog/views.py
@@ -2139,8 +2139,8 @@ def license_clarity_fields(license_clarity_score):
                 value = f'<span class="badge {badge_color} fs-85pct">{weight}</span>'
 
             elif field == "score":
-                td_class += " bg-light"
-                th_class = "bg-light"
+                td_class += " bg-body-tertiary"
+                th_class = "bg-body-tertiary"
                 badge_color = "text-bg-primary"
                 value = f'<span class="badge {badge_color} fs-85pct">{field_value}</span>'
 
@@ -2163,7 +2163,7 @@ def license_clarity_fields(license_clarity_score):
     @staticmethod
     def get_key_file_summary(key_file_data):
         dt = '<dt class="col-sm-2 text-end pt-2 pe-0">{}</dt>'
-        dd = '<dd class="col-sm-10"><pre class="pre-bg-light mb-1">{}</pre></dd>'
+        dd = '<dd class="col-sm-10"><pre class="pre-bg-body-tertiary mb-1">{}</pre></dd>'
         summary = ""
 
         for label, field, value_key in ScanCodeIO.KEY_FILE_DETECTION_FIELDS: