From fb22032d4d56ac575f18b723e439d795df82c19e Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Tue, 26 Mar 2024 13:41:06 -0700
Subject: [PATCH] [C-4075] Harmony qa round 2 (#7951)

---
 .../button/FollowButton/FollowButton.tsx      |  1 -
 .../button/IconButton/IconButton.tsx          | 22 +++++++++++++++++--
 .../image-selection/ImageSelectionButton.jsx  |  2 ++
 .../nav/desktop/NavMenuButton.module.css      |  4 ++--
 .../profile-picture/ProfilePicture.jsx        |  4 ++--
 .../profile-picture/ProfilePicture.module.css | 17 +-------------
 .../components/desktop/ProfileBio.tsx         | 22 ++++++++++---------
 7 files changed, 39 insertions(+), 33 deletions(-)

diff --git a/packages/harmony/src/components/button/FollowButton/FollowButton.tsx b/packages/harmony/src/components/button/FollowButton/FollowButton.tsx
index 07b6c5483aa..8f347e625f5 100644
--- a/packages/harmony/src/components/button/FollowButton/FollowButton.tsx
+++ b/packages/harmony/src/components/button/FollowButton/FollowButton.tsx
@@ -134,7 +134,6 @@ export const FollowButton = forwardRef(
         color ${motion.hover}
       `,
       '::before': {
-        zIndex: -1,
         content: '""',
         position: 'absolute',
         top: 0,
diff --git a/packages/harmony/src/components/button/IconButton/IconButton.tsx b/packages/harmony/src/components/button/IconButton/IconButton.tsx
index 714ff16d549..cf28073750c 100644
--- a/packages/harmony/src/components/button/IconButton/IconButton.tsx
+++ b/packages/harmony/src/components/button/IconButton/IconButton.tsx
@@ -37,14 +37,32 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
       ...other
     } = props
     const { disabled } = other
-    const { color, cornerRadius, spacing } = useTheme()
+    const { color, cornerRadius, spacing, motion } = useTheme()
 
     const buttonCss: CSSObject = {
       background: 'transparent',
       border: 'none',
       borderRadius: '50%',
       padding: spacing.xs,
-      overflow: 'unset'
+      overflow: 'unset',
+      svg: {
+        transition: `
+        transform ${motion.hover},
+        color ${motion.hover}
+        `
+      },
+      '&:hover': {
+        transform: 'scale(1.0)',
+        svg: {
+          transform: 'scale(1.1)'
+        }
+      },
+      '&:active': {
+        transform: 'scale(1.0)',
+        svg: {
+          transform: 'scale(0.98)'
+        }
+      }
     }
 
     const rippleCss: CSSObject = {
diff --git a/packages/web/src/components/image-selection/ImageSelectionButton.jsx b/packages/web/src/components/image-selection/ImageSelectionButton.jsx
index b0c14891af1..052b201ffb4 100644
--- a/packages/web/src/components/image-selection/ImageSelectionButton.jsx
+++ b/packages/web/src/components/image-selection/ImageSelectionButton.jsx
@@ -79,6 +79,7 @@ const ImageSelectionButton = ({
         <>
           <Button
             variant='tertiary'
+            size='small'
             ref={anchorRefProp ? undefined : anchorRefInner}
             className={cn(buttonClassName, {
               [styles.hide]: showModal
@@ -111,6 +112,7 @@ const ImageSelectionButton = ({
           >
             <Button
               variant='tertiary'
+              size='small'
               className={cn(styles.noPopup, {
                 [styles.hide]: hasImage
               })}
diff --git a/packages/web/src/components/nav/desktop/NavMenuButton.module.css b/packages/web/src/components/nav/desktop/NavMenuButton.module.css
index aee16b17463..59ed017b229 100644
--- a/packages/web/src/components/nav/desktop/NavMenuButton.module.css
+++ b/packages/web/src/components/nav/desktop/NavMenuButton.module.css
@@ -30,8 +30,8 @@
 
 .notificationDot {
   position: absolute;
-  top: 0;
-  right: 0;
+  top: 2px;
+  right: 2px;
   transform: translate(50%, -50%);
 }
 
diff --git a/packages/web/src/components/profile-picture/ProfilePicture.jsx b/packages/web/src/components/profile-picture/ProfilePicture.jsx
index 3fd4560f1bc..4a0cea6a0e1 100644
--- a/packages/web/src/components/profile-picture/ProfilePicture.jsx
+++ b/packages/web/src/components/profile-picture/ProfilePicture.jsx
@@ -106,7 +106,7 @@ const ProfilePicture = ({
             </div>
           )}
         </ImageElement>
-        {(editMode || showEdit) && (
+        {editMode || showEdit ? (
           <ImageSelectionButton
             wrapperClassName={styles.imageSelectionButtonWrapper}
             buttonClassName={styles.imageSelectionButton}
@@ -118,7 +118,7 @@ const ProfilePicture = ({
             hasImage={hasProfilePicture}
             source='ProfilePicture'
           />
-        )}
+        ) : null}
       </div>
     </div>
   )
diff --git a/packages/web/src/components/profile-picture/ProfilePicture.module.css b/packages/web/src/components/profile-picture/ProfilePicture.module.css
index a2fb7f5e2d4..200698f8401 100644
--- a/packages/web/src/components/profile-picture/ProfilePicture.module.css
+++ b/packages/web/src/components/profile-picture/ProfilePicture.module.css
@@ -54,27 +54,12 @@
 
 .imageSelectionButtonWrapper {
   position: absolute;
-  bottom: 48px;
+  bottom: var(--harmony-spacing-2xl);
   right: 0;
   left: 0;
   z-index: 4;
 }
 
-.isMobile .imageSelectionButtonWrapper {
-  bottom: 32px;
-}
-
-.imageSelectionButton {
-  opacity: 0;
-  pointer-events: none;
-}
-
-.editMode .overlay,
-.editMode .imageSelectionButton {
-  opacity: 1;
-  pointer-events: all;
-}
-
 .modalOpen .overlay,
 .modalOpen .imageSelectionButton {
   opacity: 0;
diff --git a/packages/web/src/pages/profile-page/components/desktop/ProfileBio.tsx b/packages/web/src/pages/profile-page/components/desktop/ProfileBio.tsx
index 9d6cb738d81..949c9af907c 100644
--- a/packages/web/src/pages/profile-page/components/desktop/ProfileBio.tsx
+++ b/packages/web/src/pages/profile-page/components/desktop/ProfileBio.tsx
@@ -234,16 +234,18 @@ export const ProfileBio = ({
           render={isCollapsed ? renderCollapsedContent : renderExpandedContent}
           duration={300}
         />
-        <PlainButton
-          iconRight={isCollapsed ? IconCaretDown : IconCaretUp}
-          onClick={handleToggleCollapse}
-          css={(theme) => ({
-            marginTop: theme.spacing.l,
-            paddingLeft: 0
-          })}
-        >
-          {isCollapsed ? messages.seeMore : messages.seeLess}
-        </PlainButton>
+        {isCollapsible ? (
+          <PlainButton
+            iconRight={isCollapsed ? IconCaretDown : IconCaretUp}
+            onClick={handleToggleCollapse}
+            css={(theme) => ({
+              marginTop: theme.spacing.l,
+              paddingLeft: 0
+            })}
+          >
+            {isCollapsed ? messages.seeMore : messages.seeLess}
+          </PlainButton>
+        ) : null}
       </div>
     </div>
   )