From 473bcc8050b2ae2050ccd0f94026b3b04ec86a52 Mon Sep 17 00:00:00 2001
From: enjidev <me@enji.dev>
Date: Wed, 11 Jan 2023 20:04:26 +0700
Subject: [PATCH] chore: improve Reactions styles

---
 apps/enji.dev/src/components/Reactions.tsx    | 92 ++++++++++---------
 apps/enji.dev/src/components/ShareButton.tsx  |  2 +-
 .../src/contents-layouts/Post/index.tsx       |  2 +-
 .../src/contents-layouts/Project/index.tsx    |  2 +-
 4 files changed, 51 insertions(+), 47 deletions(-)

diff --git a/apps/enji.dev/src/components/Reactions.tsx b/apps/enji.dev/src/components/Reactions.tsx
index 4d696b65..a367b205 100644
--- a/apps/enji.dev/src/components/Reactions.tsx
+++ b/apps/enji.dev/src/components/Reactions.tsx
@@ -78,58 +78,62 @@ function Reactions() {
         'dark:border-divider-dark dark:bg-slate-900/80'
       )}
     >
-      <div className={clsx('flex items-center gap-1')}>
-        <EmojiReaction
-          title="Claps"
-          defaultImage="/assets/emojis/clapping-hands.png"
-          animatedImage="/assets/emojis/clapping-hands-animated.png"
-          onClick={() => {
-            setClapCount((current) => current + 1);
-          }}
-        />
-        <EmojiReaction
-          title="Wow"
-          defaultImage="/assets/emojis/astonished-face.png"
-          animatedImage="/assets/emojis/astonished-face-animated.png"
-          onClick={() => {
-            setAmazedCount((current) => current + 1);
-          }}
-        />
-      </div>
-      <div className={clsx('flex items-center gap-2')}>
-        <ReactionCounter count={clapCount}>
-          <Image
-            className={clsx('h-4 w-4 select-none')}
-            alt="Claps"
-            src="/assets/emojis/clapping-hands.png"
-            width={48}
-            height={48}
-            quality={100}
-            priority
+      <div className={clsx('flex items-center gap-4')}>
+        <div className={clsx('flex items-center gap-1 pl-2')}>
+          <EmojiReaction
+            title="Claps"
+            defaultImage="/assets/emojis/clapping-hands.png"
+            animatedImage="/assets/emojis/clapping-hands-animated.png"
+            onClick={() => {
+              setClapCount((current) => current + 1);
+            }}
           />
-        </ReactionCounter>
-        <ReactionCounter count={amazedCount}>
-          <Image
-            className={clsx('h-4 w-4 select-none')}
-            alt="Amazed"
-            src="/assets/emojis/astonished-face.png"
-            width={48}
-            height={48}
-            quality={100}
-            priority
+          <EmojiReaction
+            title="Wow"
+            defaultImage="/assets/emojis/astonished-face.png"
+            animatedImage="/assets/emojis/astonished-face-animated.png"
+            onClick={() => {
+              setAmazedCount((current) => current + 1);
+            }}
           />
-        </ReactionCounter>
+        </div>
+        <div className={clsx('flex items-center gap-2')}>
+          <ReactionCounter count={clapCount}>
+            <Image
+              className={clsx('h-4 w-4 select-none')}
+              alt="Claps"
+              src="/assets/emojis/clapping-hands.png"
+              width={48}
+              height={48}
+              quality={100}
+              priority
+            />
+          </ReactionCounter>
+          <ReactionCounter count={amazedCount}>
+            <Image
+              className={clsx('h-4 w-4 select-none')}
+              alt="Amazed"
+              src="/assets/emojis/astonished-face.png"
+              width={48}
+              height={48}
+              quality={100}
+              priority
+            />
+          </ReactionCounter>
+        </div>
+      </div>
+      <div className={clsx('flex items-center gap-4')}>
         <div className={clsx('hidden', 'sm:block')}>
           <ReactionCounter count={sharedCount}>
             <ShareIcon className={clsx('h-3 w-3')} />
           </ReactionCounter>
         </div>
+        <ShareButton
+          onItemClick={() => {
+            setSharedCount((current) => current + 1);
+          }}
+        />
       </div>
-      <ShareButton
-        onItemClick={() => {
-          setSharedCount((current) => current + 1);
-        }}
-      />
     </div>
   );
 }
diff --git a/apps/enji.dev/src/components/ShareButton.tsx b/apps/enji.dev/src/components/ShareButton.tsx
index a1d412b4..851ba94a 100644
--- a/apps/enji.dev/src/components/ShareButton.tsx
+++ b/apps/enji.dev/src/components/ShareButton.tsx
@@ -116,7 +116,7 @@ function ShareButton({ onItemClick = () => {} }: ShareButtonProps) {
               initial="hide"
               animate="show"
               className={clsx(
-                'border-divider-light absolute bottom-16 right-0 z-[902] flex w-full flex-col overflow-hidden rounded-2xl border bg-white pb-2 pt-1',
+                'border-divider-light absolute bottom-16 right-0 z-[902] flex w-56 flex-col overflow-hidden rounded-2xl border bg-white pb-2 pt-1',
                 'dark:border-divider-dark dark:bg-[#161e31]'
               )}
             >
diff --git a/apps/enji.dev/src/contents-layouts/Post/index.tsx b/apps/enji.dev/src/contents-layouts/Post/index.tsx
index 4f6dc64a..7339ffcb 100644
--- a/apps/enji.dev/src/contents-layouts/Post/index.tsx
+++ b/apps/enji.dev/src/contents-layouts/Post/index.tsx
@@ -64,7 +64,7 @@ function Post({
         )}
       >
         <WithTableOfContentsMock>
-          <div className={clsx('mx-auto px-4', 'sm:max-w-[600px] lg:px-24')}>
+          <div className={clsx('mx-auto max-w-[360px]', 'sm:max-w-[420px]')}>
             <Reactions />
           </div>
         </WithTableOfContentsMock>
diff --git a/apps/enji.dev/src/contents-layouts/Project/index.tsx b/apps/enji.dev/src/contents-layouts/Project/index.tsx
index dfa8bb6d..79e6d9a7 100644
--- a/apps/enji.dev/src/contents-layouts/Project/index.tsx
+++ b/apps/enji.dev/src/contents-layouts/Project/index.tsx
@@ -48,7 +48,7 @@ function ProjectLayout({
         )}
       >
         <WithTableOfContentsMock>
-          <div className={clsx('mx-auto px-4', 'sm:max-w-[600px] lg:px-24')}>
+          <div className={clsx('mx-auto max-w-[360px]', 'sm:max-w-[420px]')}>
             <Reactions />
           </div>
         </WithTableOfContentsMock>