AudiusProject · nicoback2 · Feb 8, 2024 · Feb 8, 2024
diff --git a/packages/web/src/components/actions-tab/ActionsTab.module.css b/packages/web/src/components/actions-tab/ActionsTab.module.css
@@ -70,7 +70,7 @@
   border-color: var(--neutral-light-7);
   background: var(--neutral-light-8);
 }
-.show.actionsSection .actionButton:active g path {
+.show.actionsSection .actionButton:active path {
   fill: var(--neutral);
 }
 

diff --git a/packages/web/src/components/banner/Banner.module.css b/packages/web/src/components/banner/Banner.module.css
@@ -32,8 +32,8 @@
 .iconRemove:active {
   transform: scale(0.95);
 }
-.iconSave g path,
-.iconRemove g path {
+.iconSave path,
+.iconRemove path {
   fill: var(--static-white);
 }
 

diff --git a/packages/web/src/components/banner/CallToActionBanner.module.css b/packages/web/src/components/banner/CallToActionBanner.module.css
@@ -75,6 +75,6 @@
   width: var(--unit-4);
 }
 
-.arrow g path {
+.arrow path {
   fill: var(--static-white);
 }
diff --git a/packages/web/src/components/card/desktop/Card.module.css b/packages/web/src/components/card/desktop/Card.module.css
@@ -145,7 +145,7 @@
   cursor: pointer;
 }
 
-.iconContainer:hover g path {
+.iconContainer:hover path {
   fill: #858199;
 }
 
@@ -161,7 +161,7 @@
   height: 5px;
 }
 
-.iconKebabHorizontal g path {
+.iconKebabHorizontal path {
   fill: var(--neutral-light-4);
 }
 

diff --git a/packages/web/src/components/create-playlist/CreatePlaylistButton.module.css b/packages/web/src/components/create-playlist/CreatePlaylistButton.module.css
@@ -19,7 +19,7 @@
   margin-right: 4px;
 }
 
-.createPlaylistButton g path {
+.createPlaylistButton path {
   transition: all ease-in-out 0.04s;
   fill: var(--neutral-light-2);
 }
@@ -28,7 +28,7 @@
   color: var(--neutral);
   transform: scale(1.02);
 }
-.createPlaylistButton:hover g path {
+.createPlaylistButton:hover path {
   fill: var(--neutral);
 }
 

diff --git a/packages/web/src/components/delineator/Delineator.module.css b/packages/web/src/components/delineator/Delineator.module.css
@@ -47,7 +47,7 @@
   height: 10px;
 }
 
-.caret g path {
+.caret path {
   fill: var(--white);
 }
 

diff --git a/packages/web/src/components/drawer/Drawer.tsx b/packages/web/src/components/drawer/Drawer.tsx
@@ -8,7 +8,7 @@ import {
 } from 'react'
 
 import { useInstanceVar } from '@audius/common/hooks'
-import { IconRemove } from '@audius/harmony'
+import { IconClose } from '@audius/harmony'
 import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock'
 import cn from 'classnames'
 // eslint-disable-next-line no-restricted-imports -- TODO: migrate to @react-spring/web
@@ -397,7 +397,7 @@ const FullscreenDrawer = ({
               }}
             >
               <div className={styles.dismissContainer} onClick={onClose}>
-                <IconRemove />
+                <IconClose size='s' />
               </div>
               {children}
             </animated.div>

diff --git a/packages/web/src/components/more/More.module.css b/packages/web/src/components/more/More.module.css
@@ -31,15 +31,15 @@
   margin-left: 6px;
   width: 9px;
 }
-.more.light .iconArrow g path {
+.more.light .iconArrow path {
   fill: var(--neutral-light-4);
 }
-.more.dark .iconArrow g path {
+.more.dark .iconArrow path {
   fill: var(--neutral);
 }
-.more.light:hover .iconArrow g path {
+.more.light:hover .iconArrow path {
   fill: var(--neutral-light-2);
 }
-.more.dark:hover .iconArrow g path {
+.more.dark:hover .iconArrow path {
   fill: var(--neutral-light-1);
 }
diff --git a/packages/web/src/components/nav/desktop/RouteNav.module.css b/packages/web/src/components/nav/desktop/RouteNav.module.css
@@ -18,17 +18,17 @@
   transition: all 0.07s ease-in-out;
 }
 
-.backButton g path,
-.forwardButton g path {
+.backButton path,
+.forwardButton path {
   fill: var(--neutral-light-4);
 }
 
 .forwardButton:hover {
   transform: scale(1.1);
 }
 
-.backButton:hover g path,
-.forwardButton:hover g path {
+.backButton:hover path,
+.forwardButton:hover path {
   fill: var(--neutral-light-2);
 }
 

diff --git a/packages/web/src/components/navigation/Dropdown.module.css b/packages/web/src/components/navigation/Dropdown.module.css
@@ -53,6 +53,7 @@
 .dropdown.disabled:hover {
   border-color: var(--neutral-light-8);
 }
+.dropdown.disabled path,
 .dropdown.disabled g path {
   fill: var(--neutral-light-4);
 }

diff --git a/packages/web/src/components/notification/Notification/components/icons.module.css b/packages/web/src/components/notification/Notification/components/icons.module.css
@@ -7,45 +7,25 @@
   composes: icon;
 }
 
-.iconFollow g {
-  fill: var(--secondary);
-}
-
 .iconRepost {
   composes: icon;
   height: 18px;
 }
 
-.iconRepost g path {
-  fill: var(--secondary);
-}
-
 .iconFavorite {
   composes: icon;
 }
 
-.iconFavorite g path {
-  fill: var(--secondary);
-}
-
 .iconMilestone {
   composes: icon;
   height: 24px;
 }
 
-.iconMilestone g path {
-  fill: var(--secondary);
-}
-
 .iconRelease {
   composes: icon;
   height: 28px;
 }
 
-.iconRelease g path {
-  fill: var(--secondary);
-}
-
 .iconRewards {
   margin-right: var(--unit-2);
 }
@@ -58,23 +38,10 @@
   composes: icon;
 }
 
-.iconTrending g path {
-  fill: var(--secondary);
-}
-
 .iconTier {
   margin-right: var(--unit-2);
 }
 
-.iconCart {
-  composes: icon;
-  height: var(--unit-6);
-}
-
-.iconCart path {
-  fill: var(--secondary);
-}
-
 .iconTier img {
   height: 32px;
   width: 32px;
@@ -85,28 +52,12 @@
   height: 24px;
 }
 
-.iconRemix g path {
-  fill: var(--secondary);
-}
-
 .iconTip {
   composes: icon;
   height: 24px;
 }
 
-.iconTip path {
-  fill: var(--secondary);
-}
-
-.iconAnnouncement g path {
-  fill: var(--secondary);
-}
-
 .iconAddTrackToPlaylist {
   composes: icon;
   height: 24px;
 }
-
-.iconAddTrackToPlaylist g path {
-  fill: var(--secondary);
-}
diff --git a/packages/web/src/components/notification/NotificationModal.module.css b/packages/web/src/components/notification/NotificationModal.module.css
@@ -32,15 +32,15 @@
   left: 0px;
 }
 
-.header .iconRemove g path {
+.header .iconRemove path {
   fill: var(--neutral-light-4);
 }
 
 .header .iconRemove:hover {
   transform: scale(1.1);
 }
 
-.header .iconRemove:hover g path {
+.header .iconRemove:hover path {
   fill: var(--neutral);
 }
 

diff --git a/packages/web/src/components/pill/Pill.module.css b/packages/web/src/components/pill/Pill.module.css
@@ -52,7 +52,3 @@
   width: 12px;
   height: 12px;
 }
-
-.pill .icon g path {
-  fill: var(--neutral-light-3);
-}
diff --git a/packages/web/src/components/search/SearchBar.jsx b/packages/web/src/components/search/SearchBar.jsx
@@ -309,8 +309,9 @@ class SearchBar extends Component {
               <div>
                 <span>View More Results</span>
                 <IconArrow
-                  height={'7px'}
-                  width={'7px'}
+                  color='default'
+                  height={8}
+                  width={8}
                   className={styles.iconArrow}
                 />
               </div>

diff --git a/packages/web/src/components/search/SearchBar.module.css b/packages/web/src/components/search/SearchBar.module.css
@@ -266,7 +266,6 @@
   > div
   > div
   > .iconArrow
-  g
   path {
   fill: var(--white);
 }

diff --git a/packages/web/src/components/share-modal/components/ShareDrawer.module.css b/packages/web/src/components/share-modal/components/ShareDrawer.module.css
@@ -45,7 +45,7 @@
   border-top: none;
 }
 
-.shareToTwitterAction g path {
+.shareToTwitterAction path {
   fill: var(--static-twitter-blue);
 }
 

diff --git a/packages/web/src/components/table/components/OverflowMenuButton.module.css b/packages/web/src/components/table/components/OverflowMenuButton.module.css
@@ -19,7 +19,7 @@
   opacity: 0;
 }
 
-.icon g path {
+.icon path {
   fill: var(--neutral-light-5);
 }
 .tableOptionsButton:hover .icon {

diff --git a/packages/web/src/components/tipping/tip-audio/TipAudio.module.css b/packages/web/src/components/tipping/tip-audio/TipAudio.module.css
@@ -113,7 +113,7 @@
   margin-top: 2px;
 }
 
-.topBannerIcon svg g path {
+.topBannerIcon svg path {
   fill: var(--white);
 }
 

diff --git a/packages/web/src/components/track/TrackInfo.module.css b/packages/web/src/components/track/TrackInfo.module.css
@@ -103,7 +103,7 @@
 .volumeIcon svg {
   height: 8px;
 }
-.volumeIcon g path {
+.volumeIcon path {
   fill: var(--primary);
 }
 

diff --git a/packages/web/src/components/track/mobile/TrackListItem.module.css b/packages/web/src/components/track/mobile/TrackListItem.module.css
@@ -70,7 +70,8 @@
   height: 65%;
 }
 
-.artworkIcon g path {
+.artworkIcon g path,
+.artworkIcon path {
   fill: rgba(255, 255, 255, 0.75);
 }
 

diff --git a/packages/web/src/components/upload/PreviewButton.jsx b/packages/web/src/components/upload/PreviewButton.jsx
@@ -18,7 +18,7 @@ class PreviewButton extends Component {
           </div>
         ) : (
           <div>
-            <IconPlay className={styles.previewButton} />
+            <IconPlay color='default' className={styles.previewButton} />
           </div>
         )}
         <span>Preview</span>

diff --git a/packages/web/src/pages/audio-rewards-page/components/ExplainerTile.module.css b/packages/web/src/pages/audio-rewards-page/components/ExplainerTile.module.css
@@ -130,21 +130,3 @@
   width: 200px;
   height: 200px;
 }
-
-.iconRemove {
-  position: absolute;
-  top: 24px;
-  left: 24px;
-  height: 24px;
-  width: 24px;
-  cursor: pointer;
-}
-.iconRemove:hover {
-  transform: scale(1.1);
-}
-.iconRemove:active {
-  transform: scale(0.95);
-}
-.iconRemove g path {
-  fill: var(--neutral-light-4);
-}
diff --git a/packages/web/src/pages/dashboard-page/components/AchievementTile.module.css b/packages/web/src/pages/dashboard-page/components/AchievementTile.module.css
@@ -43,6 +43,6 @@
   margin-right: 20px;
 }
 
-.achievementTrophy g path {
+.achievementTrophy path {
   fill: var(--secondary);
 }
diff --git a/packages/web/src/pages/history-page/components/desktop/HistoryPage.module.css b/packages/web/src/pages/history-page/components/desktop/HistoryPage.module.css
@@ -45,7 +45,7 @@
   width: 12px;
   height: 12px;
 }
-.historyPageWrapper :global(.ant-input-prefix) > svg g path {
+.historyPageWrapper :global(.ant-input-prefix) > svg path {
   fill: var(--neutral-light-4);
 }
 

diff --git a/packages/web/src/pages/profile-page/components/EditableName.module.css b/packages/web/src/pages/profile-page/components/EditableName.module.css
@@ -45,10 +45,6 @@
   margin-bottom: 8px;
 }
 
-.name > .editNameContainer > .iconPencil g path {
-  fill: var(--static-white);
-}
-
 .editNameContainer {
   line-height: normal;
   width: 100%;

diff --git a/packages/web/src/pages/sign-on/components/desktop/FollowPage.module.css b/packages/web/src/pages/sign-on/components/desktop/FollowPage.module.css
@@ -68,7 +68,7 @@
   width: 20px;
 }
 
-.pickForMe:hover .iconWand g path {
+.pickForMe:hover .iconWand path {
   fill: var(--neutral-light-2);
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -266,7 +266,6 @@ @@
       > div
       > div
       > .iconArrow
-      g
       path {
       fill: var(--white);
     }
@@ Expand Down @@