Upgrade bulma CSS to version 1.0

scancodeio/static/bulma-1.0.1.min.css.ABOUT

@@ -0,0 +1,16 @@
+about_resource: bulma-1.0.1.min.css
+name: bulma
+version: 1.0.1
+download_url: https://github.com/jgthms/bulma/releases/download/1.0.1/bulma-1.0.1.zip
+description: Modern CSS framework based on Flexbox
+homepage_url: https://bulma.io
+package_url: pkg:github/jgthms/bulma@1.0.1?download_url=https://github.com/jgthms/bulma/releases/download/1.0.1/bulma-1.0.1.zip
+license_expression: mit
+copyright: Copyright Jeremy Thomas
+attribute: yes
+checksum_md5: 926f8debd3cad9051148bbf6853510e4
+checksum_sha1: c29d90c02abf6226e3793631d1df0558dda25e3a
+licenses:
+  - key: mit
+    name: MIT License
+    file: mit.LICENSE

scancodeio/static/main.js

@@ -397,3 +397,105 @@ function displayPipelineStatusToast(run_status, pipeline_name, project_url) {
 
     bulmaToast.toast({...default_options, ...custom_options});
 }
+
+// Themes
+
+const STORAGE_KEY = "bulma-theme";
+const SYSTEM_THEME = "system";
+const DEFAULT_THEME = "light";
+
+const state = {
+  chosenTheme: SYSTEM_THEME, // light|dark|system
+  appliedTheme: DEFAULT_THEME, // light|dark
+  OSTheme: null, // light|dark|null
+};
+
+//const $themeCycle = document.getElementById("js-cycle");
+const $themeSwitchers = document.querySelectorAll(".js-themes button");
+
+const updateThemeUI = () => {
+//  if (state.appliedTheme === "light") {
+//    $themeCycle.className = "bd-cycle js-burger is-sun";
+//  } else {
+//    $themeCycle.className = "bd-cycle js-burger is-moon";
+//  }
+
+  $themeSwitchers.forEach((el) => {
+    const swatchTheme = el.dataset.scheme;
+
+    if (state.chosenTheme === swatchTheme) {
+      el.classList.add("is-active");
+    } else {
+      el.classList.remove("is-active");
+    }
+  });
+};
+
+const setTheme = (theme, save = true) => {
+  state.chosenTheme = theme;
+  state.appliedTheme = theme;
+
+  if (theme === SYSTEM_THEME) {
+    state.appliedTheme = state.OSTheme;
+    document.documentElement.removeAttribute("data-theme");
+    window.localStorage.removeItem(STORAGE_KEY);
+  } else {
+    document.documentElement.setAttribute("data-theme", theme);
+
+    if (save) {
+      window.localStorage.setItem(STORAGE_KEY, theme);
+    }
+  }
+
+  updateThemeUI();
+};
+
+const toggleTheme = () => {
+  if (state.appliedTheme === "light") {
+    setTheme("dark");
+  } else {
+    setTheme("light");
+  }
+};
+
+const detectOSTheme = () => {
+  if (!window.matchMedia) {
+    // matchMedia method not supported
+    return DEFAULT_THEME;
+  }
+
+  if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    // OS theme setting detected as dark
+    return "dark";
+  } else if (window.matchMedia("(prefers-color-scheme: light)").matches) {
+    return "light";
+  }
+
+  return DEFAULT_THEME;
+};
+
+// On load, check if any preference was saved
+const localTheme = window.localStorage.getItem(STORAGE_KEY);
+state.OSTheme = detectOSTheme();
+
+if (localTheme) {
+  setTheme(localTheme, false);
+} else {
+  setTheme(SYSTEM_THEME);
+}
+
+// Event listeners
+$themeSwitchers.forEach((el) => {
+  el.addEventListener("click", () => {
+    const theme = el.dataset.scheme;
+    setTheme(theme);
+  });
+});
+
+window
+  .matchMedia("(prefers-color-scheme: dark)")
+  .addEventListener("change", (event) => {
+    const theme = event.matches ? "dark" : "light";
+    state.OSTheme = theme;
+    setTheme(theme);
+  });

