Upgrade the Tailwind / DaisyUI stack

isic/core/templates/core/collection_create_doi.html

@@ -8,7 +8,7 @@
   {% if error %}
     <div class="rounded-md bg-red-50 p-4 mb-4">
       <div class="flex items-center">
-        <div class="flex-shrink-0">
+        <div class="shrink-0">
           <i class="ri-information-line text-lg text-red-400" aria-hidden="true"></i>
         </div>
         <div class="ml-3">
@@ -36,7 +36,7 @@
             x-model="description"
             required
             rows="5"
-            class="w-full border border-gray-300 rounded px-3 py-2 text-sm"
+            class="w-full border border-gray-300 rounded-sm px-3 py-2 text-sm"
             placeholder="Describe the collection..."></textarea>
           <p class="text-xs text-gray-600 mt-2">
             Note: This description will be saved to the collection and used in the DOI metadata.
@@ -106,13 +106,13 @@ <h4 class="font-semibold text-base flex items-center">
                     <div class="flex gap-2">
                       <div class="flex-1">
                         <select x-model="identifier.related_identifier_type" required
-                                class="w-full border rounded px-2 py-1 text-sm mb-2">
+                                class="w-full border rounded-sm px-2 py-1 text-sm mb-2">
                           <option value="">Select type</option>
                           <option value="DOI">DOI</option>
                           <option value="URL">URL</option>
                         </select>
                         <input :type="identifier.related_identifier_type === 'URL' ? 'url' : 'text'"
-                               x-model="identifier.related_identifier" required class="w-full border rounded px-2 py-1 text-sm"
+                               x-model="identifier.related_identifier" required class="w-full border rounded-sm px-2 py-1 text-sm"
                                :placeholder="getPlaceholder(identifier.related_identifier_type, relationConfig)"
                                :pattern="identifier.related_identifier_type === 'DOI' ? '^10\\.\\d+/.*$' : null"
                                :title="identifier.related_identifier_type === 'DOI' ? 'Enter a valid DOI format (e.g., ' + relationConfig.doiExample + ')' : null" />

isic/core/templates/core/collection_create_or_edit.html

@@ -4,7 +4,7 @@
   {% if collection and collection.locked %}
     <div class="rounded-md bg-red-50 p-4 mb-4">
       <div class="flex items-center">
-        <div class="flex-shrink-0">
+        <div class="shrink-0">
           <i class="ri-information-line text-lg text-red-400" aria-hidden="true"></i>
         </div>
         <div class="ml-3">
@@ -44,7 +44,7 @@
                 {{ form.name.label }}
               </label>
               <div class="mt-1 mt-0 col-span-2">
-                <div class="max-w-lg flex rounded-md shadow-sm">
+                <div class="max-w-lg flex rounded-md shadow-xs">
                   <input type="text" value="{{ form.name.value|default:'' }}" name="{{ form.name.html_name }}" id="{{ form.name.html_name }}" class="flex-1 block w-full focus:ring-primary-500 focus:border-primary-500 min-w-0 rounded-none rounded-r-md text-sm border-gray-300">
                 </div>
                 <p class="mt-2 text-sm text-gray-500" id="email-description">{{ form.name.help_text }}</p>
@@ -57,7 +57,7 @@
                 {{ form.description.label }}
               </label>
               <div class="mt-1 mt-0 col-span-2">
-                <textarea id="{{ form.description.html_name }}" name="{{ form.description.html_name }}" rows="15" class="border max-w-lg outline-none shadow-sm p-4 block w-full focus:ring-2 focus:ring-prinary-500 focus:border-primary-500 text-sm border-gray-400 rounded-md">{{ form.description.value|default:'' }}</textarea>
+                <textarea id="{{ form.description.html_name }}" name="{{ form.description.html_name }}" rows="15" class="border max-w-lg outline-hidden shadow-xs p-4 block w-full focus:ring-2 focus:ring-prinary-500 focus:border-primary-500 text-sm border-gray-400 rounded-md">{{ form.description.value|default:'' }}</textarea>
                 <p class="mt-2 text-sm text-gray-500">{{ form.description.help_text|safe }}</p>
                 {{ form.description.errors }}
               </div>

