[C-4903] Update icon sizes for collection card actions and notificati…

…ons (#9338)
AudiusProject · Jul 31, 2024 · 6867056 · 6867056
1 parent 6c7a231
commit 6867056
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 43 deletions.
diff --git a/packages/web/src/components/collection/desktop/CollectionActionButtons.tsx b/packages/web/src/components/collection/desktop/CollectionActionButtons.tsx
@@ -128,7 +128,7 @@ export const CollectionActionButtons = (props: CollectionActionButtonProps) => {
       })}
       role='group'
       aria-label={messages.actionGroupLabel}
-      gap='2xl'
+      gap='xl'
       alignItems='center'
     >
       {shouldShowPlay ? playButton : null}

diff --git a/packages/web/src/components/collection/desktop/EditButton.tsx b/packages/web/src/components/collection/desktop/EditButton.tsx
@@ -29,6 +29,7 @@ export const EditButton = (props: EditButtonProps) => {
       <IconButton
         color='subdued'
         icon={IconPencil}
+        size='2xl'
         aria-label={messages.edit(is_album)}
         asChild
         {...other}

diff --git a/packages/web/src/components/collection/desktop/FavoriteButton.tsx b/packages/web/src/components/collection/desktop/FavoriteButton.tsx
@@ -88,6 +88,7 @@ export const FavoriteButton = (props: FavoriteButtonProps) => {
       <IconButton
         color={color ?? (isSaved ? 'active' : 'subdued')}
         icon={IconHeart}
+        size='2xl'
         onClick={handleFavorite}
         {...other}
         aria-label={isSaved ? messages.favorited : messages.favorite}

diff --git a/packages/web/src/components/collection/desktop/OverflowMenuButton.tsx b/packages/web/src/components/collection/desktop/OverflowMenuButton.tsx
@@ -86,6 +86,7 @@ export const OverflowMenuButton = (props: OverflowMenuButtonProps) => {
         <IconButton
           ref={ref}
           aria-label={messages.moreOptions}
+          size='2xl'
           icon={IconKebabHorizontal}
           onClick={() => triggerPopup()}
           color='subdued'

diff --git a/packages/web/src/components/collection/desktop/PublishButton.tsx b/packages/web/src/components/collection/desktop/PublishButton.tsx
@@ -65,6 +65,7 @@ export const PublishButton = (props: PublishButtonProps) => {
         icon={IconRocket}
         onClick={toggleIsConfirming}
         aria-label='Publish Collection'
+        size='2xl'
         color='subdued'
         disabled={isDisabled}
         isLoading={_is_publishing}

diff --git a/packages/web/src/components/collection/desktop/RepostButton.tsx b/packages/web/src/components/collection/desktop/RepostButton.tsx
@@ -48,6 +48,7 @@ export const RepostButton = (props: RepostButtonProps) => {
       <IconButton
         color={color ?? (has_current_user_reposted ? 'active' : 'subdued')}
         icon={IconRepost}
+        size='2xl'
         aria-label={
           has_current_user_reposted ? messages.unrepost : messages.repost
         }

diff --git a/packages/web/src/components/collection/desktop/ShareButton.tsx b/packages/web/src/components/collection/desktop/ShareButton.tsx
@@ -52,7 +52,7 @@ export const ShareButton = (props: ShareButtonProps) => {
     <IconButton
       icon={IconShare}
       onClick={handleShare}
-      size='l'
+      size='2xl'
       color='subdued'
       aria-label={messages.share}
       {...other}

diff --git a/packages/web/src/components/notification/Notification/components/icons.module.css b/packages/web/src/components/notification/Notification/components/icons.module.css
@@ -1,30 +1,18 @@
 .icon {
   height: 30px;
-  width: 30px;
+  aspect-ratio: 1;
   margin-right: var(--harmony-unit-2);
 }
-.iconFollow {
-  composes: icon;
-}
-
-.iconRepost {
-  composes: icon;
-  height: 18px;
-}
-
-.iconFavorite {
-  composes: icon;
-}
-
-.iconMilestone {
-  composes: icon;
-  height: 24px;
-}
 
-.iconRelease {
-  composes: icon;
-  height: 28px;
-}
+/* .iconFollow, */
+/* .iconRepost, */
+/* .iconFavorite, */
+/* .iconMilestone, */
+/* .iconRelease, */
+/* .iconTrending, */
+/* .iconRemix, */
+/* .iconTip, */
+/* .iconAddTrackToPlaylist {} */
 
 .iconRewards {
   margin-right: var(--harmony-unit-2);
@@ -34,10 +22,6 @@
   margin-bottom: 0 !important;
 }
 
-.iconTrending {
-  composes: icon;
-}
-
 .iconTier {
   margin-right: var(--harmony-unit-2);
 }
@@ -46,18 +30,3 @@
   height: 32px;
   width: 32px;
 }
-
-.iconRemix {
-  composes: icon;
-  height: 24px;
-}
-
-.iconTip {
-  composes: icon;
-  height: 24px;
-}
-
-.iconAddTrackToPlaylist {
-  composes: icon;
-  height: 24px;
-}