From 1d55545e3023f29eb7390357a77b29034855ec5d Mon Sep 17 00:00:00 2001
From: boojack <imrealleonardo@gmail.com>
Date: Sat, 16 Jul 2022 09:52:57 +0800
Subject: [PATCH] chore: update github badge style

---
 web/src/components/GitHubBadge.tsx | 13 +++++-----
 web/src/less/github-badge.less     | 40 ++++++++++++++----------------
 2 files changed, 24 insertions(+), 29 deletions(-)

diff --git a/web/src/components/GitHubBadge.tsx b/web/src/components/GitHubBadge.tsx
index bcd1fbac..21a1a4a8 100644
--- a/web/src/components/GitHubBadge.tsx
+++ b/web/src/components/GitHubBadge.tsx
@@ -13,18 +13,17 @@ const GitHubBadge: React.FC<Props> = () => {
     });
   }, []);
 
-  const handleClick = () => {
-    window.location.href = "https://github.com/usememos/memos";
-  };
-
   return (
-    <div className="github-badge-container" onClick={handleClick}>
+    <a className="github-badge-container" href="https://github.com/usememos/memos">
       <div className="github-icon">
         <img className="icon-img" src="/github.webp" alt="" />
         Star
       </div>
-      <span className={`count-text ${starCount || "pulse"}`}>{starCount || "🌟"}</span>
-    </div>
+      <div className="count-text">
+        {starCount || ""}
+        <span className="icon-text">🌟</span>
+      </div>
+    </a>
   );
 };
 
diff --git a/web/src/less/github-badge.less b/web/src/less/github-badge.less
index a9e204e7..920ab8d0 100644
--- a/web/src/less/github-badge.less
+++ b/web/src/less/github-badge.less
@@ -10,29 +10,25 @@
   }
 
   > .count-text {
-    @apply px-3 text-xs font-bold text-gray-800;
+    @apply w-auto h-full flex flex-row justify-center items-center px-3 text-xs font-bold text-gray-800;
 
-    &.pulse {
-      @apply text-sm;
-      animation: 1s linear 0s infinite pulse;
-    }
-
-    @keyframes pulse {
-      0% {
-        margin-bottom: 0px;
-      }
-      30% {
-        margin-bottom: 2px;
-      }
-      60% {
-        margin-bottom: 6px;
-      }
-      70% {
-        margin-bottom: 3px;
-      }
-      100% {
-        margin-bottom: 0px;
-      }
+    > .icon-text {
+      @apply text-sm ml-1;
+      animation: 1.6s linear 0s infinite pulse;
     }
   }
 }
+
+@keyframes pulse {
+  0% {
+    transform: scale(0.95);
+  }
+
+  70% {
+    transform: scale(1.2);
+  }
+
+  100% {
+    transform: scale(0.95);
+  }
+}