isic/core/templates/core/collection_detail.html

@@ -92,7 +92,7 @@
     </div>
 
     {% if request.user.is_staff or contributors or show_shares %}
-      <div class="my-4 p-2 rounded-sm bg-gray-100 border border-gray-200">
+      <div class="my-4 p-2 rounded-xs bg-gray-100 border border-gray-200">
         <div class="font-semibold black text-lg">
           Private Attributes (visible only to you)
         </div>
@@ -160,7 +160,7 @@
     {% if image_removal_mode %}
       <div class="alert shadow-lg my-6">
         <div>
-          <i class="ri-information-line stroke-info flex-shrink-0 text-lg"></i>
+          <i class="ri-information-line stroke-info shrink-0 text-lg"></i>
           <span>
             <span x-text="images.size"></span> images pending removal.
           </span>

isic/core/templates/core/collection_list.html

@@ -28,7 +28,7 @@
       <div class="heading-1">Collections ({{ page.paginator.count|intcomma }})</div>
     </div>
     {% if request.user.is_authenticated %}
-      <a href="{% url 'core/collection-create' %}" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+      <a href="{% url 'core/collection-create' %}" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-xs text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
         Create Collection
       </a>
     {% endif %}
@@ -45,22 +45,22 @@
   <div class="my-4 flex flex-wrap items-center gap-4">
     <div class="flex items-center gap-2 text-sm text-gray-700">
       <label for="magic-filter">Magic:</label>
-      <select id="magic-filter" class="rounded border-gray-300 text-sm py-1">
+      <select id="magic-filter" class="rounded-sm border-gray-300 text-sm py-1">
         <option value="all" {% if magic_filter == "all" %}selected{% endif %}>All</option>
         <option value="exclude" {% if magic_filter == "exclude" %}selected{% endif %}>Exclude</option>
         <option value="only" {% if magic_filter == "only" %}selected{% endif %}>Only</option>
       </select>
     </div>
     <div class="flex items-center gap-2 text-sm text-gray-700">
       <label for="pinned-filter">Pinned:</label>
-      <select id="pinned-filter" class="rounded border-gray-300 text-sm py-1">
+      <select id="pinned-filter" class="rounded-sm border-gray-300 text-sm py-1">
         <option value="all" {% if pinned_filter == "all" %}selected{% endif %}>All</option>
         <option value="exclude" {% if pinned_filter == "exclude" %}selected{% endif %}>Exclude</option>
         <option value="only" {% if pinned_filter == "only" %}selected{% endif %}>Only</option>
       </select>
     </div>
     <label class="flex items-center gap-2 text-sm text-gray-700 cursor-pointer">
-      <input type="checkbox" id="include-empty" {% if not exclude_empty %}checked{% endif %} class="rounded border-gray-300">
+      <input type="checkbox" id="include-empty" {% if not exclude_empty %}checked{% endif %} class="rounded-sm border-gray-300">
       Include empty
     </label>
   </div>
@@ -84,7 +84,7 @@
   </script>
 
   <div class="overflow-x-auto">
-    <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
+    <div class="shadow-sm overflow-hidden border-b border-gray-200 sm:rounded-lg">
       <table class="w-full table-fixed divide-y divide-gray-200">
         <colgroup>
           <col class="hidden sm:table-column w-28">
@@ -110,7 +110,7 @@
                 <a href="{{ collection.get_absolute_url }}" class="text-indigo-600 hover:text-indigo-900 flex items-center gap-1 overflow-hidden">
                   {% if collection.pinned %}<i class="ri-pushpin-2-fill text-gray-400 shrink-0"></i>{% endif %}
                   <span class="truncate min-w-0">{{ collection.name }}</span>
