Use purple theming on labelers

src/alf/tokens.ts

@@ -12,6 +12,9 @@ export const dimScale = generateScale(12, 100)
 export const color = {
   trueBlack: '#000000',
 
+  temp_purple: 'rgb(105 0 255)',
+  temp_purple_dark: 'rgb(83 0 202)',
+
   gray_0: `hsl(${BLUE_HUE}, 20%, ${scale[14]}%)`,
   gray_25: `hsl(${BLUE_HUE}, 20%, ${scale[13]}%)`,
   gray_50: `hsl(${BLUE_HUE}, 20%, ${scale[12]}%)`,

src/screens/Profile/Header/ProfileHeaderLabeler.tsx

@@ -24,7 +24,7 @@ import {Haptics} from '#/lib/haptics'
 import {pluralize} from '#/lib/strings/helpers'
 import {isAppLabeler} from '#/lib/moderation'
 
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, useTheme, tokens} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {Text} from '#/components/Typography'
 import * as Toast from '#/view/com/util/Toast'
@@ -177,25 +177,51 @@ let ProfileHeaderLabeler = ({
             <>
               <Button
                 testID="toggleSubscribeBtn"
-                size="small"
-                color={isSubscribed || !canSubscribe ? 'secondary' : 'primary'}
-                variant="solid"
                 label={
                   isSubscribed
                     ? _(msg`Unsubscribe from this labeler`)
                     : _(msg`Subscribe to this labeler`)
                 }
                 disabled={!hasSession}
-                onPress={onPressSubscribe}
-                style={a.rounded_full}>
-                <ButtonText
-                  style={!canSubscribe && [t.atoms.text_contrast_low]}>
-                  {isSubscribed ? (
-                    <Trans>Unsubscribe</Trans>
-                  ) : (
-                    <Trans>Subscribe to labeler</Trans>
-                  )}
-                </ButtonText>
+                onPress={onPressSubscribe}>
+                {state => (
+                  <View
+                    style={[
+                      {
+                        paddingVertical: 12,
+                        backgroundColor:
+                          isSubscribed || !canSubscribe
+                            ? state.hovered || state.pressed
+                              ? t.palette.contrast_50
+                              : t.palette.contrast_25
+                            : state.hovered || state.pressed
+                            ? tokens.color.temp_purple_dark
+                            : tokens.color.temp_purple,
+                      },
+                      a.px_lg,
+                      a.rounded_sm,
+                      a.gap_sm,
+                    ]}>
+                    <Text
+                      style={[
+                        {
+                          color: canSubscribe
+                            ? isSubscribed
+                              ? t.palette.contrast_700
+                              : t.palette.white
+                            : t.palette.contrast_400,
+                        },
+                        a.font_bold,
+                        a.text_center,
+                      ]}>
+                      {isSubscribed ? (
+                        <Trans>Unsubscribe</Trans>
+                      ) : (
+                        <Trans>Subscribe to labeler</Trans>
+                      )}
+                    </Text>
+                  </View>
+                )}
               </Button>
             </>
           ) : null}

src/screens/Profile/Header/Shell.tsx

@@ -72,6 +72,7 @@ let ProfileHeaderShell = ({
           />
         ) : (
           <UserBanner
+            type={profile.associated?.labeler ? 'labeler' : 'default'}
             banner={profile.banner}
             moderation={moderation.ui('banner')}
           />

src/view/com/util/UserAvatar.tsx

@@ -24,7 +24,7 @@ import {
 } from '#/components/icons/Camera'
 import {StreamingLive_Stroke2_Corner0_Rounded as Library} from '#/components/icons/StreamingLive'
 import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash'
-import {useTheme} from '#/alf'
+import {useTheme, tokens} from '#/alf'
 
 export type UserAvatarType = 'user' | 'algo' | 'list' | 'labeler'
 
@@ -112,7 +112,7 @@ let DefaultAvatar = ({
         stroke="none">
         <Path
           d="M28 0H4C1.79086 0 0 1.79086 0 4V28C0 30.2091 1.79086 32 4 32H28C30.2091 32 32 30.2091 32 28V4C32 1.79086 30.2091 0 28 0Z"
-          fill="#0070FF"
+          fill={tokens.color.temp_purple}
         />
         <Path
           d="M24 9.75L16 7L8 9.75V15.9123C8 20.8848 12 23 16 25.1579C20 23 24 20.8848 24 15.9123V9.75Z"

src/view/com/util/UserBanner.tsx

@@ -7,7 +7,7 @@ import {msg, Trans} from '@lingui/macro'
 
 import {colors} from 'lib/styles'
 import {useTheme} from 'lib/ThemeContext'
-import {useTheme as useAlfTheme} from '#/alf'
+import {useTheme as useAlfTheme, tokens} from '#/alf'
 import {openCamera, openCropper, openPicker} from '../../../lib/media/picker'
 import {
   usePhotoLibraryPermission,
@@ -26,10 +26,12 @@ import {StreamingLive_Stroke2_Corner0_Rounded as Library} from '#/components/ico
 import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash'
 
 export function UserBanner({
+  type,
   banner,
   moderation,
   onSelectNewBanner,
 }: {
+  type?: 'labeler' | 'default'
   banner?: string | null
   moderation?: ModerationUI
   onSelectNewBanner?: (img: RNImage | null) => void
@@ -167,7 +169,10 @@ export function UserBanner({
   ) : (
     <View
       testID="userBannerFallback"
-      style={[styles.bannerImage, styles.defaultBanner]}
+      style={[
+        styles.bannerImage,
+        type === 'labeler' ? styles.labelerBanner : styles.defaultBanner,
+      ]}
     />
   )
 }
@@ -191,4 +196,7 @@ const styles = StyleSheet.create({
   defaultBanner: {
     backgroundColor: '#0070ff',
   },
+  labelerBanner: {
+    backgroundColor: tokens.color.temp_purple,
+  },
 })