Use outline buttons on project release list

opensafely-core · Nov 23, 2022 · 8be9fca · 8be9fca
1 parent be2f804
commit 8be9fca
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 10 deletions.
diff --git a/templates/_components/button.html b/templates/_components/button.html
@@ -12,7 +12,7 @@
 {% endif %}
 
     class="
-      inline-flex items-center justify-center rounded-md border border-transparent shadow-sm text-white transition-buttons duration-200
+      inline-flex items-center justify-center rounded-md border border-transparent shadow-sm transition-buttons duration-200
 
       {% if small %}
         px-2 py-1 text-xs font-normal
@@ -23,25 +23,37 @@
       {% if disabled %}
         cursor-not-allowed bg-slate-300 text-slate-800
       {% elif variant == "primary" %}
-        bg-oxford-600
+        bg-oxford-600 text-white
         hover:bg-oxford-700
         focus:bg-oxford-700 focus:ring-oxford-500 focus:ring-offset-white
+      {% elif variant == "primary-outline" %}
+        bg-transparent border border-oxford-700 text-oxford-700
+        hover:bg-oxford-100
+        focus:bg-oxford-100 focus:ring-oxford-500 focus:ring-offset-white
       {% elif variant == "secondary" %}
-        bg-slate-500
+        bg-slate-500 text-white
         hover:bg-slate-600
         focus:bg-slate-600 focus:ring-slate-500 focus:ring-offset-white
+      {% elif variant == "secondary-outline" %}
+        bg-transparent border border-slate-700 text-slate-700
+        hover:bg-slate-200
+        focus:bg-slate-200 focus:ring-slate-500 focus:ring-offset-white
       {% elif variant == "danger" %}
-        bg-bn-ribbon-600
+        bg-bn-ribbon-600 text-white
         hover:bg-bn-ribbon-700
         focus:ring-bn-ribbon-500 focus:ring-offset-white
       {% elif variant == "warning" %}
-        bg-bn-flamenco-600
+        bg-bn-flamenco-600 text-white
         hover:bg-bn-flamenco-700
         focus:ring-bn-flamenco-500 focus:ring-offset-white
       {% elif variant == "success" %}
-        bg-green-600
+        bg-green-600 text-white
         hover:bg-green-700
         focus:ring-green-500 focus:ring-offset-white
+      {% elif variant == "success-outline" %}
+        bg-transparent border border-green-700 text-green-700
+        hover:bg-green-100
+        focus:bg-green-100 focus:ring-green-500 focus:ring-offset-white
       {% endif %}
 
       {% if not disabled %}

diff --git a/templates/project_release_list.html b/templates/project_release_list.html
@@ -39,7 +39,7 @@ <h1 class="text-3xl break-words pt-2 md:pt-0 md:text-4xl font-bold text-slate-90
             x-data="dropdown"
             x-title="release-{{ release.id }}"
         >
-          <div class="flex flex-col md:flex-row gap-2 items-center justify-between">
+          <div class="flex flex-col md:flex-row gap-2 items-start justify-between">
             <span class="mr-auto">
               Files released by {{ release.created_by.name }}
               <ul>
@@ -56,13 +56,13 @@ <h1 class="text-3xl break-words pt-2 md:pt-0 md:text-4xl font-bold text-slate-90
             </span>
             {% if release.can_view_files %}
             <div class="flex-shrink-0 flex flex-col gap-2 sm:gap-0 sm:flex-row sm:ml-auto">
-              {% #button class="min-w-[8ch] sm:rounded-r-none" variant="success" type="link" href=release.view_url %}
+              {% #button class="min-w-[8ch] sm:rounded-r-none" variant="success-outline" type="link" href=release.view_url %}
                 View
               {% /button %}
-              {% #button class="min-w-[12ch] sm:-ml-1 sm:rounded-none" variant="primary" type="link" href=release.download_url %}
+              {% #button class="min-w-[12ch] sm:rounded-none sm:border-x-0" variant="primary-outline" type="link" href=release.download_url %}
                 Download all
               {% /button %}
-              {% #button class="min-w-[16ch] sm:-ml-1 sm:rounded-l-none" variant="secondary" x_bind="trigger" %}
+              {% #button class="min-w-[16ch] sm:rounded-l-none" variant="secondary-outline" x_bind="trigger" %}
                 List
                 {% if release.can_view_files %}
                 ({{ release.files | length }} file{{ release.files | length | pluralize }})