-                  {% if not collection.public %}<span class="inline-flex shrink-0 items-center px-1.5 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">Private</span>{% endif %}
+                  {% if not collection.public %}<span class="inline-flex shrink-0 items-center px-1.5 py-0.5 rounded-sm text-xs font-medium bg-yellow-100 text-yellow-800">Private</span>{% endif %}
                 </a>
                 {% if collection.description %}
                   <div class="text-xs text-gray-400 mt-0.5 line-clamp-3 break-words">{{ collection.description }}</div>

isic/core/templates/core/data_explorer.html

@@ -54,13 +54,13 @@ <h1 class="text-xl sm:text-2xl font-bold mb-2">ISIC Data Explorer</h1>
             </button>
             <select
               id="example-query-select"
-              class="border border-gray-300 rounded px-2 py-1 text-sm font-semibold min-w-0"
+              class="border border-gray-300 rounded-sm px-2 py-1 text-sm font-semibold min-w-0"
               @change="if ($el.value) { setQuery(examples[$el.value].sql); }"
               x-html="'<option value=\'\'>Example queries...</option>' + examples.map((e, i) => `<option value=\'${i}\'>${e.name}</option>`).join('')"
             ></select>
           </div>
         </div>
-        <div id="sql-editor" class="border border-gray-300 rounded overflow-hidden"></div>
+        <div id="sql-editor" class="border border-gray-300 rounded-sm overflow-hidden"></div>
       </div>
 
       <div class="flex flex-wrap items-center gap-2 mb-2">
@@ -145,36 +145,35 @@ <h1 class="text-xl sm:text-2xl font-bold mb-2">ISIC Data Explorer</h1>
 
     <input type="checkbox" id="create-collection-modal" class="modal-toggle" x-ref="createCollectionToggle">
     <label for="create-collection-modal" class="modal cursor-pointer">
-      <label class="modal-box">
+      <form class="modal-box" @submit.prevent="createCollection()">
         <h3 class="font-bold text-lg mb-4">Create Collection</h3>
         <p class="mb-4 text-sm text-gray-600" x-text="'This will create a collection with ' + collectionImageCount.toLocaleString() + ' images from your query results.'"></p>
-        <div class="form-control mb-4">
-          <label class="label font-semibold">Collection Name</label>
+        <fieldset class="fieldset">
+          <legend class="fieldset-legend">Collection Name</legend>
           <input
             type="text"
             id="collection-name-input"
             x-model="collectionName"
             x-ref="collectionNameInput"
-            class="input input-bordered w-full"
+            class="input w-full"
             placeholder="My collection"
-            @keydown.enter="createCollection()"
           >
-        </div>
-        <div x-show="createCollectionError" class="alert alert-error mb-4 text-sm">
+        </fieldset>
+        <div x-show="createCollectionError" class="alert alert-error text-sm">
             <pre class="whitespace-pre-wrap" x-text="createCollectionError"></pre>
         </div>
         <div class="modal-action">
           <label for="create-collection-modal" class="btn btn-ghost">Cancel</label>
           <button
+            type="submit"
             class="btn btn-primary"
             :disabled="!collectionName.trim() || creatingCollection"
-            @click="createCollection()"
           >
             <span x-show="!creatingCollection">Create</span>
             <span x-show="creatingCollection">Creating...</span>
           </button>
         </div>
-      </label>
+      </form>
     </label>
   </div>
 
@@ -572,9 +571,9 @@ <h3 class="font-bold text-lg mb-4">Create Collection</h3>
 
           const rect = event.currentTarget.getBoundingClientRect();
           const popup = document.createElement('div');
-          popup.className = 'bg-white border border-gray-300 rounded shadow-lg';
+          popup.className = 'bg-white border border-gray-300 rounded-sm shadow-lg';
           popup.style.cssText = `position:fixed;z-index:9999;padding:2px;left:${rect.left}px;top:${rect.top}px;transform:translateY(-100%);`;