scanpipe/templates/scanpipe/base.html

@@ -6,9 +6,30 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{% block title %}ScanCode.io{% endblock %}</title>
     <link rel="icon" href="{% static 'favicon.ico' %}">
-    <link rel="stylesheet" href="{% static 'bulma-0.9.4.min.css' %}" crossorigin="anonymous">
+    <link rel="stylesheet" href="{% static 'bulma-1.0.1.min.css' %}" crossorigin="anonymous">
     <link rel="stylesheet" href="{% static 'highlight-10.6.0.css' %}" crossorigin="anonymous">
     <style>
+      :root {
+        --bulma-link-h: 229deg;
+        --bulma-link-s: 53%;
+        --bulma-link-l: 53%;
+      }
+      .theme-dark, [data-theme=dark] {
+        [class*=has-background-light], [class*=is-background-light] {--bulma-background-l: var(--bulma-light-invert-l);}
+      }
+      .modal {
+        --bulma-modal-card-head-padding: 1.25rem;
+        --bulma-modal-card-body-padding: 1.25rem;
+        --bulma-modal-card-head-radius: var(--bulma-radius-medium);
+      }
+      .modal-card-head {
+        background-color: var(--bulma-scheme-main-bis);
+      }
+      .title {
+        --bulma-title-weight: var(--bulma-weight-semibold);
+      }
+      .heading {display: block; font-size: 11px; letter-spacing: 1px; margin-bottom: 5px; text-transform: uppercase;}
+      .is-black-link {color: var(--bulma-text-strong)}
       .width-100, .select, .select select {width: 100%;}
       .width-1 {width: 1rem !important;}
       .height-1 {height: 1rem !important;}
@@ -21,7 +42,7 @@
       .border-bottom-radius {border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;}
       .tabs .border-left-radius {border-bottom-left-radius: 4px; border-top-left-radius: 4px;}
       .tab-content pre {border-radius: 4px;}
