From e325e663495241e84056df7d260169da4940ea1a Mon Sep 17 00:00:00 2001
From: Violet Caulfield <violet@cosmonautical.cloud>
Date: Sun, 18 May 2025 17:06:32 -0500
Subject: [PATCH] adjust artists page styling

---
 src/components/Artists/component.tsx | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/components/Artists/component.tsx b/src/components/Artists/component.tsx
index ef475b28..831cc8c7 100644
--- a/src/components/Artists/component.tsx
+++ b/src/components/Artists/component.tsx
@@ -80,7 +80,7 @@ export default function Artists({
 					marginRight: getToken('$4'),
 				}}
 				contentContainerStyle={{
-					paddingTop: getToken('$1'),
+					paddingTop: getToken('$3'),
 				}}
 				contentInsetAdjustmentBehavior='automatic'
 				extraData={isFavorites}
@@ -143,27 +143,23 @@ export default function Artists({
 			{showAlphabeticalSelector && (
 				<YStack
 					maxWidth={'$4'}
-					margin={'$2'}
+					marginVertical={'auto'}
 					minWidth={'$2'}
 					width={width / 8}
-					height={height - getTokens().size.$15.val}
+					height={height - getTokens().size.$20.val}
 					alignItems='center'
 					justifyContent='center'
-					borderWidth={'$1'}
-					borderColor={'$borderColor'}
-					borderRadius={'$5'}
-					gap={0}
 					flex={1}
+					alignContent='center'
 				>
 					{memoizedAlphabet.map((letter) => (
 						<Text
-							display='flex'
-							paddingHorizontal={'$3'}
-							flex={1}
-							alignItems='center'
-							justifyContent='center'
+							paddingHorizontal={'$4'}
+							marginHorizontal={'auto'}
+							textAlign='center'
 							key={letter}
 							bold
+							color={'$borderColor'}
 							fontSize={'$6'}
 							onPressOut={() => {
 								trigger('impactLight')