-          popup.innerHTML = `<img src="${this.thumbnailUrl(isicId)}" width="256" height="256" class="rounded" />`;
+          popup.innerHTML = `<img src="${this.thumbnailUrl(isicId)}" width="256" height="256" class="rounded-sm" />`;
           document.body.appendChild(popup);
           this.activePopup = popup;
         },

isic/core/templates/core/doi_detail.html

@@ -261,7 +261,7 @@ <h2 class="ml-2 content-center">How to Cite</h2>
               <p class="text-center">Citations are being generated, check back soon.</p>
             {% else %}
               <div>
-                <select x-model="selectedStyle" class="select select-sm select-bordered py-0">
+                <select x-model="selectedStyle" class="select select-sm py-0">
                   <template x-for="(label, value) in citationStyles">
                     <option :value="value" x-text="label"></option>
                   </template>

isic/core/templates/core/draft_doi_edit.html

@@ -18,7 +18,7 @@
           x-model="description"
           required
           rows="10"
-          class="w-full border border-gray-300 rounded px-3 py-2 text-sm"
+          class="w-full border border-gray-300 rounded-sm px-3 py-2 text-sm"
           placeholder="Describe the collection..."></textarea>
         <p class="text-xs text-gray-600 mt-2">
           Note: This description will be saved to the collection and used in the DOI metadata.

isic/core/templates/core/embargoed_dashboard.html

@@ -15,7 +15,7 @@
     <div class="flex flex-col">
       <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
         <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
-          <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
+          <div class="shadow-sm overflow-hidden border-b border-gray-200 sm:rounded-lg">
             <table class="min-w-full divide-y divide-gray-200">
               <thead class="bg-gray-50">
                 <tr>

isic/core/templates/core/image_browser.html

@@ -32,7 +32,7 @@
           <div class="col-span-2">
             <label class="block text-xs font-medium text-gray-600 mb-1">Query</label>
             <div class="flex justify-between items-center gap-2">
-              {% render_field form.query class+="flex-1 px-3 py-1.5 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500 font-mono" placeholder="age_approx:[20 TO 40] AND sex:male" %}
+              {% render_field form.query class+="flex-1 px-3 py-1.5 text-sm border border-gray-300 rounded-sm focus:outline-hidden focus:ring-1 focus:ring-blue-500 font-mono" placeholder="age_approx:[20 TO 40] AND sex:male" %}
               <label for="my-modal-4" class="modal-button cursor-pointer text-xs text-blue-600 hover:text-blue-800 whitespace-nowrap">syntax help</label>
             </div>
             {{ form.query.errors }}
@@ -49,7 +49,7 @@
                 @input="filterCollections()"
                 @keydown="handleKeydown($event)"
                 placeholder="Type or select collections..."
-                class="w-full px-3 py-1.5 text-sm border border-gray-300 rounded bg-white focus:outline-none focus:ring-1 focus:ring-blue-500"
+                class="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-sm bg-white focus:outline-hidden focus:ring-1 focus:ring-blue-500"
               />
 
               <div x-show="dropdownOpen" x-cloak class="absolute z-10 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg overflow-y-auto" style="max-height: 16rem;">
@@ -71,9 +71,9 @@
 
               <div class="flex flex-wrap gap-1 mt-2" x-show="selectedCollections.size > 0">
                 <template x-for="collectionId in Array.from(selectedCollections)" :key="collectionId">
-                  <span class="inline-flex items-center gap-1 px-2 py-1 mr-1 bg-blue-100 text-blue-700 rounded text-xs">
+                  <span class="inline-flex items-center gap-1 px-2 py-1 mr-1 bg-blue-100 text-blue-700 rounded-sm text-xs">
                     <span x-text="getCollectionName(collectionId)"></span>
