🎨 styles old version alert

Closes #465

static/css/styles.css

@@ -1267,12 +1267,8 @@ input[type=file] {
   margin-left: 0.5rem;
 }
 
-.ml-\[200px\] {
-  margin-left: 200px;
-}
-
-.-ml-\[213px\] {
-  margin-left: -213px;
+.-mt-8 {
+  margin-top: -2rem;
 }
 
 .mb-10 {
@@ -1287,22 +1283,6 @@ input[type=file] {
   margin-left: 1rem;
 }
 
-.-mt-16 {
-  margin-top: -4rem;
-}
-
-.-mt-8 {
-  margin-top: -2rem;
-}
-
-.-mt-3 {
-  margin-top: -0.75rem;
-}
-
-.-mb-3 {
-  margin-bottom: -0.75rem;
-}
-
 .block {
   display: block;
 }
@@ -1467,14 +1447,6 @@ input[type=file] {
   width: 70%;
 }
 
-.w-\[200px\] {
-  width: 200px;
-}
-
-.w-\[150px\] {
-  width: 150px;
-}
-
 .w-5 {
   width: 1.25rem;
 }
@@ -1491,6 +1463,10 @@ input[type=file] {
   width: 0.25rem;
 }
 
+.w-\[200px\] {
+  width: 200px;
+}
+
 .min-w-0 {
   min-width: 0px;
 }
@@ -1988,6 +1964,24 @@ input[type=file] {
   background-color: transparent;
 }
 
+.bg-yellow-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 240 138 / var(--tw-bg-opacity));
+}
+
+.bg-yellow-200\/50 {
+  background-color: rgb(254 240 138 / 0.5);
+}
+
+.bg-yellow-200\/70 {
+  background-color: rgb(254 240 138 / 0.7);
+}
+
+.bg-slate {
+  --tw-bg-opacity: 1;
+  background-color: rgb(49 74 87 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-10 {
   --tw-bg-opacity: 0.1;
 }
@@ -2461,6 +2455,10 @@ input[type=file] {
   color: rgb(229 231 235 / var(--tw-text-opacity));
 }
 
+.underline {
+  text-decoration-line: underline;
+}
+
 .placeholder-gray-500::-moz-placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(107 114 128 / var(--tw-placeholder-opacity));
@@ -3006,6 +3004,10 @@ input[type=file] {
     margin-bottom: 1.5rem;
   }
 
+  .md\:ml-\[200px\] {
+    margin-left: 200px;
+  }
+
   .md\:-ml-\[213px\] {
     margin-left: -213px;
   }
@@ -3014,10 +3016,6 @@ input[type=file] {
     margin-left: 1.5rem;
   }
 
-  .md\:ml-\[200px\] {
-    margin-left: 200px;
-  }
-
   .md\:block {
     display: block;
   }
@@ -3106,15 +3104,6 @@ input[type=file] {
     min-width: 150px;
   }
 
-  .md\:min-w-fit {
-    min-width: -moz-fit-content;
-    min-width: fit-content;
-  }
-
-  .md\:min-w-full {
-    min-width: 100%;
-  }
-
   .md\:max-w-7xl {
     max-width: 80rem;
   }

templates/libraries/includes/version_alert.html

@@ -1,13 +1,15 @@
 {% if version_alert %}
-    <div role="alert">
-        <p>This is an older version and was released in {{ version.release_date|date:"Y"}}.
+    <div role="alert" class="py-2 px-3 mb-3 text-center rounded-sm bg-yellow-200/70">
+        <p class="p-0 m-0">
+            <i class="fas fa-exclamation-circle"></i>
+            This is an older version and was released in {{ version.release_date|date:"Y"}}.
            The current version is
             {% if latest_library_version %}
-                <a href="{% url 'library-detail' slug=latest_library_version.library.slug %}">
+                <a href="{% url 'library-detail' slug=latest_library_version.library.slug %}" class="py-1 px-2 text-white rounded bg-slate">
             {% else %}
-                <a href="{% url 'version-detail' latest_version.slug %}">
+                <a href="{% url 'version-detail' latest_version.slug %}" class="font-semibold underline text-charcoal">
             {% endif %}
-            {{ latest_version.display_name }}</a>.
+            {{ latest_version.display_name }}</a>
         </p>
     </div>
 {% endif %}