From e2739ae0df52b86cf94dac1659580fdbd467d109 Mon Sep 17 00:00:00 2001
From: Dylan Audius <dylan@audius.co>
Date: Thu, 16 Jul 2026 13:54:28 -0700
Subject: [PATCH] fix(contest): style contest share as a proper harmony button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The contest page share action rendered as a bare IconButton — an
unstyled arrow icon sitting next to the properly styled Follow and
Enter Contest buttons. Replace it with an icon-only secondary Button
(size small) so it matches the height, border, and hover treatment of
the neighboring actions, per the Figma spec and the same pattern used
by the profile StatBanner action row. Update the loading skeleton to
match the new rectangular shape.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../contest-page/components/desktop/ContestPage.tsx    | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/web/src/pages/contest-page/components/desktop/ContestPage.tsx b/packages/web/src/pages/contest-page/components/desktop/ContestPage.tsx
index 32a646c402c..c38bd4b4d90 100644
--- a/packages/web/src/pages/contest-page/components/desktop/ContestPage.tsx
+++ b/packages/web/src/pages/contest-page/components/desktop/ContestPage.tsx
@@ -29,7 +29,6 @@ import {
   Divider,
   FilterButton,
   Flex,
-  IconButton,
   IconShare,
   IconUserFollow,
   IconUserFollowing,
@@ -442,9 +441,10 @@ const ContestPage = ({ containerRef: _containerRef }: ContestPageProps) => {
     }
     return (
       <Flex gap='s' alignItems='center' wrap='wrap'>
-        <IconButton
-          icon={IconShare}
-          color='default'
+        <Button
+          size='small'
+          variant='secondary'
+          iconLeft={IconShare}
           aria-label={messages.share}
           onClick={handleShareContest}
         />
@@ -530,7 +530,7 @@ const ContestPage = ({ containerRef: _containerRef }: ContestPageProps) => {
                 >
                   <Skeleton h={20} w={140} />
                   <Flex gap='s'>
-                    <Skeleton h={32} w={32} css={{ borderRadius: '50%' }} />
+                    <Skeleton h={32} w={48} />
                     <Skeleton h={32} w={120} />
                     <Skeleton h={32} w={120} />
                   </Flex>