-                    <button @click="removeCollection(collectionId)" type="button" class="hover:bg-blue-200 rounded">
+                    <button @click="removeCollection(collectionId)" type="button" class="hover:bg-blue-200 rounded-sm">
                       <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                       </svg>
@@ -92,7 +92,7 @@
         <div class="mt-3 flex justify-end">
           <div class="flex gap-2">
             <a href="{% url 'core/image-browser' %}" class="px-3 py-1 text-xs text-gray-600 hover:text-gray-800">Clear</a>
-            <button type="submit" class="px-4 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700">Search</button>
+            <button type="submit" class="px-4 py-1 bg-blue-600 text-white text-sm rounded-sm hover:bg-blue-700">Search</button>
           </div>
         </div>
       </form>
@@ -114,7 +114,7 @@
             <div class="card-body">
               <div class="heading-3 card-title">View these images via the ISIC CLI (pip install isic-cli)</div>
               <div class="flex flex-row">
-                <input type="text" disabled class="input input-bordered w-full max-w-xs" :value="isicCliDownloadCommand()">
+                <input type="text" disabled class="input w-full max-w-xs" :value="isicCliDownloadCommand()">
                 <button @click="copyIsicCliDownloadCommand()" class="btn btn-square btn-sm inline"><svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M 16 3 C 14.742188 3 13.847656 3.890625 13.40625 5 L 6 5 L 6 28 L 26 28 L 26 5 L 18.59375 5 C 18.152344 3.890625 17.257813 3 16 3 Z M 16 5 C 16.554688 5 17 5.445313 17 6 L 17 7 L 20 7 L 20 9 L 12 9 L 12 7 L 15 7 L 15 6 C 15 5.445313 15.445313 5 16 5 Z M 8 7 L 10 7 L 10 11 L 22 11 L 22 7 L 24 7 L 24 26 L 8 26 Z"></path></svg></button>
 
               </div>

isic/core/templates/core/image_detail/images_tab.html

@@ -1,5 +1,5 @@
 <div x-show="selectedTab == '{{ section_name }}'">
-  <div class="bg-white shadow overflow-hidden sm:rounded-md">
+  <div class="bg-white shadow-sm overflow-hidden sm:rounded-md">
     <div class="mb-4" x-data="thumbnailGrid();">
       <div class="hidden pb-3 sm:flex sm:flex-row sm:justify-end">
         <a class="px-1" href="#" @click="decrease();">fewer columns</a> |

isic/core/templates/core/image_detail/ingestion_details_tab.html

@@ -8,7 +8,7 @@
   <div class="flex flex-col">
     <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
       <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
-        <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
+        <div class="shadow-sm overflow-hidden border-b border-gray-200 sm:rounded-lg">
           <table class="min-w-full divide-y divide-gray-200">
             <thead class="bg-gray-50">
               <tr>

isic/core/templates/core/image_detail/metadata_tab.html

@@ -28,7 +28,7 @@
         <div class="heading-3">Metadata History</div>
         <i class="ri-lock-line ml-1 text-xl"></i>
       </div>
-      <table class="table table-compact w-full">
+      <table class="table table-xs w-full">
         <thead>
           <tr>
             <th>Creator</th>
@@ -38,7 +38,7 @@
         </thead>
         <tbody>
           {% for metadata_version, diff in metadata_versions reversed %}
-            <tr class="hover">
+            <tr class="hover:bg-base-300">
               <td>{{ metadata_version.creator  }}</td>
               <td>{% localtime metadata_version.created  %}</td>
               <td>

isic/core/templates/core/image_detail/metadata_table.html

@@ -1,4 +1,4 @@
-<table class="table table-compact w-full">
+<table class="table table-xs w-full">
   <thead>
     <tr>
       <th>Field</th>
@@ -7,7 +7,7 @@
   </thead>
   <tbody>
     {% for field, value in metadata.items %}
-      <tr class="hover">
+      <tr class="hover:bg-base-300">
         <td>{{ field }}</td>
         <td>{{ value }}</td>
       </tr>