[C-4075] Harmony qa round 2 (#7951)

AudiusProject · Mar 26, 2024 · fb22032 · fb22032
1 parent 93b06c7
commit fb22032
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 33 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
   )