fix: add ui improvements

src/.vuepress/theme/components/blog/ActiveTags.vue

@@ -54,7 +54,7 @@
       </div>
     </div>
     <button
-      class="p-1 l-4 opacity-50 hover:opacity-100 text-blueGreen transition transition-opacity duration-300 ease-in-out cursor-pointer"
+      class="p-1 l-4 text-blueGreen hover:text-blueGreenScreen transition duration-300 ease-in-out cursor-pointer"
       @click="handleClear()"
     >
       &#10005;

src/.vuepress/theme/components/blog/NewsletterForm.vue

@@ -41,7 +41,7 @@
               type="submit"
               value="Subscribe"
               name="subscribe"
-              class="p-2 text-white font-semibold bg-blueGreen rounded cursor-pointer w-full"
+              class="p-2 text-white font-semibold bg-blueGreen hover:bg-blueGreenScreen transition duration-300 rounded cursor-pointer w-full"
             />
           </div>
         </div>
@@ -57,9 +57,6 @@
         </label>
       </div>
       <div id="mergeRow-gdpr">
-        <div>
-          <fieldset class="" name="interestgroup_field"></fieldset>
-        </div>
         <div style="position: absolute; left: -5000px" aria-hidden="true">
           <input
             type="text"

src/.vuepress/theme/components/blog/SearchCategoriesAndTags.vue

@@ -49,7 +49,7 @@
 
       <button
         ref="select2"
-        class="h-full p-2 text-white font-semibold bg-blueGreen rounded opacity-75 hover:opacity-100 transition transition-opacity duration-300 ease-in-out"
+        class="h-full p-2 text-white font-semibold bg-blueGreen rounded hover:bg-blueGreenScreen transition duration-300 ease-in-out"
         @click="handleSearch"
         @focus="setSelected(2)"
       >

src/.vuepress/theme/layouts/Blog.vue

@@ -37,7 +37,7 @@
         class="flex justify-center mt-8 pb-4"
       >
         <button
-          class="px-3 py-2 text-white text-xl bg-blueGreen font-semibold rounded hover:opacity-75"
+          class="px-3 py-2 text-white text-xl bg-blueGreen font-semibold rounded hover:bg-blueGreenScreen transition duration-300"
           @click="handleLoadMoreClick"
         >
           Load More

src/.vuepress/theme/layouts/ImageCrop.vue

@@ -6,13 +6,13 @@
       </div>
       <div class="flex items-center justify-center mt-4">
         <button
-          class="bg-blueGreen bg-opacity-75 transition duration-300 hover:bg-opacity-100 text-white px-4 py-2 mr-4"
+          class="bg-blueGreen transition duration-300 hover:bg-blueGreenScreen text-white px-4 py-2 mr-4"
           @click="download"
         >
           Download
         </button>
         <button
-          class="bg-blueGreen bg-opacity-75 transition duration-300 hover:bg-opacity-100 text-white px-4 py-2"
+          class="bg-blueGreen transition duration-300 hover:bg-blueGreenScreen text-white px-4 py-2"
           @click="reset"
         >
           Load a new image
@@ -25,7 +25,7 @@
     >
       <div class="flex justify-center mb-3">
         <button
-          class="bg-blueGreen bg-opacity-75 hover:bg-opacity-100 transition duration-300 ease-in-out text-white p-2 mr-4"
+          class="bg-blueGreen hover:bg-blueGreenScreen transition duration-300 ease-in-out text-white p-2 mr-4"
           @click="zoom(1.5)"
         >
           <SVGIcon
@@ -35,7 +35,7 @@
           />
         </button>
         <button
-          class="bg-blueGreen bg-opacity-75 hover:bg-opacity-100 transition duration-300 ease-in-out text-white p-2 mr-4"
+          class="bg-blueGreen hover:bg-blueGreenScreen transition duration-300 ease-in-out text-white p-2 mr-4"
           @click="zoom(0.5)"
         >
           <SVGIcon
@@ -45,7 +45,7 @@
           />
         </button>
         <button
-          class="bg-blueGreen bg-opacity-75 hover:bg-opacity-100 transition duration-300 ease-in-out text-white p-2 mr-4"
+          class="bg-blueGreen hover:bg-blueGreenScreen transition duration-300 ease-in-out text-white p-2 mr-4"
           @click="crop"
         >
           <SVGIcon
@@ -55,7 +55,7 @@
           />
         </button>
         <button
-          class="bg-blueGreen bg-opacity-75 hover:bg-opacity-100 transition duration-300 ease-in-out text-white p-2"
+          class="bg-blueGreen hover:bg-blueGreenScreen transition duration-300 ease-in-out text-white p-2"
           @click="reset"
         >
           <SVGIcon

src/.vuepress/theme/tailwind.config.js

@@ -69,6 +69,7 @@ const theme = {
       deepBlue: '#002256',
       plBlack: '#16161F',
       blueGreen: '#34797D',
+      blueGreenScreen: '#66989a',
       blueGreenLight: '#6bc4ce',
       aquaMuted: '#9ad4db',
       charcoalMuted: '#7f8491',