🩹 Fix missing animations

src/components/GitmojiList/Gitmoji/index.js

@@ -18,9 +18,11 @@ const Gitmoji = (props: Props): Element<'article'> => (
     }`}
   >
     <div
-      className={`${styles.card} ${props.isListMode ? styles.cardList : ''}`}
+      className={`${styles.card} ${
+        props.isListMode ? styles.cardList : ''
+      } gitmoji-${props.name}`}
     >
-      <header className={`${props.name} ${styles.cardHeader}`}>
+      <header className={`${styles.cardHeader}`}>
         <button
           type="button"
           className={`gitmoji-clipboard-emoji ${styles.gitmoji}`}

src/components/GitmojiList/Gitmoji/styles.module.css

@@ -86,6 +86,7 @@
 }
 
 .gitmojiCode {
+  position: relative;
   border-radius: 4px;
   transition-duration: 0.3s;
   cursor: pointer;
@@ -112,3 +113,33 @@
     padding-bottom: 1em;
   }
 }
+
+/*
+  This code has been obtained from:
+  https://github.com/daneden/animate.css/blob/master/source/attention_seekers/bounce.css
+*/
+@keyframes bounce {
+  from,
+  20%,
+  53%,
+  80%,
+  to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transform: translate3d(0, 0, 0);
+  }
+
+  40%,
+  43% {
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transform: translate3d(0, -9px, 0);
+  }
+
+  70% {
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transform: translate3d(0, -5px, 0);
+  }
+
+  90% {
+    transform: translate3d(0, -2px, 0);
+  }
+}

src/components/GitmojiList/index.js

@@ -58,7 +58,8 @@ const GitmojiList = (props: Props): Element<'div'> => {
       <style>
         {Object.entries(emojiColorsMap)
           .map(
-            ([key, color]: Object) => `.${key} { background-color: ${color} }`
+            ([key, color]: Object) =>
+              `.gitmoji-${key} header, .gitmoji-${key} .gitmoji-clipboard-code::after { background-color: ${color} }`
           )
           .reduce((memo, value) => memo + value, '')}
       </style>

src/utils/theme/theme.css

@@ -135,34 +135,19 @@ main.wrap {
   }
 }
 
-/*
-  This code has been obtained from:
-  https://github.com/daneden/animate.css/blob/master/source/attention_seekers/bounce.css
-*/
-@keyframes bounce {
-  from,
-  20%,
-  53%,
-  80%,
-  to {
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    transform: translate3d(0, 0, 0);
-  }
-
-  40%,
-  43% {
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    transform: translate3d(0, -9px, 0);
-  }
-
-  70% {
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    transform: translate3d(0, -5px, 0);
-  }
+.gitmoji-clipboard-code::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 0;
+  height: 0.2em;
+  border-radius: 4px;
+  transition: width 0.15s;
+}
 
-  90% {
-    transform: translate3d(0, -2px, 0);
-  }
+.gitmoji-clipboard-code:hover::after {
+  width: 100%;
 }
 
 /* Flexboxgrid critical */