[PAY-1621] Reverse order of mobile lineup tile stat icon and number (#…

…3759)
AudiusProject · Jul 17, 2023 · 9238864 · 9238864
1 parent a6927ac
commit 9238864
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 10 deletions.
diff --git a/apps/audius-client/packages/mobile/src/components/lineup-tile/LineupTileStats.tsx b/apps/audius-client/packages/mobile/src/components/lineup-tile/LineupTileStats.tsx
@@ -165,15 +165,15 @@ export const LineupTileStats = ({
               disabled={!repostCount || isReadonly}
               onPress={handlePressReposts}
             >
-              <Text style={trackTileStyles.statText}>
-                {formatCount(repostCount)}
-              </Text>
               <IconRepost
                 height={spacing(4)}
                 width={spacing(4)}
                 fill={neutralLight4}
                 style={styles.repostStat}
               />
+              <Text style={trackTileStyles.statText}>
+                {formatCount(repostCount)}
+              </Text>
             </TouchableOpacity>
             <TouchableOpacity
               style={[
@@ -184,15 +184,15 @@ export const LineupTileStats = ({
               disabled={!saveCount || isReadonly}
               onPress={handlePressFavorites}
             >
-              <Text style={trackTileStyles.statText}>
-                {formatCount(saveCount)}
-              </Text>
               <IconHeart
                 style={styles.favoriteStat}
                 height={spacing(3.5)}
                 width={spacing(3.5)}
                 fill={neutralLight4}
               />
+              <Text style={trackTileStyles.statText}>
+                {formatCount(saveCount)}
+              </Text>
             </TouchableOpacity>
             <View style={[trackTileStyles.statItem]}>
               {downloadStatusIndicator}

diff --git a/apps/audius-client/packages/web/src/components/track/mobile/TrackTile.module.css b/apps/audius-client/packages/web/src/components/track/mobile/TrackTile.module.css
@@ -87,6 +87,7 @@
   align-items: center;
   transform: scale(1);
   transition: transform 0.07s ease-in-out;
+  gap: var(--unit-1);
 }
 
 .statItem:active {
@@ -276,7 +277,6 @@
 .favoriteButton {
   height: calc(var(--unit) * 3.5);
   width: calc(var(--unit) * 3.5);
-  margin-left: var(--unit-1);
 }
 
 .readonly .repostButtonWrapper:hover {
@@ -286,7 +286,6 @@
 .repostButton {
   height: var(--unit-4);
   width: var(--unit-4);
-  margin-left: var(--unit-1);
 }
 
 .hide {

diff --git a/apps/audius-client/packages/web/src/components/track/mobile/TrackTile.tsx b/apps/audius-client/packages/web/src/components/track/mobile/TrackTile.tsx
@@ -388,14 +388,14 @@ const TrackTile = (props: CombinedProps) => {
                       : undefined
                   }
                 >
-                  {formatCount(props.repostCount)}
                   <RepostButton
                     iconMode
                     isMatrixMode={isMatrix}
                     isDarkMode={darkMode}
                     className={styles.repostButton}
                     wrapperClassName={styles.repostButtonWrapper}
                   />
+                  {formatCount(props.repostCount)}
                 </div>
                 <div
                   className={cn(styles.statItem, fadeIn, {
@@ -408,14 +408,14 @@ const TrackTile = (props: CombinedProps) => {
                       : undefined
                   }
                 >
-                  {formatCount(props.saveCount)}
                   <FavoriteButton
                     iconMode
                     isDarkMode={darkMode}
                     isMatrixMode={isMatrix}
                     className={styles.favoriteButton}
                     wrapperClassName={styles.favoriteButtonWrapper}
                   />
+                  {formatCount(props.saveCount)}
                 </div>
               </>
             )}