chore: added micro animation to compare and clear buttons

Author: technikhil314

components/icons/prettyCode.vue

@@ -3,8 +3,7 @@
     viewBox="0 0 15 15"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    width="15"
-    height="15"
+    :class="className"
   >
     <path
       d="M0 7.5h2m13 0h-2m-8 7H3.5a2 2 0 01-2-2v-10a2 2 0 012-2H5m5 14h1.5a2 2 0 002-2v-10a2 2 0 00-2-2H10"
@@ -14,5 +13,12 @@
 </template>
 <script lang="ts">
 import Vue from 'vue'
-export default Vue.extend({})
+export default Vue.extend({
+  props: {
+    className: {
+      type: String,
+      required: false,
+    },
+  },
+})
 </script>

pages/v2/index.vue

@@ -43,12 +43,23 @@
               aria-label="Beautify entered text"
               type="button"
               title="Beautify"
-              class="absolute p-2 transition-all rounded-sm  top-16 right-3 aspect-square dark:hover:bg-slate-600 dark:bg-slate-600/50 hover:bg-slate-300 bg-gray-300/50"
+              class="
+                absolute
+                p-2
+                transition-all
+                rounded-sm
+                top-16
+                right-3
+                aspect-square
+                dark:hover:bg-slate-600 dark:bg-slate-600/50
+                hover:bg-slate-300
+                bg-gray-300/50
+              "
               @click="
                 lhsEditor.trigger('editor', 'editor.action.formatDocument')
               "
             >
-              <PrettyCode />
+              <PrettyCode class="w-4 h-4" />
             </button>
           </div>
           <div class="relative flex flex-col w-1/2 gap-4">
@@ -72,33 +83,81 @@
               aria-label="Beautify entered text"
               type="button"
               title="Beautify"
-              class="absolute p-2 transition-all rounded-sm  top-16 right-3 aspect-square dark:hover:bg-slate-600 dark:bg-slate-600/50 hover:bg-slate-300 bg-gray-300/50"
+              class="
+                absolute
+                p-2
+                transition-all
+                rounded-sm
+                top-16
+                right-3
+                aspect-square
+                dark:hover:bg-slate-600 dark:bg-slate-600/50
+                hover:bg-slate-300
+                bg-gray-300/50
+              "
               @click="
                 rhsEditor.trigger('editor', 'editor.action.formatDocument')
               "
             >
-              <PrettyCode />
+              <PrettyCode class="w-4 h-4" />
             </button>
           </div>
         </section>
         <div class="relative flex justify-center flex-grow-0 w-full gap-4 mt-4">
           <button
             id="submitButton"
-            class="inline-flex items-center justify-center w-40 gap-4 px-4 py-2 transition-transform transform bg-blue-600 rounded-md shadow-lg outline-none  text-gray-50 focus:ring-4 active:scale-y-75"
+            class="
+              inline-flex
+              items-center
+              justify-center
+              w-40
+              gap-4
+              px-4
+              py-2
+              transition-transform
+              transform
+              bg-blue-600
+              rounded-md
+              shadow-lg
+              outline-none
+              text-gray-50
+              focus:ring-4
+              active:scale-y-75
+              group
+            "
             aria-label="Click here to compare the inputted text blocks"
           >
             Compare
-            <span class="w-4 aspect-square">
+            <span class="w-4 aspect-square group-hover:animate-linear-bounce">
               <Forward />
             </span>
           </button>
           <button
-            class="absolute right-0 inline-flex items-center justify-center gap-4 px-4 py-2 text-gray-800 transition-transform transform bg-yellow-300 rounded-md shadow-lg outline-none  focus:ring-4 active:scale-y-75"
+            class="
+              absolute
+              right-0
+              inline-flex
+              items-center
+              justify-center
+              gap-4
+              px-4
+              py-2
+              text-gray-800
+              transition-transform
+              transform
+              bg-yellow-300
+              rounded-md
+              shadow-lg
+              outline-none
+              focus:ring-4
+              active:scale-y-75
+              group
+            "
             aria-label="Click here to clear all the inputs"
             type="button"
             @click="clear"
           >
-            <span class="w-4 aspect-square">
+            <span class="w-4 aspect-square group-hover:animate-wiggle">
               <Bin />
             </span>
             Clear

tailwind.config.js

@@ -3,30 +3,53 @@ module.exports = {
   darkMode: 'class',
   variants: {
     extend: {
-      boxShadow: ['dark']
+      boxShadow: ['dark'],
     },
   },
   theme: {
+    extend: {
+      keyframes: {
+        'linear-bounce': {
+          '0%, 100%': {
+            transform: 'translateX(25%)',
+            'animation-timing-function': 'cubic-bezier(0.8, 0, 1, 1)',
+          },
+          '50%': {
+            transform: 'translateX(0)',
+            'animation-timing-function': 'cubic-bezier(0, 0, 0.2, 1)',
+          },
+        },
+        wiggle: {
+          '0%, 100%': { transform: 'rotate(-10deg)' },
+          '50%': { transform: 'rotate(10deg)' },
+        },
+      },
+    },
     maxHeight: {
       'screen--nav': 'calc(100vh - 7rem)',
     },
     container: {
       center: true,
     },
+    animation: {
+      'linear-bounce': 'linear-bounce 1s linear infinite',
+      wiggle: 'wiggle 1s linear infinite',
+    },
     zIndex: {
-      '1': 1,
-      '2': 2,
-      '10': 10,
-      '11': 11
+      1: 1,
+      2: 2,
+      10: 10,
+      11: 11,
     },
     minHeight: {
-      '80': '20rem'
+      80: '20rem',
     },
     translate: {
       '-screen': '-100vh',
     },
     boxShadow: {
-      DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+      DEFAULT:
+        '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
       md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
       lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
       xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
@@ -37,7 +60,5 @@ module.exports = {
       none: 'none',
     },
   },
-  plugins: [
-    require('@tailwindcss/forms'),
-  ]
+  plugins: [require('@tailwindcss/forms')],
 }