GH wiggle

src/components/StatusBar.tsx

@@ -60,7 +60,7 @@ const StatusBar = ({ tune }: { tune: TuneState }) => (
           target="__blank"
           rel="noopener noreferrer"
         >
-          <Space>
+          <Space className="github-link">
             <GithubOutlined />
             GitHub
           </Space>

src/css/App.less

@@ -5,6 +5,7 @@
 @import './themes/common.less';
 @import './themes/ant.less';
 @import './overrides.less';
+@import './animations.less';
 
 body {
   overflow: hidden;
@@ -42,6 +43,14 @@ html, body {
   a {
     color: @text;
   }
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+  .github-link {
+    animation: wiggle 2s linear 2;
+  }
 }
 
 .app-sidebar {

src/css/animations.less

@@ -0,0 +1,23 @@
+@keyframes wiggle {
+  0%, 7% {
+    transform: rotateZ(0);
+  }
+  15% {
+    transform: rotateZ(-15deg);
+  }
+  20% {
+    transform: rotateZ(10deg);
+  }
+  25% {
+    transform: rotateZ(-10deg);
+  }
+  30% {
+    transform: rotateZ(6deg);
+  }
+  35% {
+    transform: rotateZ(-4deg);
+  }
+  40%, 100% {
+    transform: rotateZ(0);
+  }
+}