yolo

components/Album/component.tsx

@@ -87,7 +87,7 @@ export default function Album(props: AlbumProps): React.JSX.Element {
 
                 <XStack marginTop={"$3"} justifyContent="flex-end">
                     <Text 
-                        color={"$purpleGray"} 
+                        color={"$amethyst"} 
                         style={{ display: "block"}}
                         marginRight={"$1"}
                         >

components/Global/helpers/icon-button.tsx

@@ -27,7 +27,7 @@ export default function IconButton({
                 height={size}
                 alignContent="center"
                 justifyContent="center"
-                backgroundColor={"$borderColor"}
+                backgroundColor={"$backgroundColor"}
                 >
                     <Icon 
                         large

components/Global/helpers/icon.tsx

@@ -28,7 +28,7 @@ export default function Icon({
     return (
         <MaterialCommunityIcons 
             color={color ? color 
-                : isDarkMode ? getTokens().color.$grape.val 
+                : isDarkMode ? getTokens().color.$white.val 
                 : getTokens().color.$purpleDark.val
             }
             name={name} 

components/Global/helpers/slider.tsx

@@ -10,11 +10,11 @@ interface SliderProps {
 
 const JellifySliderThumb = styled(Slider.Thumb, {
     backgroundColor: getTokens().color.$purpleDark,
-    borderColor: getTokens().color.$grape,
+    borderColor: getTokens().color.$amethyst,
 })
 
 const JellifySliderTrack = styled(Slider.Track, {
-    backgroundColor: getTokens().color.$grape
+    backgroundColor: getTokens().color.$amethyst
 });
 
 const JellifyActiveSliderTrack = styled(Slider.TrackActive, {

components/Global/helpers/time-codes.tsx

@@ -12,7 +12,7 @@ export function RunTimeTicks({ children } : { children?: number | null | undefin
 
     let time = calculateRunTimeFromTicks(children);
 
-    return <Text color="$purpleGray">{ time }</Text>
+    return <Text color="$amethyst">{ time }</Text>
 }
 
 function calculateRunTimeFromSeconds(seconds: number) : string {

components/ItemDetail/component.tsx

@@ -106,7 +106,7 @@ export default function ItemDetail({
                     <Text 
                         textAlign="center"
                         fontSize={"$6"} 
-                        color={"$purpleGray"}
+                        color={"$amethyst"}
                     >
                         { item.Album ?? "" }
                     </Text>

components/Player/screens/index.tsx

@@ -110,7 +110,7 @@ export default function PlayerScreen({ navigation }: { navigation: NativeStackNa
                             <TextTicker {...TextTickerConfig}>
                                 <Text 
                                     fontSize={"$6"} 
-                                    color={"$purpleGray"}
+                                    color={"$amethyst"}
                                     >
                                     { nowPlaying!.album ?? "" }
                                 </Text>

components/Playlist/component.tsx

@@ -74,7 +74,7 @@ export default function Playlist(props: PlaylistProps): React.JSX.Element {
 
                 <XStack justifyContent="flex-end">
                     <Text 
-                        color={"$purpleGray"} 
+                        color={"$amethyst"} 
                         style={{ display: "block"}}
                     >
                         Total Runtime:

components/tabs.tsx

@@ -32,9 +32,9 @@ export function Tabs() : React.JSX.Element {
                             <>
                                 <Separator />
                                 <Miniplayer navigation={props.navigation} />
+                                <Separator />
                             </>
                         )}
-                        <Separator />
                         <BottomTabBar {...props} />
                     </>
                 )}

components/theme.ts

@@ -5,7 +5,7 @@ export const JellifyDarkTheme = {
     colors: {
       ...DarkTheme.colors,
       card: getTokens().color.$purpleDark.val,
-      border: getTokens().color.$purpleGray.val,
+      border: getTokens().color.$amethyst.val,
       background: getTokens().color.$purpleDark.val,
       primary: getTokens().color.$telemagenta.val,
     },  

tamagui.config.ts

@@ -8,6 +8,7 @@ const tokens = createTokens({
     purpleDark: "#0C0622",
     purple: "#100538",
     purpleGray: "#66617B",
+    amethyst: "#7E72AF",
     grape: "#5638BB",
     telemagenta: "#cc2f71",
     white: "#ffffff",
@@ -27,13 +28,13 @@ const jellifyConfig = createTamagui({
     themes: {
       dark: {
         background: tokens.color.purpleDark,
-        borderColor: tokens.color.purpleGray,
+        borderColor: tokens.color.amethyst,
         color: tokens.color.white
       },
       dark_purple: {
         color: tokens.color.purpleDark,
         borderColor: tokens.color.grape,
-        background: tokens.color.purpleGray
+        background: tokens.color.amethyst
       },
       light: {
         background: tokens.color.white,