-      .tabs a.is-disabled {pointer-events: none; cursor: default; color: #b5b5b5;}
+      .tabs a.is-disabled {pointer-events: none; cursor: not-allowed; color: var(--bulma-text-weak);}
       .border-no-top-left-radius {border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-top-right-radius: 6px;}
       .border-dashed {border-width: 2px; border-style: dashed; border-color: rgb(229, 231, 235);}
       .is-height-auto {height: auto;}
@@ -35,7 +56,6 @@
       .highlight {width: 100%;}
       .log pre {background-color: #1c1d21;}
       .is-cursor-help {cursor: help;}
-      .is-black-link {color: #363636;}
       .is-grey-link {color: #7a7a7a;}
       .is-black-link:hover, .is-grey-link:hover {color: #3273dc; text-decoration: underline;}
       .navbar button.navbar-item {font-size: 1em;}

scanpipe/templates/scanpipe/includes/breadcrumb.html

@@ -1,7 +1,7 @@
 <nav class="breadcrumb has-succeeds-separator is-medium mb-1" aria-label="breadcrumbs">
   <ul>
     {% if not project %}
-      <li class="is-active"><a href="#" aria-current="page">Projects</a></li>
+      <li class="is-active">Projects</li>
     {% else %}
       <li><a href="{% url 'project_list' %}" class="has-text-grey">Projects</a></li>
       {% if linked_project %}

scanpipe/templates/scanpipe/includes/navbar_header.html

@@ -7,17 +7,27 @@
   <div class="navbar-menu">
     <div class="navbar-start">
       <a class="navbar-item" href="{% url 'project_list' %}">
+        <span class="icon mr-1">
+          <i class="fa-solid fa-seedling"></i>
+        </span>
         Projects
       </a>
       <a class="navbar-item" href="https://scancodeio.readthedocs.org/" target="_blank">
+        <span class="icon mr-1">
+          <i class="fa-solid fa-book"></i>
+        </span>
         Documentation
       </a>
       <a class="navbar-item" href="{% url 'project-list' %}">
+        <span class="icon mr-1">
+          <i class="fa-solid fa-plug"></i>
+        </span>
         API
       </a>
     </div>
   </div>
   <div class="navbar-end mr-3">
+    {% include 'scanpipe/includes/navbar_theme_selection.html' %}
     {% if user.is_authenticated %}
       <div class="navbar-item has-dropdown is-hoverable">
         <a class="navbar-link">

scanpipe/templates/scanpipe/includes/navbar_theme_selection.html

@@ -0,0 +1,16 @@
+<div class="navbar-item has-dropdown is-hoverable">
+  <button class="navbar-link">
+    Theme
+  </button>
+  <div class="navbar-dropdown js-themes">
+    <button class="navbar-item" data-scheme="light" aria-label="Light mode">
+      Light
+    </button>
+    <button class="navbar-item" data-scheme="dark" aria-label="Dark mode">
+      Dark
+    </button>
+    <button class="navbar-item" data-scheme="system" aria-label="System mode">
+      System
+    </button>
+  </div>
+</div>

scanpipe/templates/scanpipe/includes/project_downloads.html

@@ -1,4 +1,4 @@
-<article class="message is-info">
+<article class="message is-success">
   <div class="message-body">
     Download results as:
     <a class="tag is-success is-medium ml-2" href="{% url 'project_results' project.slug 'json' %}">

scanpipe/templates/scanpipe/includes/run_status_tag.html

@@ -1,5 +1,5 @@
 {% if run.status == run.Status.RUNNING or run.status == run.Status.QUEUED %}
-  <span class="tag is-info"
+  <span class="tag is-info is-hoverable"
         hx-get="{% url 'run_status' run.uuid %}?current_status={{ run.status }}{% if display_current_step %}&display_current_step={{ display_current_step }}{% endif %}"
         hx-trigger="load delay:10s"
         hx-swap="outerHTML"
@@ -14,15 +14,15 @@
     {% endif %}
   </span>
 {% elif run.status == run.Status.SUCCESS %}
-  <span class="tag is-success">Success</span>
+  <span class="tag is-success is-hoverable">Success</span>
 {% elif run.status == run.Status.FAILURE %}
-  <span class="tag is-danger">Failure</span>
+  <span class="tag is-danger is-hoverable">Failure</span>
 {% elif run.status == run.Status.STALE %}
-  <span class="tag is-dark">Stale</span>
+  <span class="tag is-dark is-hoverable">Stale</span>
 {% elif run.status == run.Status.STOPPED %}
-  <span class="tag is-danger">Stopped</span>
+  <span class="tag is-danger is-hoverable">Stopped</span>
 {% else %}
-  <span class="tag is-light">Not started</span>
+  <span class="tag is-light is-hoverable">Not started</span>
 {% endif %}
 
 {% if status_changed %}

scanpipe/templates/scanpipe/modals/add_labels_modal.html

@@ -37,7 +37,7 @@
         </div>
       </section>
       <footer class="modal-card-foot">
-        <button id="add-labels-button" name="add-labels-submit" class="button is-link is-no-close" type="submit">Add labels</button>
+        <button id="add-labels-button" name="add-labels-submit" class="button is-link is-no-close mr-3" type="submit">Add labels</button>
         <button class="button" type="button">Close</button>
       </footer>
     </div>

scanpipe/templates/scanpipe/modals/pipeline_help_modal_content.html

@@ -8,7 +8,7 @@
   </header>
 
   <section class="modal-card-body border-bottom-radius p-0">
-    <div class="notification has-background-info-light is-radiusless mb-0 py-2">
+    <div class="notification is-info is-light is-radiusless mb-0 py-2">
       <p class="has-text-weight-bold">
         {{ pipeline_info.summary }}
       </p>

scanpipe/templates/scanpipe/modals/run_modal_content.html

@@ -4,7 +4,7 @@
     <p class="modal-card-title">{{ run.pipeline_name }}</p>
     <button class="delete" aria-label="close"></button>
   </header>
-  <div class="notification has-background-info-light has-text-weight-semibold is-radiusless mb-0">
+  <div class="notification is-info is-light has-text-weight-semibold is-radiusless mb-0 py-2">
     {{ run.description }}
   </div>
   <section class="modal-card-body">

scanpipe/templates/scanpipe/panels/license_clarity_panel.html

@@ -1,4 +1,4 @@
-<article id="license-clarity-panel" class="panel is-info">
+<article id="license-clarity-panel" class="panel is-dark">
   <div class="panel-heading py-2 is-size-6 is-flex is-justify-content-space-between">
     License clarity
     {% include "scanpipe/dropdowns/help_dropdown_tooltip.html" with content="License clarity is a set of metrics that indicate how clearly, comprehensively and accurately a software project has defined and communicated the licensing that applies to the software." only %}

scanpipe/templates/scanpipe/panels/project_codebase.html

@@ -1,4 +1,4 @@
-<nav id="codebase-navigation" class="panel is-info">
+<nav id="codebase-navigation" class="panel is-dark">
   <p class="panel-heading py-2 is-size-6">
     Codebase
     {% if current_dir and current_dir != "." %}

scanpipe/templates/scanpipe/panels/project_inputs.html

@@ -1,4 +1,4 @@
-<article id="inputs-panel" class="panel is-info">
+<article id="inputs-panel" class="panel is-dark">
   <p class="panel-heading py-2 is-size-6">
     Inputs
   </p>

scanpipe/templates/scanpipe/panels/project_outputs.html

@@ -1,4 +1,4 @@
-<article id="outputs-panel" class="panel is-info">
+<article id="outputs-panel" class="panel is-dark">
   <p class="panel-heading py-2 is-size-6">
     Outputs
   </p>

scanpipe/templates/scanpipe/panels/project_pipelines.html

@@ -1,4 +1,4 @@
-<article class="panel is-info">
+<article class="panel is-dark">
   <p class="panel-heading py-2 is-size-6">
     Pipelines
   </p>

scanpipe/templates/scanpipe/panels/resource_license_summary.html

@@ -1,7 +1,7 @@
 {% load humanize %}
 {% if resource_license_summary %}
   <div class="column is-half">
-    <nav class="panel is-info">
+    <nav class="panel is-dark">
       <p class="panel-heading py-2 is-size-6">
         Top 10 detected licenses in files
       </p>

scanpipe/templates/scanpipe/panels/resource_status_summary.html

@@ -1,7 +1,7 @@
 {% load humanize %}
 {% if resource_status_summary %}
   <div class="column is-half">
-    <nav class="panel is-info">
+    <nav class="panel is-dark">
       <p class="panel-heading py-2 is-size-6">
         Resources status
       </p>

scanpipe/templates/scanpipe/panels/scan_summary_panel.html

@@ -1,5 +1,5 @@
 {% load intcomma from humanize %}
-<article id="scan-summary-panel" class="panel is-info">
+<article id="scan-summary-panel" class="panel is-dark">
   <div class="panel-heading py-2 is-size-6 is-flex is-justify-content-space-between">
     Scan summary
     {% include "scanpipe/dropdowns/help_dropdown_tooltip.html" with content="A top-level summary of the collected scanned data such as licenses, holders, and languages." only %}

scanpipe/templates/scanpipe/project_detail.html

@@ -37,7 +37,7 @@
         </div>
       </div>
       <div style="min-width:fit-content;">
-        <a href="{% url 'project_settings' project.slug %}" class="button is-smaller is-info is-outlined">
+        <a href="{% url 'project_settings' project.slug %}" class="button is-smaller">
           <span class="icon width-1">
             <i class="fa-solid fa-sliders-h"></i>
           </span>
@@ -108,7 +108,7 @@
       </div>
 
       {% if project.extra_data %}
-        <article id="project-extra-data" class="panel is-info">
+        <article id="project-extra-data" class="panel is-dark">
           <p class="panel-heading py-2 is-size-6">
             Project data
           </p>