svg animation

Author: davideast

src/app/pages/home/home.component.html

@@ -15,7 +15,10 @@
 -->
 
 <div class="api-key-banner">
-  <p>Open <code>functions/.env</code> and add your Gemini API key.</p>
+  <div>
+    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M280-400q-33 0-56.5-23.5T200-480q0-33 23.5-56.5T280-560q33 0 56.5 23.5T360-480q0 33-23.5 56.5T280-400Zm0 160q-100 0-170-70T40-480q0-100 70-170t170-70q67 0 121.5 33t86.5 87h352l120 120-180 180-80-60-80 60-85-60h-47q-32 54-86.5 87T280-240Zm0-80q56 0 98.5-34t56.5-86h125l58 41 82-61 71 55 75-75-40-40H435q-14-52-56.5-86T280-640q-66 0-113 47t-47 113q0 66 47 113t113 47Z"/></svg>
+    <p>Open <code>functions/.env</code> and add your Gemini API key.</p>
+  </div>
 </div>
 
 <header>

src/app/pages/home/home.component.scss

@@ -130,11 +130,31 @@ header {
   display: flex;
   justify-content: center;
 
-  & p {
+  & div {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+
     padding: 16px;
-    background-color: var(--primary);
-    color: var(--background);
+    border: 2px solid var(--primary);
+    color: var(--contrast);
     border-radius: 12px;
     max-width: fit-content;
+
+    & svg {
+      animation: wobble 1s ease-in-out infinite;
+    }
   }
 }
+
+@keyframes wobble {
+  0%, 50% {
+    transform: translateX(0); 
+  }
+  12.5% {
+    transform: translateX(-5px);
+  }
+  37.5% {
+    transform: translateX(5px);
+  }
+}