feat: share button styles

src/components/common/ReactionShare.tsx

@@ -79,8 +79,7 @@ export const ReactionShare: FC<{
           variant="share"
           variantColor={vertical ? "light" : undefined}
           className={cn(
-            "flex items-center is-tip",
-
+            "flex items-center",
             vertical ? "!h-auto flex-col" : "mr-2",
           )}
           isAutoWidth={true}
@@ -118,7 +117,7 @@ export const ReactionShare: FC<{
         setOpen={setIsShareOpen}
         title={t("Share Modal") || ""}
       >
-        <div className="relative grid grid-cols-[200px_auto] gap-5 p-4">
+        <div className="relative grid grid-cols-[200px_auto] gap-5 px-5 py-6">
           <div className="qrcode inline-block min-h-[200px]">
             <QRCodeSVG
               value={url}

src/components/site/PostActions.tsx

@@ -30,7 +30,7 @@ const PostActions = ({
       }}
       ref={containerRef}
     >
-      <div className="sticky top-[calc(100vh-245px)] text-sm leading-loose whitespace-nowrap flex flex-col justify-center items-center space-y-4">
+      <div className="sticky top-[calc(100vh-290px)] text-sm leading-loose whitespace-nowrap flex flex-col justify-center items-center space-y-4">
         <ReactionLike
           characterId={page?.characterId}
           noteId={page?.noteId}
@@ -48,11 +48,11 @@ const PostActions = ({
           page={page}
           vertical={true}
         />
-        <ReactionShare noteId={page?.noteId} vertical />
         <ReactionComment
           characterId={page?.characterId}
           noteId={page?.noteId}
         />
+        <ReactionShare noteId={page?.noteId} vertical />
       </div>
     </div>
   )

src/components/site/PostFooter.tsx

@@ -77,7 +77,6 @@ export const PostFooter = ({
         data-hide-print
       >
         <ReactionLike characterId={page?.characterId} noteId={page?.noteId} />
-        <ReactionShare noteId={page?.noteId} />
         {/* <ReactionMint characterId={page?.characterId} noteId={page?.noteId} /> */}
         <ReactionTip
           characterId={page?.characterId}
@@ -85,6 +84,7 @@ export const PostFooter = ({
           site={site}
           page={page}
         />
+        <ReactionShare noteId={page?.noteId} />
       </div>
       {inited || isInView ? (
         <DynamicComment page={page} />

src/css/tailwind.css

@@ -173,6 +173,7 @@ a {
 .button.is-like,
 .button.is-collect,
 .button.is-tip,
+.button.is-share,
 .button.is-comment {
   @apply shadow-none p-0;
   @apply text-gray-500;
@@ -180,12 +181,14 @@ a {
 .button.is-like.is-light,
 .button.is-collect.is-light,
 .button.is-tip.is-light,
+.button.is-share.is-light,
 .button.is-comment.is-light {
   @apply text-gray-400;
 }
 .button.is-like.is-light.is-loading:before,
 .button.is-collect.is-light.is-loading:before,
 .button.is-tip.is-light.is-loading:before,
+.button.is-share.is-light.is-loading:before,
 .button.is-comment.is-light.is-loading:before {
   margin-right: 0;
 }
@@ -205,10 +208,17 @@ a {
 }
 
 .button.is-tip:hover {
-  color: #ef4444;
+  color: #facc15;
 }
 .button.is-tip.active {
-  color: #ef4444;
+  color: #facc15;
+}
+
+.button.is-share:hover {
+  color: #0ea5e9;
+}
+.button.is-share.active {
+  color: #0ea5e9;
 }
 
 .button.is-comment:hover {

src/lib/i18n/locales/zh/common.json

@@ -93,5 +93,5 @@
   "Add to playlist": "添加到播放列表",
   "Share Modal": "分享到...",
   "Share": "分享",
-  "Share Message": "嘿，我发现了一片宝藏文章「{{title}}」哩，快来看看吧！"
+  "Share Message": "嘿，我发现了一篇宝藏文章「{{title}}」哩，快来看看吧！"
 }