From fd64104a70aac2ae3a79f46ac543b4105ca98ef4 Mon Sep 17 00:00:00 2001
From: Greg Newman <greg@gregnewman.org>
Date: Tue, 17 Jan 2023 18:54:26 -0500
Subject: [PATCH] :bug: fixes indigo button

* Fix where indigo snuck into the buttons
* Also styles buttons in past versions

Issue: #89
---
 static/css/styles.css        | 58 ++++++++++++++++++------------------
 templates/homepage.html      |  2 +-
 templates/versions/list.html | 12 +++++---
 3 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/static/css/styles.css b/static/css/styles.css
index f74baa81..a1d828b4 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -960,16 +960,16 @@ input[type=file] {
   margin-bottom: 0.75rem;
 }
 
-.my-11 {
-  margin-top: 2.75rem;
-  margin-bottom: 2.75rem;
-}
-
 .my-6 {
   margin-top: 1.5rem;
   margin-bottom: 1.5rem;
 }
 
+.my-11 {
+  margin-top: 2.75rem;
+  margin-bottom: 2.75rem;
+}
+
 .my-1 {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
@@ -1371,18 +1371,18 @@ input[type=file] {
   margin-bottom: calc(2rem * var(--tw-space-y-reverse));
 }
 
-.space-x-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(1rem * var(--tw-space-x-reverse));
-  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
 .space-y-11 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(2.75rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(2.75rem * var(--tw-space-y-reverse));
 }
 
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-x-24 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(6rem * var(--tw-space-x-reverse));
@@ -1525,15 +1525,15 @@ input[type=file] {
   background-color: rgb(90 213 153 / 0.1);
 }
 
+.bg-charcoal\/60 {
+  background-color: rgb(23 42 52 / 0.6);
+}
+
 .bg-indigo-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(79 70 229 / var(--tw-bg-opacity));
 }
 
-.bg-charcoal\/60 {
-  background-color: rgb(23 42 52 / 0.6);
-}
-
 .bg-slate {
   --tw-bg-opacity: 1;
   background-color: rgb(49 74 87 / var(--tw-bg-opacity));
@@ -1950,16 +1950,16 @@ input[type=file] {
   background-color: rgb(255 159 0 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-indigo-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(67 56 202 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-orange:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(255 159 0 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-indigo-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(67 56 202 / var(--tw-bg-opacity));
+}
+
 .hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -2086,6 +2086,11 @@ input[type=file] {
     margin-bottom: 0px;
   }
 
+  .md\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
   .md\:my-6 {
     margin-top: 1.5rem;
     margin-bottom: 1.5rem;
@@ -2101,11 +2106,6 @@ input[type=file] {
     margin-bottom: 2.75rem;
   }
 
-  .md\:mx-auto {
-    margin-left: auto;
-    margin-right: auto;
-  }
-
   .md\:mt-3 {
     margin-top: 0.75rem;
   }
@@ -2170,6 +2170,10 @@ input[type=file] {
     width: 100%;
   }
 
+  .md\:w-1\/3 {
+    width: 33.333333%;
+  }
+
   .md\:w-5\/6 {
     width: 83.333333%;
   }
@@ -2198,10 +2202,6 @@ input[type=file] {
     width: 25%;
   }
 
-  .md\:w-1\/3 {
-    width: 33.333333%;
-  }
-
   .md\:w-auto {
     width: auto;
   }
diff --git a/templates/homepage.html b/templates/homepage.html
index 25df2c9a..4c2e62a9 100644
--- a/templates/homepage.html
+++ b/templates/homepage.html
@@ -60,7 +60,7 @@
         <div class="my-5"><span class="mr-5">Authors</span> <img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline" /></div>
         <div class="mt-5 max-w-md sm:flex md:mt-8">
           <div class="rounded-md shadow">
-            <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-orange text-base font-medium rounded-md text-orange bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-base md:px-10"> Download </a>
+            <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-4 md:text-base md:px-10"> Download </a>
           </div>
           <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
             <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange hover:bg-gray-50 md:py-4 md:text-base md:px-10"> Version Details > </a>
diff --git a/templates/versions/list.html b/templates/versions/list.html
index 09fd3213..cfb9f6ee 100644
--- a/templates/versions/list.html
+++ b/templates/versions/list.html
@@ -22,7 +22,7 @@
         <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
         <div class="mt-5 max-w-md sm:flex md:mt-8">
           <div class="rounded-md shadow">
-            <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-orange text-base font-medium rounded-md text-orange bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10"> Download </a>
+            <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-4 md:text-lg md:px-10"> Download </a>
           </div>
           <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
             <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> Version Details > </a>
@@ -47,9 +47,13 @@
       </div>
       <div class="md:w-3/4">
         <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
-        <div class="uppercase mt-5 max-w-md sm:flex md:mt-8">
-            <a href="#" class="text-orange mr-3"> Download </a> |
-            <a href="#" class="text-orange ml-3"> Version Details</a>
+         <div class="mt-5 max-w-md sm:flex md:mt-8">
+          <div class="rounded-md shadow">
+            <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-4 md:text-lg md:px-10"> Download </a>
+          </div>
+          <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
+            <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> Version Details > </a>
+          </div>
         </div>
       </div>
     </div>